[feat] MyProfile -> Edit Profile 2차 수정

bsideproject · Oct 23, 2023 · d8af552 · d8af552
1 parent 886fabc
commit d8af552
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 41 deletions.
diff --git a/api/userInfo.ts b/api/userInfo.ts
@@ -34,4 +34,13 @@ export const makeLikedRooms = async (id: number) => {
         'Content-Type': 'application/json',
       },
     });
+}
+
+export const makeDisLikedRooms = async (id: number) => {
+  return await fetchData(`/api/v1/rooms/${id}/disLiked`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
 }
diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
@@ -21,7 +21,7 @@ function Input({ placeholder, register, type, error, maxLength, disabled, fixedW
     }
     return type;
   }, [type, isPasswordShow]);
-  const [inputValue, setInputValue] = useState('' as string);
+  const [inputValue, setInputValue] = useState(fixedWord || '' as string);
 
   const togglePasswordVisibility = () => {
     setIsPasswordShow((state) => !state);

diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
@@ -11,12 +11,14 @@ 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
 }
 
 interface ListItemProps {
@@ -25,9 +27,10 @@ interface ListItemProps {
   route: string;
   index: number;
   onclick?: () => void;
+
 }
 
-export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCardProps) {
+export default function ProfileCard({ name, age, gender, imageSrc,  userInfo }: ProfileCardProps) {
   const { register } = useForm({ mode: 'onChange' });
   const [showModal, setShowModal] = useState(false);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -39,6 +42,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
       setShowModal(true);
       return;
     }
+    debugger;
     router.push(route);
   };
 
@@ -50,7 +54,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
         custom: true,
         customHeader: true,
       },
-      children: <EditProfile _imageSrc={`${imageSrc}`} />,
+      children: <EditProfile _imageSrc={`${imageSrc}`} userInfo={userInfo} />,
     });
   };
 

diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx
@@ -10,11 +10,12 @@ import Camera from '@/public/icons/camera.svg';
 import styles from '@/pages/room/room.module.scss';
 import { useRouter } from 'next/router';
 import Card from '../Card/Card';
-import { makeLikedRooms } from '@/api/userInfo';
+import { makeLikedRooms, makeDisLikedRooms } from '@/api/userInfo';
 
 interface CardProps {
   room: RoomSearch;
   onClick?: () => void;
+  isLikedRooms?: boolean;
 }
 
 interface UserInfoProps {
@@ -81,12 +82,12 @@ const Photo = ({ photos, onClick }: PhotoProps) => {
   );
 };
 
-const Footer = ({ room }: CardProps) => {
+const Footer = ({ room, isLikedRooms }: CardProps) => {
   const roomType = room.roomInfo.roomType === ROOM_TYPE.ONE_ROOM ? '1bed flats' : '';
-  const [isLiked, setIsLiked] = useState(false);
+  const [isLiked, setIsLiked] = useState(false || isLikedRooms);
   const handleLikeClick = async () => {
     try {
-      await makeLikedRooms(room?.id);
+      !isLiked ? await makeLikedRooms(room?.id) : await makeDisLikedRooms(room?.id);
       setIsLiked(!isLiked);
     } catch (error) {
       console.error('[ERROR] in Liked Clicked', error);
@@ -125,12 +126,12 @@ const Footer = ({ room }: CardProps) => {
   );
 };
 
-export default function RoomCard({ room, onClick }: CardProps) {
+export default function RoomCard({ room, onClick, isLikedRooms }: CardProps) {
   return (
     <Card
       title={<UserInfo userInfo={room?.user} />}
       content={<Photo photos={room.images || []} onClick={onClick} />}
-      footer={<Footer room={room} />}
+      footer={<Footer room={room} isLikedRooms={isLikedRooms} />}
     />
   );
 }
diff --git a/pages/liked/index.tsx b/pages/liked/index.tsx
@@ -205,10 +205,9 @@ export default function Liked({ roomInfo }: MyPostingProps) {
         </Typography>
         {rooms.map((room, idx) => (
           <div className={`mt-[20px] ${rooms.length - 1 === idx ? 'mb-[83px]' : ''}`} key={`room-${idx}`}>
-            <RoomCard room={room} onClick={() => handleCardClick(room.id)} />
+            <RoomCard room={room} onClick={() => handleCardClick(room.id)} isLikedRooms />
           </div>
         ))} 
-         <div ref={target} /> 
         <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
           <div className="w-full">
             <div className="mb-[13px] space-x-[8px] max-w-max">
@@ -220,10 +219,6 @@ export default function Liked({ roomInfo }: MyPostingProps) {
       </div>
     );
   };
-
-  /**
-   * 좋아요 있을 때 보여주는 Component (TODO : 구체화 해줘야함)
-   */
   return (rooms || []).length === 0 ? <NoPostings /> : <LikedComponent />;
 }
 

diff --git a/pages/userInfo/editProfile.tsx b/pages/userInfo/editProfile.tsx
@@ -2,41 +2,42 @@
 /* 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 { isValidEmail } from '@/utils/validCheck.ts';
+import { isValidEmail, isRequired } from '@/utils/validCheck.ts';
 import { Textarea, Button, Upload, Input, Calendar } from '@/components/index.tsx';
 import ProfileCamera from '@/public/icons/profileCamera.svg';
+import { User } from '@/public/types/user';
+import isEmpty from 'lodash-es/isEmpty';
 
-/*
-interface ProfileProps {
-  name?: string;
-  age?: number;
-  gender?: 'Male' | 'Female';
-  _imageSrc: string;
-}
-*/
 interface ProfileProps {
   _imageSrc: string;
+  userInfo: User
 }
 
 interface ImageComponentClickProps {
   imageSrc: string;
   onClick?: () => void;
 }
 
-export default function EditProfile({ _imageSrc }: ProfileProps) {
+export default function EditProfile({ _imageSrc, userInfo }: ProfileProps) {
   const { openModal } = useModal();
   const [imageSrc, setImageSrc] = useState(_imageSrc);
   const subHeader = 'font-pretendard font-semibold text-[16px]';
   const {
     register,
     watch,
+    setValue,
     handleSubmit,
     formState: { errors },
   } = UseForm({ mode: 'onChange' });
-  const [buttonState, setButtonState] = useState('Male');
+
+  const capitalizeFirstLetter = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  }
+
+  const [buttonState, setButtonState] = useState(capitalizeFirstLetter(userInfo?.gender));
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     openModal({
@@ -98,7 +99,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
       </div>
     );
   };
-
+  
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="h-screen overflow-y-scroll font-pretendard">
@@ -124,10 +125,12 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
             placeholder="Your email"
             register={register('email', {
               validate: (value) => {
-                return isValidEmail(value, `Invalid email`);
+                return isRequired(value, '필수 항목') || isValidEmail(value, `Invalid email`);
+                // return true;
               },
             })}
             error={errors.email as FieldError}
+            fixedWord={userInfo?.email || ''}
           />
         </div>
         <div className="py-[28px]">
@@ -138,22 +141,16 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
             <Input
               placeholder="First Name"
               type="text"
-              register={register('firstName', {
-                validate: () => {
-                  return true;
-                },
-              })}
+              register={register('firstName')}
+              fixedWord={userInfo?.firstName || ''}
             />
           </div>
           <div className="mb-[8px]">
             <Input
               placeholder="Last Name"
               type="text"
-              register={register('lastName', {
-                validate: () => {
-                  return true;
-                },
-              })}
+              register={register('lastName')}
+              fixedWord={userInfo?.lastName || ''}
             />
           </div>
         </div>
@@ -180,7 +177,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
           <div className={subHeader}>Date of birth</div>
         </div>
         <section className="mb-[8px]">
-          <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateOfBirth')} />
+          <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateOfBirth')} value={userInfo?.birthDate}/>
         </section>
         <div className="mb-[12px] mt-[32px]">
           <div className={subHeader}>About you</div>
@@ -191,6 +188,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
             register={register('describe')}
             maxByte={250}
             className="h-[172px] text-g7 border-g4 border-[1px]"
+            initValue={userInfo?.description || ''}
           />
         </div>
         <div className="mt-[255px] fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">

diff --git a/pages/userInfo/index.tsx b/pages/userInfo/index.tsx
@@ -14,7 +14,7 @@ export default function UserProfile({ imgSrc }: UserProfileProps) {
   const age = formatAge(userInfo.birthDate);
   return (
     <>
-      <ProfileCard age={age} name={userInfo.firstName} gender={userInfo.gender} imageSrc={userInfo.image || imgSrc} />
+      <ProfileCard age={age} name={userInfo.firstName} gender={userInfo.gender} imageSrc={userInfo.image || 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">