diff --git a/src/pages/edit-profile/edit-profile.tsx b/src/pages/edit-profile/edit-profile.tsx index 7d8c861f..30d95bb7 100644 --- a/src/pages/edit-profile/edit-profile.tsx +++ b/src/pages/edit-profile/edit-profile.tsx @@ -2,6 +2,7 @@ import { userMutations } from '@apis/user/user-mutations'; import { userQueries } from '@apis/user/user-queries'; import Button from '@components/button/button/button'; import Divider from '@components/divider/divider'; +import Icon from '@components/icon/icon'; import Input from '@components/input/input'; import { zodResolver } from '@hookform/resolvers/zod'; import { cn } from '@libs/cn'; @@ -14,7 +15,7 @@ import { EditProfileSchema, type EditProfileValues, } from '@pages/edit-profile/schema/EditProfileSchema'; -import { GENDER, NO_TEAM_OPTION, TEAMS } from '@pages/onboarding/constants/onboarding'; +import { NO_TEAM_OPTION, TEAMS } from '@pages/onboarding/constants/onboarding'; import { INTRODUCTION_RULE_MESSAGE, NICKNAME_DUPLICATED, @@ -34,9 +35,9 @@ const EditProfile = () => { const { data } = useQuery(userQueries.MATCH_CONDITION()); const [team, setTeam] = useState(undefined); - const [gender, setGender] = useState(undefined); const [mateTeam, setMateTeam] = useState(undefined); const [viewStyle, setViewStyle] = useState(undefined); + const [avgSeason, setAvgSeason] = useState(''); const [isSubmit, setIsSubmit] = useState(false); const [nicknameStatus, setNicknameStatus] = useState('idle'); @@ -73,21 +74,21 @@ const EditProfile = () => { const initial = { team: data?.team ?? '', - gender: data?.genderPreference ?? '', mateTeam: data?.teamAllowed ?? '', viewStyle: data?.style ?? '', + avgSeason: data?.avgSeason ?? 0, }; const teamValue = team ?? initial.team; - const genderValue = gender ?? initial.gender; const viewStyleValue = viewStyle ?? initial.viewStyle; const mateTeamValue = (teamValue === NO_TEAM_OPTION ? '' : (mateTeam ?? initial.mateTeam)) ?? ''; + const avgSeasonValue = avgSeason === '' ? initial.avgSeason : Number(avgSeason); const isMatchDirty = teamValue !== initial.team || - genderValue !== initial.gender || mateTeamValue !== initial.mateTeam || - viewStyleValue !== initial.viewStyle; + viewStyleValue !== initial.viewStyle || + avgSeasonValue !== initial.avgSeason; const isSubmitDisabled = !isMatchDirty || isSubmit; @@ -97,9 +98,9 @@ const EditProfile = () => { editMatchCondition({ team: teamValue, - genderPreference: genderValue, style: viewStyleValue, teamAllowed: teamValue === NO_TEAM_OPTION ? null : mateTeamValue || null, + avgSeason: avgSeasonValue, }); }; @@ -125,6 +126,15 @@ const EditProfile = () => { {/* 닉네임 */}
+
+

프로필 이미지

+ {/* TODO: 프로필 편집 api 연결 */} +
+ + +
+
+ { /> )} /> -
+
diff --git a/src/pages/profile/components/profile-card.tsx b/src/pages/profile/components/profile-card.tsx new file mode 100644 index 00000000..36109d9d --- /dev/null +++ b/src/pages/profile/components/profile-card.tsx @@ -0,0 +1,68 @@ +import Button from '@components/button/button/button'; +import { getChipColor } from '@components/card/match-card/utils/get-chip-color'; +import Chip from '@components/chip/chip'; +import Divider from '@components/divider/divider'; +import { ROUTES } from '@routes/routes-config'; +import { useNavigate } from 'react-router-dom'; + +interface ProfileCardProps { + nickname: string; + imgUrl: string; + team: string; + style: string; + matchCnt?: number; + avgSeason?: number; + onEditProfile?: () => void; +} + +const ProfileCard = ({ nickname, imgUrl, team, style, matchCnt, avgSeason }: ProfileCardProps) => { + const navigate = useNavigate(); + + const teamChipColor = getChipColor(team); + const styleChipColor = getChipColor(style); + + return ( +
+
+
+ {`${nickname} +
+

{nickname}

+
+ + +
+
+
+
+
+
+ +
+
+

함께한 매칭

+

{matchCnt ?? '-'}

+
+
+ +
+
+

시즌 평균 직관

+

{avgSeason ?? '-'}

+
+
+
+ ); +}; + +export default ProfileCard; diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx index c114f454..564a5314 100644 --- a/src/pages/profile/profile.tsx +++ b/src/pages/profile/profile.tsx @@ -1,14 +1,12 @@ import { userMutations } from '@apis/user/user-mutations'; import { userQueries } from '@apis/user/user-queries'; -import Button from '@components/button/button/button'; -import Card from '@components/card/match-card/card'; -import type { ChipColor } from '@components/chip/chip-list'; import Divider from '@components/divider/divider'; import Footer from '@components/footer/footer'; import { FEEDBACK_LINK, REQUEST_LINK } from '@pages/profile/constants/link'; import { ROUTES } from '@routes/routes-config'; import { useMutation, useQuery } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; +import ProfileCard from './components/profile-card'; const Profile = () => { const navigate = useNavigate(); @@ -20,25 +18,16 @@ const Profile = () => { return (
-
- + navigate(ROUTES.PROFILE_EDIT)} /> -