diff --git a/src/Router.tsx b/src/Router.tsx index 8f2f9fd..25ce045 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -28,7 +28,7 @@ import Auth from './pages/Auth'; import InitAccessRights from './pages/Auth/components/Init/components/initAccessRights'; import Submitted from './pages/Goods/components/Submitted'; import Profile from './pages/Mypage/components/Profile'; -import Edit from './pages/Mypage/components/Edit'; +import Edit from './pages/Mypage/components/EditProfile'; export default function Router() { // recoil state로 access roles 관리 diff --git a/src/api/mypage.ts b/src/api/mypage.ts index 25a7436..c102dcb 100644 --- a/src/api/mypage.ts +++ b/src/api/mypage.ts @@ -1,9 +1,10 @@ +import { MemberInfoDto } from '@src/types/user'; import jigumeAxios from './axios'; -const getProfile = async () => { +const getProfile = async (): Promise => { const response = await jigumeAxios.get('/api/member/profile'); - return response; + return response.data; }; export default getProfile; diff --git a/src/api/user.ts b/src/api/user.ts index 990361a..b23590f 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -96,9 +96,17 @@ export const updateProfile = async (param: NewProfileType) => { const formData = new FormData(); formData.append('UpdateMemberInfoDto', blobData); - const response = await jigumeAxios.post('/api/member/info', { - data: formData, - }); + const response = await jigumeAxios.post( + '/api/member/info', + { + data: formData, + }, + { + headers: { + 'Content-Type': 'multipart/form-data', + }, + } + ); console.log(response); return response; diff --git a/src/pages/Mypage/components/Edit.tsx b/src/pages/Mypage/components/EditProfile.tsx similarity index 84% rename from src/pages/Mypage/components/Edit.tsx rename to src/pages/Mypage/components/EditProfile.tsx index 74384bc..c651815 100644 --- a/src/pages/Mypage/components/Edit.tsx +++ b/src/pages/Mypage/components/EditProfile.tsx @@ -8,15 +8,21 @@ import { handleTextFieldColor, validNickname } from '../../../utils'; import CircularProgress from '../../Auth/components/Init/components/circularProgress'; import { MyPageContextType, NewProfileType } from '../index.d'; -export default function Edit() { - const { setTitle } = useOutletContext(); +export default function EditProfile() { + const { setProfileHeader, profile } = useOutletContext(); const [valid, setValid] = useState(false); const [newProfile, setNewProfile] = useState({ nickname: '', image: undefined, }); + const [isChanged, setIsChanged] = useState({ + image: false, + nickname: false, + }); const handleNickname = (text: string) => { + setIsChanged((prev) => ({ ...prev, nickname: true })); + setValid(validNickname(text)); setNewProfile((prev) => ({ ...prev, nickname: text })); }; @@ -39,7 +45,11 @@ export default function Edit() { }; useEffect(() => { - setTitle(''); + // 수정 페이지 헤더 조정 + setProfileHeader((prev) => ({ + title: '', + isAlert: false, + })); }, []); const { @@ -69,13 +79,16 @@ export default function Edit() { className="hidden" id="image" onChange={(e) => { - if (e.target.files) encodeFileToBase64(e.target.files[0]); + if (e.target.files) { + encodeFileToBase64(e.target.files[0]); + setIsChanged((prev) => ({ ...prev, image: true })); + } }} />
프로필 이미지 1) && !valid} + isDisabled={!(isChanged.image || (isChanged.nickname && valid))} />
); diff --git a/src/pages/Mypage/components/MyPageHeader.tsx b/src/pages/Mypage/components/MyPageHeader.tsx index f5807fe..bae1e22 100644 --- a/src/pages/Mypage/components/MyPageHeader.tsx +++ b/src/pages/Mypage/components/MyPageHeader.tsx @@ -1,8 +1,9 @@ import { useNavigate } from 'react-router-dom'; import ChevronLeft from '../../../asset/icon/chevronLeft.svg'; import Notification from '../../../asset/icon/Notification.svg'; +import { ProfileHeaderType } from '../index.d'; -export default function MyPageHeader({ title }: { title: string }) { +export default function MyPageHeader({ title, isAlert }: ProfileHeaderType) { const navigate = useNavigate(); return (
@@ -16,9 +17,11 @@ export default function MyPageHeader({ title }: { title: string }) {
{title}
- + {isAlert && ( + + )} ); } diff --git a/src/pages/Mypage/components/Profile.tsx b/src/pages/Mypage/components/Profile.tsx index 3b3a27e..34945c6 100644 --- a/src/pages/Mypage/components/Profile.tsx +++ b/src/pages/Mypage/components/Profile.tsx @@ -15,7 +15,7 @@ export default function Profile() { const navigate = useNavigate(); const resetAuth = useResetRecoilState(authState); - const { setTitle } = useOutletContext(); + const { setProfileHeader } = useOutletContext(); const logout = useMutation('logout', () => kakaoLogout(), { onMutate: () => console.log('RUN logout'), @@ -25,15 +25,8 @@ export default function Profile() { }, }); - // useQuery를 사용하여 fetch 함수 실행 (getProfile) - const { data: profile } = useQuery('getProfile', () => getProfile(), { - onSuccess: (data) => { - console.log(data); - }, - }); - useEffect(() => { - setTitle('마이페이지'); + setProfileHeader({ title: '마이페이지', isAlert: true }); }, []); return ( diff --git a/src/pages/Mypage/index.d.ts b/src/pages/Mypage/index.d.ts index b83cbd1..cfafdbd 100644 --- a/src/pages/Mypage/index.d.ts +++ b/src/pages/Mypage/index.d.ts @@ -1,8 +1,16 @@ +import { MemberInfoDto } from '@src/types/user'; + export type MyPageContextType = { - setTitle: React.Dispatch>; + setProfileHeader: React.Dispatch>; + profile: MemberInfoDto; }; export type NewProfileType = { nickname: string; image: string | undefined; }; + +export type ProfileHeaderType = { + title: string; + isAlert: boolean; +}; diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx index 1f5e671..3e70651 100644 --- a/src/pages/Mypage/index.tsx +++ b/src/pages/Mypage/index.tsx @@ -1,13 +1,29 @@ import React, { useState } from 'react'; import { Outlet } from 'react-router-dom'; +import getProfile from '@src/api/mypage'; +import { useQuery } from 'react-query'; import MyPageHeader from './components/MyPageHeader'; +import { ProfileHeaderType } from './index.d'; export default function Mypage() { - const [title, setTitle] = useState('마이페이지'); + // useQuery를 사용하여 fetch 함수 실행 (getProfile) + const { data: profile } = useQuery('getProfile', () => getProfile(), { + onSuccess: (data) => { + console.log(data); + }, + }); + + const [profileHeader, setProfileHeader] = useState({ + title: '마이페이지', + isAlert: true, + }); return ( <> - - + + ); } diff --git a/src/types/user.d.ts b/src/types/user.d.ts index 66a059d..660d5bd 100644 --- a/src/types/user.d.ts +++ b/src/types/user.d.ts @@ -2,3 +2,10 @@ export type TokenProviderType = { tokenDto: { accessToken: string; refreshToken: string }; baseRole: 'ADMIN' | 'USER' | 'GUEST'; }; + +export type MemberInfoDto = { + nickname: string; + profileImageUrl: string; + mapX: number; + mapY: number; +};