From cfc7d56886e550f751bb13160d32387248874497 Mon Sep 17 00:00:00 2001
From: llddang <bodyness@naver.com>
Date: Fri, 13 Sep 2024 14:49:50 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=BC=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A4=20=EC=8B=A4=EC=A0=81=20=EB=93=B1=EB=A1=9D=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=A3=BC=EC=9A=94=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9D=B8=20=EC=98=81=EC=96=B4=20=EC=8B=9C=ED=97=98=20?=
 =?UTF-8?q?=EA=B0=84=20=EC=84=B1=EC=A0=81=20=ED=99=98=EC=82=B0=ED=91=9C=20?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=83=88?=
 =?UTF-8?q?=ED=83=AD=EC=9C=BC=EB=A1=9C=20=EC=97=B4=EB=A6=AC=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#204
---
 .../my-page/milestone/register/write/page.tsx              | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx b/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx
index d65abdc4..c52afed1 100644
--- a/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx
+++ b/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx
@@ -174,12 +174,13 @@ const Page = () => {
                 </li>
                 <li>
                   영어성적은 부산대학교 학생지원시스템에 접속하여{' '}
-                  <Link
-                    href="https://e-onestop.pusan.ac.kr/menu/common/contents?menuld=2000070107&rMenu=07"
+                  <a
+                    href="https://doc.pusan.ac.kr:8443/SynapDocViewServer/viewer/doc.html?key=fb3fcfcf20eb427c84ccc1a5c45b3481&convType=img&convLocale=ko_KR&contextPath=/SynapDocViewServer"
                     className="font-bold text-blue-400 underline"
+                    target="_blank"
                   >
                     {'<주요 공인 영어 시험 간 성적 환산표>'}
-                  </Link>
+                  </a>
                   에 따라 TOEIC 점수로 환산하여 입력
                 </li>
                 <li>

From 2204bef04c3037cbc983b4c816526d567ff9ce39 Mon Sep 17 00:00:00 2001
From: llddang <bodyness@naver.com>
Date: Fri, 13 Sep 2024 15:54:31 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EB=A7=88=EC=9D=BC=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A4=20=EC=8B=A4=EC=A0=81=20=EB=93=B1=EB=A1=9D=EC=97=90=20?=
 =?UTF-8?q?=EB=8F=84=EC=9B=80=EB=A7=90=20=EB=93=B1=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#204
---
 .../MilestoneHistoryStatusLabel/index.tsx       |  2 +-
 .../my-page/milestone/register/write/page.tsx   |  2 ++
 .../components/Formik/TextInput/index.tsx       | 15 +++++++++++++--
 .../src/components/Formik/DatePicker/index.tsx  | 17 +++++++++++++++--
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/(client)/(withSidebar)/my-page/components/MilestoneHistoryStatusLabel/index.tsx b/frontend/src/app/(client)/(withSidebar)/my-page/components/MilestoneHistoryStatusLabel/index.tsx
index 04a68877..764ec6e3 100644
--- a/frontend/src/app/(client)/(withSidebar)/my-page/components/MilestoneHistoryStatusLabel/index.tsx
+++ b/frontend/src/app/(client)/(withSidebar)/my-page/components/MilestoneHistoryStatusLabel/index.tsx
@@ -17,7 +17,7 @@ const MilestoneHistoryStatusLabel = ({ status, rejectReason }: MilestoneHistoryS
         <div className="relative flex w-fit items-center gap-1 rounded-sm bg-red-100 px-2 py-1 text-xs text-red-500">
           <span>반려</span>
           <VscInfo className="peer h-[14px] w-[14px]" />
-          <div className="absolute left-1/2 top-0 hidden -translate-x-1/2 -translate-y-[calc(100%+4px)] rounded border bg-white p-2 peer-hover:block">
+          <div className="absolute left-1/2 top-0 hidden -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap rounded border bg-white p-2 peer-hover:block">
             {rejectReason}
           </div>
         </div>
diff --git a/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx b/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx
index c52afed1..6584ae34 100644
--- a/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx
+++ b/frontend/src/app/(client)/(withSidebar)/my-page/milestone/register/write/page.tsx
@@ -141,6 +141,7 @@ const Page = () => {
                 name="description"
                 label="등록 상세 제목"
                 placeholder="예) 제 5회 창의융합해커톤 수상"
+                tooltip="해당 마일스톤 실적의 핵심 내용을 간단명료하게 입력해주세요."
                 type="text"
                 value={values.description}
                 onChange={handleChange}
@@ -151,6 +152,7 @@ const Page = () => {
                 type="date"
                 name="activatedAt"
                 label="활동 인정일"
+                tooltip="마일스톤 실적이 공식적으로 인정된 날짜를 선택해주세요.\n ex) 대회 수상일, 자격증 취득일, 프로젝트 완료일."
                 value={values.activatedAt}
                 onChange={handleChange}
                 onBlur={handleBlur}
diff --git a/frontend/src/app/(client)/components/Formik/TextInput/index.tsx b/frontend/src/app/(client)/components/Formik/TextInput/index.tsx
index fe03ce5c..13bc6742 100644
--- a/frontend/src/app/(client)/components/Formik/TextInput/index.tsx
+++ b/frontend/src/app/(client)/components/Formik/TextInput/index.tsx
@@ -1,3 +1,5 @@
+import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
+
 type BuiltInTextInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 interface CustomTextInputProps {
@@ -5,6 +7,7 @@ interface CustomTextInputProps {
   label: string;
   isRequired?: boolean;
   errorText?: string;
+  tooltip?: string;
   onKeyDownEnter?(): void;
   onChangeText?(text: string): void;
 }
@@ -12,12 +15,20 @@ interface CustomTextInputProps {
 export type TextInputProps = BuiltInTextInputProps & CustomTextInputProps;
 
 export const TextInput = ({ isRequired = false, ...props }: TextInputProps) => {
-  const { label, errorText, onKeyDownEnter, onChangeText, ...inputProps } = props;
+  const { label, errorText, tooltip, onKeyDownEnter, onChangeText, ...inputProps } = props;
   const hasError = errorText !== undefined;
 
   return (
     <div className="flex flex-grow flex-col gap-1">
-      <label htmlFor={inputProps.id || inputProps.name} className="text-sm font-semibold">
+      <label htmlFor={inputProps.id || inputProps.name} className="flex items-center text-sm font-semibold">
+        {tooltip && (
+          <div className="relative flex items-center gap-1 px-2 py-1 text-xs">
+            <VscInfo className="peer h-[14px] w-[14px]" />
+            <div className="absolute left-0 top-1 hidden -translate-y-[calc(100%+4px)] whitespace-nowrap break-keep rounded border bg-white p-2 peer-hover:block">
+              {tooltip}
+            </div>
+          </div>
+        )}
         {label} {isRequired && <span className="text-sm font-semibold text-red-400">*</span>}
       </label>
       <input
diff --git a/frontend/src/components/Formik/DatePicker/index.tsx b/frontend/src/components/Formik/DatePicker/index.tsx
index deb5c960..02ac998a 100644
--- a/frontend/src/components/Formik/DatePicker/index.tsx
+++ b/frontend/src/components/Formik/DatePicker/index.tsx
@@ -1,3 +1,5 @@
+import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
+
 type BuiltInInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 interface CustomInputProps {
@@ -5,18 +7,29 @@ interface CustomInputProps {
   label: string;
   isRequired?: boolean;
   errorText?: string;
+  tooltip?: string;
   onChangeText?(text: string): void;
 }
 
 export type DatePickerProps = BuiltInInputProps & CustomInputProps;
 
 export const DatePicker = ({ isRequired = false, ...props }: DatePickerProps) => {
-  const { label, errorText, onChangeText, ...inputProps } = props;
+  const { label, errorText, tooltip, onChangeText, ...inputProps } = props;
   const hasError = errorText !== undefined;
 
   return (
     <div className="flex flex-col gap-1">
-      <label htmlFor={inputProps.id || inputProps.name} className="text-sm font-semibold">
+      <label htmlFor={inputProps.id || inputProps.name} className="flex items-center text-sm font-semibold">
+        {tooltip && (
+          <div className="relative flex items-center gap-1 px-2 py-1 text-xs">
+            <VscInfo className="peer h-[14px] w-[14px]" />
+            <div className="absolute left-1/2 top-1 hidden -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap break-keep rounded border bg-white p-2 peer-hover:block">
+              {tooltip.split('\\n').map((data) => (
+                <div>{data}</div>
+              ))}
+            </div>
+          </div>
+        )}
         {label} {isRequired && <span className="text-sm font-semibold text-red-400">*</span>}
       </label>
       <input

From fc75ceadbb534dc195b5e08f73f03f625a0a403e Mon Sep 17 00:00:00 2001
From: llddang <bodyness@naver.com>
Date: Fri, 13 Sep 2024 16:11:42 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20dropdown=20body=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#204
---
 .../src/components/Formik/Dropdown/index.tsx    | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Formik/Dropdown/index.tsx b/frontend/src/components/Formik/Dropdown/index.tsx
index 54a74db4..15eff666 100644
--- a/frontend/src/components/Formik/Dropdown/index.tsx
+++ b/frontend/src/components/Formik/Dropdown/index.tsx
@@ -36,17 +36,17 @@ const Dropdown = ({ isRequired = false, size = 'md', ...props }: DropdownProps)
   const selectedValue = options.filter((option) => option.id === selectedId);
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className="relative flex flex-col gap-1" ref={componentRef}>
       {label && (
         <label htmlFor={dropdownProps.name} className={`${FORM_SIZE[size].subTextSize} font-semibold`}>
           {label} {isRequired && <span className={`${FORM_SIZE[size].subTextSize} font-semibold text-red-400`}>*</span>}
         </label>
       )}
-      <div className="relative w-full" ref={componentRef}>
+      <div className="relative w-full">
         <button
           className={`m-0 w-full rounded-sm border-[1px] ${isAdmin ? 'border-admin-border' : 'border-border'} bg-white ${FORM_SIZE[size].padding} text-left ${FORM_SIZE[size].textSize} ${hasError && 'border-red-400'} ${typeof selectedId === 'number' && selectedId <= 0 && 'text-comment'}`}
           type="button"
-          onClick={() => setIsOpen(true)}
+          onClick={() => setIsOpen((prev) => !prev)}
         >
           {selectedValue[0]?.name ?? selectOptionText}
         </button>
@@ -56,18 +56,13 @@ const Dropdown = ({ isRequired = false, size = 'md', ...props }: DropdownProps)
         )}
       </div>
       {isOpen && (
-        <div
-          role="presentation"
-          className="absolute left-0 top-0 z-[80] h-[100vh] w-[100vw]"
-          onClick={() => setIsOpen(false)}
-        >
+        <div role="presentation" className="absolute left-0 top-0 z-[50]" onClick={() => setIsOpen(false)}>
           <div
             style={{
               width: `${divSize.width}px`,
-              top: `${divSize.positionY + divSize.height + 10}px`,
-              left: `${divSize.positionX}px`,
+              top: `${divSize.height + 10}px`,
             }}
-            className="absolute max-h-[215px] min-h-4 overflow-auto rounded-sm border-[1px] border-border bg-white p-2 shadow-md"
+            className="absolute max-h-[215px] min-h-4 overflow-auto rounded-sm border border-border bg-white p-2 shadow-md"
           >
             {options.map((option) => (
               <button