Merge pull request #49 from Help-M-Ssaem/feat/#48

[Feat] 유저 프로필 수정 UI 및 수정

src/app/signin/info/page.tsx

@@ -66,18 +66,22 @@ const Info = () => {
         <div className="flex justify-between align-center gap-2">
           <MbtiSelect
             options={['E', 'e', 'I', 'i']}
+            selectedOption={mbti[0]}
             onSelect={(selected) => handleMbtiChange(0, selected)}
           />
           <MbtiSelect
             options={['S', 's', 'N', 'n']}
+            selectedOption={mbti[1]}
             onSelect={(selected) => handleMbtiChange(1, selected)}
           />
           <MbtiSelect
             options={['T', 't', 'F', 'f']}
+            selectedOption={mbti[2]}
             onSelect={(selected) => handleMbtiChange(2, selected)}
           />
           <MbtiSelect
             options={['J', 'j', 'P', 'p']}
+            selectedOption={mbti[3]}
             onSelect={(selected) => handleMbtiChange(3, selected)}
           />
         </div>

src/app/user/[id]/page.tsx

@@ -3,58 +3,59 @@
 import ActivityCount from '@/components/auth/ActivityCount'
 import UserProfile from '@/components/auth/UserProfile'
 import Container from '@/components/common/Container'
-import { useParams } from 'next/navigation'
-import { useProfile } from '@/service/user/useUserService'
+import { useParams, useRouter } from 'next/navigation'
+import { useUserInfo, useProfile } from '@/service/user/useUserService'
 import Button from '@/components/common/Button'
 import MemberListCount from '@/components/auth/MemberListCount'
 
-const Userpage = () => {
+const UserPage = () => {
   const { id } = useParams()
   const profileId = Number(id)
+  const router = useRouter()
 
-  const { data: profileData } = useProfile(Number(profileId))
-
-  if (!profileData) return null
+  const { data: userInfo } = useUserInfo()
+  const { data: profile } = useProfile(Number(profileId))
 
+  if (!profile) return null
   const activitySections = [
     {
       title: '받은 평가',
       items: [
-        { label: '좋아요', count: profileData.evaluationCount.likeCount },
-        { label: '유익해요', count: profileData.evaluationCount.usefulCount },
-        { label: '재밌어요', count: profileData.evaluationCount.funCount },
+        { label: '좋아요', count: profile.evaluationCount.likeCount },
+        { label: '유익해요', count: profile.evaluationCount.usefulCount },
+        { label: '재밌어요', count: profile.evaluationCount.funCount },
         {
           label: '성의있어요',
-          count: profileData.evaluationCount.sincereCount,
+          count: profile.evaluationCount.sincereCount,
         },
-        { label: '화끈해요', count: profileData.evaluationCount.hotCount },
+        { label: '화끈해요', count: profile.evaluationCount.hotCount },
       ],
     },
     {
       title: '게시판 활동',
       items: [
-        { label: '전체 게시글', count: profileData.boardHistory.boardCount },
+        { label: '전체 게시글', count: profile.boardHistory.boardCount },
         {
           label: '전체 댓글',
-          count: profileData.boardHistory.boardCommentCount,
+          count: profile.boardHistory.boardCommentCount,
         },
-        { label: '받은 좋아요', count: profileData.boardHistory.likeAllCount },
+        { label: '받은 좋아요', count: profile.boardHistory.likeAllCount },
       ],
     },
     {
       title: '과몰입토론 활동',
       items: [
         {
           label: '전체 토론글',
-          count: profileData.discussionHistory.discussionCount,
+          count: profile.discussionHistory.discussionCount,
         },
         {
           label: '전체 댓글',
-          count: profileData.discussionHistory.discussionCommentCount,
+          count: profile.discussionHistory.discussionCommentCount,
         },
         {
           label: '전체 참여자',
-          count: profileData.discussionHistory.participationCount,
+          count: profile.discussionHistory.participationCount,
         },
       ],
     },
@@ -63,35 +64,49 @@ const Userpage = () => {
       items: [
         {
           label: '전체 고민',
-          count: profileData.worryBoardHistory.worryBoardCount,
+          count: profile.worryBoardHistory.worryBoardCount,
         },
         {
           label: '전체 해결',
-          count: profileData.worryBoardHistory.solvedWorryBoardCount,
+          count: profile.worryBoardHistory.solvedWorryBoardCount,
         },
         {
           label: '전체 평가',
-          count: profileData.worryBoardHistory.evaluationCount,
+          count: profile.worryBoardHistory.evaluationCount,
         },
       ],
     },
   ]
 
+  const handleProfileUpdate = () => {
+    router.push(`/user/${profileId}/update`)
+  }
+
   return (
     <>
-      <div className="text-title3 text-maindark font-semibold my-6">
-        {profileData.teacherInfo.nickName} 프로필
+      <div className="flex justify-between items-center mt-6 mb-4">
+        <div className="text-title3 text-maindark font-semibold">
+          {profile.teacherInfo.nickName} 프로필
+        </div>
+        {userInfo?.id === profileId && (
+          <div
+            className="text-gray2 underline cursor-pointer"
+            onClick={handleProfileUpdate}
+          >
+            수정하기
+          </div>
+        )}
       </div>
       <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-4 lg:grid-rows-1">
         <Container color="purple" className="md:col-span-1 lg:col-span-1">
-          <UserProfile profile={profileData.teacherInfo} />
+          <UserProfile profile={profile.teacherInfo} />
         </Container>
         <Container color="purple" className="md:col-span-1 lg:col-span-1">
           <div className="text-title3 text-gray1 items-start font-semibold mb-2.5">
             수집한 칭호
           </div>
           <div className="flex flex-wrap gap-2.5 ">
-            {profileData.badgeInfos.map((badge, index) => (
+            {profile.badgeInfos.map((badge, index) => (
               <Button
                 key={index}
                 text={badge.name}
@@ -120,4 +135,4 @@ const Userpage = () => {
   )
 }
 
-export default Userpage
+export default UserPage

src/app/user/[id]/update/page.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import Container from '@/components/common/Container'
+import { useParams, useRouter } from 'next/navigation'
+import {
+  useProfile,
+  usePatchProfile,
+  useUserInfo,
+} from '@/service/user/useUserService'
+import Button from '@/components/common/Button'
+import UserUpdateProfile from '@/components/auth/UserProfileUpdate'
+import { useState, useEffect } from 'react'
+
+const UserUpdatePage = () => {
+  const { id } = useParams()
+  const profileId = Number(id)
+  const router = useRouter()
+
+  const { data: profile } = useProfile(profileId)
+  const { data: userInfo } = useUserInfo()
+  const { mutate: patchProfile } = usePatchProfile()
+
+  const [updatedProfile, setUpdatedProfile] = useState({})
+  const [badgeId, setBadgeId] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (userInfo) {
+      setBadgeId(userInfo.badgeId)
+    }
+  }, [userInfo])
+
+  useEffect(() => {
+    setUpdatedProfile((prevProfile) => ({
+      ...prevProfile,
+      badgeId: badgeId === userInfo?.badgeId ? null : badgeId,
+    }))
+  }, [badgeId, userInfo])
+
+  if (!profile) return null
+
+  const handleUpdate = (data: any) => {
+    setUpdatedProfile((prevProfile) => ({
+      ...prevProfile,
+      ...data,
+      badgeId: badgeId === userInfo?.badgeId ? null : badgeId,
+    }))
+  }
+
+  const handleSubmit = () => {
+    patchProfile(updatedProfile)
+    router.back()
+  }
+
+  const handleBadgeClick = (badge: number) => {
+    setBadgeId(badge)
+  }
+
+  return (
+    <>
+      <div className="text-title3 text-maindark font-semibold mt-6 mb-4">
+        {profile.teacherInfo.nickName} 프로필 수정
+      </div>
+      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
+        <Container color="purple" className="col-span-1 items-center">
+          <UserUpdateProfile onUpdate={handleUpdate} />
+        </Container>
+        <Container color="purple" className="col-span-1">
+          <div className="text-title3 text-gray1 items-start font-semibold mb-2.5">
+            수집한 칭호
+          </div>
+          <div className="flex flex-wrap gap-2.5">
+            {profile.badgeInfos.map((badge, index) => (
+              <Button
+                key={index}
+                text={badge.name}
+                color={badge.name}
+                size="badge"
+                onClick={() => handleBadgeClick(badge.id)}
+                className={`${
+                  badgeId === badge.id ? 'outline outline-4 outline-main' : ''
+                }`}
+              />
+            ))}
+          </div>
+        </Container>
+      </div>
+
+      <div className="flex justify-end gap-2.5 my-4">
+        <Button
+          color="LIGHTPURPLE"
+          text="취소하기"
+          size="small"
+          onClick={() => {
+            router.back()
+          }}
+        />
+        <Button
+          color="PURPLE"
+          text="수정하기"
+          size="small"
+          onClick={handleSubmit}
+        />
+      </div>
+    </>
+  )
+}
+
+export default UserUpdatePage

src/components/auth/MbtiSelect.tsx

@@ -1,29 +1,25 @@
 'use client'
 
-import React, { useState } from 'react'
 import Image from 'next/image'
 
 export interface MbtiSelectProps {
   options: string[]
+  selectedOption: string
   onSelect: (selectedOption: string) => void
 }
 
-const MbtiSelect = ({ options, onSelect }: MbtiSelectProps) => {
-  const [selectedOption, setSelectedOption] = useState(options[0])
-
+const MbtiSelect = ({ options, selectedOption, onSelect }: MbtiSelectProps) => {
   const handleNextOption = () => {
     const currentIndex = options.indexOf(selectedOption)
     const nextIndex = (currentIndex + 1) % options.length
     const nextOption = options[nextIndex]
-    setSelectedOption(nextOption)
     onSelect(nextOption)
   }
 
   const handlePrevOption = () => {
     const currentIndex = options.indexOf(selectedOption)
     const prevIndex = (currentIndex - 1 + options.length) % options.length
     const prevOption = options[prevIndex]
-    setSelectedOption(prevOption)
     onSelect(prevOption)
   }
 

src/components/auth/UserProfileUpdate.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryFn } from '@storybook/react'
+import UserProfileUpdate from './UserProfileUpdate'
+
+export default {
+  title: 'Auth/UserProfileUpdate',
+  component: UserProfileUpdate,
+} as Meta
+
+const Template: StoryFn = (args) => <UserProfileUpdate {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {}