From ff6f95331350d21bbf83407963239a9caad16ecd Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 18:06:37 +0900
Subject: [PATCH 01/25] add interface

---
 types/favorite.interface.ts |  6 ++++++
 types/place.interface.ts    | 16 ++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 types/favorite.interface.ts
 create mode 100644 types/place.interface.ts

diff --git a/types/favorite.interface.ts b/types/favorite.interface.ts
new file mode 100644
index 0000000..51c4bbe
--- /dev/null
+++ b/types/favorite.interface.ts
@@ -0,0 +1,6 @@
+export interface IFavoritePlace {
+  uuid: string;
+  user_id: string;
+  place_id: string;
+  created_at: string;
+}
diff --git a/types/place.interface.ts b/types/place.interface.ts
new file mode 100644
index 0000000..f161d9d
--- /dev/null
+++ b/types/place.interface.ts
@@ -0,0 +1,16 @@
+export interface IPlace {
+  uuid: string;
+  name: string;
+  description: string;
+  location: string;
+  region: string;
+  staff_email: string;
+  image_url: string;
+  max_minutes: number;
+  max_concurrent_reservation: number;
+  opening_hours: string;
+  enable_auto_accept: string;
+  total_reservation_count: number;
+  createdAt: string;
+  updateAt: string;
+}

From 77636c951ac14b763fe7ef9e1735f0e38bee1e5d Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 18:06:55 +0900
Subject: [PATCH 02/25] add my-favorite page

---
 components/favorite/favorite-places.tsx | 54 +++++++++++++++++++++++++
 components/navbar/menu.item.user.tsx    |  1 +
 pages/auth/my-favorite.tsx              | 52 ++++++++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 components/favorite/favorite-places.tsx
 create mode 100644 pages/auth/my-favorite.tsx

diff --git a/components/favorite/favorite-places.tsx b/components/favorite/favorite-places.tsx
new file mode 100644
index 0000000..b5f6f7a
--- /dev/null
+++ b/components/favorite/favorite-places.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { PoPoAxios } from '@/lib/axios.instance';
+import styled from 'styled-components';
+
+import { IFavoritePlace } from '@/types/favorite.interface';
+import { IPlace } from '@/types/reservation.interface';
+
+const FavoriteBoxes = ({ userId }: { userId: string }) => {
+  const [placeIds, setPlaceIds] = useState([]);
+  const [placeInfos, setPlaceInfos] = useState([] as IPlace[]);
+  useEffect(() => {
+    const fetchFavoritePlaces = async () => {
+      try {
+        const response = await PoPoAxios.get(
+          `/favorite-place/user_id/${userId}`,
+        );
+        const placeIds = response.data.map(
+          (place: IFavoritePlace) => place.place_id,
+        );
+        setPlaceIds(placeIds);
+      } catch (error) {
+        console.error('Error fetching favorite places:', error);
+      }
+    };
+
+    const fetchPlaceInfos = async (placeId: string) => {
+      try {
+        const response = await PoPoAxios.get(`/place/${placeId}`);
+        setPlaceInfos([...placeInfos, response.data]);
+      } catch (error) {
+        console.error('Error fetching place info:', error);
+      }
+    };
+
+    fetchFavoritePlaces();
+    placeIds.forEach((placeId: string) => fetchPlaceInfos(placeId));
+  }, [userId]);
+
+  return (
+    <div>
+      {placeInfos.map((placeInfo: IPlace) => (
+        <FavoriteCard key={placeInfo.uuid}>{placeInfo.name}</FavoriteCard>
+      ))}
+    </div>
+  );
+};
+
+export default FavoriteBoxes;
+
+const FavoriteCard = styled.div`
+  background: #eeeeee;
+  border-radius: 0.4em;
+  padding: 14px;
+`;
diff --git a/components/navbar/menu.item.user.tsx b/components/navbar/menu.item.user.tsx
index f4b42eb..2d9a051 100644
--- a/components/navbar/menu.item.user.tsx
+++ b/components/navbar/menu.item.user.tsx
@@ -37,6 +37,7 @@ const MenuItemUser = () => {
           <Dropdown.Menu>
             <Dropdown.Item text={'내 정보'} href={'/auth/my-info'} />
             <Dropdown.Item text={'내 예약'} href={'/auth/my-reservation'} />
+            <Dropdown.Item text={'내 즐겨찾기'} href={'/auth/my-favorite'} />
             <Dropdown.Item text={'로그아웃'} onClick={handleLogout} />
           </Dropdown.Menu>
         </Dropdown>
diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
new file mode 100644
index 0000000..a4df73b
--- /dev/null
+++ b/pages/auth/my-favorite.tsx
@@ -0,0 +1,52 @@
+import { Container } from 'semantic-ui-react';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { PoPoAxios } from '@/lib/axios.instance';
+
+import Layout from '@/components/layout';
+import FavoriteBoxes from '@/components/favorite/favorite-places';
+
+interface MyInformation {
+  email: string;
+  name: string;
+  userType: string;
+  createdAt: Date;
+}
+
+const MyInfoPage = () => {
+  const router = useRouter();
+
+  const [myInfo, setMyInfo] = useState<MyInformation>({
+    email: '',
+    name: '',
+    userType: '',
+    createdAt: new Date(),
+  });
+
+  useEffect(() => {
+    PoPoAxios.get('/auth/myInfo', { withCredentials: true })
+      .then((res) => setMyInfo(res.data))
+      .catch(() => {
+        alert('로그인 후 조회할 수 있습니다.');
+        router.push('/auth/login');
+      });
+  }, [router]);
+
+  return (
+    <Layout>
+      <Container
+        style={{
+          padding: '40px',
+          margin: '2em 0 4em',
+          backgroundColor: '#eeeeee',
+          borderRadius: '8px',
+        }}
+      >
+        <h2>내 즐겨찾기</h2>
+        <FavoriteBoxes userId={myInfo.email} />
+      </Container>
+    </Layout>
+  );
+};
+
+export default MyInfoPage;

From 41e519d0963d242a6b1952c740565d22a01cfe63 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 18:27:19 +0900
Subject: [PATCH 03/25] log for favorite-place

---
 components/favorite/favorite-places.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/favorite/favorite-places.tsx b/components/favorite/favorite-places.tsx
index b5f6f7a..1315a13 100644
--- a/components/favorite/favorite-places.tsx
+++ b/components/favorite/favorite-places.tsx
@@ -14,6 +14,7 @@ const FavoriteBoxes = ({ userId }: { userId: string }) => {
         const response = await PoPoAxios.get(
           `/favorite-place/user_id/${userId}`,
         );
+        console.log('response.data:', response.data);
         const placeIds = response.data.map(
           (place: IFavoritePlace) => place.place_id,
         );

From b7cd4731f6e93a96844d02489e9cbeedd6dcdcb4 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 18:38:31 +0900
Subject: [PATCH 04/25] log for user_id

---
 components/favorite/favorite-places.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/favorite/favorite-places.tsx b/components/favorite/favorite-places.tsx
index 1315a13..048fef2 100644
--- a/components/favorite/favorite-places.tsx
+++ b/components/favorite/favorite-places.tsx
@@ -14,6 +14,7 @@ const FavoriteBoxes = ({ userId }: { userId: string }) => {
         const response = await PoPoAxios.get(
           `/favorite-place/user_id/${userId}`,
         );
+        console.log('user_id:', userId);
         console.log('response.data:', response.data);
         const placeIds = response.data.map(
           (place: IFavoritePlace) => place.place_id,

From 785b83e4f9db03ebdc676f57452a8266f7fbb9c5 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 18:50:29 +0900
Subject: [PATCH 05/25] parse user_id from email

---
 pages/auth/my-favorite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index a4df73b..fc8f066 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -43,7 +43,7 @@ const MyInfoPage = () => {
         }}
       >
         <h2>내 즐겨찾기</h2>
-        <FavoriteBoxes userId={myInfo.email} />
+        <FavoriteBoxes userId={myInfo.email.replace("@postech.ac.kr", "")} />
       </Container>
     </Layout>
   );

From 7f99bf844ca8ba226048b1d4955c77fa5f4eed6a Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 18:51:30 +0900
Subject: [PATCH 06/25] fix: lint

---
 pages/auth/my-favorite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index fc8f066..9c2fb08 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -43,7 +43,7 @@ const MyInfoPage = () => {
         }}
       >
         <h2>내 즐겨찾기</h2>
-        <FavoriteBoxes userId={myInfo.email.replace("@postech.ac.kr", "")} />
+        <FavoriteBoxes userId={myInfo.email.replace('@postech.ac.kr', '')} />
       </Container>
     </Layout>
   );

From 21ad534cbf45fe10d3f3e3445f8337f6e151d724 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 19:08:16 +0900
Subject: [PATCH 07/25] split favoritePlaceBoxes

---
 ...vorite-places.tsx => favoritePlaceBox.tsx} | 28 +++----------------
 components/favorite/favoritePlaceBoxes.tsx    | 24 ++++++++++++++++
 2 files changed, 28 insertions(+), 24 deletions(-)
 rename components/favorite/{favorite-places.tsx => favoritePlaceBox.tsx} (51%)
 create mode 100644 components/favorite/favoritePlaceBoxes.tsx

diff --git a/components/favorite/favorite-places.tsx b/components/favorite/favoritePlaceBox.tsx
similarity index 51%
rename from components/favorite/favorite-places.tsx
rename to components/favorite/favoritePlaceBox.tsx
index 048fef2..6fb4fd9 100644
--- a/components/favorite/favorite-places.tsx
+++ b/components/favorite/favoritePlaceBox.tsx
@@ -2,41 +2,21 @@ import React, { useEffect, useState } from 'react';
 import { PoPoAxios } from '@/lib/axios.instance';
 import styled from 'styled-components';
 
-import { IFavoritePlace } from '@/types/favorite.interface';
 import { IPlace } from '@/types/reservation.interface';
 
-const FavoriteBoxes = ({ userId }: { userId: string }) => {
-  const [placeIds, setPlaceIds] = useState([]);
+const FavoriteBox = ({ placeIds }: { placeIds: string[] }) => {
   const [placeInfos, setPlaceInfos] = useState([] as IPlace[]);
   useEffect(() => {
-    const fetchFavoritePlaces = async () => {
-      try {
-        const response = await PoPoAxios.get(
-          `/favorite-place/user_id/${userId}`,
-        );
-        console.log('user_id:', userId);
-        console.log('response.data:', response.data);
-        const placeIds = response.data.map(
-          (place: IFavoritePlace) => place.place_id,
-        );
-        setPlaceIds(placeIds);
-      } catch (error) {
-        console.error('Error fetching favorite places:', error);
-      }
-    };
-
     const fetchPlaceInfos = async (placeId: string) => {
       try {
         const response = await PoPoAxios.get(`/place/${placeId}`);
-        setPlaceInfos([...placeInfos, response.data]);
+        setPlaceInfos((prevPlaceInfos) => [...prevPlaceInfos, response.data]);
       } catch (error) {
         console.error('Error fetching place info:', error);
       }
     };
-
-    fetchFavoritePlaces();
     placeIds.forEach((placeId: string) => fetchPlaceInfos(placeId));
-  }, [userId]);
+  }, []);
 
   return (
     <div>
@@ -47,7 +27,7 @@ const FavoriteBoxes = ({ userId }: { userId: string }) => {
   );
 };
 
-export default FavoriteBoxes;
+export default FavoriteBox;
 
 const FavoriteCard = styled.div`
   background: #eeeeee;
diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
new file mode 100644
index 0000000..3e2c68a
--- /dev/null
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { PoPoAxios } from '@/lib/axios.instance';
+
+import { IFavoritePlace } from '@/types/favorite.interface';
+import FavoriteBox from './favoritePlaceBox';
+
+const FavoriteBoxes = ({ userId }: { userId: string }) => {
+  const [placeIds, setPlaceIds] = useState([]);
+  useEffect(() => {
+    PoPoAxios.get(`/favorite-place/user_id/${userId}`)
+    .then((res) => {
+      setPlaceIds(res.data.map((place: IFavoritePlace) => place.place_id));
+    })
+    .catch((err) => {
+      console.error('Error fetching favorite places:', err);
+    });
+  }, []);
+
+  return (
+    <FavoriteBox placeIds={placeIds} />
+  );
+};
+
+export default FavoriteBoxes;
\ No newline at end of file

From a5535a59d8631497397eed2a8501f691639fa5de Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 19:10:19 +0900
Subject: [PATCH 08/25] fix: lint and import

---
 components/favorite/favoritePlaceBoxes.tsx | 18 ++++++++----------
 pages/auth/my-favorite.tsx                 |  2 +-
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 3e2c68a..1e0bf6b 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -8,17 +8,15 @@ const FavoriteBoxes = ({ userId }: { userId: string }) => {
   const [placeIds, setPlaceIds] = useState([]);
   useEffect(() => {
     PoPoAxios.get(`/favorite-place/user_id/${userId}`)
-    .then((res) => {
-      setPlaceIds(res.data.map((place: IFavoritePlace) => place.place_id));
-    })
-    .catch((err) => {
-      console.error('Error fetching favorite places:', err);
-    });
+      .then((res) => {
+        setPlaceIds(res.data.map((place: IFavoritePlace) => place.place_id));
+      })
+      .catch((err) => {
+        console.error('Error fetching favorite places:', err);
+      });
   }, []);
 
-  return (
-    <FavoriteBox placeIds={placeIds} />
-  );
+  return <FavoriteBox placeIds={placeIds} />;
 };
 
-export default FavoriteBoxes;
\ No newline at end of file
+export default FavoriteBoxes;
diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index 9c2fb08..3a66a14 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { PoPoAxios } from '@/lib/axios.instance';
 
 import Layout from '@/components/layout';
-import FavoriteBoxes from '@/components/favorite/favorite-places';
+import FavoriteBoxes from '@/components/favorite/favoritePlaceBoxes';
 
 interface MyInformation {
   email: string;

From 4c9d22e4a72ef003c27c2636d087972ddc6b9bac Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 19:51:41 +0900
Subject: [PATCH 09/25] log: user_id

---
 components/favorite/favoritePlaceBoxes.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 1e0bf6b..0c1f858 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -2,13 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { PoPoAxios } from '@/lib/axios.instance';
 
 import { IFavoritePlace } from '@/types/favorite.interface';
-import FavoriteBox from './favoritePlaceBox';
+import FavoriteBox from '@/components/favorite/favoritePlaceBox';
 
 const FavoriteBoxes = ({ userId }: { userId: string }) => {
   const [placeIds, setPlaceIds] = useState([]);
   useEffect(() => {
     PoPoAxios.get(`/favorite-place/user_id/${userId}`)
       .then((res) => {
+        console.log(userId);
         setPlaceIds(res.data.map((place: IFavoritePlace) => place.place_id));
       })
       .catch((err) => {

From 681d72b910b6064e3e2c105355a2e7d10daad004 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 20:02:21 +0900
Subject: [PATCH 10/25] evoke on var

---
 components/favorite/favoritePlaceBoxes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 0c1f858..9e58f07 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -15,7 +15,7 @@ const FavoriteBoxes = ({ userId }: { userId: string }) => {
       .catch((err) => {
         console.error('Error fetching favorite places:', err);
       });
-  }, []);
+  }, [userId]);
 
   return <FavoriteBox placeIds={placeIds} />;
 };

From 97d2fab598f9741342bed7ebdfdbac294b1e06c5 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 20:22:36 +0900
Subject: [PATCH 11/25] revert before spliting

---
 components/favorite/favoritePlaceBox.tsx   | 36 --------------
 components/favorite/favoritePlaceBoxes.tsx | 57 +++++++++++++++++-----
 pages/auth/my-favorite.tsx                 |  6 ++-
 3 files changed, 49 insertions(+), 50 deletions(-)
 delete mode 100644 components/favorite/favoritePlaceBox.tsx

diff --git a/components/favorite/favoritePlaceBox.tsx b/components/favorite/favoritePlaceBox.tsx
deleted file mode 100644
index 6fb4fd9..0000000
--- a/components/favorite/favoritePlaceBox.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { PoPoAxios } from '@/lib/axios.instance';
-import styled from 'styled-components';
-
-import { IPlace } from '@/types/reservation.interface';
-
-const FavoriteBox = ({ placeIds }: { placeIds: string[] }) => {
-  const [placeInfos, setPlaceInfos] = useState([] as IPlace[]);
-  useEffect(() => {
-    const fetchPlaceInfos = async (placeId: string) => {
-      try {
-        const response = await PoPoAxios.get(`/place/${placeId}`);
-        setPlaceInfos((prevPlaceInfos) => [...prevPlaceInfos, response.data]);
-      } catch (error) {
-        console.error('Error fetching place info:', error);
-      }
-    };
-    placeIds.forEach((placeId: string) => fetchPlaceInfos(placeId));
-  }, []);
-
-  return (
-    <div>
-      {placeInfos.map((placeInfo: IPlace) => (
-        <FavoriteCard key={placeInfo.uuid}>{placeInfo.name}</FavoriteCard>
-      ))}
-    </div>
-  );
-};
-
-export default FavoriteBox;
-
-const FavoriteCard = styled.div`
-  background: #eeeeee;
-  border-radius: 0.4em;
-  padding: 14px;
-`;
diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 9e58f07..0463591 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,23 +1,56 @@
 import React, { useEffect, useState } from 'react';
 import { PoPoAxios } from '@/lib/axios.instance';
+import styled from 'styled-components';
 
 import { IFavoritePlace } from '@/types/favorite.interface';
-import FavoriteBox from '@/components/favorite/favoritePlaceBox';
+import { IPlace } from '@/types/reservation.interface';
 
-const FavoriteBoxes = ({ userId }: { userId: string }) => {
+const FavoritePlaceBoxes = ({ userId }: { userId: string }) => {
   const [placeIds, setPlaceIds] = useState([]);
+  const [placeInfos, setPlaceInfos] = useState([] as IPlace[]);
   useEffect(() => {
-    PoPoAxios.get(`/favorite-place/user_id/${userId}`)
-      .then((res) => {
-        console.log(userId);
-        setPlaceIds(res.data.map((place: IFavoritePlace) => place.place_id));
-      })
-      .catch((err) => {
-        console.error('Error fetching favorite places:', err);
-      });
+    const fetchFavoritePlaces = async () => {
+      try {
+        const response = await PoPoAxios.get(
+          `/favorite-place/user_id/${userId}`,
+        );
+        console.log('user_id:', userId);
+        console.log('response.data:', response.data);
+        const placeIds = response.data.map(
+          (place: IFavoritePlace) => place.place_id,
+        );
+        setPlaceIds(placeIds);
+      } catch (error) {
+        console.error('Error fetching favorite places:', error);
+      }
+    };
+
+    const fetchPlaceInfos = async (placeId: string) => {
+      try {
+        const response = await PoPoAxios.get(`/place/${placeId}`);
+        setPlaceInfos([...placeInfos, response.data]);
+      } catch (error) {
+        console.error('Error fetching place info:', error);
+      }
+    };
+
+    fetchFavoritePlaces();
+    placeIds.forEach((placeId: string) => fetchPlaceInfos(placeId));
   }, [userId]);
 
-  return <FavoriteBox placeIds={placeIds} />;
+  return (
+    <div>
+      {placeInfos.map((placeInfo: IPlace) => (
+        <FavoriteCard key={placeInfo.uuid}>{placeInfo.name}</FavoriteCard>
+      ))}
+    </div>
+  );
 };
 
-export default FavoriteBoxes;
+export default FavoritePlaceBoxes;
+
+const FavoriteCard = styled.div`
+  background: #eeeeee;
+  border-radius: 0.4em;
+  padding: 14px;
+`;
diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index 3a66a14..ea53fea 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { PoPoAxios } from '@/lib/axios.instance';
 
 import Layout from '@/components/layout';
-import FavoriteBoxes from '@/components/favorite/favoritePlaceBoxes';
+import FavoritePlaceBoxes from '@/components/favorite/favoritePlaceBoxes';
 
 interface MyInformation {
   email: string;
@@ -43,7 +43,9 @@ const MyInfoPage = () => {
         }}
       >
         <h2>내 즐겨찾기</h2>
-        <FavoriteBoxes userId={myInfo.email.replace('@postech.ac.kr', '')} />
+        <FavoritePlaceBoxes
+          userId={myInfo.email.replace('@postech.ac.kr', '')}
+        />
       </Container>
     </Layout>
   );

From e69b2b338e485104ac8259614ff486a2921536a9 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 21:20:16 +0900
Subject: [PATCH 12/25] favorite api call on page-level

---
 components/favorite/favoritePlaceBoxes.tsx | 44 +++-------------------
 pages/auth/my-favorite.tsx                 | 34 +++++++++++++++--
 types/favorite.interface.ts                | 17 +++++++++
 types/place.interface.ts                   | 16 --------
 4 files changed, 53 insertions(+), 58 deletions(-)
 delete mode 100644 types/place.interface.ts

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 0463591..62294b6 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,47 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { PoPoAxios } from '@/lib/axios.instance';
+import React from 'react';
 import styled from 'styled-components';
 
-import { IFavoritePlace } from '@/types/favorite.interface';
-import { IPlace } from '@/types/reservation.interface';
-
-const FavoritePlaceBoxes = ({ userId }: { userId: string }) => {
-  const [placeIds, setPlaceIds] = useState([]);
-  const [placeInfos, setPlaceInfos] = useState([] as IPlace[]);
-  useEffect(() => {
-    const fetchFavoritePlaces = async () => {
-      try {
-        const response = await PoPoAxios.get(
-          `/favorite-place/user_id/${userId}`,
-        );
-        console.log('user_id:', userId);
-        console.log('response.data:', response.data);
-        const placeIds = response.data.map(
-          (place: IFavoritePlace) => place.place_id,
-        );
-        setPlaceIds(placeIds);
-      } catch (error) {
-        console.error('Error fetching favorite places:', error);
-      }
-    };
-
-    const fetchPlaceInfos = async (placeId: string) => {
-      try {
-        const response = await PoPoAxios.get(`/place/${placeId}`);
-        setPlaceInfos([...placeInfos, response.data]);
-      } catch (error) {
-        console.error('Error fetching place info:', error);
-      }
-    };
-
-    fetchFavoritePlaces();
-    placeIds.forEach((placeId: string) => fetchPlaceInfos(placeId));
-  }, [userId]);
+import { IPlace } from '@/types/favorite.interface';
 
+const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
   return (
     <div>
-      {placeInfos.map((placeInfo: IPlace) => (
-        <FavoriteCard key={placeInfo.uuid}>{placeInfo.name}</FavoriteCard>
+      {placeList.map((place: IPlace) => (
+        <FavoriteCard key={place.uuid}>{place.name}</FavoriteCard>
       ))}
     </div>
   );
diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index ea53fea..3973270 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -6,6 +6,8 @@ import { PoPoAxios } from '@/lib/axios.instance';
 import Layout from '@/components/layout';
 import FavoritePlaceBoxes from '@/components/favorite/favoritePlaceBoxes';
 
+import { IPlace, IFavoritePlace } from '@/types/favorite.interface';
+
 interface MyInformation {
   email: string;
   name: string;
@@ -22,6 +24,7 @@ const MyInfoPage = () => {
     userType: '',
     createdAt: new Date(),
   });
+  const [placeList, setPlaceList] = useState([] as IPlace[]);
 
   useEffect(() => {
     PoPoAxios.get('/auth/myInfo', { withCredentials: true })
@@ -30,6 +33,33 @@ const MyInfoPage = () => {
         alert('로그인 후 조회할 수 있습니다.');
         router.push('/auth/login');
       });
+
+    const fetchFavoritePlaces = async (userId: string) => {
+      try {
+        const favoritePlacesRes = await PoPoAxios.get<IFavoritePlace[]>(
+          `/favorite-place/user_id/${userId}`,
+        );
+        const favoritePlaces = favoritePlacesRes.data;
+        console.log('favoritePlaces:', favoritePlaces);
+
+        if (favoritePlaces.length > 0) {
+          favoritePlaces.map((favoritePlace) => {
+            PoPoAxios.get<IPlace>(`/place/${favoritePlace.place_id}`)
+              .then((res) => {
+                setPlaceList((prev) => [...prev, res.data]);
+              })
+              .catch((error) => {
+                console.error('Error fetching place information:', error);
+              });
+          });
+        }
+      } catch (error) {
+        console.error('Error fetching favorite places:', error);
+      }
+    };
+    if (myInfo.email) {
+      fetchFavoritePlaces(myInfo.email.replace('@postech.ac.kr', ''));
+    }
   }, [router]);
 
   return (
@@ -43,9 +73,7 @@ const MyInfoPage = () => {
         }}
       >
         <h2>내 즐겨찾기</h2>
-        <FavoritePlaceBoxes
-          userId={myInfo.email.replace('@postech.ac.kr', '')}
-        />
+        <FavoritePlaceBoxes placeList={placeList} />
       </Container>
     </Layout>
   );
diff --git a/types/favorite.interface.ts b/types/favorite.interface.ts
index 51c4bbe..ef3e8c0 100644
--- a/types/favorite.interface.ts
+++ b/types/favorite.interface.ts
@@ -4,3 +4,20 @@ export interface IFavoritePlace {
   place_id: string;
   created_at: string;
 }
+
+export interface IPlace {
+  uuid: string;
+  name: string;
+  description: string;
+  location: string;
+  region: string;
+  staff_email: string;
+  image_url: string;
+  max_minutes: number;
+  max_concurrent_reservation: number;
+  opening_hours: string;
+  enable_auto_accept: string;
+  total_reservation_count: number;
+  createdAt: string;
+  updateAt: string;
+}
diff --git a/types/place.interface.ts b/types/place.interface.ts
deleted file mode 100644
index f161d9d..0000000
--- a/types/place.interface.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface IPlace {
-  uuid: string;
-  name: string;
-  description: string;
-  location: string;
-  region: string;
-  staff_email: string;
-  image_url: string;
-  max_minutes: number;
-  max_concurrent_reservation: number;
-  opening_hours: string;
-  enable_auto_accept: string;
-  total_reservation_count: number;
-  createdAt: string;
-  updateAt: string;
-}

From 0836bcd2ee48ec941809001ec61174f4db42882c Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 21:30:57 +0900
Subject: [PATCH 13/25] evoke on user email

---
 pages/auth/my-favorite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index 3973270..38a9ea7 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -60,7 +60,7 @@ const MyInfoPage = () => {
     if (myInfo.email) {
       fetchFavoritePlaces(myInfo.email.replace('@postech.ac.kr', ''));
     }
-  }, [router]);
+  }, [router, myInfo.email]);
 
   return (
     <Layout>

From 732c73e54b17aae2f40a6dba93295421e08da828 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 21:48:05 +0900
Subject: [PATCH 14/25] add favorite card style

---
 components/favorite/favoritePlaceBoxes.tsx | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 62294b6..3bd41cc 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
-import styled from 'styled-components';
+import { Card, Grid, Image } from 'semantic-ui-react';
 
 import { IPlace } from '@/types/favorite.interface';
 
 const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
   return (
-    <div>
+    <Grid stackable centered columns={3} style={{ maxWidth: 900 }}>
       {placeList.map((place: IPlace) => (
-        <FavoriteCard key={place.uuid}>{place.name}</FavoriteCard>
+        <Grid.Column key={place.uuid}>
+          <Card
+            href={`/reservation/place/${place.region}/${place.name}`}
+            centered
+          >
+            <Image src={place.image_url} alt={place.name} />
+            <Card.Content>
+              <Card.Header>{place.name}</Card.Header>
+              <Card.Meta>{place.region}</Card.Meta>
+            </Card.Content>
+          </Card>
+        </Grid.Column>
       ))}
-    </div>
+    </Grid>
   );
 };
 
 export default FavoritePlaceBoxes;
-
-const FavoriteCard = styled.div`
-  background: #eeeeee;
-  border-radius: 0.4em;
-  padding: 14px;
-`;

From 3f6e49aac7af803f971450d34247a72766b7e220 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 22:21:57 +0900
Subject: [PATCH 15/25] add delete button

---
 components/favorite/favoritePlaceBoxes.tsx | 28 +++++++++++++++++++++-
 pages/auth/my-favorite.tsx                 |  4 +++-
 types/favorite.interface.ts                | 10 +-------
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 3bd41cc..208c79e 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,9 +1,21 @@
 import React from 'react';
-import { Card, Grid, Image } from 'semantic-ui-react';
+import { PoPoAxios } from '@/lib/axios.instance';
+import { Card, Grid, Image, Button, Icon } from 'semantic-ui-react';
 
 import { IPlace } from '@/types/favorite.interface';
 
 const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
+  const handleDelete = async (deleteURI: string) => {
+    PoPoAxios.delete(`/${deleteURI}`, { withCredentials: true })
+      .then(() => {
+        window.location.reload();
+      })
+      .catch((err) => {
+        const errMsg = err.response.data.message;
+        alert(`삭제에 실패했습니다.\n${errMsg}`);
+      });
+  };
+
   return (
     <Grid stackable centered columns={3} style={{ maxWidth: 900 }}>
       {placeList.map((place: IPlace) => (
@@ -16,6 +28,20 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
             <Card.Content>
               <Card.Header>{place.name}</Card.Header>
               <Card.Meta>{place.region}</Card.Meta>
+              <Button
+                icon
+                labelPosition="left"
+                onClick={() =>
+                  handleDelete(`favorite-place/${place.favorite_id}`)
+                }
+              >
+                <Icon name="cancel" />
+                삭제하기
+              </Button>
+              <Button icon labelPosition="right">
+                예약하기
+                <Icon name="arrow right" />
+              </Button>
             </Card.Content>
           </Card>
         </Grid.Column>
diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index 38a9ea7..ca8db9f 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -46,7 +46,9 @@ const MyInfoPage = () => {
           favoritePlaces.map((favoritePlace) => {
             PoPoAxios.get<IPlace>(`/place/${favoritePlace.place_id}`)
               .then((res) => {
-                setPlaceList((prev) => [...prev, res.data]);
+                const cur = res.data;
+                cur.favorite_id = favoritePlace.uuid;
+                setPlaceList((prev) => [...prev, cur]);
               })
               .catch((error) => {
                 console.error('Error fetching place information:', error);
diff --git a/types/favorite.interface.ts b/types/favorite.interface.ts
index ef3e8c0..df40749 100644
--- a/types/favorite.interface.ts
+++ b/types/favorite.interface.ts
@@ -6,18 +6,10 @@ export interface IFavoritePlace {
 }
 
 export interface IPlace {
+  favorite_id: string;
   uuid: string;
   name: string;
-  description: string;
   location: string;
   region: string;
-  staff_email: string;
   image_url: string;
-  max_minutes: number;
-  max_concurrent_reservation: number;
-  opening_hours: string;
-  enable_auto_accept: string;
-  total_reservation_count: number;
-  createdAt: string;
-  updateAt: string;
 }

From 5a7f4043552c58f3fe02293a23f43a3c32369437 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 22:55:14 +0900
Subject: [PATCH 16/25] check: style for fav card

---
 components/favorite/favoritePlaceBoxes.tsx | 65 ++++++++++++++++------
 1 file changed, 48 insertions(+), 17 deletions(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 208c79e..d10903c 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PoPoAxios } from '@/lib/axios.instance';
-import { Card, Grid, Image, Button, Icon } from 'semantic-ui-react';
+import { Card, Grid, Image, Button, Icon, ButtonGroup } from 'semantic-ui-react';
 
 import { IPlace } from '@/types/favorite.interface';
 
@@ -17,7 +17,7 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
   };
 
   return (
-    <Grid stackable centered columns={3} style={{ maxWidth: 900 }}>
+    <Grid stackable centered columns={3} style={{ maxWidth: 1000 }}>
       {placeList.map((place: IPlace) => (
         <Grid.Column key={place.uuid}>
           <Card
@@ -28,24 +28,55 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
             <Card.Content>
               <Card.Header>{place.name}</Card.Header>
               <Card.Meta>{place.region}</Card.Meta>
-              <Button
-                icon
-                labelPosition="left"
-                onClick={() =>
-                  handleDelete(`favorite-place/${place.favorite_id}`)
-                }
-              >
-                <Icon name="cancel" />
-                삭제하기
-              </Button>
-              <Button icon labelPosition="right">
-                예약하기
-                <Icon name="arrow right" />
-              </Button>
+              <ButtonGroup>
+                <Button
+                  icon
+                  labelPosition="left"
+                  onClick={() =>
+                    handleDelete(`favorite-place/${place.favorite_id}`)
+                  }
+                >
+                  <Icon name="cancel" />
+                  삭제하기
+                </Button>
+                <Button icon labelPosition="right">
+                  예약하기
+                  <Icon name="arrow right" />
+                </Button>
+              </ButtonGroup>
+            </Card.Content>
+          </Card>
+          <Card
+            href={`/reservation/place/${place.region}/${place.name}`}
+            centered
+          >
+            <Card.Content style={{ display: 'flex', 'align-items': 'center' }}>
+              <div>
+                <Card.Header style={{ color: 'black', 'font-weight': 'bold' }}>
+                  {place.name}
+                </Card.Header>
+              </div>
+            </Card.Content>
+          </Card>
+        </Grid.Column>
+      ))
+      }
+      {placeList.length < 3 && (
+        <Grid.Column>
+          <Card
+            href={`/reservation/place`}
+            centered
+          >
+            <Card.Content style={{ display: 'flex', 'align-items': 'center' }}>
+              <div>
+                <Card.Header style={{ color: 'black', 'font-weight': 'bold' }}>
+                  더 많은 장소 보기
+                </Card.Header>
+              </div>
             </Card.Content>
           </Card>
         </Grid.Column>
-      ))}
+      )}
     </Grid>
   );
 };

From 3112e79e0ba68c31ca7791a6f22e85541edb0b24 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 22:55:51 +0900
Subject: [PATCH 17/25] fix: lint

---
 components/favorite/favoritePlaceBoxes.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index d10903c..3537545 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { PoPoAxios } from '@/lib/axios.instance';
-import { Card, Grid, Image, Button, Icon, ButtonGroup } from 'semantic-ui-react';
+import {
+  Card,
+  Grid,
+  Image,
+  Button,
+  Icon,
+  ButtonGroup,
+} from 'semantic-ui-react';
 
 import { IPlace } from '@/types/favorite.interface';
 
@@ -59,14 +66,10 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
             </Card.Content>
           </Card>
         </Grid.Column>
-      ))
-      }
+      ))}
       {placeList.length < 3 && (
         <Grid.Column>
-          <Card
-            href={`/reservation/place`}
-            centered
-          >
+          <Card href={`/reservation/place`} centered>
             <Card.Content style={{ display: 'flex', 'align-items': 'center' }}>
               <div>
                 <Card.Header style={{ color: 'black', 'font-weight': 'bold' }}>

From 1fc00eecc1aabf23d2229e5dd7933541f521a260 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 23:10:23 +0900
Subject: [PATCH 18/25] check: style for fav card

---
 components/favorite/favoritePlaceBoxes.tsx | 24 ++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
index 3537545..cd167a0 100644
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ b/components/favorite/favoritePlaceBoxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { PoPoAxios } from '@/lib/axios.instance';
+import styled from 'styled-components';
 import {
   Card,
   Grid,
@@ -62,6 +63,20 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
                 <Card.Header style={{ color: 'black', 'font-weight': 'bold' }}>
                   {place.name}
                 </Card.Header>
+                <Card.Meta>
+                  <WhiteButton
+                    onClick={() =>
+                      handleDelete(`favorite-place/${place.favorite_id}`)
+                    }
+                  >
+                    삭제 하기
+                  </WhiteButton>
+                  <WhiteButton
+                    href={`/reservation/place/${place.region}/${place.name}`}
+                  >
+                    예약 하기
+                  </WhiteButton>
+                </Card.Meta>
               </div>
             </Card.Content>
           </Card>
@@ -85,3 +100,12 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
 };
 
 export default FavoritePlaceBoxes;
+
+const WhiteButton = styled(Button)`
+  background-color: white;
+  border: 0px;
+  color: black;
+  hover: {
+    text-decoration: underline;
+  }
+`;

From 8ddf0482a871f80d2789e75816ac22d18ad248fd Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Fri, 9 Aug 2024 23:51:05 +0900
Subject: [PATCH 19/25] add fav form

---
 components/favorite/favorite.place.boxes.tsx  |  58 +++++++++
 components/favorite/favorite.place.choice.tsx |  55 +++++++++
 components/favorite/favoritePlaceBoxes.tsx    | 111 ------------------
 pages/auth/my-favorite.tsx                    |  20 +++-
 4 files changed, 132 insertions(+), 112 deletions(-)
 create mode 100644 components/favorite/favorite.place.boxes.tsx
 create mode 100644 components/favorite/favorite.place.choice.tsx
 delete mode 100644 components/favorite/favoritePlaceBoxes.tsx

diff --git a/components/favorite/favorite.place.boxes.tsx b/components/favorite/favorite.place.boxes.tsx
new file mode 100644
index 0000000..873d350
--- /dev/null
+++ b/components/favorite/favorite.place.boxes.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { PoPoAxios } from '@/lib/axios.instance';
+import {
+  Card,
+  Grid,
+  Image,
+  Button,
+  Icon,
+  ButtonGroup,
+} from 'semantic-ui-react';
+
+import { IPlace } from '@/types/favorite.interface';
+
+const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
+  const handleDelete = async (deleteURI: string) => {
+    PoPoAxios.delete(`/${deleteURI}`, { withCredentials: true })
+      .then(() => {
+        window.location.reload();
+      })
+      .catch((err) => {
+        const errMsg = err.response.data.message;
+        alert(`삭제에 실패했습니다.\n${errMsg}`);
+      });
+  };
+
+  return (
+    <Grid stackable centered columns={3} style={{ maxWidth: 1000 }}>
+      {placeList.map((place: IPlace) => (
+        <Grid.Column key={place.uuid}>
+          <Card centered>
+            <Image src={place.image_url} alt={place.name} />
+            <Card.Content>
+              <Card.Header>{place.name}</Card.Header>
+              <ButtonGroup>
+                <Button
+                  icon
+                  labelPosition="left"
+                  onClick={() =>
+                    handleDelete(`favorite-place/${place.favorite_id}`)
+                  }
+                >
+                  <Icon name="cancel" />
+                  삭제하기
+                </Button>
+                <Button icon labelPosition="right">
+                  예약하기
+                  <Icon name="arrow right" />
+                </Button>
+              </ButtonGroup>
+            </Card.Content>
+          </Card>
+        </Grid.Column>
+      ))}
+    </Grid>
+  );
+};
+
+export default FavoritePlaceBoxes;
diff --git a/components/favorite/favorite.place.choice.tsx b/components/favorite/favorite.place.choice.tsx
new file mode 100644
index 0000000..fe7ad8c
--- /dev/null
+++ b/components/favorite/favorite.place.choice.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { PoPoAxios } from '@/lib/axios.instance';
+import { Form } from 'semantic-ui-react';
+
+import { IPlace } from '@/types/favorite.interface';
+
+const FavoritePlaceChoice = ({
+  placeList,
+  userId,
+}: {
+  placeList: IPlace[];
+  userId: string;
+}) => {
+  const [placeId, setPlaceId] = useState<string>('');
+
+  function handleSubmit() {
+    PoPoAxios.post(
+      '/favorite-place',
+      {
+        place_id: placeId,
+        user_id: userId,
+      },
+      { withCredentials: true },
+    )
+      .then(() => {
+        alert('즐겨찾기에 추가되었습니다.');
+        window.location.reload();
+      })
+      .catch((error) => {
+        alert(`예약 생성에 실패했습니다: ${error.response.data.message}`);
+      });
+  }
+
+  return (
+    <div>
+      <Form onSubmit={handleSubmit}>
+        <Form.Select
+          label="즐겨찾기할 장소"
+          options={placeList.map((place: IPlace) => {
+            return {
+              key: place.uuid,
+              text: place.name,
+              value: place.uuid,
+            };
+          })}
+          placeholder="장소를 선택해주세요."
+          onChange={(e, { value }) => setPlaceId(value as string)}
+        />
+        <Form.Button content="즐겨찾기 추가" />
+      </Form>
+    </div>
+  );
+};
+
+export default FavoritePlaceChoice;
diff --git a/components/favorite/favoritePlaceBoxes.tsx b/components/favorite/favoritePlaceBoxes.tsx
deleted file mode 100644
index cd167a0..0000000
--- a/components/favorite/favoritePlaceBoxes.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import { PoPoAxios } from '@/lib/axios.instance';
-import styled from 'styled-components';
-import {
-  Card,
-  Grid,
-  Image,
-  Button,
-  Icon,
-  ButtonGroup,
-} from 'semantic-ui-react';
-
-import { IPlace } from '@/types/favorite.interface';
-
-const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
-  const handleDelete = async (deleteURI: string) => {
-    PoPoAxios.delete(`/${deleteURI}`, { withCredentials: true })
-      .then(() => {
-        window.location.reload();
-      })
-      .catch((err) => {
-        const errMsg = err.response.data.message;
-        alert(`삭제에 실패했습니다.\n${errMsg}`);
-      });
-  };
-
-  return (
-    <Grid stackable centered columns={3} style={{ maxWidth: 1000 }}>
-      {placeList.map((place: IPlace) => (
-        <Grid.Column key={place.uuid}>
-          <Card
-            href={`/reservation/place/${place.region}/${place.name}`}
-            centered
-          >
-            <Image src={place.image_url} alt={place.name} />
-            <Card.Content>
-              <Card.Header>{place.name}</Card.Header>
-              <Card.Meta>{place.region}</Card.Meta>
-              <ButtonGroup>
-                <Button
-                  icon
-                  labelPosition="left"
-                  onClick={() =>
-                    handleDelete(`favorite-place/${place.favorite_id}`)
-                  }
-                >
-                  <Icon name="cancel" />
-                  삭제하기
-                </Button>
-                <Button icon labelPosition="right">
-                  예약하기
-                  <Icon name="arrow right" />
-                </Button>
-              </ButtonGroup>
-            </Card.Content>
-          </Card>
-          <Card
-            href={`/reservation/place/${place.region}/${place.name}`}
-            centered
-          >
-            <Card.Content style={{ display: 'flex', 'align-items': 'center' }}>
-              <div>
-                <Card.Header style={{ color: 'black', 'font-weight': 'bold' }}>
-                  {place.name}
-                </Card.Header>
-                <Card.Meta>
-                  <WhiteButton
-                    onClick={() =>
-                      handleDelete(`favorite-place/${place.favorite_id}`)
-                    }
-                  >
-                    삭제 하기
-                  </WhiteButton>
-                  <WhiteButton
-                    href={`/reservation/place/${place.region}/${place.name}`}
-                  >
-                    예약 하기
-                  </WhiteButton>
-                </Card.Meta>
-              </div>
-            </Card.Content>
-          </Card>
-        </Grid.Column>
-      ))}
-      {placeList.length < 3 && (
-        <Grid.Column>
-          <Card href={`/reservation/place`} centered>
-            <Card.Content style={{ display: 'flex', 'align-items': 'center' }}>
-              <div>
-                <Card.Header style={{ color: 'black', 'font-weight': 'bold' }}>
-                  더 많은 장소 보기
-                </Card.Header>
-              </div>
-            </Card.Content>
-          </Card>
-        </Grid.Column>
-      )}
-    </Grid>
-  );
-};
-
-export default FavoritePlaceBoxes;
-
-const WhiteButton = styled(Button)`
-  background-color: white;
-  border: 0px;
-  color: black;
-  hover: {
-    text-decoration: underline;
-  }
-`;
diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index ca8db9f..df180dd 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -4,7 +4,8 @@ import { useRouter } from 'next/router';
 import { PoPoAxios } from '@/lib/axios.instance';
 
 import Layout from '@/components/layout';
-import FavoritePlaceBoxes from '@/components/favorite/favoritePlaceBoxes';
+import FavoritePlaceBoxes from '@/components/favorite/favorite.place.boxes';
+import FavoritePlaceChoice from '@/components/favorite/favorite.place.choice';
 
 import { IPlace, IFavoritePlace } from '@/types/favorite.interface';
 
@@ -24,6 +25,7 @@ const MyInfoPage = () => {
     userType: '',
     createdAt: new Date(),
   });
+  const [totalPlaceList, setTotalPlaceList] = useState([] as IPlace[]);
   const [placeList, setPlaceList] = useState([] as IPlace[]);
 
   useEffect(() => {
@@ -34,6 +36,16 @@ const MyInfoPage = () => {
         router.push('/auth/login');
       });
 
+    const fetchTotalPlaces = async () => {
+      try {
+        const totalPlacesRes = await PoPoAxios.get<IPlace[]>('/place');
+        setTotalPlaceList(totalPlacesRes.data);
+      } catch (error) {
+        console.error('Error fetching total places:', error);
+      }
+    };
+    fetchTotalPlaces();
+
     const fetchFavoritePlaces = async (userId: string) => {
       try {
         const favoritePlacesRes = await PoPoAxios.get<IFavoritePlace[]>(
@@ -76,6 +88,12 @@ const MyInfoPage = () => {
       >
         <h2>내 즐겨찾기</h2>
         <FavoritePlaceBoxes placeList={placeList} />
+        {totalPlaceList.length < 3 && (
+          <FavoritePlaceChoice
+            placeList={totalPlaceList}
+            userId={myInfo.email.replace('@postech.ac.kr', '')}
+          />
+        )}
       </Container>
     </Layout>
   );

From 89f89f980c3d3ae061b92b29907719041223cd0f Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Sat, 10 Aug 2024 00:00:27 +0900
Subject: [PATCH 20/25] fix: condition for show fav choice

---
 pages/auth/my-favorite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/auth/my-favorite.tsx b/pages/auth/my-favorite.tsx
index df180dd..346ccf4 100644
--- a/pages/auth/my-favorite.tsx
+++ b/pages/auth/my-favorite.tsx
@@ -88,7 +88,7 @@ const MyInfoPage = () => {
       >
         <h2>내 즐겨찾기</h2>
         <FavoritePlaceBoxes placeList={placeList} />
-        {totalPlaceList.length < 3 && (
+        {placeList.length < 3 && (
           <FavoritePlaceChoice
             placeList={totalPlaceList}
             userId={myInfo.email.replace('@postech.ac.kr', '')}

From b912a7861a87e67079d69a5bc2374b68839a2ed5 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Sat, 10 Aug 2024 00:21:47 +0900
Subject: [PATCH 21/25] link to place

---
 components/favorite/favorite.place.boxes.tsx | 35 +++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/components/favorite/favorite.place.boxes.tsx b/components/favorite/favorite.place.boxes.tsx
index 873d350..c3fdfb2 100644
--- a/components/favorite/favorite.place.boxes.tsx
+++ b/components/favorite/favorite.place.boxes.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from 'next/link';
 import { PoPoAxios } from '@/lib/axios.instance';
 import {
   Card,
@@ -31,24 +32,26 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
             <Image src={place.image_url} alt={place.name} />
             <Card.Content>
               <Card.Header>{place.name}</Card.Header>
-              <ButtonGroup>
-                <Button
-                  icon
-                  labelPosition="left"
-                  onClick={() =>
-                    handleDelete(`favorite-place/${place.favorite_id}`)
-                  }
-                >
-                  <Icon name="cancel" />
-                  삭제하기
-                </Button>
-                <Button icon labelPosition="right">
-                  예약하기
-                  <Icon name="arrow right" />
-                </Button>
-              </ButtonGroup>
             </Card.Content>
           </Card>
+          <ButtonGroup>
+            <Button
+              icon
+              labelPosition="left"
+              onClick={() =>
+                handleDelete(`favorite-place/${place.favorite_id}`)
+              }
+            >
+              <Icon name="cancel" />
+              삭제하기
+            </Button>
+            <Link href={`/reservation/place/${place.name}`}>
+              <Button icon labelPosition="right">
+                예약하기
+                <Icon name="arrow right" />
+              </Button>
+            </Link>
+          </ButtonGroup>
         </Grid.Column>
       ))}
     </Grid>

From d91b340aec1974b767ebeb9676dcc8b7f7e407b9 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Sat, 10 Aug 2024 00:34:53 +0900
Subject: [PATCH 22/25] Button group align in center

---
 components/favorite/favorite.place.boxes.tsx | 42 ++++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/components/favorite/favorite.place.boxes.tsx b/components/favorite/favorite.place.boxes.tsx
index c3fdfb2..8c7bf25 100644
--- a/components/favorite/favorite.place.boxes.tsx
+++ b/components/favorite/favorite.place.boxes.tsx
@@ -34,24 +34,32 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
               <Card.Header>{place.name}</Card.Header>
             </Card.Content>
           </Card>
-          <ButtonGroup>
-            <Button
-              icon
-              labelPosition="left"
-              onClick={() =>
-                handleDelete(`favorite-place/${place.favorite_id}`)
-              }
-            >
-              <Icon name="cancel" />
-              삭제하기
-            </Button>
-            <Link href={`/reservation/place/${place.name}`}>
-              <Button icon labelPosition="right">
-                예약하기
-                <Icon name="arrow right" />
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              marginTop: '10px',
+            }}
+          >
+            <ButtonGroup>
+              <Button
+                icon
+                labelPosition="left"
+                onClick={() =>
+                  handleDelete(`favorite-place/${place.favorite_id}`)
+                }
+              >
+                <Icon name="cancel" />
+                삭제하기
               </Button>
-            </Link>
-          </ButtonGroup>
+              <Link href={`/reservation/place/${place.name}`}>
+                <Button icon labelPosition="right">
+                  예약하기
+                  <Icon name="arrow right" />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </div>
         </Grid.Column>
       ))}
     </Grid>

From 91d09e88ba1e0ed3cc314f31a8e1015097bc7984 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Sat, 10 Aug 2024 00:49:34 +0900
Subject: [PATCH 23/25] fix: link url

---
 components/favorite/favorite.place.boxes.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/favorite/favorite.place.boxes.tsx b/components/favorite/favorite.place.boxes.tsx
index 8c7bf25..e69c8c3 100644
--- a/components/favorite/favorite.place.boxes.tsx
+++ b/components/favorite/favorite.place.boxes.tsx
@@ -41,7 +41,7 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
               marginTop: '10px',
             }}
           >
-            <ButtonGroup>
+            <ButtonGroup fluid>
               <Button
                 icon
                 labelPosition="left"
@@ -52,7 +52,7 @@ const FavoritePlaceBoxes = ({ placeList }: { placeList: IPlace[] }) => {
                 <Icon name="cancel" />
                 삭제하기
               </Button>
-              <Link href={`/reservation/place/${place.name}`}>
+              <Link href={`/reservation/place/${place.region}/${place.name}`}>
                 <Button icon labelPosition="right">
                   예약하기
                   <Icon name="arrow right" />

From f384cee0043e0ea1e7fa2d683b48e6ddf4c4fcc8 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Sun, 11 Aug 2024 15:28:17 +0900
Subject: [PATCH 24/25] fix: overlap for choice

---
 components/favorite/favorite.place.choice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/favorite/favorite.place.choice.tsx b/components/favorite/favorite.place.choice.tsx
index fe7ad8c..7b1aaa8 100644
--- a/components/favorite/favorite.place.choice.tsx
+++ b/components/favorite/favorite.place.choice.tsx
@@ -32,7 +32,7 @@ const FavoritePlaceChoice = ({
   }
 
   return (
-    <div>
+    <div style={{marginTop: '40px'}}>
       <Form onSubmit={handleSubmit}>
         <Form.Select
           label="즐겨찾기할 장소"

From 24b1e22d203d84ef9cab7b05e2475e0ba40d79a6 Mon Sep 17 00:00:00 2001
From: HyoJeong Yun <hodori@postech.ac.kr>
Date: Sun, 11 Aug 2024 15:29:32 +0900
Subject: [PATCH 25/25] fix: lint

---
 components/favorite/favorite.place.choice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/favorite/favorite.place.choice.tsx b/components/favorite/favorite.place.choice.tsx
index 7b1aaa8..8fe253a 100644
--- a/components/favorite/favorite.place.choice.tsx
+++ b/components/favorite/favorite.place.choice.tsx
@@ -32,7 +32,7 @@ const FavoritePlaceChoice = ({
   }
 
   return (
-    <div style={{marginTop: '40px'}}>
+    <div style={{ marginTop: '40px' }}>
       <Form onSubmit={handleSubmit}>
         <Form.Select
           label="즐겨찾기할 장소"