Merge pull request #204 from bsideproject/feature/user

[feat] 사용자 정보쪽 우선커밋.....

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}`,
       );
     }
   };

components/ProfileCard/index.tsx

@@ -11,29 +11,27 @@ 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<React.SVGProps<SVGSVGElement>>;
   text: string;
   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<number | null>(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 }:
       <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0 mt-[50px]">
         <div className="flex w-full">
           <div className="ml-[20px] w-[52px] h-[72px] flex items-center justify-center mt-[20px]">
-            <img src={imageSrc} alt={' '} />
+            <img src={imageSrc || ''} alt={' '} />
           </div>
           <div className="flex flex-col justify-center pl-5 h-[72px] mt-[17px]">
-            <div className="text-lg font-bold">{name}</div>
+            <div className="text-lg font-bold">{userInfo?.firstName}</div>
             <div className="text-base">
-              {age} years old | {gender}
+              {age} years old | {userInfo?.gender}
             </div>
           </div>
           <div className="ml-auto flex items-center pr-4">

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 (
       <div className="flex justify-center items-center h-[90px] mt-[20px] mb-[36px]" onClick={onClick}>
         <div style={{ position: 'relative', width: 90, height: 90 }} className="flex items-center justify-center">
@@ -94,7 +97,7 @@ export default function EditProfile({ _imageSrc, userInfo }: ProfileProps) {
               alignItems: 'center',
             }}
           >
-            <img src={imageSrc || _imageSrc} className="object-cover w-full h-full" />
+            {(imageSrc || '') !== '' ? <img src={imageSrc} className="object-cover w-full h-full" /> : <DefaultImage />}
           </div>
           <div
             className="absolute border-g2 border-[1px] bottom-0 right-0 bg-g0 flex items-center justify-center"

pages/userInfo/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Nav, ProfileCard } from '@/components/index.tsx';
 import { useRouter } from 'next/router';
-import { formatAge, formatDate, formatPrice } from '@/utils/transform';
 
 interface UserProfileProps {
   imgSrc: string;
@@ -11,16 +10,9 @@ export default function UserProfile({ imgSrc }: UserProfileProps) {
   const router = useRouter();
   const { query } = router;
   const userInfo = query.data ? JSON.parse(query.data as string) : {};
-  const age = formatAge(userInfo.birthDate);
   return (
     <>
-      <ProfileCard
-        age={age}
-        name={userInfo.firstName}
-        gender={userInfo.gender}
-        imageSrc={userInfo.image || imgSrc}
-        userInfo={userInfo}
-      />
+      <ProfileCard imageSrc={userInfo.imageFile?.path || imgSrc} userInfo={userInfo} />
       <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">

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;
 }