feat: SP1 매칭 정보 수정 페이지 퍼블리싱

src/pages/edit-profile/components/selection-group.tsx

@@ -0,0 +1,49 @@
+import Button from '@components/button/button/button';
+import { cn } from '@libs/cn';
+
+interface SelectionGroupProps {
+  title: string;
+  options: { id: number; label: string }[] | string[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+  disabled?: boolean;
+}
+
+const SelectionGroup = ({
+  title,
+  options,
+  selectedValue,
+  onSelect,
+  disabled,
+}: SelectionGroupProps) => {
+  return (
+    <div className="flex-col gap-[1.6rem]">
+      <p className="body_16_m">{title}</p>
+      <div className="flex flex-wrap gap-[0.8rem]">
+        {options.map((option) => {
+          const key = typeof option === 'string' ? option : option.id;
+          const label = typeof option === 'string' ? option : option.label;
+          const isSelected = selectedValue === label;
+
+          return (
+            <Button
+              key={key}
+              label={label}
+              variant={disabled ? 'disabled' : isSelected ? 'skyblue' : 'gray2'}
+              className={cn(
+                'cap_14_sb w-auto px-[1.6rem] py-[0.6rem]',
+                disabled && 'cursor-not-allowed',
+              )}
+              onClick={() => {
+                if (disabled) return;
+                onSelect(label);
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default SelectionGroup;

src/pages/edit-profile/constants/edit-profile.ts

@@ -0,0 +1 @@
+export const PROFILE_SYNK_MATE = ['같은 팀 메이트', '상관없어요'];

src/pages/edit-profile/edit-profile.tsx

@@ -0,0 +1,139 @@
+import Button from '@components/button/button/button';
+import Input from '@components/input/input';
+import { cn } from '@libs/cn';
+import SelectionGroup from '@pages/edit-profile/components/selection-group';
+import { PROFILE_SYNK_MATE } from '@pages/edit-profile/constants/edit-profile';
+import { mockEditData } from '@pages/edit-profile/mocks/mockEditData';
+import {
+  GENDER,
+  NO_TEAM_OPTION,
+  TEAMS,
+  VIEWING_STYLE,
+} from '@pages/onboarding/constants/onboarding';
+import { NICKNAME_RULE_MESSAGE } from '@pages/sign-up/constants/NOTICE';
+import { NICKNAME_PLACEHOLDER } from '@pages/sign-up/constants/validation';
+import { useMemo, useRef, useState } from 'react';
+
+const EditProfile = () => {
+  const [team, setTeam] = useState(mockEditData.team);
+  const [gender, setGender] = useState(mockEditData.genderPreference);
+  const [mateTeam, setMateTeam] = useState(mockEditData.teamAllowed || '상관없어요');
+  const [viewStyle, setViewStyle] = useState(mockEditData.style);
+  const [isSubmit, setIsSubmit] = useState(false);
+
+  const initialValue = useRef({
+    team: mockEditData.team,
+    gender: mockEditData.genderPreference,
+    mateTeam: mockEditData.teamAllowed,
+    viewStyle: mockEditData.style,
+  });
+
+  const isDirty = useMemo(() => {
+    const init = initialValue.current;
+
+    return (
+      team !== init.team ||
+      gender !== init.gender ||
+      mateTeam !== init.mateTeam ||
+      viewStyle !== init.viewStyle
+    );
+  }, [team, gender, mateTeam, viewStyle]);
+
+  const handleSaveClick = () => {
+    if (!isDirty) return;
+
+    setIsSubmit(true);
+
+    // TODO: 실제 API 호출
+  };
+
+  return (
+    <div className="h-full bg-gray-white px-[1.6rem] pt-[1.6rem] pb-[4rem]">
+      <h2 className="subhead_18_sb mb-[1.6rem]">프로필 수정</h2>
+      <section>
+        <Input
+          placeholder={NICKNAME_PLACEHOLDER}
+          label="닉네임"
+          defaultMessage={NICKNAME_RULE_MESSAGE}
+        />
+        <div className="mb-[2.5rem] flex justify-end">
+          <Button label="수정" className="cap_14_sb mt-[0.8rem] w-auto px-[1.6rem] py-[0.6rem]" />
+        </div>
+
+        <Input
+          placeholder={NICKNAME_PLACEHOLDER}
+          label="한 줄 소개"
+          defaultMessage={NICKNAME_RULE_MESSAGE}
+        />
+        <div className="flex justify-end">
+          <Button label="수정" className="cap_14_sb mt-[0.8rem] w-auto px-[1.6rem] py-[0.6rem]" />
+        </div>
+      </section>
+
+      <section className="flex-col pb-[5.6rem]">
+        <h2 className="subhead_18_sb mb-[0.4rem]">매칭 조건 수정</h2>
+        <p className="cap_12_m mb-[1.6rem] text-gray-500">
+          수정한 조건을 기반으로 새로운 메이트를 추천해드려요!
+        </p>
+
+        <div className="flex-col gap-[3.2rem]">
+          <div className="flex-col gap-[1.6rem]">
+            <p className="body_16_m">응원팀</p>
+            <div className="flex flex-wrap gap-[0.8rem]">
+              {TEAMS.map((option) => {
+                const selected = team === option;
+                return (
+                  <Button
+                    key={option}
+                    label={option}
+                    variant={selected ? 'skyblue' : 'gray2'}
+                    className="cap_14_sb w-auto px-[1.6rem] py-[0.6rem] text-gray-900"
+                    onClick={() => setTeam(option)}
+                  />
+                );
+              })}
+              <Button
+                label={NO_TEAM_OPTION}
+                variant={team === NO_TEAM_OPTION ? 'skyblue' : 'gray2'}
+                className="cap_14_sb w-fit px-[1.6rem] py-[0.6rem] text-gray-900"
+                onClick={() => setTeam(NO_TEAM_OPTION)}
+              />
+            </div>
+          </div>
+
+          <SelectionGroup
+            title="직관 메이트의 응원팀"
+            options={PROFILE_SYNK_MATE}
+            selectedValue={team === NO_TEAM_OPTION ? '' : mateTeam}
+            onSelect={setMateTeam}
+            disabled={team === NO_TEAM_OPTION}
+          />
+
+          <SelectionGroup
+            title="관람 스타일"
+            options={VIEWING_STYLE}
+            selectedValue={viewStyle}
+            onSelect={setViewStyle}
+          />
+
+          <SelectionGroup
+            title="선호 성별"
+            options={GENDER}
+            selectedValue={gender}
+            onSelect={setGender}
+          />
+        </div>
+      </section>
+
+      <Button
+        variant={!isDirty || isSubmit ? 'disabled' : 'blue'}
+        className={cn((!isDirty || isSubmit) && 'cursor-not-allowed')}
+        onClick={handleSaveClick}
+        label="매칭 조건 수정"
+        ariaLabel="매칭 조건 수정"
+      />
+    </div>
+  );
+};
+
+export default EditProfile;

src/pages/edit-profile/mocks/mockEditData.ts

@@ -0,0 +1,6 @@
+export const mockEditData = {
+  team: '응원하는 팀이 없어요.',
+  teamAllowed: '상관없어요',
+  style: '직관먹방러',
+  genderPreference: '여성',
+};

src/shared/components/button/button/styles/button-variants.ts

@@ -7,10 +7,11 @@ export const buttonVariants = cva(
       variant: {
         blue: 'bg-main-900 text-white',
         gray: 'bg-gray-400 text-white',
-        skyblue: 'bg-main-200 text-main-900',
+        skyblue: '!text-main-900 bg-main-200',
         white: 'bg-white text-gray-700',
         skyblueBorder: 'bg-main-200 text-main-900 outline outline-main-900',
         gray2: 'bg-background text-gray-700',
+        disabled: 'bg-gray-100 text-gray-400',
       },
       size: {
         M: 'w-full px-[0.8rem] py-[1.2rem]',

src/shared/components/header/header.tsx

@@ -11,14 +11,15 @@ const Header = () => {
   const isFail = urlParams.get('type') === 'fail';
   const isSignUp = pathname.includes(ROUTES.SIGNUP);
   const isHome = pathname === ROUTES.HOME;
-  const isMatch = location.pathname === ROUTES.MATCH;
+  const isMatch = pathname === ROUTES.MATCH;
   const isChatRoom = pathname === ROUTES.CHAT_ROOM;
+  const isEditProfile = pathname === ROUTES.PROFILE_EDIT;
 
   return (
     <header
       className={clsx('header-layout', {
         'bg-gray-black': isFail || isHome,
-        'bg-gray-white': isSignUp || isChatRoom,
+        'bg-gray-white': isSignUp || isChatRoom || isEditProfile,
         'bg-gray-100': isMatch,
       })}
     >

src/shared/routes/lazy.ts

@@ -19,7 +19,7 @@ export const Result = lazy(() => import('@pages/result/result'));
 
 // Mypage
 export const Profile = lazy(() => import('@pages/profile/profile'));
-export const EditProfile = lazy(() => import('@pages/profile/edit-profile/edit-profile'));
+export const EditProfile = lazy(() => import('@pages/edit-profile/edit-profile'));
 
 // Chat
 export const ChatList = lazy(() => import('@pages/chat/chat-list'));