diff --git a/src/components/user/auth-form/ProfileImageContainer.tsx b/src/components/user/auth-form/ProfileImageContainer.tsx index 97c55b2e..65c4c42c 100644 --- a/src/components/user/auth-form/ProfileImageContainer.tsx +++ b/src/components/user/auth-form/ProfileImageContainer.tsx @@ -7,7 +7,7 @@ import useToast from '@hooks/useToast'; import { useEffect } from 'react'; type ProfileImageContainerProps = { - imageUrl: string; + imageUrl: string | null; setImageUrl: (url: string) => void; }; @@ -34,12 +34,12 @@ export default function ProfileImageContainer({ imageUrl, setImageUrl }: Profile const image = URL.createObjectURL(file); setImageUrl(image); - setValue('profileImageUrl', image); + setValue('profileImageName', image); }; const handleRemoveImg = () => { setImageUrl(''); - setValue('profileImageUrl', ''); + setValue('profileImageName', ''); }; return ( diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts index efb36012..2c955574 100644 --- a/src/mocks/mockData.ts +++ b/src/mocks/mockData.ts @@ -23,12 +23,12 @@ type ProjectUser = { export const JWT_TOKEN_DUMMY = 'mocked-header.mocked-payload-4.mocked-signature'; export const USER_INFO_DUMMY = { - // provider: 'LOCAL', - // userId: 1, + provider: 'LOCAL', + userId: 1, username: 'test123', email: 'momoco@gmail.com', nickname: 'momoco', - profileImageUrl: '', + profileImageName: null, bio: "Hi, I'm Momoco!", links: ['momoco@github.com'], }; @@ -43,7 +43,7 @@ export const USER_DUMMY: User[] = [ nickname: '판다', bio: '풀스택 개발자를 목표중', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 2, @@ -53,7 +53,7 @@ export const USER_DUMMY: User[] = [ nickname: '카멜레온', bio: '디자이너 + 프론트엔드 육각형 인재', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 3, @@ -63,7 +63,7 @@ export const USER_DUMMY: User[] = [ nickname: '랫서판다', bio: '급성장중인 프론트엔드 취준생', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 4, @@ -73,7 +73,7 @@ export const USER_DUMMY: User[] = [ nickname: '북금곰', bio: '힘을 숨긴 프론트엔드 취준생', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 5, @@ -83,7 +83,7 @@ export const USER_DUMMY: User[] = [ nickname: '호랑이', bio: '백엔드 5년차', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 6, @@ -93,7 +93,7 @@ export const USER_DUMMY: User[] = [ nickname: '나무늘보', bio: '식스센스 초감각형 풀스택 개발자', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 7, @@ -103,7 +103,7 @@ export const USER_DUMMY: User[] = [ nickname: '웜뱃', bio: '초럭키비키 백엔드 개발자', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 8, @@ -113,7 +113,7 @@ export const USER_DUMMY: User[] = [ nickname: '벨루가', bio: '팔방미인 디자이너', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 9, @@ -123,7 +123,7 @@ export const USER_DUMMY: User[] = [ nickname: '펭귄', bio: 'MySQL, Postgre SQL DBA', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 10, @@ -133,7 +133,7 @@ export const USER_DUMMY: User[] = [ nickname: '비버', bio: 'DevOps 3년차', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 11, @@ -143,7 +143,7 @@ export const USER_DUMMY: User[] = [ nickname: '판다아빠', bio: '풀스택 개발자 10년차', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 12, @@ -153,7 +153,7 @@ export const USER_DUMMY: User[] = [ nickname: '판다엄마', bio: '디자이너 10년차', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 13, @@ -163,7 +163,7 @@ export const USER_DUMMY: User[] = [ nickname: '판다형', bio: 'DevOps 2년차', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 14, @@ -173,7 +173,7 @@ export const USER_DUMMY: User[] = [ nickname: '판다누나', bio: 'DBA 2년차', links: [], - profileImageUrl: null, + profileImageName: null, }, { userId: 15, @@ -183,7 +183,7 @@ export const USER_DUMMY: User[] = [ nickname: '판다동생', bio: '미래의 슈퍼 개발자', links: [], - profileImageUrl: null, + profileImageName: null, }, ] as const; diff --git a/src/pages/setting/UserSettingPage.tsx b/src/pages/setting/UserSettingPage.tsx index 1569929b..67ef71ee 100644 --- a/src/pages/setting/UserSettingPage.tsx +++ b/src/pages/setting/UserSettingPage.tsx @@ -18,13 +18,13 @@ export default function UserSettingPage() { nickname: userInfoData.nickname, bio: userInfoData.bio, links: userInfoData.links, - profileImageUrl: userInfoData.profileImageUrl, + profileImageName: userInfoData.profileImageName, }, }); // form 전송 함수 const onSubmit = async (data: EditUserInfoForm) => { - const { username, email, profileImageUrl, ...filteredData } = data; + const { username, email, profileImageName, ...filteredData } = data; console.log(data); // TODO: 폼 제출 로직 작성 @@ -36,8 +36,8 @@ export default function UserSettingPage() {
{/* 프로필 이미지 */} methods.setValue('profileImageUrl', url)} + imageUrl={methods.watch('profileImageName')} + setImageUrl={(url: string) => methods.setValue('profileImageName', url)} /> {/* 아이디 */} diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx index 293ce37b..8295fe81 100644 --- a/src/pages/user/SignUpPage.tsx +++ b/src/pages/user/SignUpPage.tsx @@ -19,21 +19,21 @@ export default function SignUpPage() { const methods = useForm({ mode: 'onChange', defaultValues: { - username: '', + username: null, email: '', code: '', nickname: '', password: '', checkPassword: '', - bio: '', + bio: null, links: [], - profileImageUrl: '', + profileImageName: null, }, }); // form 전송 함수 const onSubmit = async (data: UserSignUpForm) => { - const { username, code, checkPassword, profileImageUrl, ...filteredData } = data; + const { username, code, checkPassword, profileImageName, ...filteredData } = data; console.log(data); const verifyResult = verifyCode(methods.watch('code'), methods.setError); @@ -42,17 +42,19 @@ export default function SignUpPage() { // TODO: 폼 제출 로직 수정 필요 try { // 회원가입 폼 - const formData = { ...filteredData, username, code, profileImageUrl }; + const formData = { ...filteredData, username, code, profileImageName }; const registrationResponse = await axios.post(`http://localhost:8080/api/v1/user/${username}`, formData); if (registrationResponse.status !== 200) return toastError('회원가입에 실패했습니다. 다시 시도해 주세요.'); // 이미지 폼 - if (!methods.watch('profileImageUrl')) return toastSuccess('회원가입이 완료되었습니다.'); + if (!methods.watch('profileImageName')) return toastSuccess('회원가입이 완료되었습니다.'); const imgFormData = new FormData(); try { - const jpeg = await reduceImageSize(profileImageUrl); + if (!profileImageName) return; + + const jpeg = await reduceImageSize(profileImageName); const file = new File([jpeg], new Date().toISOString(), { type: 'image/jpeg' }); - imgFormData.append('profileImageUrl', file); + imgFormData.append('profileImageName', file); imgFormData.append('username', username ?? ''); const imageResponse = await axios.post(`http://localhost:8080/api/v1/users/file`, imgFormData, { @@ -75,8 +77,8 @@ export default function SignUpPage() { {/* 프로필 이미지 */} methods.setValue('profileImageUrl', url)} + imageUrl={methods.watch('profileImageName')} + setImageUrl={(url: string) => methods.setValue('profileImageName', url)} /> {/* 아이디 */} diff --git a/src/services/authService.ts b/src/services/authService.ts index d294c330..e54ee996 100644 --- a/src/services/authService.ts +++ b/src/services/authService.ts @@ -1,7 +1,7 @@ import { authAxios, defaultAxios } from '@services/axiosProvider'; import type { AxiosRequestConfig } from 'axios'; -import type { EditUserInfoForm, UserSignInForm } from '@/types/UserType'; +import type { User, UserSignInForm } from '@/types/UserType'; /** * 사용자 로그인 API @@ -34,10 +34,10 @@ export async function getAccessToken(axiosConfig: AxiosRequestConfig = {}) { * @export * @async * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체 - * @returns {Promise>} + * @returns {Promise>} */ export async function getUserInfo(axiosConfig: AxiosRequestConfig = {}) { - return authAxios.get('user/me', axiosConfig); + return authAxios.get('user/me', axiosConfig); } /** diff --git a/src/stores/useStore.ts b/src/stores/useStore.ts index 60e55f0e..360b51b0 100644 --- a/src/stores/useStore.ts +++ b/src/stores/useStore.ts @@ -2,7 +2,7 @@ import { create, StateCreator } from 'zustand'; import { persist, createJSONStorage } from 'zustand/middleware'; import { AUTH_SETTINGS } from '@constants/settings'; import { decrypt, encrypt } from '@utils/cryptoHelper'; -import { EditUserInfoForm } from '@/types/UserType'; +import { User } from '@/types/UserType'; // Auth Slice type AuthStore = { @@ -16,8 +16,8 @@ type AuthStore = { // User Slice type UserStore = { - userInfo: EditUserInfoForm; - setUserInfo: (newUserInfo: EditUserInfoForm) => void; + userInfo: User; + setUserInfo: (newUserInfo: User) => void; }; // Combined Store @@ -58,14 +58,16 @@ const createAuthSlice: StateCreator = (set) => ({ // User Slice Creator const createUserSlice: StateCreator = (set) => ({ userInfo: { - username: '', + provider: 'LOCAL', + userId: 0, + username: null, email: '', nickname: '', - bio: '', + bio: null, links: [], - profileImageUrl: '', + profileImageName: null, }, - setUserInfo: (newUserInfo: EditUserInfoForm) => + setUserInfo: (newUserInfo: User) => set({ userInfo: newUserInfo, }), diff --git a/src/types/UserType.tsx b/src/types/UserType.tsx index faf33915..f889ebe1 100644 --- a/src/types/UserType.tsx +++ b/src/types/UserType.tsx @@ -8,7 +8,7 @@ export type User = { nickname: string; bio: string | null; links: string[]; - profileImageUrl: string; + profileImageName: string | null; }; export type UserWithRole = User & Role;