feat: 저장한 장소 목록 SavedPlace 컴포넌트 구현 (#286)

- 로그인 한 사용자 > 저장한 장소 목록이 메뉴 바텀시트에 노출
mbti-nf-team · Mar 16, 2024 · 5e5ec14 · 5e5ec14
1 parent 5dc7e91
commit 5e5ec14
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 30 deletions.
diff --git a/src/components/map/MenuBottomSheet/index.module.scss b/src/components/map/MenuBottomSheet/index.module.scss
@@ -4,14 +4,14 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
-  padding: 8px 24px 80px;
+  padding: 0 0 80px;
   height: 100%;
 
   .loginMenu {
     display: flex;
     flex-direction: row;
     gap: 16px;
-    padding: 8px 0;
+    padding: 16px 24px;
     align-items: center;
     border: none;
     background-color: color("white/primary");
@@ -63,6 +63,7 @@
   .contents {
     display: flex;
     padding: 64px 24px;
+    margin: 0 24px;
     justify-content: center;
     align-items: center;
     border-radius: 12px;

diff --git a/src/components/map/MenuBottomSheet/index.tsx b/src/components/map/MenuBottomSheet/index.tsx
@@ -12,6 +12,8 @@ import { ChevronRightIcon } from '@/lib/assets/icons';
 import { User } from '@/lib/types/auth';
 import useToastStore from '@/stores/toast';
 
+import SavedPlaces from '../SavedPlaces';
+
 import styles from './index.module.scss';
 
 type Props = {
@@ -63,38 +65,43 @@ function MenuBottomSheet({ onToggleMenu, user }: Props) {
     >
       <div className={styles.menuWrapper} role="menu">
         {user ? (
-          <div className={styles.loginMenu}>
-            <div className={styles.profile}>
-              {user?.profile_image_url ? (
-                <Image
-                  src={user.profile_image_url}
-                  alt={user.email}
-                  width={48}
-                  height={48}
-                  className={styles.image}
-                />
-              ) : (
-                <Image src="/assets/images/img_avatar_default.png" alt="profile" width={48} height={48} />
-              )}
-              <div className={styles.name}>{user.nickname}</div>
+          <>
+            <div className={styles.loginMenu}>
+              <div className={styles.profile}>
+                {user?.profile_image_url ? (
+                  <Image
+                    src={user.profile_image_url}
+                    alt={user.email}
+                    width={48}
+                    height={48}
+                    className={styles.image}
+                  />
+                ) : (
+                  <Image src="/assets/images/img_avatar_default.png" alt="profile" width={48} height={48} />
+                )}
+                <div className={styles.name}>{user.nickname}</div>
+              </div>
+              <button type="button" onClick={onLogout} className={styles.logoutButton}>
+                <div>로그아웃</div>
+                <ChevronRightIcon className={styles.logoutIcon} />
+              </button>
             </div>
-            <button type="button" onClick={onLogout} className={styles.logoutButton}>
-              <div>로그아웃</div>
-              <ChevronRightIcon className={styles.logoutIcon} />
-            </button>
-          </div>
+            <SavedPlaces />
+          </>
         ) : (
-          <button type="button" role="menuitem" className={styles.loginMenu} onClick={openLogin}>
-            <div className={styles.profile}>
-              <Image src="/assets/images/img_avatar_default.png" alt="profile" width={48} height={48} />
-              <div className={styles.name}>로그인</div>
+          <>
+            <button type="button" role="menuitem" className={styles.loginMenu} onClick={openLogin}>
+              <div className={styles.profile}>
+                <Image src="/assets/images/img_avatar_default.png" alt="profile" width={48} height={48} />
+                <div className={styles.name}>로그인</div>
+              </div>
+              <ChevronRightIcon className={styles.icon} />
+            </button>
+            <div className={styles.contents}>
+              some contents..
             </div>
-            <ChevronRightIcon className={styles.icon} />
-          </button>
+          </>
         )}
-        <div className={styles.contents}>
-          some contents..
-        </div>
         <div className={styles.footer}>
           <ExternalLink href="#">이용약관</ExternalLink>
           •

diff --git a/src/components/map/SavedPlaces/index.module.scss b/src/components/map/SavedPlaces/index.module.scss
@@ -0,0 +1,90 @@
+@import "/src/styles/main";
+
+.savedPlacesWrapper {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .savedPlaceItem {
+    width: 100%;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid color('gray/tertiary');
+    }
+
+    .photos {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 12px;
+      overflow-y: auto;
+      margin-right: -24px;
+
+      .photo {
+        border-radius: 8px;
+        min-width: 160px;
+        min-height: 160px;
+
+        &:last-of-type {
+          margin-right: 24px;
+        }
+      }
+    }
+
+    .placeInfoWrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      width: 100%;
+
+      .placeName {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+
+        @include text('title 1/600', 'black/default');
+      }
+
+      .placeRatingWrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+
+        .placeRating {
+          @include text('title 3/600', 'black/default');
+        }
+
+        .placeUserRatingsTotal {
+          @include text('title 3/500', 'black/secondary');
+        }
+      }
+
+      .addressInfo {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+
+        @include text('title 3/500', 'black/secondary');
+
+        .nation, .distance {
+          min-width: fit-content;
+        }
+
+        .address {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/map/SavedPlaces/index.tsx b/src/components/map/SavedPlaces/index.tsx
@@ -0,0 +1,113 @@
+import Image from 'next/image';
+
+import { checkNumber } from '@nf-team/core';
+
+import Button from '@/components/common/Button';
+import StarRating from '@/components/common/StarRating';
+import { ArchiveSolidIcon } from '@/lib/assets/icons';
+
+import styles from './index.module.scss';
+
+// NOTE - 임시 데이터
+const mockSavedPlaces = [
+  {
+    id: 'ChIJaVDnv46RQTURWuJE01tjUGk',
+    name: '하카타라멘 신신 텐진본점',
+    rating: 4.2,
+    user_ratings_total: 5598,
+    nation: '일본',
+    address: '3 Chome-2-19 Tenjin, Chuo Ward, Fukuoka, 810-0001',
+    distance: '5km',
+    photoUrls: [
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZC8FXvzKF21twvZieHl8ZHnXyU-kOrGopGj7C4tmbXabX9cdMGSiJh5el-l9NN2GNxkaDcnHIm7oi23yOZBw1jL6ydwteSHguJd5koq-16YN0XOyAypdk6AT6cnkYiqAeEVOUNrl9x_k1EDF8R_Wf0xC57Vw_M8i4STK2yNHkrzOm_&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbWe0tjd-C--ZT-vZhAbSVbTLYB7FauODAdUaB1M6LrTQ-gX8I1X61kfCIkAHoAlFjN8irDkE9a7R9E_rlfcNbosuToo0NsmlKXXvgoL6qfdIlkULdeZwgYdb2uvbNwPZ-vEGHl-Jqzbm1ugevdhRWU53xzQa7ry91mY4AP74wfkDTb&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJay_jbLePKR4uuuhLi7uNpmxH_G1zoMUExg2YRAI1V-8PQWQnIZjy2hSAcKoqsPkM5tnA0ve0VmNhffvYFTjxMz0qHjHXWDKlKugIGjQwMXLBOQpVl_D0V0xhsRAuze8IudCp8pwxQrVVpxtup0eP6QXYIBXaCmuEoCq-md9LP01sU&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJapRNGuJLGDiqAZOoLaj9B6Vx9H9KlLXmgdhpzRGdgWm55Nq5Mu8uYTVHKFQQmARhByly9XMIhXgI_ZCveAlyfamVU2I0ijw3VUyrvJDigRSo6TRioE5vId6joK2KTRGBTCmzx8S7d8_ZdhTLOb0rLUW7C0FQBQAUHiEDyaxTbavWDL&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJYBPRRrJTBFBvKwTVkRZERSPRlEnK2lE1ckCXV63WbbbOerg-Mfpb9vHLRSyzKYV6M6P7r0vHjmyHBEzmb2hsBe2GlSLEuP0Ka228FuHEFSMz6T5miiW6Y9Mz8JmjkHSlpNZkQYbKQyXLoK7unkeYBqbGbs5P8JJwMsVa-gBgzs-cs&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbpJQlsYUN7EJGmu5pfx6Ok7Lh2s981wWKUO_oL6Pd6ChApFsk7wA_B0YNaprrVfaHLBNmuu62W1W3lJQyqkaVYMcLVai13OoseveFJRNZfbTtXPslX2QbJ4g2IGVmfyEbREsZtHY0xFLDxbd5yR8akq1xyHJk_mltiXNEQjT7El4zS&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZ6m4smpK2kpix1_Ja9EY0Yr8ak4NUT6CjLal238GmDnr7hFLBaPxnS57JNP8S1y-HdgWrRps9-5BDlQPlqDcz8KkaAt5DtfkaXGD9XzHO1Ng6-DQjkjRxcCSSvm0pApkq5lepF-bE82egbw6hVRvPQH6WB0ND_qaJFbaNJOXDxdciw&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbRprvESUMTjVM6OefYgM4Gc0AlixsOJr6ie8Sbe-4TgH_K4d16-L1MLE6SFiRgRP4Rpji_d_jt7-pemM71aARpslu5Q-7oFSqU7p_i4HGvFIYuhopIGsxK0nMddzP2Zt7haREWtQqRJ5-697ab0T-Ap9l--fNnfcw5kQK5cwnvxI1d&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZ3QbrQ4HM--SCosdmNG5CSLRuCKcuHTxKGJT3z6id5u_yDigoG2Uj5DC2zgy02HqNBDOYsGUChPkobOGSVer32ygCQsRwpaJQFmHbpA2bF_chsldgezbRm4_vZ4QOBwiOmVTTIneCN6ac0au52T9aGntTStBh_eeBqj9KAmARRE7Df&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJYef3EojHmg5Lx6Pk-3QxIIMsgYpxHrG6esj5bM_S_CewOhDojsMcB1mLIJmcsw5vC1XpNZPKOzXISbaAZURP4k7tw-TAsQhKmaN7Gsz2AYYHuyAvDs_ajPyp55RE9AJkw7vsJv2M4r3jYF9spSKyajOr8vvZFEZdoB-UPKidJmf0rX&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+    ],
+  },
+  {
+    id: '2',
+    name: '하카타라멘 신신 텐진본점',
+    rating: 4.2,
+    user_ratings_total: 5598,
+    nation: '일본',
+    address: '3 Chome-2-19 Tenjin, Chuo Ward, Fukuoka, 810-0001',
+    distance: '5km',
+    photoUrls: [
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZC8FXvzKF21twvZieHl8ZHnXyU-kOrGopGj7C4tmbXabX9cdMGSiJh5el-l9NN2GNxkaDcnHIm7oi23yOZBw1jL6ydwteSHguJd5koq-16YN0XOyAypdk6AT6cnkYiqAeEVOUNrl9x_k1EDF8R_Wf0xC57Vw_M8i4STK2yNHkrzOm_&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbWe0tjd-C--ZT-vZhAbSVbTLYB7FauODAdUaB1M6LrTQ-gX8I1X61kfCIkAHoAlFjN8irDkE9a7R9E_rlfcNbosuToo0NsmlKXXvgoL6qfdIlkULdeZwgYdb2uvbNwPZ-vEGHl-Jqzbm1ugevdhRWU53xzQa7ry91mY4AP74wfkDTb&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJay_jbLePKR4uuuhLi7uNpmxH_G1zoMUExg2YRAI1V-8PQWQnIZjy2hSAcKoqsPkM5tnA0ve0VmNhffvYFTjxMz0qHjHXWDKlKugIGjQwMXLBOQpVl_D0V0xhsRAuze8IudCp8pwxQrVVpxtup0eP6QXYIBXaCmuEoCq-md9LP01sU&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJapRNGuJLGDiqAZOoLaj9B6Vx9H9KlLXmgdhpzRGdgWm55Nq5Mu8uYTVHKFQQmARhByly9XMIhXgI_ZCveAlyfamVU2I0ijw3VUyrvJDigRSo6TRioE5vId6joK2KTRGBTCmzx8S7d8_ZdhTLOb0rLUW7C0FQBQAUHiEDyaxTbavWDL&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJYBPRRrJTBFBvKwTVkRZERSPRlEnK2lE1ckCXV63WbbbOerg-Mfpb9vHLRSyzKYV6M6P7r0vHjmyHBEzmb2hsBe2GlSLEuP0Ka228FuHEFSMz6T5miiW6Y9Mz8JmjkHSlpNZkQYbKQyXLoK7unkeYBqbGbs5P8JJwMsVa-gBgzs-cs&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbpJQlsYUN7EJGmu5pfx6Ok7Lh2s981wWKUO_oL6Pd6ChApFsk7wA_B0YNaprrVfaHLBNmuu62W1W3lJQyqkaVYMcLVai13OoseveFJRNZfbTtXPslX2QbJ4g2IGVmfyEbREsZtHY0xFLDxbd5yR8akq1xyHJk_mltiXNEQjT7El4zS&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZ6m4smpK2kpix1_Ja9EY0Yr8ak4NUT6CjLal238GmDnr7hFLBaPxnS57JNP8S1y-HdgWrRps9-5BDlQPlqDcz8KkaAt5DtfkaXGD9XzHO1Ng6-DQjkjRxcCSSvm0pApkq5lepF-bE82egbw6hVRvPQH6WB0ND_qaJFbaNJOXDxdciw&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbRprvESUMTjVM6OefYgM4Gc0AlixsOJr6ie8Sbe-4TgH_K4d16-L1MLE6SFiRgRP4Rpji_d_jt7-pemM71aARpslu5Q-7oFSqU7p_i4HGvFIYuhopIGsxK0nMddzP2Zt7haREWtQqRJ5-697ab0T-Ap9l--fNnfcw5kQK5cwnvxI1d&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZ3QbrQ4HM--SCosdmNG5CSLRuCKcuHTxKGJT3z6id5u_yDigoG2Uj5DC2zgy02HqNBDOYsGUChPkobOGSVer32ygCQsRwpaJQFmHbpA2bF_chsldgezbRm4_vZ4QOBwiOmVTTIneCN6ac0au52T9aGntTStBh_eeBqj9KAmARRE7Df&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJYef3EojHmg5Lx6Pk-3QxIIMsgYpxHrG6esj5bM_S_CewOhDojsMcB1mLIJmcsw5vC1XpNZPKOzXISbaAZURP4k7tw-TAsQhKmaN7Gsz2AYYHuyAvDs_ajPyp55RE9AJkw7vsJv2M4r3jYF9spSKyajOr8vvZFEZdoB-UPKidJmf0rX&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+    ],
+  }, {
+    id: '3',
+    name: '하카타라멘 신신 텐진본점',
+    rating: 4.2,
+    user_ratings_total: 5598,
+    nation: '일본',
+    address: '3 Chome-2-19 Tenjin, Chuo Ward, Fukuoka, 810-0001',
+    distance: '5km',
+    photoUrls: [
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZC8FXvzKF21twvZieHl8ZHnXyU-kOrGopGj7C4tmbXabX9cdMGSiJh5el-l9NN2GNxkaDcnHIm7oi23yOZBw1jL6ydwteSHguJd5koq-16YN0XOyAypdk6AT6cnkYiqAeEVOUNrl9x_k1EDF8R_Wf0xC57Vw_M8i4STK2yNHkrzOm_&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbWe0tjd-C--ZT-vZhAbSVbTLYB7FauODAdUaB1M6LrTQ-gX8I1X61kfCIkAHoAlFjN8irDkE9a7R9E_rlfcNbosuToo0NsmlKXXvgoL6qfdIlkULdeZwgYdb2uvbNwPZ-vEGHl-Jqzbm1ugevdhRWU53xzQa7ry91mY4AP74wfkDTb&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJay_jbLePKR4uuuhLi7uNpmxH_G1zoMUExg2YRAI1V-8PQWQnIZjy2hSAcKoqsPkM5tnA0ve0VmNhffvYFTjxMz0qHjHXWDKlKugIGjQwMXLBOQpVl_D0V0xhsRAuze8IudCp8pwxQrVVpxtup0eP6QXYIBXaCmuEoCq-md9LP01sU&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJapRNGuJLGDiqAZOoLaj9B6Vx9H9KlLXmgdhpzRGdgWm55Nq5Mu8uYTVHKFQQmARhByly9XMIhXgI_ZCveAlyfamVU2I0ijw3VUyrvJDigRSo6TRioE5vId6joK2KTRGBTCmzx8S7d8_ZdhTLOb0rLUW7C0FQBQAUHiEDyaxTbavWDL&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJYBPRRrJTBFBvKwTVkRZERSPRlEnK2lE1ckCXV63WbbbOerg-Mfpb9vHLRSyzKYV6M6P7r0vHjmyHBEzmb2hsBe2GlSLEuP0Ka228FuHEFSMz6T5miiW6Y9Mz8JmjkHSlpNZkQYbKQyXLoK7unkeYBqbGbs5P8JJwMsVa-gBgzs-cs&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbpJQlsYUN7EJGmu5pfx6Ok7Lh2s981wWKUO_oL6Pd6ChApFsk7wA_B0YNaprrVfaHLBNmuu62W1W3lJQyqkaVYMcLVai13OoseveFJRNZfbTtXPslX2QbJ4g2IGVmfyEbREsZtHY0xFLDxbd5yR8akq1xyHJk_mltiXNEQjT7El4zS&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZ6m4smpK2kpix1_Ja9EY0Yr8ak4NUT6CjLal238GmDnr7hFLBaPxnS57JNP8S1y-HdgWrRps9-5BDlQPlqDcz8KkaAt5DtfkaXGD9XzHO1Ng6-DQjkjRxcCSSvm0pApkq5lepF-bE82egbw6hVRvPQH6WB0ND_qaJFbaNJOXDxdciw&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJbRprvESUMTjVM6OefYgM4Gc0AlixsOJr6ie8Sbe-4TgH_K4d16-L1MLE6SFiRgRP4Rpji_d_jt7-pemM71aARpslu5Q-7oFSqU7p_i4HGvFIYuhopIGsxK0nMddzP2Zt7haREWtQqRJ5-697ab0T-Ap9l--fNnfcw5kQK5cwnvxI1d&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJZ3QbrQ4HM--SCosdmNG5CSLRuCKcuHTxKGJT3z6id5u_yDigoG2Uj5DC2zgy02HqNBDOYsGUChPkobOGSVer32ygCQsRwpaJQFmHbpA2bF_chsldgezbRm4_vZ4QOBwiOmVTTIneCN6ac0au52T9aGntTStBh_eeBqj9KAmARRE7Df&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+      'https://maps.googleapis.com/maps/api/place/photo?maxwidth=320&photoreference=ATplDJYef3EojHmg5Lx6Pk-3QxIIMsgYpxHrG6esj5bM_S_CewOhDojsMcB1mLIJmcsw5vC1XpNZPKOzXISbaAZURP4k7tw-TAsQhKmaN7Gsz2AYYHuyAvDs_ajPyp55RE9AJkw7vsJv2M4r3jYF9spSKyajOr8vvZFEZdoB-UPKidJmf0rX&key=AIzaSyCffnehwypiJPvue78phUakY-w37xoFINw',
+    ],
+  },
+];
+
+function SavedPlaces() {
+  return (
+    <ul className={styles.savedPlacesWrapper}>
+      {mockSavedPlaces.map(({
+        id, photoUrls, name, rating, user_ratings_total, nation, address, distance,
+      }) => (
+        <li key={id} className={styles.savedPlaceItem}>
+          <div className={styles.photos}>
+            {photoUrls.map((photo, index) => (
+              <Image key={photo} src={photo} alt={`${name}-image-${index}`} width={160} height={160} className={styles.photo} />
+            ))}
+          </div>
+          <div className={styles.placeInfoWrapper}>
+            <div className={styles.placeName}>
+              <div>{name}</div>
+              <Button size="small" onlyIcon={<ArchiveSolidIcon />} color="ghost" />
+            </div>
+            <div className={styles.placeRatingWrapper}>
+              <div className={styles.placeRating}>{rating}</div>
+              <StarRating rating={rating} type="list" />
+              <div className={styles.placeUserRatingsTotal}>{`(${checkNumber(user_ratings_total)})`}</div>
+            </div>
+            <div className={styles.addressInfo}>
+              <div className={styles.nation}>{nation}</div>
+              <div>∙</div>
+              <div className={styles.address}>{address}</div>
+              <div>∙</div>
+              <div className={styles.distance}>{distance}</div>
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default SavedPlaces;