Merge pull request #264 from BCSDLab/feature/#261

[PIN] 상점 리스트 표시
BCSDLab · Feb 14, 2024 · 6a6b51d · 6a6b51d
2 parents 03d66a9 + 172f8f3
commit 6a6b51d
Show file tree

Hide file tree

Showing 35 changed files with 479 additions and 261 deletions.
diff --git a/.github/workflows/LINT_CHECK.yml b/.github/workflows/LINT_CHECK.yml
@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 18
+          node-version: 21
           registry-url: https://registry.npmjs.org/
       - name: Install package
         run: yarn

diff --git a/src/App.tsx b/src/App.tsx
@@ -17,6 +17,7 @@ import SignUp from 'pages/Auth/Signup/SignupPage/index';
 import TermsOfService from 'pages/Auth/Signup/TermsOfServicePage';
 import FollowProfile from 'pages/Follow/components/FollowProfile';
 import FollowPage from 'pages/Follow/index';
+import Home from 'pages/Home';
 import Inquire from 'pages/Inquiry/Inquire';
 import Inquiry from 'pages/Inquiry/Inquiry';
 import MyPage from 'pages/MyPage';
@@ -37,6 +38,7 @@ export default function App(): JSX.Element {
     <Suspense fallback={<div />}>
       <Routes>
         <Route path="/" element={<DefaultLayout />}>
+          <Route path="/" element={<Home />} />
           <Route path="/shop" element={<Search />} />
           <Route path="/post" element={<Search />} />
           <Route path="/shop/:placeId" element={<ShopDetail />} />

diff --git a/src/api/shop/entity.ts b/src/api/shop/entity.ts
@@ -2,14 +2,11 @@ export interface FilterShopsParams {
   options_friend: 0 | 1;
   options_nearby: 0 | 1;
   options_scrap: 0 | 1;
-  location?: Coords;
 }
 
-export interface FilterShopsResponse {
-  coordinate: Coords;
-  name: string;
-  photo: string;
-  placeId: string;
+interface FilterShopsResponse extends Omit<Shop, 'photoToken'> {
+  photos: string[] | null;
+  rate: ShopRateResponse;
 }
 
 export type FilterShopsListResponse = FilterShopsResponse[];
@@ -35,14 +32,12 @@ export interface Shop {
   placeId: string;
   name: string;
   formattedAddress: string;
-  lat: number;
-  lng: number;
+  simpleFormattedAddress: string;
+  coordinate: Coords;
   openNow: boolean | null;
-  totalRating: number | null;
-  ratingCount: number | null;
   photoToken: string | null;
   dist: number;
-  category: string; // 추후 카테고리 확인 필요
+  category: string;
 }
 
 export type Period = {

diff --git a/src/components/ImageCarousel/ImageCarousel.module.scss b/src/components/ImageCarousel/ImageCarousel.module.scss
@@ -81,9 +81,8 @@ button {
 
 .pin {
   &__container {
-    width: 550px;
+    width: 480px;
     position: relative;
-    margin-top: 15px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 100%;
@@ -96,8 +95,8 @@ button {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 550px;
-    height: 350px;
+    width: 480px;
+    height: 300px;
     background-color: #eeeeee;
     gap: 10px;
     font-size: 11px;
@@ -123,8 +122,8 @@ button {
 
     img {
       object-fit: contain;
-      width: 550px;
-      height: 350px;
+      width: 480px;
+      height: 300px;
 
       @include media.media-breakpoint-down(mobile) {
         width: 573px;
@@ -142,8 +141,8 @@ button {
       position: absolute;
       background: #000;
       opacity: 0.7;
-      width: 50px;
-      height: 350px;
+      width: 30px;
+      height: 300px;
 
       svg {
         width: 80%;
@@ -158,8 +157,8 @@ button {
       position: absolute;
       background: #000;
       opacity: 0.7;
-      width: 50px;
-      height: 350px;
+      width: 30px;
+      height: 300px;
 
       svg {
         width: 80%;

diff --git a/src/components/common/SideNavigation/Pin/Pin.module.scss b/src/components/common/SideNavigation/Pin/Pin.module.scss
@@ -5,14 +5,93 @@
   gap: 5px;
 }
 
+.shops {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+}
+
+.shop {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  border-bottom: 0.5px solid #eeeeee;
+  padding: 10px 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.detail {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  font-size: 16px;
+
+  &__name {
+    font-weight: 700;
+    font-size: 24px;
+  }
+
+  &__category {
+    color: #979797;
+  }
+
+  &__dist,
+  &__rate {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    color: #666666;
+  }
+
+  &__open {
+    color: #ff0101;
+  }
+}
+
+.empty-photos {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 153px;
+  width: 100%;
+  gap: 5px;
+  font-size: 12px;
+  color: #979797;
+}
+
+.photos {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 5px;
+  list-style: none;
+}
+
+.photo {
+  img {
+    width: 100%;
+    height: 153px;
+    object-fit: fill;
+  }
+}
+
 .info {
   display: flex;
   align-items: flex-end;
   padding: 0 10px;
 
   &__name {
     font-weight: 700;
-    font-size: 28px;
+    font-size: 24px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
   }
 
   &__category {
@@ -46,15 +125,22 @@
   border: 1px solid #c4c4c4;
   font-size: 14px;
   font-weight: 500;
+  color: #666666;
   box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
   background-color: #ffffff;
-  width: 150px;
-  height: 40px;
+  width: 120px;
+  height: 30px;
   border-radius: 20px;
   align-items: center;
   justify-content: center;
   position: absolute;
-  margin: 0 auto;
-  left: calc((100% - 150px) / 2);
   bottom: 40px;
+  right: 50%;
+  transform: translateX(50%);
+  gap: 2px;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
 }
diff --git a/src/components/common/SideNavigation/Pin/components/ReviewList.module.scss b/src/components/common/SideNavigation/Pin/components/ReviewList.module.scss
@@ -27,9 +27,9 @@
 .review-data {
   display: flex;
   flex-direction: column;
-  margin: 12px 16px;
+  padding: 12px 16px;
   list-style: none;
-  max-height: 200px;
+  max-height: 415px;
   overflow-y: auto;
 
   &__button {
@@ -60,7 +60,7 @@
   &__empty {
     display: flex;
     gap: 3px;
-    margin-top: 30px;
+    margin: 30px 0 65px;
     flex-direction: column;
     align-items: center;
     font-size: 14px;

diff --git a/src/components/common/SideNavigation/Pin/components/index.tsx b/src/components/common/SideNavigation/Pin/components/index.tsx
@@ -97,7 +97,7 @@ export default function ReviewList({ placeId }: { placeId: string }) {
               <li className={styles['review-data__friend']} key={review.id}>
                 <div className={styles['review-data__image']}>
                   <img
-                    src={review.userReviewResponse.profileImage.url || defaultImage}
+                    src={review.userReviewResponse?.profileImage?.url || defaultImage}
                     alt={`${review.userReviewResponse.nickname}의 프로필`}
                   />
                 </div>