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

* 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 변경

.eslintrc.json

@@ -22,6 +22,8 @@
     "linebreak-style": "off",
     "react/jsx-props-no-spreading": "off",
     "react/require-default-props": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "implicit-arrow-linebreak": "off",
     "no-restricted-imports": [
       "error",
       {

src/App.tsx

@@ -26,6 +26,7 @@ import GoogleLogin from 'pages/Auth/OAuth/GoogleLogin';
 import MyPage from 'pages/MyPage';
 import NotFoundPage from 'pages/Search/components/NotFoundPage';
 import FollowProfile from 'pages/Follow/components/FollowProfile';
+import ShopDetail from 'pages/ShopDetail';
 
 export default function App(): JSX.Element {
   return (
@@ -46,6 +47,7 @@ export default function App(): JSX.Element {
             <Route path="/setting" element={<Setting />} />
             <Route path="/setting/id-change" element={<IdChange />} />
           </Route>
+          <Route path="/shop/:placeId" element={<ShopDetail />} />
           <Route path="/withdrawal" element={<Withdrawal />} />
           <Route path="/profile" element={<MyPage />} />
           <Route path="/post/:name" element={<Post />} />

src/api/review/entity.ts

@@ -1,6 +1,56 @@
 export interface ReviewParams {
-  placeId : string;
-  content : string;
-  rate : number;
-  reviewImages : File[];
+  placeId: string;
+  content: string;
+  rate: number;
+  reviewImages: File[];
+}
+
+export interface ShopReviewsResponse {
+  content: {
+    content: string;
+    createdAt: string;
+    id: number;
+    rate: number;
+    reviewImages: {
+      imageUrl: string;
+      originalName: string;
+    }[];
+    shopPlaceId: string;
+    userReviewResponse: {
+      account: string;
+      id: number;
+      nickname: string;
+      profileImage: {
+        id: number;
+        originalName: string;
+        path: string;
+        url: 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/review/index.ts

@@ -1,5 +1,5 @@
-import { ReviewParams } from './entity';
 import reviewApi from './reviewApiClient';
+import type { ReviewParams, ShopReviewsResponse } from './entity';
 
 export const postReview = (params: ReviewParams) => {
   const formData = new FormData();
@@ -17,3 +17,7 @@ export const postReview = (params: ReviewParams) => {
 };
 
 export const deleteReview = (reviewId: string) => reviewApi.delete(`/${reviewId}`);
+
+export const fetchFollowerReview = (placeId: string) => reviewApi.get<ShopReviewsResponse>(`/followers/shop/${placeId}`);
+
+export const fetchMyReview = (placeId: string) => reviewApi.get<ShopReviewsResponse>(`/shop/${placeId}`);

src/api/shop/entity.ts

@@ -17,11 +17,11 @@ export interface FilterShopsResponse {
 export type FilterShopsListResponse = FilterShopsResponse[];
 
 export interface FetchTrendingsResponse {
-  trendings: string[]
+  trendings: string[];
 }
 
 export interface SearchQueryParams {
-  searchText : string;
+  searchText: string;
 }
 
 export interface ShopsParams {
@@ -43,10 +43,33 @@ export interface Shop {
   formattedAddress: string;
   lat: number;
   lng: number;
-  openNow: boolean
+  openNow: boolean;
   totalRating: number | null;
   ratingCount: number | null;
   photoToken: string;
   dist: number;
+  category: string; // 추후 카테고리 확인 필요
+}
+
+type Period = {
+  close: { day: number; time: number };
+  open: { day: number; time: number };
+} | null;
+
+export interface FetchShopResponse {
+  shopId: number;
+  placeId: string;
+  name: string;
+  formattedAddress: string;
+  lat: number;
+  lng: number;
+  formattedPhoneNumber: string;
+  openNow: boolean;
+  totalRating: number;
+  ratingCount: number;
   category: string;
+  todayPeriod: [number, number];
+  periods: Period[];
+  scrap: number | null;
+  photos: string[];
 }

src/api/shop/index.ts

@@ -1,14 +1,14 @@
 import {
   Coords, FetchShopsResponse, FetchTrendingsResponse, FilterShopsParams,
-  FilterShopsListResponse, ShopsParams,
+  FilterShopsListResponse, ShopsParams, FetchShopResponse,
 } from './entity';
 import shopApi from './shopApiClient';
 
 export const fetchTrendings = () => shopApi.get<FetchTrendingsResponse>('/trending');
 
-export const fetchShop = (shopId: string) => shopApi.get(`/shop?place_id=${shopId}`);
+export const fetchShop = (shopId: string) => shopApi.get<FetchShopResponse>(`/shops/${shopId}`);
 
-export const getfilterShops = (params: FilterShopsParams, location: Coords) => {
+export const getFilterShops = (params: FilterShopsParams, location: Coords) => {
   const url = `/shops/maps?options_friend=${params.options_friend}&options_nearby=${params.options_nearby}&options_scrap=${params.options_scrap}`;
   const requestBody = {
     lat: location.lat,

src/components/StarRating/StarRating.module.scss

@@ -3,7 +3,6 @@
   align-items: center;
   width: 160px;
   height: 32px;
-  margin-bottom: 16px;
 }
 
 .wrapper {

src/components/StarRating/StarRatingPreview.tsx

@@ -0,0 +1,23 @@
+import { ReactComponent as Star } from 'assets/svg/post/star.svg';
+import styles from './StarRating.module.scss';
+
+interface Props {
+  rate: number;
+}
+
+function StarRatingPreview({ rate }: Props) {
+  return (
+    <div className={styles.starRateContainer}>
+      {[1, 2, 3, 4, 5].map((num) => (
+        <Star
+          key={num}
+          className={styles.wrapper__star}
+          width={40}
+          fill={rate >= num ? '#ff7f23' : '#eee'}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default StarRatingPreview;

src/components/editor/TextEditor/TextEditor.module.scss

@@ -91,6 +91,7 @@
   }
 
   &__contents {
+    padding-bottom: 16px;
     border-bottom: 0.5px solid #c4c4c4;
   }
 

src/pages/Auth/Login/index.tsx

@@ -81,8 +81,8 @@ export default function Login(): JSX.Element {
     },
   });
 
-  const [errorMsg, setErroMsg] = useState<string>('');
-  const submitLogin = useLoginRequest({ onError: setErroMsg });
+  const [errorMsg, setErrorMsg] = useState<string>('');
+  const submitLogin = useLoginRequest({ onError: setErrorMsg });
 
   return (
     <div className={styles.template}>

src/pages/Home/components/Map/components/MarkerHtml/index.tsx

@@ -19,19 +19,21 @@ export function MarkerHtml(src:string | null, name:string) {
   `;
 }
 
-export function ClickedMarkerHtml(src:string, name:string) {
+export function ClickedMarkerHtml(src:string, name:string, id: string) {
   return `
-  <div class=${styles.continer}>
-    <img src=${Selected} class=${styles['marker--clicked']}>
-    <div class=${styles.bubble}>
-      <div class=${styles['bubble__photo--clicked']}>
-        <img src=${src || `${defaultImage}`} alt="사진" />
-      </div>
-      <div class=${styles['bubble__name--clicked']}>
-        ${name}
+  <a href='/shop/${id}'>
+    <div class=${styles.continer}>
+      <img src=${Selected} class=${styles['marker--clicked']}>
+      <div class=${styles.bubble}>
+        <div class=${styles['bubble__photo--clicked']}>
+          <img src=${src || `${defaultImage}`} alt="사진" />
+        </div>
+        <div class=${styles['bubble__name--clicked']}>
+          ${name}
+        </div>
       </div>
     </div>
-  </div>
+  </a>
 `;
 }
 

src/pages/Home/components/Map/hooks/useFilterShops.ts

@@ -1,6 +1,6 @@
 import useGeolocation from 'utils/hooks/useGeolocation';
 import { useQuery } from 'react-query';
-import { getfilterShops } from 'api/shop';
+import { getFilterShops } from 'api/shop';
 import { FilterShopsParams } from 'api/shop/entity';
 import { useAuth } from 'store/auth';
 
@@ -19,7 +19,7 @@ const useFilterShops = ({
   };
   const {
     isLoading, isError, data, refetch,
-  } = useQuery('filterShops', () => getfilterShops(params, {
+  } = useQuery('filterShops', () => getFilterShops(params, {
     lat: location?.lat,
     lng: location?.lng,
   }), {

src/pages/Home/components/Map/hooks/useMarker.ts

@@ -41,7 +41,7 @@ function useMarker({ map, filterShops }: MarkerProps) {
         });
 
         marker.setIcon({
-          content: ClickedMarkerHtml(shop.photo, shop.name),
+          content: ClickedMarkerHtml(shop.photo, shop.name, shop.placeId),
         });
         setSelected(marker);
         if (map) {