Merge pull request #40 from Pro-Pofol/feature/#27-Mypage

Feature/#27 :: 유저 정보 수정 연동 완료

src/app/profile/ProfileInfo.tsx

@@ -7,7 +7,8 @@ import Link from 'next/link'
 import { LogoutButton } from './LogoutButton'
 
 export const ProfileInfo = async () => {
-  const { generation, major, name, oauth_id, profile_image } = await getMe()
+  const { generation, user_major, name, oauth_id, profile_image } =
+    await getMe()
   return (
     <>
       <div className="flex justify-center h-[180px] w-full relative">
@@ -59,7 +60,7 @@ export const ProfileInfo = async () => {
               </div>
               <div className="flex flex-col items-center gap-[2px]">
                 <p className="text-bodySmall">전공</p>
-                <p className="text-labelMedium text-gray600">{major}</p>
+                <p className="text-labelMedium text-gray600">{user_major}</p>
               </div>
             </div>
           </div>

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

@@ -94,7 +94,7 @@ export default function AnotherProfilePage({
               <div className="flex flex-col items-center gap-[2px]">
                 <p className="text-bodySmall">전공</p>
                 <p className="text-labelMedium text-gray600">
-                  {userData?.major}
+                  {userData?.user_major}
                 </p>
               </div>
             </div>

src/app/profile/edit/ProfileEdit.tsx

@@ -6,7 +6,9 @@ import Image from 'next/image'
 import { UserType } from '@/types'
 import { majorOption } from '@/constants'
 import { useState } from 'react'
-import { uploadFile } from '@/utils'
+import { getCookie, uploadFile } from '@/utils'
+import { editProfile } from '@/services'
+import { useRouter } from 'next/navigation'
 
 interface ImgDataType {
   img?: File
@@ -15,12 +17,30 @@ interface ImgDataType {
 
 export const ProfileEdit = ({ myData }: { myData: UserType }) => {
   const [generation, setGeneration] = useState<string>(`${myData.generation}`)
-  const [major, setMajor] = useState<string>(myData.major)
+  const [major, setMajor] = useState<string>(myData.user_major)
   const [imgData, setImgData] = useState<ImgDataType>({
     imgString: myData.profile_image,
   })
 
-  const editProfile = () => {}
+  const router = useRouter()
+
+  const isChanged = () => {
+    if (generation !== `${myData.generation}`) return false
+    else if (major !== myData.user_major) return false
+    else if (imgData.imgString !== myData.profile_image) return false
+    else return true
+  }
+
+  const editProfileHandler = async () => {
+    const editedData = {
+      profile_image: myData.profile_image,
+      generation: +generation,
+      user_major: major,
+    }
+    const token = getCookie('access_token') || ''
+    await editProfile(token, editedData)
+    router.replace('/profile')
+  }
 
   return (
     <>
@@ -71,7 +91,12 @@ export const ProfileEdit = ({ myData }: { myData: UserType }) => {
           change={setMajor}
         />
       </article>
-      <Button size="large" className="w-full" onClick={editProfile}>
+      <Button
+        size="large"
+        className="w-full"
+        onClick={editProfileHandler}
+        disabled={isChanged()}
+      >
         프로필 수정하기
       </Button>
     </>

src/services/index.ts

@@ -7,6 +7,7 @@ export { getMe } from './getMe'
 export { getUser } from './getUser'
 export { deleteApplication } from './deleteApplication'
 export { userFollow } from './userFollow'
+export { editProfile } from './profile/editProfile'
 
 export * from './post'
-export * from './tip'
+export * from './tip'

src/services/profile/editProfile.ts

@@ -0,0 +1,19 @@
+import { instance } from '../interceptor'
+
+export const editProfile = async (
+  token: string,
+  editedData: {
+    profile_image: string
+    generation: number
+    user_major: string
+  },
+) => {
+  return await instance({
+    method: 'PATCH',
+    url: '/users/me',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    data: editedData,
+  })
+}

src/types/userType.ts

@@ -1,7 +1,7 @@
 export type UserType = {
-    generation: number
-    major: string
-    name: string
-    oauth_id: string
-    profile_image: string
-}
+  generation: number
+  user_major: string
+  name: string
+  oauth_id: string
+  profile_image: string
+}