✨ Feat : 로그인 정보 store 저장 & 프로필 하위 페이지 API 충돌 제거 #174

✨ Feat : 로그인 정보 store 저장 & 프로필 하위 페이지 API 충돌 제거 #174

package.json

@@ -23,6 +23,7 @@
     "react-kakao-maps-sdk": "^1.1.27",
     "react-loading-skeleton": "^3.5.0",
     "react-router-dom": "^6.28.0",
+    "react-toastify": "^10.0.6",
     "sockjs-client": "^1.6.1",
     "styled-components": "^6.1.13",
     "styled-normalize": "^8.1.1",

src/apis/loginService.ts

@@ -1,11 +1,16 @@
 import fetchApi from '@apis/ky'
+import { useUserStore } from '@store/useUserStore'
 
 // 로그인 API 응답 타입 정의
 interface LoginResponseData {
-  memberId: number
-  grantType: string
   accessToken: string
+  age: number
+  gender: string
+  grantType: string
+  memberId: number
+  nickname: string
   refreshToken: string
+  teamId: number
 }
 
 interface LoginResponse {
@@ -16,6 +21,9 @@ interface LoginResponse {
   code: number
 }
 
+const { setAge, setGender, setMemberId, setNickname, setTeamId } =
+  useUserStore.getState()
+
 // 로그인 요청 함수
 export const loginPost = async (email: string): Promise<LoginResponseData> => {
   try {
@@ -37,6 +45,15 @@ export const loginPost = async (email: string): Promise<LoginResponseData> => {
     // localStorage.setItem('refreshToken', refreshToken);
 
     console.log('로그인 성공:', response.data)
+    const { age, gender, memberId, nickname, teamId } = response.data
+
+    // 상태 업데이트
+    setAge(age)
+    setGender(gender)
+    setMemberId(memberId)
+    setNickname(nickname)
+    setTeamId(teamId)
+
     return response.data // `data` 객체를 반환
   } catch (error) {
     console.error('로그인 실패:', error)

src/hooks/useEditMyInfo.ts

@@ -1,12 +1,16 @@
 import queryClient, { QUERY_KEY } from '@apis/queryClient'
 import userService from '@apis/userService'
+import { ROUTE_PATH } from '@constants/ROUTE_PATH'
 import { useMutation } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
 
 const useEditMyInfo = () => {
-  const { mutate, isPending, isError, error } = useMutation({
+  const { mutate, isPending, isError, error, isSuccess } = useMutation({
     mutationFn: (formData: FormData) => userService.editMyInfo(formData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MY_INFO, 1] })
+      toast('정보 수정이 완료되었습니다.')
     },
     onSettled: (data, error) => {
       console.log(data, error)
@@ -16,7 +20,7 @@ const useEditMyInfo = () => {
     },
   })
 
-  return { mutateMyInfo: mutate, isPending, isError, error }
+  return { mutateMyInfo: mutate, isPending, isError, error, isSuccess }
 }
 
 export default useEditMyInfo

src/layouts/GlobalNav/index.tsx

@@ -12,9 +12,18 @@ import UserIcon from '@assets/icon/nav_user.svg?react'
 import UserIconFill from '@assets/icon/nav_user_fill.svg?react'
 import { Link, useLocation } from 'react-router-dom'
 import { ROUTE_PATH } from '@constants/ROUTE_PATH'
+import { useEffect, useState } from 'react'
+import { useUserStore } from '@store/useUserStore'
 
 const GlobalNav = () => {
   const { pathname } = useLocation()
+  const [isLogin, setIsLogin] = useState<boolean>(false)
+  const { memberId } = useUserStore().userInfo
+
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    setIsLogin(!!token)
+  }, [pathname])
 
   return (
     <NavWrap>
@@ -56,10 +65,25 @@ const GlobalNav = () => {
         </NavList>
 
         <NavList>
-          <Link to={ROUTE_PATH.PROFILE}>
-            {pathname === ROUTE_PATH.PROFILE ? <UserIconFill /> : <UserIcon />}
-            <NavText>마이</NavText>
-          </Link>
+          {isLogin ? (
+            <Link to={`${ROUTE_PATH.PROFILE}/${memberId}`}>
+              {pathname === ROUTE_PATH.PROFILE ? (
+                <UserIconFill />
+              ) : (
+                <UserIcon />
+              )}
+              <NavText>마이</NavText>
+            </Link>
+          ) : (
+            <Link to={ROUTE_PATH.LOGIN}>
+              {pathname === ROUTE_PATH.PROFILE ? (
+                <UserIconFill />
+              ) : (
+                <UserIcon />
+              )}
+              <NavText>로그인</NavText>
+            </Link>
+          )}
         </NavList>
       </NavUl>
     </NavWrap>

src/main.tsx

@@ -5,8 +5,10 @@ import { GlobalStyle } from '@styles/globalStyle'
 import { ThemeProvider } from 'styled-components'
 import { theme } from '@styles/theme'
 import queryClient from '@apis/queryClient'
-import App from './App'
 import { SkeletonTheme } from 'react-loading-skeleton'
+import { ToastContainer } from 'react-toastify'
+import App from './App'
+import 'react-toastify/ReactToastify.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -16,6 +18,11 @@ createRoot(document.getElementById('root')!).render(
           baseColor='#313131'
           highlightColor='#525252'
         >
+          <ToastContainer
+            position='top-center'
+            autoClose={3000}
+            closeOnClick
+          />
           <GlobalStyle />
           <App />
         </SkeletonTheme>

src/pages/GoodsRecordPage/index.tsx

@@ -1,8 +1,9 @@
 import SubHeader from '@layouts/SubHeader'
 import GoodsRecordBox from './GoodsRecordBox'
 import { GoodsSection, NoGoodsList } from './style'
-import { useEffect, useRef, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+
+import { useEffect, useState } from 'react'
+import { useLocation, useParams } from 'react-router-dom'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { QUERY_KEY } from '@apis/queryClient'
 import userService from '@apis/userService'
@@ -26,6 +27,7 @@ interface GoodsRecord {
 
 const GoodsRecordPage = () => {
   const location = useLocation()
+  const { id } = useParams()
   const [memberId, setMemberId] = useState(1)
   const [pageType, setPageType] = useState<('sold' | 'bought') | null>(
     location.state.type,
@@ -39,7 +41,7 @@ const GoodsRecordPage = () => {
 
       queryFn: ({ pageParam }) =>
         pageType &&
-        userService.getGoodsRecordList(memberId, pageType, pageParam),
+        userService.getGoodsRecordList(Number(id), pageType, pageParam),
 
       initialPageParam: 0,
 

src/pages/ProfilePage/ProfileEdit.tsx

@@ -2,6 +2,7 @@ import {
   ProfileEditInputWrap,
   ProfileImageEdit,
   ProfileImageEditWrap,
+  ProfileSpinnerWrap,
 } from './style'
 import { FormEvent, useEffect, useState } from 'react'
 import { handleImageUpload } from './methods'
@@ -13,15 +14,23 @@ import useTeamDialog from '@hooks/useTeamDialog'
 import BottomModalOption from './BottomModalOption'
 import SubHeader from '@layouts/SubHeader'
 import useEditMyInfo from '@hooks/useEditMyInfo'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { UserInfo } from '@typings/userForm'
 import { kboTeamInfo } from '@constants/kboInfo'
+import { toast } from 'react-toastify'
+import { ROUTE_PATH } from '@constants/ROUTE_PATH'
+import Spinner from '@components/Spinner'
+import { useUserStore } from '@store/useUserStore'
 
 // 소개글 글자제한
 const MAX_LENGTH = 500
 
 const ProfileEdit = () => {
   const location = useLocation()
+  const navigate = useNavigate()
+
+  const { memberId } = useUserStore().userInfo
+
   const [isUpload, setIsUpload] = useState(false)
   const [currentTeamId, setCurrentTeamId] = useState<number | null>(null)
   const [profileImg, setProfileImg] = useState<File | undefined>(undefined)
@@ -30,7 +39,7 @@ const ProfileEdit = () => {
     undefined,
   )
 
-  const { mutateMyInfo, error, isError, isPending } = useEditMyInfo()
+  const { mutateMyInfo, error, isError, isPending, isSuccess } = useEditMyInfo()
 
   // 프로파일 수정 사항 서브밋
   const onProfileEditSubmit = (e: FormEvent<HTMLFormElement>) => {
@@ -51,7 +60,10 @@ const ProfileEdit = () => {
     )
     profileImg && formData.append('image', profileImg)
 
-    mutateMyInfo(formData)
+    try {
+      mutateMyInfo(formData)
+      navigate(`${ROUTE_PATH.PROFILE}/${memberId}`)
+    } catch (err) {}
   }
 
   // 소개글 글자제한
@@ -95,6 +107,11 @@ const ProfileEdit = () => {
     <>
       {/* 폼 (내용) */}
       <form onSubmit={onProfileEditSubmit}>
+        {isPending ? (
+          <ProfileSpinnerWrap>
+            <Spinner />
+          </ProfileSpinnerWrap>
+        ) : null}
         {/* 서브헤더 */}
         <SubHeader
           left='exit'
@@ -158,7 +175,7 @@ const ProfileEdit = () => {
             }}
           ></textarea>
           <p>
-            {userInfo?.aboutMe.length}/{MAX_LENGTH}
+            {userInfo?.aboutMe ? userInfo?.aboutMe.length : '0'}/{MAX_LENGTH}
           </p>
         </ProfileEditInputWrap>