Skip to content

Commit

Permalink
카페 상세 페이지 구현 (#52)
Browse files Browse the repository at this point in the history
  • Loading branch information
aaaz425 authored Jul 21, 2024
2 parents 12e9bcf + 0c1a2d3 commit a50b205
Show file tree
Hide file tree
Showing 34 changed files with 823 additions and 1,123 deletions.
1,206 changes: 166 additions & 1,040 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"nookies": "^2.5.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-kakao-maps-sdk": "^1.1.27",
"react-responsive": "^10.0.0",
"tailwind-merge": "^2.3.0"
},
Expand Down Expand Up @@ -69,6 +70,7 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"js-cookie": "^3.0.5",
"kakao.maps.d.ts": "^0.1.40",
"msw": "^2.3.0",
"postcss": "^8",
"prettier": "^3.2.5",
Expand Down
4 changes: 2 additions & 2 deletions public/icon/bookmark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/icon/internet.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions public/icon/phone.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/icon/store.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/icon/svg.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,20 @@ export { default as heart } from 'public/icon/heart.svg';
export { default as heart_full } from 'public/icon/heart_full.svg';
export { default as icon_plus } from 'public/icon/icon_plus.svg';
export { default as icon_profile } from 'public/icon/icon_profile.svg';
export { default as internet } from 'public/icon/internet.svg';
export { default as logo } from 'public/icon/logo.svg';
export { default as logo_secondary } from 'public/icon/logo_secondary.svg';
export { default as menu } from 'public/icon/menu.svg';
export { default as phone } from 'public/icon/phone.svg';
export { default as refresh } from 'public/icon/refresh.svg';
export { default as store } from 'public/icon/refresh.svg';
export { default as register_logo } from 'public/icon/register_logo.svg';
export { default as setting } from 'public/icon/setting.svg';
export { default as share } from 'public/icon/share.svg';
export { default as star } from 'public/icon/star.svg';
export { default as star_empty } from 'public/icon/star_empty.svg';
export { default as star_half } from 'public/icon/star_half.svg';
export { default as time } from 'public/icon/time.svg';
export { default as upload } from 'public/icon/upload.svg';
export { default as user0 } from 'public/icon/user0.svg';
export { default as user1 } from 'public/icon/user1.svg';
Expand Down
8 changes: 8 additions & 0 deletions public/icon/time.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 14 additions & 1 deletion src/api/cafe/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { END_POINT } from '@/constants/api';
import { CafeRecommendResType } from '@/types/cafe';
import {
CafeLikeReqType,
CafeLikeResType,
CafeRecommendResType,
} from '@/types/cafe';
import { fetcher } from '../fetcher';

export const getRecommendedCafeList = async () => {
Expand All @@ -9,3 +13,12 @@ export const getRecommendedCafeList = async () => {

return data;
};

export const patchCafeLike = async ({ cafeId, isLike }: CafeLikeReqType) => {
const { data } = await fetcher.patch<CafeLikeResType>(END_POINT.CAFE.LIKE, {
cafeId,
isLike,
});

return data;
};
27 changes: 25 additions & 2 deletions src/api/cafe/queries.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,33 @@
import { useQuery } from '@tanstack/react-query';
import { useMutation, useQuery } from '@tanstack/react-query';
import { CafeLikeReqType } from '@/types/cafe';
import { cafeKeys } from './../queryKeys';
import { getRecommendedCafeList } from '.';
import { getRecommendedCafeList, patchCafeLike } from '.';

export function useRecommendedCafeListQuery() {
return useQuery({
...cafeKeys.recommendedCafeList,
queryFn: getRecommendedCafeList,
});
}

// Todo: 쿼리키 추가하기
export function useCafeLikeMutation({
cafeId,
isLike,
setLikeState,
}: CafeLikeReqType & {
setLikeState: React.Dispatch<React.SetStateAction<boolean>>;
}) {
return useMutation({
mutationFn: () => patchCafeLike({ cafeId, isLike }),
onSuccess: (data) => {
// Todo: 성공할 경우 토스트 팝업 띄우기
const newLikeState = data.data.isLike;
setLikeState(newLikeState);
},
onError: (error) => {
// Todo: 실패할 경우 토스트 팝업 띄우기
console.log(error.message);
},
});
}
14 changes: 14 additions & 0 deletions src/api/server/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { END_POINT } from '@/constants/api';
import { CafeDetailResType } from '@/types/cafe';
import { ReviewDetailResType } from '@/types/review';
import { serverFetcher } from '../serverFetcher';

Expand All @@ -14,3 +15,16 @@ export const getReviewDetail = async (reviewId: string) => {
return { error: (error as Error).message };
}
};

export const getCafeDetail = async (cafeId: string) => {
try {
const data = await serverFetcher<CafeDetailResType>({
endPoint: END_POINT.CAFE.DETAIL(cafeId),
errorMessage: '카페 상세 조회에 실패했습니다.',
});

return { data };
} catch (error) {
return { error: (error as Error).message };
}
};
11 changes: 0 additions & 11 deletions src/app/(header)/cafe/[cafeId]/page.tsx

This file was deleted.

3 changes: 1 addition & 2 deletions src/app/(header)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import '@/app/globals.css';
import Header from '@/components/Header/Header';

export default function RootLayout({
export default function HomeLayout({
children,
}: Readonly<{
children: React.ReactNode;
Expand Down
1 change: 0 additions & 1 deletion src/app/_components/recommend/RecommendedCafeCarousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export default function RecommendedCafeCarousel() {
data.data.cafes.map((cafe, index) => (
<RecommendedCafeCarouselIndicator
key={cafe.cafeId}
cafeId={cafe.cafeId}
index={index}
currentIndex={currentIndex}
clickHandler={() => clickHandler({ targetIndex: index })}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
import clsx from 'clsx';
import { RecommendedCafeType } from '@/types/cafe';

type RecommendedCafeCarouselIndicatorProps = Pick<
RecommendedCafeType,
'cafeId'
> & {
type RecommendedCafeCarouselIndicatorProps = {
index: number;
currentIndex: number;
clickHandler: () => void;
};

export default function RecommendedCafeCarouselIndicator({
cafeId,
index,
currentIndex,
clickHandler,
}: RecommendedCafeCarouselIndicatorProps) {
return (
<div
key={cafeId}
className={clsx('w-1 h-1 rounded-full cursor-pointer', {
['bg-primary']: index === currentIndex,
['bg-text_light_grey']: index !== currentIndex,
Expand Down
27 changes: 18 additions & 9 deletions src/app/_components/review/ReviewItem/ReviewItemCafeInfo.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
'use client';

import clsx from 'clsx';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Icon from '@/components/Icon';
import { ROUTE_PATH } from '@/constants/route';
import useLikeCafe from '@/hooks/useLikeCafe';
import { ReviewItemType } from '@/types/review';

type ReviewItemCafeInfoProps = Pick<ReviewItemType, 'cafeInfo'>;

export default function ReviewItemCafeInfo({
cafeInfo,
}: ReviewItemCafeInfoProps) {
const [isLike, setIsLike] = useState(cafeInfo.isLike);
const router = useRouter();

const toggleBookmarkHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
const { likeState, likeClickHandler } = useLikeCafe({
isLike: cafeInfo.isLike,
cafeId: cafeInfo.cafeId,
});

const cafeClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
setIsLike((prev) => !prev);
router.push(ROUTE_PATH.CAFE_DETAIL(cafeInfo.cafeId));
};

return (
<div className="flex justify-between items-center px-12 py-24 rounded-md border border-bg_disabled">
<div
className="flex justify-between items-center px-12 py-24 rounded-md border border-bg_disabled"
onClick={(e) => cafeClickHandler(e)}>
<div className="flex flex-col gap-1">
<span className="text-14 font-bold">{cafeInfo.cafeName}</span>
<span className="text-12 text-text_grey">{cafeInfo.cafeLoca}</span>
Expand All @@ -27,12 +36,12 @@ export default function ReviewItemCafeInfo({
className={clsx(
'flex items-center justify-center p-12 rounded-full border',
{
['border-stroke_focused bg-button_icon_only_bg']: isLike,
['border-stroke_grey']: !isLike,
['border-stroke_focused bg-button_icon_only_bg']: likeState,
['border-stroke_grey']: !likeState,
}
)}
onClick={toggleBookmarkHandler}>
<Icon name={isLike ? 'bookmark_marked' : 'bookmark'} size={16} />
onClick={likeClickHandler}>
<Icon name={likeState ? 'bookmark_marked' : 'bookmark'} size={16} />
</button>
</div>
);
Expand Down
Loading

0 comments on commit a50b205

Please sign in to comment.