Skip to content

Commit

Permalink
[DETAIL] 상점 상세 페이지 URL 복사 및 북마크 구현 (#124)
Browse files Browse the repository at this point in the history 
* Merge commit '3dd27b16c21891eb16b950346806161ea3525988'

* feat: shop 응답값 타입 정의

* refactor: 오타 수정

* feat: useCounter 구현

* feat: marker 클릭 이벤트 추가

* feat: ImageCarousel 구현

* feat: ShopDetail Page 구조 잡기

* refactor: typo error 수정

* refactor: imageCarousel css 수정

* feat: StarRatingPreview 구현

* feat: ShopDetail 에 기본 정보 ui 추가

* refactor: 불필요한 eslin 옵션 off

* refactor: detail 페이지 경로 수정

* feat: fetch 로직 및 타입 설계

* feat: 데이터 확인을 위한 mock 추가

* feat: not found svg 추가

* feat: SectionHeader 구현

* feat: ISO 형식 날짜 변환 함수 구현

* feat: Review 관련 컴포넌트 구현

* feat: Map 구현

* feat: NotFound 컴포넌트 구현

* feat: ShopDetail에 컴포넌트 연결 및 grid 적용

* Squashed commit of the following: d0dam

commit 776fdea
Author: Minjae Kim <smallkdb@gmail.com>
Date:   Tue Nov 7 17:11:57 2023 +0900

    [Auth] User 타입으로 인한 버그 해결  (#114)

    * refactor: 단어 spell typo 수정

    * refactor: SNSUser 타입 재정의

    * refactor: oauthType 롤백

    * Merge commit '71fedc7ab9189ae649abd567336885b99af3a261'

commit 71fedc7
Merge: a08ef32 12ab91b
Author: 김혜준 <114041848+hyejun0228@users.noreply.github.com>
Date:   Mon Nov 6 16:26:56 2023 +0900

    Merge pull request #115 from BCSDLab/feature/#86

    [HOTFIX] Mock 데이터 삭제로 인한 에러 해결

commit 12ab91b
Author: 김혜준 <alice5855@naver.com>
Date:   Mon Nov 6 00:57:54 2023 +0900

    fix: mock data 추가

commit a08ef32
Merge: 4065df0 3767d38
Author: 김혜준 <114041848+hyejun0228@users.noreply.github.com>
Date:   Mon Nov 6 00:44:54 2023 +0900

    Merge pull request #112 from BCSDLab/feature/#86

    [SEARCH] 검색 결과 페이지 구현

commit 3767d38
Author: 김혜준 <alice5855@naver.com>
Date:   Mon Nov 6 00:44:32 2023 +0900

    remove: mock data 삭제

commit e5e1132
Author: 김혜준 <alice5855@naver.com>
Date:   Sat Nov 4 02:35:12 2023 +0900

    refactor: return 값 재분기 처리

commit 3f82efd
Author: 김혜준 <alice5855@naver.com>
Date:   Sat Nov 4 02:28:00 2023 +0900

    fix: interface 수정

commit 853cf94
Author: 김혜준 <alice5855@naver.com>
Date:   Fri Nov 3 02:36:23 2023 +0900

    refactor: 훅 params 값 수정

commit ab811d5
Author: 김혜준 <alice5855@naver.com>
Date:   Fri Nov 3 02:00:16 2023 +0900

    refactor: 타입선언 통일

commit 2be145c
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 15:13:07 2023 +0900

    fix: lint 에러 수정

commit d291ac3
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 15:12:01 2023 +0900

    refactor: return 추가 분기처리 및 검색 UI수정

commit c419b19
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 14:19:05 2023 +0900

    refator: enterEvent함수 변경

commit 1fc142a
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 13:58:11 2023 +0900

    fix: lint 에러 수정

commit 48f514c
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 13:40:05 2023 +0900

    refactor: return 값 재분기 처리

commit 2ba0e8c
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 02:02:20 2023 +0900

    refator: 불필요한 if 문 삭제

commit aba2f12
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 01:30:57 2023 +0900

    refactor: 내부 이벤트함수 외부로 이동

commit 74b638b
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 00:31:52 2023 +0900

    refator: useDebounce 타입 수정

commit 5a7413e
Author: 김혜준 <alice5855@naver.com>
Date:   Thu Nov 2 00:16:01 2023 +0900

    refactor: return값 분기처리

commit 91c405f
Author: 김혜준 <alice5855@naver.com>
Date:   Mon Oct 30 02:07:46 2023 +0900

    refactor: 함수명 변경

commit b042d95
Author: 김혜준 <alice5855@naver.com>
Date:   Mon Oct 30 01:45:08 2023 +0900

    fix: 불필요한 콘솔 삭제

commit c56736b
Merge: 2e40c20 4065df0
Author: 김혜준 <alice5855@naver.com>
Date:   Mon Oct 30 01:41:59 2023 +0900

    Merge branch 'develop' into feature/#86

commit 2e40c20
Author: 김혜준 <alice5855@naver.com>
Date:   Mon Oct 30 01:21:32 2023 +0900

    feat: 검색 결과 페이지 구현

* fix: 충돌간 에러사항 수정

* fix: lint 에러 수정

* fix: lint 에러 수정

* refactor: bem 형식에 맞게 className 수정

* refactor: 불확실한 타입명 및 타입 재설정

* refactor:불필요한 타입 추론 제거

* refactor: css 코드 최적화

* refactor: SectionHeader Button 관련 props 네이밍 변경

* refactor: 코드 이해를 위한 주석 추가

* refactor: 통일감을 위한 className 변경

* hotfix: mock 에 사용되는 google api 제거

* refactor: tanstack query 버전 변경에 따른 useQuery 문 재작성

* refactor: className snake case로 변경

* Squashed commit of the following:

commit e17f287
Merge: a062a1f 8d7e147
Author: somin <110970349+LUNA-KK@users.noreply.github.com>
Date:   Thu Nov 16 23:38:42 2023 +0900

    Merge pull request #119 from BCSDLab/feature/#111

    [AUTH]  아이디, 비밀번호 찾기 PC 버전 UI 추가

commit 8d7e147
Merge: bea4333 a062a1f
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Thu Nov 16 23:37:07 2023 +0900

    Merge remote-tracking branch 'origin/develop' into feature/#111

commit bea4333
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Thu Nov 16 23:16:52 2023 +0900

    refactor: 커스텀 훅 제작

commit d597afc
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Thu Nov 16 23:09:27 2023 +0900

    refactor: 함수 재정의

commit b429ce7
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Thu Nov 16 22:57:15 2023 +0900

    refactor: label 태그 사용

commit 1be32e7
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Thu Nov 16 21:54:14 2023 +0900

    refactor: 파일명 수정

commit a050106
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Thu Nov 16 21:48:40 2023 +0900

    refactor: 파일명 수정 사전작업

commit a062a1f
Author: Minjae Kim <smallkdb@gmail.com>
Date:   Wed Nov 15 18:35:45 2023 +0900

    [DETAIL] 상점 상세 페이지 구현 (#121)

    * Merge commit '3dd27b16c21891eb16b950346806161ea3525988'

    * feat: shop 응답값 타입 정의

    * refactor: 오타 수정

    * feat: useCounter 구현

    * feat: marker 클릭 이벤트 추가

    * feat: ImageCarousel 구현

    * feat: ShopDetail Page 구조 잡기

    * refactor: typo error 수정

    * refactor: imageCarousel css 수정

    * feat: StarRatingPreview 구현

    * feat: ShopDetail 에 기본 정보 ui 추가

    * refactor: 불필요한 eslin 옵션 off

    * refactor: detail 페이지 경로 수정

    * feat: fetch 로직 및 타입 설계

    * feat: 데이터 확인을 위한 mock 추가

    * feat: not found svg 추가

    * feat: SectionHeader 구현

    * feat: ISO 형식 날짜 변환 함수 구현

    * feat: Review 관련 컴포넌트 구현

    * feat: Map 구현

    * feat: NotFound 컴포넌트 구현

    * feat: ShopDetail에 컴포넌트 연결 및 grid 적용

    * Squashed commit of the following: d0dam

    commit 776fdea
    Author: Minjae Kim <smallkdb@gmail.com>
    Date:   Tue Nov 7 17:11:57 2023 +0900

        [Auth] User 타입으로 인한 버그 해결  (#114)

        * refactor: 단어 spell typo 수정

        * refactor: SNSUser 타입 재정의

        * refactor: oauthType 롤백

        * Merge commit '71fedc7ab9189ae649abd567336885b99af3a261'

    commit 71fedc7
    Merge: a08ef32 12ab91b
    Author: 김혜준 <114041848+hyejun0228@users.noreply.github.com>
    Date:   Mon Nov 6 16:26:56 2023 +0900

        Merge pull request #115 from BCSDLab/feature/#86

        [HOTFIX] Mock 데이터 삭제로 인한 에러 해결

    commit 12ab91b
    Author: 김혜준 <alice5855@naver.com>
    Date:   Mon Nov 6 00:57:54 2023 +0900

        fix: mock data 추가

    commit a08ef32
    Merge: 4065df0 3767d38
    Author: 김혜준 <114041848+hyejun0228@users.noreply.github.com>
    Date:   Mon Nov 6 00:44:54 2023 +0900

        Merge pull request #112 from BCSDLab/feature/#86

        [SEARCH] 검색 결과 페이지 구현

    commit 3767d38
    Author: 김혜준 <alice5855@naver.com>
    Date:   Mon Nov 6 00:44:32 2023 +0900

        remove: mock data 삭제

    commit e5e1132
    Author: 김혜준 <alice5855@naver.com>
    Date:   Sat Nov 4 02:35:12 2023 +0900

        refactor: return 값 재분기 처리

    commit 3f82efd
    Author: 김혜준 <alice5855@naver.com>
    Date:   Sat Nov 4 02:28:00 2023 +0900

        fix: interface 수정

    commit 853cf94
    Author: 김혜준 <alice5855@naver.com>
    Date:   Fri Nov 3 02:36:23 2023 +0900

        refactor: 훅 params 값 수정

    commit ab811d5
    Author: 김혜준 <alice5855@naver.com>
    Date:   Fri Nov 3 02:00:16 2023 +0900

        refactor: 타입선언 통일

    commit 2be145c
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 15:13:07 2023 +0900

        fix: lint 에러 수정

    commit d291ac3
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 15:12:01 2023 +0900

        refactor: return 추가 분기처리 및 검색 UI수정

    commit c419b19
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 14:19:05 2023 +0900

        refator: enterEvent함수 변경

    commit 1fc142a
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 13:58:11 2023 +0900

        fix: lint 에러 수정

    commit 48f514c
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 13:40:05 2023 +0900

        refactor: return 값 재분기 처리

    commit 2ba0e8c
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 02:02:20 2023 +0900

        refator: 불필요한 if 문 삭제

    commit aba2f12
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 01:30:57 2023 +0900

        refactor: 내부 이벤트함수 외부로 이동

    commit 74b638b
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 00:31:52 2023 +0900

        refator: useDebounce 타입 수정

    commit 5a7413e
    Author: 김혜준 <alice5855@naver.com>
    Date:   Thu Nov 2 00:16:01 2023 +0900

        refactor: return값 분기처리

    commit 91c405f
    Author: 김혜준 <alice5855@naver.com>
    Date:   Mon Oct 30 02:07:46 2023 +0900

        refactor: 함수명 변경

    commit b042d95
    Author: 김혜준 <alice5855@naver.com>
    Date:   Mon Oct 30 01:45:08 2023 +0900

        fix: 불필요한 콘솔 삭제

    commit c56736b
    Merge: 2e40c20 4065df0
    Author: 김혜준 <alice5855@naver.com>
    Date:   Mon Oct 30 01:41:59 2023 +0900

        Merge branch 'develop' into feature/#86

    commit 2e40c20
    Author: 김혜준 <alice5855@naver.com>
    Date:   Mon Oct 30 01:21:32 2023 +0900

        feat: 검색 결과 페이지 구현

    * fix: 충돌간 에러사항 수정

    * fix: lint 에러 수정

    * fix: lint 에러 수정

    * refactor: bem 형식에 맞게 className 수정

    * refactor: 불확실한 타입명 및 타입 재설정

    * refactor:불필요한 타입 추론 제거

    * refactor: css 코드 최적화

    * refactor: SectionHeader Button 관련 props 네이밍 변경

    * refactor: 코드 이해를 위한 주석 추가

    * refactor: 통일감을 위한 className 변경

    * hotfix: mock 에 사용되는 google api 제거

    * refactor: tanstack query 버전 변경에 따른 useQuery 문 재작성

    * refactor: className snake case로 변경

commit a7f0768
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Mon Nov 13 22:03:52 2023 +0900

    chore: 폴더구조 변경

commit f8ad582
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Mon Nov 13 21:50:06 2023 +0900

    refactor: svg명 수정

commit e61154c
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Mon Nov 13 21:46:34 2023 +0900

    refactor: 코드 가독성 향상

commit b869ee3
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Mon Nov 13 21:44:33 2023 +0900

    refactor: 경로명 수정

commit cca17c1
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Mon Nov 13 21:16:07 2023 +0900

    refactor: 문구 변경

commit 143a059
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 17:18:05 2023 +0900

    refactor: lint 에러 수정

commit 2c334f0
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 17:16:03 2023 +0900

    refactor: lint 에러 수정

commit d78026e
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 17:08:28 2023 +0900

    fix: sns 유저 관련 에러 주석처리

commit 4fea1c6
Merge: b55783e 776fdea
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 17:02:27 2023 +0900

    Merge remote-tracking branch 'origin/develop' into feature/#111

commit b55783e
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 17:00:20 2023 +0900

    refactor: 오류 수정

commit 41381bd
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 16:59:09 2023 +0900

    feat: 아이디, 비밀번호 찾기 pc ui 추가

commit f027f61
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 16:58:29 2023 +0900

    refactor: 폴더 구조 변경

commit 5023af3
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 16:56:33 2023 +0900

    refactor: svg 추가

commit a2181c3
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Fri Nov 10 16:55:35 2023 +0900

    refactor: 아이디, 비밀번호 찾기 라우팅 변경

commit 9992973
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Sun Oct 29 16:05:08 2023 +0900

    refactor: 타입관련 에러 수정

commit 3438b62
Author: Somin <ksomin03@koreatech.ac.kr>
Date:   Sun Oct 29 16:04:45 2023 +0900

    refactor: 버튼 문구 수정

* chore: lock 파일 변경 반영

* feat: url 복사 로직 추가

* feat: 북마크 기능 추가

* refactor: ScrapButton 분리

* fix: lint 에러 수정

* refactor: 불필요한 로직 제거, 토글 시 문구 변경

* refactor: 리뷰 반영

* refactor: 불필요한 타입 단언 제거 및 api 함수 형식 통일

* refactor: api 이해를 위한 주석 추가

* refactor: 불필요한 vs setting 제거
  • Loading branch information
@D0Dam
D0Dam authored Dec 14, 2023
1 parent 50f2036 commit 4cd2e4d
Show file tree
Hide file tree
Showing 10 changed files with 167 additions and 21 deletions.
46 changes: 46 additions & 0 deletions src/api/scrap/entity.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
}
10 changes: 10 additions & 0 deletions src/api/scrap/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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}`);
16 changes: 16 additions & 0 deletions src/api/scrap/scrapApiClient.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/assets/svg/shop/book-mark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 0 additions & 12 deletions src/pages/ShopDetail/ShopDetail.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
13 changes: 12 additions & 1 deletion src/pages/ShopDetail/components/Map/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
Expand Down
17 changes: 17 additions & 0 deletions src/pages/ShopDetail/components/ScrapButton/ScrapButton.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
30 changes: 30 additions & 0 deletions src/pages/ShopDetail/components/ScrapButton/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 4 additions & 7 deletions src/pages/ShopDetail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -26,11 +26,11 @@ function ShopDetail() {
if (data) {
const {
// shopId,
// placeId,
// periods,
// scrap,
// openNow,
// category,
// placeId,
scrap,
name,
formattedAddress,
lat,
Expand Down Expand Up @@ -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>

Expand Down
31 changes: 31 additions & 0 deletions src/utils/hooks/useScrap.ts
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 4cd2e4d

Please sign in to comment.