🐛 Fix: 기본 레이아웃에서 발생하던 무한 리렌더링 버그 수정 (#28), 말랑맵 내 마커 관련 작동 추가 (#27)

src/assets/stylesheets/abstracts/_keyframes.scss

@@ -42,14 +42,16 @@
     }
 
     75% {
-        rotate: var(--burger-self-rotate) 0 0;
+        transform: rotateZ(var(--burger-self-rotate));
+        // rotate: var(--burger-self-rotate) 0 0;
     }
 
     100% {
         inset-inline-start: 0;
         inset-inline-end: 0;
         height: 0.8rem;
-        rotate: var(--burger-self-rotate) 0 0;
+        transform: rotateZ(var(--burger-self-rotate));
+        // rotate: var(--burger-self-rotate) 0 0;
     }
 }
 

src/assets/stylesheets/components/_areaInfoPanel.scss

@@ -5,9 +5,9 @@
     place-items: center;
     position: fixed;
     inset-block-start: 5.2rem;
-    inset-inline-start: 15.6rem;
-    width: 2.4rem;
-    height: 2.4rem;
+    inset-inline-start: 15.8rem;
+    width: 1.8rem;
+    height: 1.8rem;
     border-radius: var(--rad-full);
     background-color: rgb(var(--clr-text));
     box-shadow: var(--shd-100);

src/assets/stylesheets/components/_markerCategory.scss

@@ -5,37 +5,63 @@
     gap: 0.4rem;
     position: fixed;
     inset-block: 4rem auto;
-    inset-inline: 0;
-    margin: auto;
+    inset-inline-start: 3.4rem;
     width: fit-content;
     height: fit-content;
     color: rgb(var(--clr-tint-100));
     font-size: var(--fnt-sm);
     font-weight: 200;
+    transition:
+        inset-inline-start 0.25s,
+        opacity 0.25s;
     z-index: 2;
+
+    &.decent {
+        inset-inline-start: 8rem;
+        opacity: 0;
+        pointer-events: none;
+    }
 }
 
 .marker-category-item {
-    display: grid;
-    place-items: center;
+    position: relative;
     height: 1.8rem;
-    padding-inline: 0.8rem;
-    border: 0.1rem solid rgb(var(--clr-white) / 0.9);
+    border: 1px solid transparent;
     border-radius: var(--rad-full);
-    background-color: rgb(var(--clr-white) / 0.75);
+    background-color: rgb(var(--clr-text) / 0.75);
     backdrop-filter: blur(1.8rem);
     box-shadow:
-        inset 0 0.6rem 1.2rem -0.4rem rgb(var(--clr-tint-0) / 0.1),
+        inset 0 0.6rem 1.2rem -0.4rem rgb(var(--clr-if-100) / 0.15),
         var(--shd-100);
     transition:
         background-color 0.15s,
         box-shadow 0.15s;
+    color: rgb(var(--clr-text-on-tint));
+
+    > span {
+        display: flex;
+        align-items: center;
+        gap: 0.2rem;
+        padding-inline: 0.8rem;
+        height: 100%;
+    }
+
+    &:has(.remix) {
+        > span {
+            padding-inline-end: 0.4rem;
+        }
+    }
+
+    &:has(.on) {
+        .remix {
+            rotate: 180deg;
+        }
+    }
 
     &: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);
@@ -44,18 +70,54 @@
     }
 
     &.on {
-        border-color: rgb(var(--clr-if-40));
+        border-color: rgb(var(--clr-mid-tone));
         background-color: rgb(var(--clr-theme));
+        box-shadow:
+            inset 0 -0.6rem 1.2rem -0.4rem rgb(var(--clr-white) / 0.5),
+            0 0 0.8rem rgb(var(--clr-white) / 0.5);
+        outline: 0.2rem solid rgb(var(--clr-if-100) / 0.3);
         color: rgb(var(--clr-text));
         font-weight: 400;
+
+        > .marker-sub-category {
+            height: auto;
+        }
+    }
+}
+
+.marker-sub-category {
+    position: absolute;
+    inset-block-start: calc(100% + 0.8rem);
+    width: max-content;
+    height: 0;
+    border-radius: var(--rad-lg);
+    background-color: white;
+    box-shadow: var(--shd-100);
+    overflow: hidden;
+}
+
+.marker-sub-category-item {
+    display: flex;
+    align-items: center;
+    padding-inline: 0.8rem;
+    height: 1.6rem;
+
+    &:not(.on):hover {
+        background-color: rgb(var(--clr-theme) / 0.3);
+        font-weight: 700;
+    }
+
+    &.on {
+        background-color: rgb(var(--clr-theme));
+        font-weight: 900;
     }
 }
 
 /* 반응형 쿼리 */
 
 @container main-container (max-width: 960px) {
     #marker-category-container {
-        inset-block: auto 2rem;
+        font-size: var(--fnt-xs);
     }
 }
 

src/assets/stylesheets/components/_notificationCard.scss

@@ -267,6 +267,7 @@
     aspect-ratio: 1 / 1;
     background-color: rgb(var(--clr-white) / 0.5);
     backdrop-filter: blur(1.8rem);
+    color: rgb(var(--clr-alert));
 
     &:hover {
         background-color: rgb(var(--clr-alert));

src/assets/stylesheets/pages/_mallangMap.scss

@@ -9,4 +9,50 @@
     height: 100vh;
 }
 
+.temp-marker {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.2rem;
+    padding: 0.2rem;
+    border-radius: var(--rad-lg);
+    background-color: rgb(var(--clr-text) / 0.75);
+    backdrop-filter: blur(1.8rem);
+    box-shadow: var(--shd-100);
+
+    &::before {
+        display: block;
+        position: absolute;
+        margin-inline: auto;
+        inset-inline: 0;
+        inset-block-start: 100%;
+        width: 0.4rem;
+        height: 0.6rem;
+        border: {
+            block-start: 0.3rem solid rgb(var(--clr-text) / 0.75);
+            block-end: 0.3rem solid transparent;
+            inline-start: 0.2rem solid transparent;
+            inline-end: 0.2rem solid transparent;
+        }
+        pointer-events: none;
+        content: '';
+    }
+}
+
+.marker-label {
+    padding: 0.4rem;
+    color: rgb(var(--clr-text-on-tint));
+}
+
+.marker-controls {
+    display: flex;
+    gap: 0.2rem;
+}
+
+.button-marker-write {
+    padding-inline: 0.8rem;
+    height: 1.6rem;
+    border-radius: var(--rad-sm);
+    background-color: rgb(var(--clr-white));
+}
+
 /* _mallangMap.scss */