From 0bcf9ec795a83e416c61a0629260c18186156c66 Mon Sep 17 00:00:00 2001
From: jisu Seo <jseo9732@gmail.com>
Date: Tue, 9 Jan 2024 23:45:00 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=ED=9A=8C=EC=9B=90=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=84?=
 =?UTF-8?q?=EC=8B=9C=20=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/member.types.ts                    |   9 +-
 .../AuthInputBox/AuthInputItem/AuthInput.tsx  |  16 +-
 .../SignupInfo/AuthDropDown/AuthDropDown.tsx  | 150 ++++++++++++++----
 .../AuthDropDown/AuthDropDownOption.tsx       |  89 ++++++++---
 src/components/common/icons/Icons.tsx         |  37 +++--
 src/pages/signup/signupInfo.page.tsx          |  30 +++-
 6 files changed, 249 insertions(+), 82 deletions(-)

diff --git a/src/@types/member.types.ts b/src/@types/member.types.ts
index f020057b..1d201829 100644
--- a/src/@types/member.types.ts
+++ b/src/@types/member.types.ts
@@ -1,6 +1,11 @@
 interface MemberRequest {
   nickname: string;
-  survey: string;
   profileImageUrl: string;
-  password: string;
+  ageType: string;
+  genderType: string;
+}
+
+interface SelectOption {
+  id: string;
+  value: string;
 }
diff --git a/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx b/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
index 0139e453..98c05c63 100644
--- a/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
+++ b/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
@@ -3,7 +3,9 @@ import { UseFormRegisterReturn, UseFormResetField } from 'react-hook-form';
 
 interface Props {
   label: string;
-  id: 'email' | 'password' | 'passwordCheck';
+  subLabel?: string;
+  required?: boolean;
+  id: 'email' | 'password' | 'passwordCheck' | 'nickname';
   type?: 'text' | 'email' | 'password';
   isAutoFocus?: boolean;
   placeholder: string;
@@ -16,6 +18,8 @@ interface Props {
 
 const AuthInput = ({
   label,
+  subLabel,
+  required,
   id,
   type = 'text',
   isAutoFocus = false,
@@ -28,9 +32,13 @@ const AuthInput = ({
 }: Props) => {
   return (
     <div className="flex flex-col gap-2">
-      <label htmlFor={id} className="body3 text-main1">
-        {label}
-      </label>
+      <div>
+        <label htmlFor={id} className="body3 text-main1">
+          {label}
+        </label>
+        <span className="body5 text-main1">{subLabel}</span>
+        {required && <span className="body5 text-red"> *</span>}
+      </div>
       <div
         className={`flex h-10 items-center border-b-[1.25px] border-solid border-gray3 ${
           isInvalid ? 'border-red' : 'focus-within:border-main2'
diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
index 2543b26f..898abecd 100644
--- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
+++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import AuthDropDownOption from './AuthDropDownOption';
 import * as Select from '@radix-ui/react-select';
+import { DownIcon } from '@components/common/icons/Icons';
 
 interface Props {
   label: string;
@@ -9,46 +10,129 @@ interface Props {
 }
 
 const AuthDropDown = ({ label, text, options }: Props) => {
-  const [isShow, setIsShow] = useState<boolean>(false);
+  // const [isShow, setIsShow] = useState<boolean>(false);
   const [isSelected, setIsSelected] = useState<string>(text);
 
   return (
-    <div className="z-10 flex flex-col">
-      <h2 className="body2 mb-2 text-main1">{label}</h2>
-      <div
-        onClick={() => setIsShow(!isShow)}
-        className={`${
-          isShow ? 'h-48' : 'h-12'
-        } relative w-full overflow-hidden rounded-lg border border-solid border-gray3`}>
-        <AuthDropDownOption
-          clickHandler={() => {
-            setIsShow(!isShow);
-          }}
-          showDownIcon>
-          {isSelected}
-        </AuthDropDownOption>
-        {isShow && (
-          <ul className="absolute top-12 z-20 h-36 w-full overflow-auto rounded-b-lg bg-white">
+    // <div className="z-10 flex flex-col">
+    //   <h2 className="body2 mb-2 text-main1">{label}</h2>
+    //   <div
+    //     onClick={() => setIsShow(!isShow)}
+    //     className={`${
+    //       isShow ? 'h-48' : 'h-12'
+    //     } relative w-full overflow-hidden rounded-lg border border-solid border-gray3`}>
+    //     <AuthDropDownOption
+    //       clickHandler={() => {
+    //         setIsShow(!isShow);
+    //       }}
+    //       showDownIcon>
+    //       {isSelected}
+    //     </AuthDropDownOption>
+    //     {isShow && (
+    //       <ul className="absolute top-12 z-20 h-36 w-full overflow-auto rounded-b-lg bg-white">
+    //         {options.map((option) => (
+    //           <li className="h-12 ">
+    //             <AuthDropDownOption
+    //               clickHandler={() => {
+    //                 setIsSelected(option.value);
+    //                 setIsShow(!isShow);
+    //               }}>
+    //               {option.value}
+    //             </AuthDropDownOption>
+    //           </li>
+    //         ))}
+    //       </ul>
+    //     )}
+    //   </div>
+    // </div>
+
+    <Select.Root onValueChange={() => setIsSelected('dd')}>
+      <Select.Trigger className="data-[placeholder]:body5 relative flex h-12 items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
+        <Select.Value className="body5 text-gray6" placeholder={text} />
+        <Select.Icon className="absolute right-[10px] top-4">
+          <DownIcon size={20} color="#888888" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          position={'popper'}
+          collisionPadding={0}
+          // avoidCollisions={isSelected ? false : true}
+          className="h-36 overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
+          <Select.Viewport>
             {options.map((option) => (
-              <li className="h-12 ">
-                <AuthDropDownOption
-                  clickHandler={() => {
-                    setIsSelected(option.value);
-                    setIsShow(!isShow);
-                  }}>
-                  {option.value}
-                </AuthDropDownOption>
-              </li>
+              <AuthDropDownOption value={option.value}>
+                {option.value}
+              </AuthDropDownOption>
             ))}
-          </ul>
-        )}
-      </div>
-    </div>
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
   );
 };
 
 export default AuthDropDown;
 
-// ${
-//   isShow ? 'h-48' : 'h-12'
-// }
+{
+  /* <Select.Root>
+<Select.Trigger
+  className="inline-flex items-center justify-center rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-violet11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-violet9 outline-none"
+  aria-label="Food"
+>
+  <Select.Value placeholder="Select a fruit…" />
+  <Select.Icon className="text-violet11">
+    <ChevronDownIcon />
+  </Select.Icon>
+</Select.Trigger>
+<Select.Portal>
+  <Select.Content className="overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
+    <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
+      <ChevronUpIcon />
+    </Select.ScrollUpButton>
+    <Select.Viewport className="p-[5px]">
+      <Select.Group>
+        <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
+          Fruits
+        </Select.Label>
+        <AuthDropDownOption value="apple">Apple</AuthDropDownOption>
+        <AuthDropDownOption value="banana">Banana</AuthDropDownOption>
+        <AuthDropDownOption value="blueberry">Blueberry</AuthDropDownOption>
+        <AuthDropDownOption value="grapes">Grapes</AuthDropDownOption>
+        <AuthDropDownOption value="pineapple">Pineapple</AuthDropDownOption>
+      </Select.Group>
+
+      <Select.Separator className="h-[1px] bg-violet6 m-[5px]" />
+
+      <Select.Group>
+        <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
+          Vegetables
+        </Select.Label>
+        <AuthDropDownOption value="aubergine">Aubergine</AuthDropDownOption>
+        <AuthDropDownOption value="broccoli">Broccoli</AuthDropDownOption>
+        <AuthDropDownOption value="carrot" disabled>
+          Carrot
+        </AuthDropDownOption>
+        <AuthDropDownOption value="courgette">Courgette</AuthDropDownOption>
+        <AuthDropDownOption value="leek">Leek</AuthDropDownOption>
+      </Select.Group>
+
+      <Select.Separator className="h-[1px] bg-violet6 m-[5px]" />
+
+      <Select.Group>
+        <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
+          Meat
+        </Select.Label>
+        <AuthDropDownOption value="beef">Beef</AuthDropDownOption>
+        <AuthDropDownOption value="chicken">Chicken</AuthDropDownOption>
+        <AuthDropDownOption value="lamb">Lamb</AuthDropDownOption>
+        <AuthDropDownOption value="pork">Pork</AuthDropDownOption>
+      </Select.Group>
+    </Select.Viewport>
+    <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
+      <ChevronDownIcon />
+    </Select.ScrollDownButton>
+  </Select.Content>
+</Select.Portal>
+</Select.Root> */
+}
diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
index 114f978d..a12e5aaf 100644
--- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
+++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
@@ -1,28 +1,71 @@
-import { DownIcon } from '@components/common/icons/Icons';
+import { CheckIcon, DownIcon } from '@components/common/icons/Icons';
+import * as Select from '@radix-ui/react-select';
+import React, { ReactNode, Ref } from 'react';
 
-interface Props {
-  children: string;
-  clickHandler?: VoidFunction;
-  showDownIcon?: boolean;
+// interface Props {
+// children: string;
+// clickHandler?: VoidFunction;
+// showDownIcon?: boolean;
+// }
+
+// const AuthDropDownOption = ({
+//   children,
+//   clickHandler,
+//   showDownIcon = false,
+// }: Props) => {
+//   return (
+// <button
+//   onClick={clickHandler}
+//   className="relative h-12 w-full border-b border-solid border-gray3 hover:bg-gray1">
+//   {children}
+//   {showDownIcon && (
+//     <div className="absolute right-2 top-4">
+//       <DownIcon size={20} color="#888888" />
+//     </div>
+//   )}
+// </button>
+//   );
+// };
+
+// export default AuthDropDownOption;
+
+// const AuthDropDownOption = ({ children }: Props) => {
+//   return (
+//     <Select.Item>
+//       <Select.ItemText>{children}</Select.ItemText>
+//       <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
+//         {/* <CheckIcon /> */}
+//       </Select.ItemIndicator>
+//     </Select.Item>
+//   );
+// };
+
+// export default AuthDropDownOption;
+
+interface SelectItemProps {
+  value: string;
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
 }
 
-const AuthDropDownOption = ({
-  children,
-  clickHandler,
-  showDownIcon = false,
-}: Props) => {
-  return (
-    <button
-      onClick={clickHandler}
-      className="relative h-12 w-full border-b border-solid border-gray3 hover:bg-gray1">
-      {children}
-      {showDownIcon && (
-        <div className="absolute right-2 top-4">
-          <DownIcon size={20} color="#888888" />
-        </div>
-      )}
-    </button>
-  );
-};
+const AuthDropDownOption = React.forwardRef(
+  (
+    { children, className, ...props }: SelectItemProps,
+    forwardedRef: Ref<HTMLDivElement>,
+  ) => {
+    return (
+      <Select.Item
+        className="body5 relative flex h-12 w-full select-none items-center border-b border-solid border-gray3 pl-[25px] pr-[35px] text-gray6 hover:bg-gray1"
+        {...props}
+        ref={forwardedRef}>
+        <Select.ItemText>{children}</Select.ItemText>
+        <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
+          <CheckIcon />
+        </Select.ItemIndicator>
+      </Select.Item>
+    );
+  },
+);
 
 export default AuthDropDownOption;
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index 06297ad6..eb3136bd 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -713,25 +713,30 @@ export const SearchIcon: React.FC<IconProps> = ({
   );
 };
 
-export const CameraIcon: React.FC<IconProps> = ({
-  size = 25,
-  color = 'black',
-  fill = 'none',
-}) => {
+export const CameraIcon: React.FC<IconProps> = () => {
   return (
     <svg
-      width={size}
-      height={size}
-      viewBox="0 0 13 11"
-      fill={fill}
+      width="14"
+      height="13"
+      viewBox="0 0 14 13"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg">
-      <path
-        id="Vector"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.14101 1.46934C3.49974 0.877766 4.14214 0.460938 4.87796 0.460938H7.5831C8.31891 0.460938 8.96132 0.877766 9.32005 1.46934C9.42939 1.64966 9.55178 1.839 9.67791 2.01208C9.73825 2.0949 9.85609 2.16106 10.0196 2.16106H10.0871C11.3044 2.16106 12.2911 3.14781 12.2911 4.36491V8.7254C12.2911 9.94256 11.3044 10.9293 10.0873 10.9293H2.37378C1.15662 10.9293 0.169922 9.94256 0.169922 8.7254V4.36491C0.169922 3.14781 1.15643 2.16106 2.37365 2.16106H2.44121C2.6047 2.16106 2.7228 2.0949 2.78315 2.01208C2.90928 1.839 3.03167 1.64966 3.14101 1.46934ZM4.87796 1.56287C4.57032 1.56287 4.26555 1.74005 4.08324 2.0407C3.9634 2.23833 3.82358 2.45537 3.67372 2.66103C3.37133 3.076 2.89391 3.26298 2.44147 3.26298H2.37391C1.76539 3.26298 1.27185 3.75628 1.27185 4.36491V8.7254C1.27185 9.33398 1.7652 9.82733 2.37378 9.82733H10.0873C10.6959 9.82733 11.1892 9.33398 11.1892 8.7254V4.36491C11.1892 3.75628 10.6959 3.26298 10.0874 3.26298H10.0199C9.56741 3.26298 9.08973 3.076 8.78734 2.66103C8.63747 2.45537 8.49766 2.23833 8.37782 2.0407C8.19551 1.74005 7.89073 1.56287 7.5831 1.56287H4.87796ZM6.23053 4.31769C5.31766 4.31769 4.57764 5.05771 4.57764 5.97058C4.57764 6.88345 5.31766 7.62347 6.23053 7.62347C7.1434 7.62347 7.88342 6.88345 7.88342 5.97058C7.88342 5.05771 7.1434 4.31769 6.23053 4.31769ZM3.47571 5.97058C3.47571 4.44913 4.70908 3.21576 6.23053 3.21576C7.75197 3.21576 8.98535 4.44913 8.98535 5.97058C8.98535 7.49203 7.75197 8.7254 6.23053 8.7254C4.70908 8.7254 3.47571 7.49202 3.47571 5.97058Z"
-        stroke={color}
-      />
+      <g id="Group 36734">
+        <path
+          id="Union (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.80814 1.81641C5.29776 1.81641 4.85442 2.16747 4.73743 2.66426L4.59715 3.25993C4.52235 3.57756 4.23874 3.89225 3.82176 3.89225H3.06094C2.45342 3.89225 1.96094 4.38473 1.96094 4.99224V10.0194C1.96094 10.6269 2.45342 11.1194 3.06094 11.1194H11.8609C12.4685 11.1194 12.9609 10.6269 12.9609 10.0194V4.99225C12.9609 4.38473 12.4685 3.89225 11.8609 3.89225H11.1008C10.6856 3.89225 10.4028 3.57886 10.3288 3.26184L10.1896 2.66616C10.0733 2.16846 9.62955 1.81641 9.11844 1.81641H5.80814ZM3.76405 2.43503C3.9874 1.48662 4.83378 0.816406 5.80814 0.816406H9.11844C10.0942 0.816406 10.9414 1.4885 11.1634 2.43867L11.2693 2.89225H11.8609C13.0207 2.89225 13.9609 3.83245 13.9609 4.99225V10.0194C13.9609 11.1792 13.0207 12.1194 11.8609 12.1194H3.06094C1.90114 12.1194 0.960938 11.1792 0.960938 10.0194V4.99224C0.960938 3.83245 1.90114 2.89225 3.06094 2.89225H3.65638L3.76405 2.43503Z"
+          fill="#1E1E1E"
+        />
+        <path
+          id="Ellipse 536 (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.46038 5.17187C6.48987 5.17187 5.70312 5.95862 5.70312 6.92913C5.70312 7.89963 6.48987 8.68638 7.46038 8.68638C8.43088 8.68638 9.21763 7.89963 9.21763 6.92913C9.21763 5.95862 8.43088 5.17187 7.46038 5.17187ZM4.70312 6.92913C4.70312 5.40634 5.93759 4.17188 7.46038 4.17188C8.98316 4.17188 10.2176 5.40634 10.2176 6.92913C10.2176 8.45191 8.98316 9.68638 7.46038 9.68638C5.93759 9.68638 4.70312 8.45191 4.70312 6.92913Z"
+          fill="#1E1E1E"
+        />
+      </g>
     </svg>
   );
 };
diff --git a/src/pages/signup/signupInfo.page.tsx b/src/pages/signup/signupInfo.page.tsx
index 5bfeb917..245c9fdf 100644
--- a/src/pages/signup/signupInfo.page.tsx
+++ b/src/pages/signup/signupInfo.page.tsx
@@ -5,7 +5,7 @@ import {
   AuthInput,
   AuthInputWrapper,
 } from '@components/Auth/AuthInput/AuthInputBox';
-import AuthDropDown from '@components/Auth/SignupInfo/AuthDropDown';
+import AuthDropDown from '@components/Auth/SignupInfo/AuthDropDown/AuthDropDown';
 import { BackBox } from '@components/common';
 import SubmitBtn from '@components/common/button/SubmitBtn';
 import { CameraIcon } from '@components/common/icons/Icons';
@@ -137,12 +137,20 @@ const SignupInfo = () => {
           </div>
 
           <div className="flex flex-col gap-6">
-            <AuthDropDown label="성별" />
-            <AuthDropDown label="연령대" />
+            <AuthDropDown
+              label="성별"
+              text={'성별을 선택해주세요.'}
+              options={genderArr}
+            />
+            <AuthDropDown
+              label="연령대"
+              text={'연령대를 선택해주세요.'}
+              options={ageArr}
+            />
           </div>
         </div>
         <div className="mt-auto">
-          <SubmitBtn>완료</SubmitBtn>
+          <SubmitBtn isActive={isValid}>완료</SubmitBtn>
         </div>
       </form>
     </div>
@@ -150,3 +158,17 @@ const SignupInfo = () => {
 };
 
 export default SignupInfo;
+
+const genderArr: SelectOption[] = [
+  { id: '1', value: '여' },
+  { id: '2', value: '남' },
+  { id: '3', value: '기타' },
+];
+
+const ageArr: SelectOption[] = [
+  { id: '1', value: '10대' },
+  { id: '2', value: '20대' },
+  { id: '3', value: '30대' },
+  { id: '4', value: '40대' },
+  { id: '5', value: '50대 이상' },
+];