Merge pull request #286 from Soohyuniii/feat--폼-변경사항-적용

feat: 친구저장 폼 항목 변경

Author: Soohyuniii

src/components/button/FormButton.tsx

@@ -13,17 +13,26 @@ const FormButton = ({
   children,
   onClick
 }: FormButtonProps) => {
-  const baseStyles = "flex justify-center items-center rounded-lg transition";
+  const baseStyles =
+    "flex justify-center items-center rounded-lg transition-colors transform-none focus:transform-none active:transform-none select-none";
 
   const sizeStyles =
     size === "sm" ? "min-w-[68px] w-auto h-[40px]" : "w-[70px] h-[72px]";
 
-  const fontSize =
-    size === "md"
-      ? "text-[var(--text-2xl)]"
-      : selected
-        ? "text-[16px]"
-        : "text-[14px]";
+  const getFontSize = () => {
+    if (size === "md") return "text-[var(--text-2xl)]";
+
+    // 긴 텍스트인 경우 작은 폰트 적용
+    const isLongText = children.length > 4;
+
+    if (selected) {
+      return isLongText ? "text-[13px]" : "text-[16px]";
+    } else {
+      return isLongText ? "text-[12px]" : "text-[14px]";
+    }
+  };
+
+  const fontSize = getFontSize();
 
   const fontWeight =
     size === "md" ? "font-bold" : selected ? "font-bold" : "font-medium";
@@ -34,8 +43,9 @@ const FormButton = ({
 
   return (
     <button
-      className={`${baseStyles} ${sizeStyles} ${fontSize} ${fontWeight} ${backgroundColor} ${borderColor} ${fontColor} border`}
+      className={`${baseStyles} ${sizeStyles} ${fontSize} ${fontWeight} ${backgroundColor} ${borderColor} ${fontColor} border leading-none`}
       onClick={onClick}
+      style={{ lineHeight: "1" }}
     >
       {children}
     </button>

src/pages/SelectInfo.tsx

@@ -79,8 +79,8 @@ const SelectInfo = () => {
   const [name, setName] = useState<string>("");
   const [age, setAge] = useState<string | null>(null);
   const [gender, setGender] = useState<string | null>(null);
-  const [relationship, setRelationship] = useState<string | null>(null);
-  const [interest, setInterest] = useState<string[]>([]);
+  const [job, setJob] = useState<string | null>(null);
+  const [freeSetting, setFreeSetting] = useState<string>("");
   const [toastMessage, setToastMessage] = useState<string | null>(null);
 
   useEffect(() => {
@@ -97,27 +97,15 @@ const SelectInfo = () => {
   const mbtiOptions = ["E", "N", "F", "P", "I", "S", "T", "J"];
   const ageOptions = ["10대", "20대", "30대 이상"];
   const genderOptions = ["여자", "남자"];
-  const relationshipOptions = [
-    "부모",
-    "자녀",
-    "친구",
-    "짝사랑",
-    "이별",
-    "연인",
-    "선생님",
-    "직장동료"
-  ];
-  const interestOptions = [
-    "연애",
-    "결혼",
-    "취미",
-    "사회생활",
-    "여행",
-    "운동",
-    "심리",
-    "뷰티/패션",
-    "음식",
-    "인간관계"
+  const jobOptions = [
+    "연습생",
+    "아이돌",
+    "스포츠선수",
+    "배우",
+    "작가",
+    "스트리머",
+    "유튜버",
+    "프로게이머"
   ];
 
   const handleMBTISelect = (option: string) => {
@@ -133,18 +121,8 @@ const SelectInfo = () => {
     return selectedMBTI[group] === option;
   };
 
-  const handleInterestSelect = (option: string) => {
-    if (interest.includes(option)) {
-      setInterest((prevInterests) =>
-        prevInterests.filter((item) => item !== option)
-      );
-    } else {
-      setInterest((prevInterests) => [...prevInterests, option]);
-    }
-  };
-
-  const isInterestSelected = (option: string) => {
-    return interest.includes(option);
+  const handleFreeSettingChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setFreeSetting(e.target.value);
   };
 
   const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -206,21 +184,21 @@ const SelectInfo = () => {
     const commonData = {
       gender: gender === "남자" ? "MALE" : gender === "여자" ? "FEMALE" : null,
       mbti,
-      interests: interest
+      freeSetting
     };
 
     const selectedData = isVirtualFriend
       ? {
           ...commonData,
           friendName: name,
           age: mapAgeToNumber(age),
-          relationship
+          job
         }
       : {
           ...commonData,
           fastFriendName: name,
           fastFriendAge: mapAgeToNumber(age),
-          fastFriendRelationship: relationship
+          fastFriendJob: job
         };
 
     const apiUrl = isVirtualFriend ? "api/virtual-friend" : "api/fast-friend";
@@ -387,43 +365,37 @@ const SelectInfo = () => {
                 </div>
               </div>
 
-              {/* 관계 선택 */}
+              {/* 직업 선택 */}
               <div className="pt-[20px] pb-[20px]">
                 <p className="text-2lg leading-[24px] font-bold tracking-[0em] text-gray-600">
-                  상대방과 나의 관계
+                  직업
                 </p>
                 <div className="grid grid-cols-4 gap-[16px] pt-[16px]">
-                  {relationshipOptions.map((option) => (
+                  {jobOptions.map((option) => (
                     <FormButton
                       key={option}
                       size="sm"
-                      selected={relationship === option}
-                      onClick={() =>
-                        handleButtonClick(option, setRelationship, relationship)
-                      }
+                      selected={job === option}
+                      onClick={() => handleButtonClick(option, setJob, job)}
                     >
                       {option}
                     </FormButton>
                   ))}
                 </div>
               </div>
 
-              {/* 관심사 선택 */}
+              {/* 자유 설정 */}
               <div className="pt-[20px] pb-[26px]">
                 <p className="text-2lg leading-[24px] font-bold tracking-[0em] text-gray-600">
-                  관심사
+                  자유 설정
                 </p>
-                <div className="grid grid-cols-4 gap-[16px] pt-[16px]">
-                  {interestOptions.map((option) => (
-                    <FormButton
-                      key={option}
-                      size="sm"
-                      selected={isInterestSelected(option)}
-                      onClick={() => handleInterestSelect(option)}
-                    >
-                      {option}
-                    </FormButton>
-                  ))}
+                <div className="pt-[8px]">
+                  <textarea
+                    value={freeSetting}
+                    onChange={handleFreeSettingChange}
+                    className="h-[92px] w-full resize-none overflow-y-auto rounded-lg border border-gray-300 px-4 py-4 text-sm focus:border-primary-light focus:ring-primary-light focus:outline-none"
+                    placeholder="상황, 상대방과의 관계, 세계관 등을 입력해주세요"
+                  />
                 </div>
               </div>
             </div>