✨ Feat: 말랑맵 지도 관련 기능 추가 (중심 좌표 기준 좌표 추출, 바운더리 추출, 화면 이동시 바운더리 추출, 클릭하…

…여 지도 이동, 최종적으로 본 위치 localStorage에 저장하여 재접속 또는 새로고침 시에도 최종 위치 유지) (#27)
prgrms-web-devcourse-final-project · Dec 3, 2024 · d1ab508 · d1ab508
1 parent 36db850
commit d1ab508
Show file tree

Hide file tree

Showing 16 changed files with 360 additions and 212 deletions.
diff --git a/index.html b/index.html
@@ -62,6 +62,8 @@
             type="text/javascript"
             src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API_KEY%&libraries=services,drawing,clusterer"
         ></script>
+
+        <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
     </head>
 
     <body>

diff --git a/src/assets/stylesheets/components/_mainModal.scss b/src/assets/stylesheets/components/_mainModal.scss
@@ -301,11 +301,6 @@
     align-items: center;
     gap: 0.4rem;
     padding: 0.8rem 0.8rem 0;
-    background-image: linear-gradient(
-        to bottom,
-        rgb(var(--clr-white)) 25%,
-        transparent
-    );
     z-index: 2;
 }
 
@@ -340,10 +335,6 @@
 /* 반응형 쿼리 */
 
 @container main-container (max-width: 720px) {
-    #main-modal-cover {
-        height: 9rem;
-    }
-
     #main-modal-sidebar {
         width: 3.6rem;
     }

diff --git a/src/assets/stylesheets/components/_mainModalCover.scss b/src/assets/stylesheets/components/_mainModalCover.scss
@@ -68,6 +68,11 @@
     background-color: rgb(var(--clr-black) / 0.15);
     backdrop-filter: blur(1.8rem);
     color: rgb(var(--clr-text-on-tint));
+    transition: background-color 0.15s;
+
+    &:hover {
+        background-color: rgb(var(--clr-alert) / 0.5);
+    }
 }
 
 .cover-descriptions-container {
@@ -105,4 +110,12 @@
     opacity: 0.75;
 }
 
+/* 반응형 쿼리 */
+
+@container main-container (max-width: 720px) {
+    #main-modal-cover {
+        height: 7.2rem;
+    }
+}
+
 /* _mainModalCover.scss */
diff --git a/src/assets/stylesheets/components/_markerCategory.scss b/src/assets/stylesheets/components/_markerCategory.scss
@@ -27,14 +27,27 @@
     box-shadow:
         inset 0 0.6rem 1.2rem -0.4rem rgb(var(--clr-tint-0) / 0.1),
         var(--shd-100);
-    transition: background-color 0.15s;
-    cursor: pointer;
+    transition:
+        background-color 0.15s,
+        box-shadow 0.15s;
+
+    &:not(.on) {
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgb(var(--clr-white));
+            box-shadow:
+                inset 0 0.6rem 1.2rem -0.4rem rgb(var(--clr-tint-0) / 0.2),
+                0 0 0.8rem rgb(var(--clr-white) / 0.5);
+            font-weight: 400;
+        }
+    }
 
     &.on {
         border-color: rgb(var(--clr-if-40));
         background-color: rgb(var(--clr-theme));
         color: rgb(var(--clr-text));
-        font-weight: 900;
+        font-weight: 400;
     }
 }
 

diff --git a/src/assets/stylesheets/components/_signatureImage.scss b/src/assets/stylesheets/components/_signatureImage.scss
@@ -100,4 +100,17 @@
     }
 }
 
+@container main-container (max-width: 720px) {
+    .cover-signature-image-container {
+        justify-content: center;
+        width: 7.2rem;
+    }
+
+    #main-modal-signature-image {
+        margin-block-end: 0;
+        width: 4.8rem;
+        height: 4.8rem;
+    }
+}
+
 /* _signatureImage.scss */
diff --git a/src/assets/stylesheets/components/_userProfileCard.scss b/src/assets/stylesheets/components/_userProfileCard.scss
@@ -61,18 +61,19 @@
     flex: 1;
     padding-inline: 0.8rem;
     font-size: var(--fnt-sm);
+    transition: background-color 0.15s;
 
     > span {
         margin-inline: auto;
     }
 
-    &:hover {
-        background-color: rgb(var(--clr-if-60));
+    &#button-show-profile {
+        background-color: rgb(var(--clr-theme));
     }
-}
 
-#button-show-profile {
-    background-color: rgb(var(--clr-theme));
+    &:hover {
+        background-color: rgb(var(--clr-if-60)) !important;
+    }
 }
 
 /* _userProfileCard.scss */