From b9cde7c15c024271e576f590e3a104f0fce393b8 Mon Sep 17 00:00:00 2001
From: JAEMOON <jaemoonzzang@naver.com>
Date: Wed, 1 Nov 2023 21:27:32 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20UserProfile=20Page=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx          | 17 ++---------------
 pages/userInfo/index.tsx | 28 +++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 7d5227b..e6e1b7d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,8 +11,6 @@ import useModal from '@/hooks/useModal.ts';
 import Filter from '@/components/Filter/Filter.tsx';
 import { getRooms } from '@/api/room';
 import isEmpty from 'lodash-es/isEmpty';
-import { getProfile } from '@/api/userInfo';
-import { UserInfoProps } from '@/context/UserInfoProvider.tsx';
 
 type HomeProps = NextPage & {
   getLayout: (page: React.ReactElement, ctx: NextPageContext) => React.ReactNode;
@@ -36,7 +34,6 @@ const defaultFilters = Object.values(FILTER_LABEL).map((value) => {
 
 function Home() {
   const [rooms, setRooms] = useState<RoomSearch[]>([]);
-  const [profile, setProfile] = useState<UserInfoProps>();
   const [filters, setFilters] = useState<{ selected: boolean; value: string }[]>(defaultFilters);
   const [clickedChip, setClickedChip] = useState(-1);
   const router = useRouter();
@@ -83,16 +80,6 @@ function Home() {
     setSearchParams(childData);
     setRooms([]);
   };
-  const selectProfile = async () => {
-    try {
-      const data = await getProfile();
-      if (data != null) {
-        setProfile(data);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
   const openFilterPopup = () => {
     openModal({
       props: {
@@ -130,7 +117,7 @@ function Home() {
   useEffect(() => {
     (async () => {
       await selectRooms();
-      await selectProfile();
+      // await selectProfile();
       if (target?.current) {
         const observer = new IntersectionObserver(callback, options);
         observer.observe(target.current);
@@ -229,7 +216,7 @@ function Home() {
       <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max z-20 border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">
-            <Nav profile={profile} />
+            <Nav />
           </div>
         </div>
       </div>
diff --git a/pages/userInfo/index.tsx b/pages/userInfo/index.tsx
index c5d37c1..183b5bf 100644
--- a/pages/userInfo/index.tsx
+++ b/pages/userInfo/index.tsx
@@ -1,18 +1,36 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Nav, ProfileCard } from '@/components/index.tsx';
 import { useRouter } from 'next/router';
+import { getProfile } from '@/api/userInfo';
+import { UserInfoProps } from '@/context/UserInfoProvider.tsx';
 
 interface UserProfileProps {
   imgSrc: string;
 }
 
 export default function UserProfile({ imgSrc }: UserProfileProps) {
-  const router = useRouter();
-  const { query } = router;
-  const userInfo = query.data ? JSON.parse(query.data as string) : {};
+  const [profile, setProfile] = useState<UserInfoProps>();
+  const selectProfile = async () => {
+    try {
+      const data = await getProfile();
+      if (data != null) {
+        setProfile(data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      await selectProfile();
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
-      <ProfileCard imageSrc={userInfo.imageFile?.path || imgSrc} userInfo={userInfo} />
+      {profile && <ProfileCard imageSrc={profile?.imageFile?.path || imgSrc} userInfo={profile} />}
       <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">