Favorite place

components/favorite/favorite.place.boxes.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Link from 'next/link';
+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>
+            </Card.Content>
+          </Card>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              marginTop: '10px',
+            }}
+          >
+            <ButtonGroup fluid>
+              <Button
+                icon
+                labelPosition="left"
+                onClick={() =>
+                  handleDelete(`favorite-place/${place.favorite_id}`)
+                }
+              >
+                <Icon name="cancel" />
+                삭제하기
+              </Button>
+              <Link href={`/reservation/place/${place.region}/${place.name}`}>
+                <Button icon labelPosition="right">
+                  예약하기
+                  <Icon name="arrow right" />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </div>
+        </Grid.Column>
+      ))}
+    </Grid>
+  );
+};
+
+export default FavoritePlaceBoxes;

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 style={{ marginTop: '40px' }}>
+      <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;

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>

pages/auth/my-favorite.tsx

@@ -0,0 +1,102 @@
+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 FavoritePlaceBoxes from '@/components/favorite/favorite.place.boxes';
+import FavoritePlaceChoice from '@/components/favorite/favorite.place.choice';
+
+import { IPlace, IFavoritePlace } from '@/types/favorite.interface';
+
+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(),
+  });
+  const [totalPlaceList, setTotalPlaceList] = useState([] as IPlace[]);
+  const [placeList, setPlaceList] = useState([] as IPlace[]);
+
+  useEffect(() => {
+    PoPoAxios.get('/auth/myInfo', { withCredentials: true })
+      .then((res) => setMyInfo(res.data))
+      .catch(() => {
+        alert('로그인 후 조회할 수 있습니다.');
+        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[]>(
+          `/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) => {
+                const cur = res.data;
+                cur.favorite_id = favoritePlace.uuid;
+                setPlaceList((prev) => [...prev, cur]);
+              })
+              .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, myInfo.email]);
+
+  return (
+    <Layout>
+      <Container
+        style={{
+          padding: '40px',
+          margin: '2em 0 4em',
+          backgroundColor: '#eeeeee',
+          borderRadius: '8px',
+        }}
+      >
+        <h2>내 즐겨찾기</h2>
+        <FavoritePlaceBoxes placeList={placeList} />
+        {placeList.length < 3 && (
+          <FavoritePlaceChoice
+            placeList={totalPlaceList}
+            userId={myInfo.email.replace('@postech.ac.kr', '')}
+          />
+        )}
+      </Container>
+    </Layout>
+  );
+};
+
+export default MyInfoPage;

types/favorite.interface.ts

@@ -0,0 +1,15 @@
+export interface IFavoritePlace {
+  uuid: string;
+  user_id: string;
+  place_id: string;
+  created_at: string;
+}
+
+export interface IPlace {
+  favorite_id: string;
+  uuid: string;
+  name: string;
+  location: string;
+  region: string;
+  image_url: string;
+}