[DETAIL] 상점 상세 페이지 URL 복사 및 북마크 구현

src/api/scrap/entity.ts

@@ -0,0 +1,46 @@
+export interface GetMyScrapShopResponse {
+  content: {
+    address: string;
+    category: string;
+    createdAt: string;
+    directory: {
+      createdAt: string;
+      id: number;
+      name: string;
+      scrapCount: number;
+      updatedAt: string;
+    };
+    name: string;
+    photo: string;
+    placeId: string;
+    ratingCount: number;
+    scrapId: number;
+    totalRating: number;
+    updatedAt: string;
+  }[];
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  pageable: {
+    offset: number;
+    pageNumber: number;
+    pageSize: number;
+    paged: boolean;
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    unpaged: boolean;
+  };
+  size: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  totalElements: number;
+  totalPages: number;
+}

src/api/scrap/index.ts

@@ -0,0 +1,10 @@
+import scrapApi from './scrapApiClient';
+import type { GetMyScrapShopResponse } from './entity';
+
+export const postScrapShop = (shopId: string) =>
+  // post된 음식점이 들어가는 최상위 directoryId는 0입니다.
+  scrapApi.post('/scraps', { directoryId: 0, placeId: shopId });
+
+export const getMyScrapShop = () => scrapApi.get<GetMyScrapShopResponse>('/scraps');
+
+export const deleteScrapShop = (scrapId: number) => scrapApi.delete(`/scraps/${scrapId}`);

src/api/scrap/scrapApiClient.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+import { API_PATH } from 'config/constants';
+
+const scrapApi = axios.create({
+  baseURL: `${API_PATH}`,
+  timeout: 2000,
+});
+
+scrapApi.interceptors.request.use((config) => {
+  const accessToken = sessionStorage.getItem('accessToken');
+  // eslint-disable-next-line no-param-reassign
+  if (config.headers && accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+  return config;
+});
+
+export default scrapApi;

src/pages/ShopDetail/ShopDetail.module.scss

@@ -80,18 +80,6 @@
       font-size: 36px;
       font-weight: normal;
     }
-
-    & > button {
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      justify-content: center;
-      background: #f8f8f8;
-      padding: 16px 24px;
-      border-radius: 4px;
-      font-size: 16px;
-      color: #666;
-    }
   }
 
   &__info-name {

src/pages/ShopDetail/components/Map/index.tsx

@@ -1,4 +1,5 @@
 import useNaverMap from 'pages/Home/components/Map/hooks/useNaverMap';
+import makeToast from 'utils/ts/makeToast';
 import SectionHeader from '../SectionHeader';
 import styles from './Map.module.scss';
 
@@ -9,14 +10,24 @@ interface Props {
 }
 
 function Map({ formattedAddress, latitude, longitude }: Props) {
+  const copyURL = () => {
+    const urlToCopy = window.location.href;
+
+    navigator.clipboard.writeText(urlToCopy).then(() => {
+      makeToast('success', 'URL을 클립보드에 복사하였습니다.');
+    }).catch(() => {
+      makeToast('error', 'URL을 복사하는데 실패했습니다.');
+    });
+  };
+
   useNaverMap(latitude, longitude);
 
   return (
     <section className={styles.container}>
       <SectionHeader
         title="지도"
         description={formattedAddress}
-        button={{ content: 'URL 복사', onClick: () => {} }}
+        button={{ content: 'URL 복사', onClick: copyURL }}
       />
       <div id="map" className={styles.map} />
     </section>

src/pages/ShopDetail/components/ScrapButton/ScrapButton.module.scss

@@ -0,0 +1,17 @@
+.scrap-button {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  justify-content: center;
+  background: #f8f8f8;
+  padding: 16px 24px;
+  border-radius: 4px;
+  font-size: 16px;
+  color: #666;
+  transition: all 0.2s ease;
+
+  &--active {
+    background: #ff7f23;
+    color: #fff;
+  }
+}

src/pages/ShopDetail/components/ScrapButton/index.tsx

@@ -0,0 +1,30 @@
+import useScrap from 'utils/hooks/useScrap';
+import cn from 'utils/ts/classNames';
+import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg';
+import styles from './ScrapButton.module.scss';
+
+interface Props {
+  placeId: string;
+  initialScrapId?: number | null;
+}
+
+function ScrapButton({ placeId, initialScrapId = null }: Props) {
+  const { scrapId, toggleScrap, isPending } = useScrap(placeId, initialScrapId);
+
+  return (
+    <button
+      type="button"
+      onClick={toggleScrap}
+      disabled={isPending}
+      className={cn({
+        [styles['scrap-button']]: true,
+        [styles['scrap-button--active']]: scrapId !== null,
+      })}
+    >
+      {scrapId ? <BookMarkIcon fill="#fff" stroke="#fff" /> : <BookMarkIcon stroke="#666" />}
+      <span>{scrapId ? '북마크된 장소' : '북마크 하기'}</span>
+    </button>
+  );
+}
+
+export default ScrapButton;

src/pages/ShopDetail/index.tsx

@@ -3,12 +3,12 @@ import { useQuery } from '@tanstack/react-query';
 import AuthTopNavigation from 'components/Auth/AuthTopNavigation';
 import { fetchShop } from 'api/shop';
 import StarRatingPreview from 'components/StarRating/StarRatingPreview';
-import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg';
 import { ReactComponent as InfoIcon } from 'assets/svg/shop/info.svg';
 import styles from './ShopDetail.module.scss';
 import ImageCarousel from './components/ImageCarousel';
 import FriendReviewList from './components/ReviewList/FriendReviewList';
 import MyReviewList from './components/ReviewList/MyReviewList';
+import ScrapButton from './components/ScrapButton';
 import Map from './components/Map';
 // import mock from './mock';
 
@@ -26,11 +26,11 @@ function ShopDetail() {
   if (data) {
     const {
       // shopId,
-      // placeId,
       // periods,
-      // scrap,
       // openNow,
       // category,
+      // placeId,
+      scrap,
       name,
       formattedAddress,
       lat,
@@ -60,10 +60,7 @@ function ShopDetail() {
                 </div>
                 <div className={styles['detail-main__name']}>
                   <h1>{name}</h1>
-                  <button type="button" onClick={() => {}}>
-                    <BookMarkIcon />
-                    <span>북마크 하기</span>
-                  </button>
+                  {placeId && <ScrapButton placeId={placeId} initialScrapId={scrap} />}
                 </div>
               </div>
 

src/utils/hooks/useScrap.ts

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query';
+import { deleteScrapShop, postScrapShop } from 'api/scrap';
+import { useState } from 'react';
+
+const useScrap = (placeId: string, initialScrapId: number | null) => {
+  const [scrapId, setScrapId] = useState<number | null>(initialScrapId);
+
+  const { mutate: postScrap, isPending: postPending } = useMutation({
+    mutationFn: postScrapShop,
+    onSuccess: (res) => setScrapId(res.data.id),
+  });
+
+  const { mutate: deleteScrap, isPending: deletePending } = useMutation({
+    mutationFn: deleteScrapShop,
+  });
+
+  const toggleScrap = () => {
+    if (scrapId) {
+      deleteScrap(scrapId);
+      setScrapId(null);
+    } else {
+      postScrap(placeId);
+    }
+  };
+
+  const isPending = postPending || deletePending;
+
+  return { scrapId, toggleScrap, isPending };
+};
+
+export default useScrap;