[Map] 메인 페이지 지도 구현

src/api/shop/entity.ts

@@ -10,7 +10,7 @@ export interface FilterShopsResponse {
     location: Coords;
   };
   name: string;
-  photo: null | string[];
+  photo: string;
   placeId: string;
 }
 

src/api/user/entity.ts

@@ -33,6 +33,12 @@ export interface User {
   // 아래 두 파라미터도 확실한 도메인이 정해지면 수정 필요.
   // oauthType = 'KAKAO' | 'NAVER' | 'GOOGLE'...
   // userType = 'ADMIN' | 'NORMAL'...
+  profileImage: {
+    id: number;
+    path: string;
+    originalName: string;
+    url: string;
+  }
   oauthType: string;
   userType: string;
   userCountResponse: {

src/components/common/SideNavigation/SideNavigation.module.scss

@@ -111,6 +111,13 @@
   align-items: center;
   list-style: none;
 
+  &__profile-image {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid #eeeeee;
+  }
+
   &__logout {
     text-decoration: none;
     text-decoration: underline;
@@ -144,6 +151,10 @@
     animation: slide-out 0.3s ease-out forwards;
   }
 
+  &--invisible {
+    display: none;
+  }
+
   @include media.media-breakpoint-down(mobile) {
     display: none;
   }
@@ -161,7 +172,11 @@
     align-items: center;
   }
 
-  &__search-input {
+  &__search-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 405px;
     height: 50px;
     border-radius: 100px;
@@ -170,16 +185,13 @@
     font-size: 18px;
     font-weight: 500;
     box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
-
-    &::placeholder {
-      color: #c4c4c4;
-    }
+    color: #c4c4c4;
   }
 
   &__search-icon {
     position: relative;
-    top: 4px;
-    right: 40px;
+    top: 2px;
+    right: 20px;
 
     path {
       stroke: #ff7f23;

src/components/common/SideNavigation/index.tsx

@@ -4,6 +4,7 @@ import { ReactComponent as BookMarkIcon } from 'assets/svg/home/bookmark.svg';
 import { ReactComponent as GroupIcon } from 'assets/svg/home/group.svg';
 import { useAuth, useClearAuth } from 'store/auth';
 import cn from 'utils/ts/classNames';
+import defaultImage from 'assets/images/follow/default-image.png';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import { Link, useLocation } from 'react-router-dom';
 import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';
@@ -14,7 +15,7 @@ export default function SideNavigation(): JSX.Element {
   const auth = useAuth();
   const clearAuth = useClearAuth();
   const location = useLocation();
-  const [visible, , , toggle, setValue] = useBooleanState(false);
+  const [visible, , , toggle, setValue] = useBooleanState(true);
   const { filterFriendState, setFilterFriend } = useFilterFriend();
   const { filterScrapState, setFilterScrap } = useFilterScrap();
   const { filterNearbyState, setFilterNearby } = useFilterNearby();
@@ -89,12 +90,14 @@ export default function SideNavigation(): JSX.Element {
         <ul className={styles['bottom-navigation']}>
           {auth ? (
             <li>
-              <div>
-                {/* 프로필 사진 추가 */}
-                <Link to="/" onClick={clearAuth}>
-                  <div className={styles['bottom-navigation__logout']}>로그아웃</div>
-                </Link>
-              </div>
+              <img
+                src={auth.profileImage.url || `${defaultImage}`}
+                alt="프로필 이미지"
+                className={styles['bottom-navigation__profile-image']}
+              />
+              <Link to="/" onClick={clearAuth}>
+                <div className={styles['bottom-navigation__logout']}>로그아웃</div>
+              </Link>
             </li>
           ) : (
             <li>
@@ -119,14 +122,15 @@ export default function SideNavigation(): JSX.Element {
         className={cn({
           [styles['side-pannel']]: true,
           [styles['side-pannel--expand']]: visible,
+          [styles['side-pannel--invisible']]: location.pathname !== '/',
         })}
       >
         <div className={styles['side-pannel__search']}>
           <div className={styles['side-pannel__search-bar']}>
-            <span>
-              <input type="text" placeholder="검색어를 입력해주세요." className={styles['side-pannel__search-input']} />
+            <Link to="/search" className={styles['side-pannel__search-link']}>
+              검색어를 입력해주세요.
               <SearchIcon className={styles['side-pannel__search-icon']} />
-            </span>
+            </Link>
           </div>
           <div className={styles['side-pannel__search-buttons']}>
             <button
@@ -165,7 +169,6 @@ export default function SideNavigation(): JSX.Element {
           </div>
         </div>
       </div>
-
     </div>
   );
 }

src/index.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable value-list-comma-newline-after */
+/* stylelint-disable declaration-colon-newline-after */
 @forward "src/styles/fonts.scss";
 @use "src/utils/styles/mediaQuery" as media;
 
@@ -9,23 +11,11 @@
 body,
 html {
   /* https://css-tricks.com/snippets/css/system-font-stack/ */
-  font-family:
-    SUIT,
-    system-ui,
-    "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  font-family: SUIT, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 body {
-  min-height: 100vh;
-  min-width: 1148px;
-
   @include media.media-breakpoint-down(mobile) {
     min-width: 320px;
   }

src/pages/Auth/Login/Login.module.scss

@@ -9,7 +9,6 @@
 
 .content {
   width: 368px;
-  margin-top: 80px;
   margin-bottom: 20px;
 
   @include media.media-breakpoint-down(mobile) {

src/pages/Home/Home.module.scss

@@ -1,19 +1,6 @@
-.home {
-  width: 100%;
-}
-
-.map {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
 .locationBox {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 3;
+  z-index: 1;
 }

src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss

@@ -41,6 +41,7 @@
   box-sizing: content-box;
 
   &__photo img {
+    background-color: #ffffff;
     width: 43px;
     height: 43px;
     border-radius: 89.5px;
@@ -57,6 +58,7 @@
   }
 
   &__photo--clicked img {
+    background-color: #ffffff;
     width: 56.007px;
     height: 55.723px;
     border-radius: 89.5px;
@@ -108,3 +110,24 @@
     }
   }
 }
+
+.cluster {
+  background-image: url("../../../../../../assets/images/home/location-marker.png");
+  display: flex;
+  cursor: pointer;
+  width: 69px;
+  height: 69px;
+  font-size: 24px;
+  color: white;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  background-size: contain;
+
+  @include media.media-breakpoint-down(mobile) {
+    width: 48px;
+    height: 48px;
+    font-size: 12px;
+    font-weight: 700;
+  }
+}

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

@@ -1,36 +1,40 @@
-import Default from 'assets/images/search/default-image.png';
 import MarkerLogo from 'assets/images/home/location-marker.png';
 import Selected from 'assets/images/home/selected-marker.png';
+import defaultImage from 'assets/images/home/favicon.png';
 import styles from './MarkerHtml.module.scss';
 
-export function MarkerHtml(photo:string | null, name:string) {
+export function MarkerHtml(photo:string, name:string) {
   return `
   <div class=${styles.container}>
     <img src=${MarkerLogo}  class=${styles.marker} alt="marker" />
-      <div class=${styles.bubble}>
-        <div class=${styles.bubble__photo}>
-          <img src=${Default} alt="사진"/>
-        </div>
-        <div class=${styles.bubble__name}>
-          ${name}
-        </div>
+    <div class=${styles.bubble}>
+      <div class=${styles.bubble__photo}>
+        <img src=${photo || `${defaultImage}`} alt="사진"/>
       </div>
+      <div class=${styles.bubble__name}>
+        ${name}
       </div>
+    </div>
+  </div>
   `;
 }
 
-export function ClickedMarkerHtml(photo:string | null, name:string) {
+export function ClickedMarkerHtml(photo:string, name: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=${Default} alt="사진" />
-        </div>
-        <div class=${styles['bubble__name--clicked']}>
-          ${name}
-        </div>
+    <div class=${styles.bubble}>
+      <div class=${styles['bubble__photo--clicked']}>
+        <img src=${photo || `${defaultImage}`} alt="사진" />
+      </div>
+      <div class=${styles['bubble__name--clicked']}>
+        ${name}
       </div>
     </div>
-  `;
+  </div>
+`;
+}
+
+export function ClusterHtml() {
+  return `<div class=${styles.cluster}></div>`;
 }

src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss

@@ -2,7 +2,7 @@
   position: absolute;
   display: grid;
   grid-template-columns: 1fr auto;
-  gap: 50px;
+  gap: 55px;
   top: 20px;
   left: 50%;
   transform: translate(-50%);
@@ -24,7 +24,8 @@
     padding-right: 15px;
   }
 
-  &__filter {
+  &__icon {
+    display: flex;
     width: 48px;
     height: 48px;
     background-color: #ffffff;
@@ -35,30 +36,33 @@
     position: absolute;
     top: 0;
     right: 0;
-    display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 
-    &--clicked {
-      svg path {
+    &--changed {
+      path {
         stroke: #ff7f23;
       }
     }
   }
+}
 
-  &__list {
-    display: flex;
-    float: right;
-    flex-direction: column;
-    justify-content: space-around;
-    width: 118px;
-    height: 78px;
-    border-radius: 15px;
-    opacity: 0.8;
-    border: 1px solid #eeeeee;
-    background-color: #ffffff;
-    box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
-  }
+.filter {
+  display: flex;
+  position: absolute;
+  right: 0;
+  top: 60px;
+  float: right;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 118px;
+  height: 78px;
+  border-radius: 15px;
+  opacity: 0.8;
+  border: 1px solid #eeeeee;
+  background-color: #ffffff;
+  box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
 
   &__text {
     display: flex;