Feature/#204 마일스톤 관련 ux 개선

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>

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}
@@ -174,12 +176,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>

frontend/src/app/(client)/components/Formik/TextInput/index.tsx

@@ -1,23 +1,34 @@
+import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
+
 type BuiltInTextInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 interface CustomTextInputProps {
   name: string;
   label: string;
   isRequired?: boolean;
   errorText?: string;
+  tooltip?: string;
   onKeyDownEnter?(): void;
   onChangeText?(text: string): void;
 }
 
 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

frontend/src/components/Formik/DatePicker/index.tsx

@@ -1,22 +1,35 @@
+import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
+
 type BuiltInInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 interface CustomInputProps {
   name: string;
   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

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