From d107e36a9ab6eb8fa9379d814a99e567dcf2d123 Mon Sep 17 00:00:00 2001 From: JAEMOONLEE Date: Fri, 27 Oct 2023 10:42:10 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=9A=B0=EC=84=A0=EC=BB=A4=EB=B0=8B..?= =?UTF-8?q?...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Nav/Nav.tsx | 8 ++++---- components/ProfileCard/index.tsx | 27 ++++++++++++--------------- pages/userInfo/editProfile.tsx | 21 ++++++++++++--------- pages/userInfo/index.tsx | 10 +--------- public/types/user.ts | 18 ++++++++++++++++-- 5 files changed, 45 insertions(+), 39 deletions(-) diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx index ab678d1..cb89b9a 100644 --- a/components/Nav/Nav.tsx +++ b/components/Nav/Nav.tsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from 'react'; +/* eslint-disable no-self-compare */ +import React, { useState } from 'react'; import Like from '@/public/icons/like.svg'; import Home from '@/public/icons/home.svg'; import Me from '@/public/icons/me.svg'; import { useRouter } from 'next/router'; -import useUserInfo from '@/hooks/useUserInfo.ts'; import { UserInfoProps } from '@/context/UserInfoProvider.tsx'; import styles from './Nav.module.scss'; @@ -37,13 +37,13 @@ export default function Nav({ initMenu, profile }: NavProps) { const [hoverMenu, setHoverMenu] = useState(-1); // 초기화 const router = useRouter(); const handleNavClicked = (index: number) => { - if (menus[index].router || '' !== '' ) { + if (menus[index].router || '' !== '') { router.push( { pathname: menus[index].router, query: { data: profile && JSON.stringify(profile) }, }, - `${menus[index].router}` + `${menus[index].router}`, ); } }; diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx index 35e025a..58361ea 100644 --- a/components/ProfileCard/index.tsx +++ b/components/ProfileCard/index.tsx @@ -11,15 +11,8 @@ import Vector from '@/public/icons/Vector 115.svg'; import { useRouter } from 'next/router'; import useModal from '@/hooks/useModal.ts'; import { signOut } from 'next-auth/react'; -import { User } from '@/public/types/user'; - -interface ProfileCardProps { - name: string; - age: number; - gender: 'Male' | 'Female'; - imageSrc: string; - userInfo: User -} +import { Profile } from '@/public/types/user'; +import { formatAge } from '@/utils/transform'; interface ListItemProps { IconComponent: React.FC>; @@ -27,13 +20,18 @@ interface ListItemProps { route: string; index: number; onclick?: () => void; - } -export default function ProfileCard({ name, age, gender, imageSrc, userInfo }: ProfileCardProps) { +interface ProfileCard { + userInfo: Profile; + imageSrc: string; +} + +export default function ProfileCard({ imageSrc, userInfo }: ProfileCard) { const { register } = useForm({ mode: 'onChange' }); const [showModal, setShowModal] = useState(false); const [hoveredIndex, setHoveredIndex] = useState(null); + const age = formatAge(userInfo.birthDate); const router = useRouter(); const { openModal } = useModal(); @@ -42,7 +40,6 @@ export default function ProfileCard({ name, age, gender, imageSrc, userInfo }: setShowModal(true); return; } - debugger; router.push(route); }; @@ -117,12 +114,12 @@ export default function ProfileCard({ name, age, gender, imageSrc, userInfo }:
- {' + {'
-
{name}
+
{userInfo?.firstName}
- {age} years old | {gender} + {age} years old | {userInfo?.gender}
diff --git a/pages/userInfo/editProfile.tsx b/pages/userInfo/editProfile.tsx index bc04795..057684b 100644 --- a/pages/userInfo/editProfile.tsx +++ b/pages/userInfo/editProfile.tsx @@ -2,9 +2,9 @@ /* eslint-disable jsx-a11y/alt-text */ /* eslint-disable react/no-unstable-nested-components */ /* eslint-disable react/style-prop-object */ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { FieldValues, SubmitHandler, FieldError, useForm as UseForm } from 'react-hook-form'; -import useModal from '@/hooks/useModal.ts'; +import DefaultImage from '@/public/icons/def_img.svg'; import { isValidEmail, isRequired } from '@/utils/validCheck.ts'; import { Textarea, Button, Upload, Input, Calendar } from '@/components/index.tsx'; import ProfileCamera from '@/public/icons/profileCamera.svg'; @@ -13,25 +13,28 @@ import { modifyProfile } from '@/api/userInfo'; interface ProfileProps { _imageSrc: string; - userInfo: User; + userInfo: Profile; } interface ImageComponentClickProps { - imageSrc: string; onClick?: () => void; } export default function EditProfile({ _imageSrc, userInfo }: ProfileProps) { - const { openModal } = useModal(); + useEffect(() => { + console.log('_imageSrc', _imageSrc); + console.log('userInfo in editprofile', userInfo); + debugger; + }, []); const [imageSrc, setImageSrc] = useState(_imageSrc); const subHeader = 'font-pretendard font-semibold text-[16px]'; const { register, watch, - setValue, handleSubmit, formState: { errors }, } = UseForm({ mode: 'onChange' }); + // Backend 에서 보내주는 문자열 형식이랑 맞추기 위해 추가 const capitalizeFirstLetter = (str: string) => { return (str || '').charAt(0).toUpperCase() + (str || '').slice(1).toLowerCase(); }; @@ -60,7 +63,7 @@ export default function EditProfile({ _imageSrc, userInfo }: ProfileProps) { const isPostingComplete = () => { return ( - (imageSrc || _imageSrc || '') === '' || + (imageSrc || '') === '' || !watch('email') || !!errors.email?.message || !watch('firstName') || @@ -80,7 +83,7 @@ export default function EditProfile({ _imageSrc, userInfo }: ProfileProps) { const genderButtons = [{ label: 'Male' }, { label: 'Female' }, { label: 'Others' }]; - const ProfileImage = ({ imageSrc, onClick }: ImageComponentClickProps) => { + const ProfileImage = ({ onClick }: ImageComponentClickProps) => { return (
@@ -94,7 +97,7 @@ export default function EditProfile({ _imageSrc, userInfo }: ProfileProps) { alignItems: 'center', }} > - + {(imageSrc || '') !== '' ? : }
- +
diff --git a/public/types/user.ts b/public/types/user.ts index 3517d20..971c057 100644 --- a/public/types/user.ts +++ b/public/types/user.ts @@ -19,18 +19,32 @@ export interface User { authorities: [ { authority: 'ROLE_USER'; - } + }, ]; username: string; accountNonLocked: boolean; enabled: boolean; } +export interface ImageFile { + deleted: boolean; + createdAt: string; + updatedAt: string; + id: number; + path: string; + size: number; +} + export interface Profile { - profileId : number; + profileId: number; gender: string; firstName: string; lastName: string; birthDate: string; description: string; + email: string; + id: number; + imageFile: ImageFile; + userRole: string; + signUpStatus: string; }