🌈 Design: 메인 지도 글타래 작성 선택기 추가, 비로그인 상태의 헤더 마크업 추가 (#27)

prgrms-web-devcourse-final-project · Dec 5, 2024 · 447ecf3 · 447ecf3
1 parent d83b68a
commit 447ecf3
Show file tree

Hide file tree

Showing 14 changed files with 518 additions and 152 deletions.
diff --git a/src/assets/images/login-background-image.png b/src/assets/images/login-background-image.png
diff --git a/src/assets/miscs/login-movie-0.mp4 b/src/assets/miscs/login-movie-0.mp4
diff --git a/src/assets/stylesheets/abstracts/_keyframes.scss b/src/assets/stylesheets/abstracts/_keyframes.scss
@@ -100,4 +100,16 @@
     }
 }
 
+@keyframes pulse {
+    from {
+        outline: 0.1rem solid rgb(var(--clr-point) / 0.9);
+        outline-offset: -0.2rem;
+    }
+
+    to {
+        outline: 0.4rem solid transparent;
+        outline-offset: 1.2rem;
+    }
+}
+
 /* _keyframes.scss */
diff --git a/src/assets/stylesheets/components/_userProfileCard.scss b/src/assets/stylesheets/components/_userProfileCard.scss
@@ -47,7 +47,12 @@
 }
 
 .profile-card-body {
-    border-block: 1px solid rgb(var(--clr-text) / 0.15);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.4rem 0.8rem;
+    background-color: rgb(var(--clr-background));
+    font-size: var(--fnt-sm);
 }
 
 .profile-card-controls {

diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
@@ -103,7 +103,7 @@ a:has(#logo-primary) {
 
 .floating-tooltip {
     // 툴팁
-    --bubble-color: var(--clr-black);
+    --bubble-color: var(--clr-text);
 
     position: absolute;
     padding: 0.4rem;
@@ -250,6 +250,12 @@ a:has(#logo-primary) {
 
 /* 로그인, 회원가입, 오류 페이지 등의 공통 레이아웃 요소 */
 
+#login-movie-background {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 #error-message-container {
     display: flex;
     flex-flow: column nowrap;

diff --git a/src/assets/stylesheets/layouts/_headers.scss b/src/assets/stylesheets/layouts/_headers.scss
@@ -115,27 +115,15 @@
     }
 }
 
-#button-user-profile {
-    position: relative;
-    width: 1.8rem;
-    height: 1.8rem;
+#button-user-login {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding-inline: 0.8rem;
+    height: 1.6rem;
     border-radius: var(--rad-full);
-    background-color: rgb(var(--clr-gray));
-    outline: 1px solid rgb(var(--clr-text) / 0.15);
-    color: rgb(var(--clr-white) / 0.5);
-    overflow: clip;
-
-    > .remix {
-        position: absolute;
-        inset: 0;
-        margin: 0.4rem auto auto;
-    }
-}
-
-.current-user-image {
-    position: absolute;
-    inset: 0;
-    margin: auto;
+    font-size: var(--fnt-sm);
+    font-weight: 700;
 }
 
 #button-burger {
@@ -266,6 +254,17 @@
     #head-controls {
         order: 3;
     }
+
+    #button-user-login {
+        display: flex;
+        justify-content: center;
+        width: 1.6rem;
+        border-radius: var(--rad-full);
+
+        > span {
+            display: none;
+        }
+    }
 }
 
 @container head-primary (max-width: 640px) {

diff --git a/src/assets/stylesheets/pages/_mallangMap.scss b/src/assets/stylesheets/pages/_mallangMap.scss
@@ -9,50 +9,151 @@
     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);
+.marker-item {
+    position: relative;
+    width: 1.2rem;
+    height: 1.2rem;
+
+    > .floating-tooltip {
+        inset-block-start: calc(100% + 1.2rem);
+        inset-inline: 50%;
+        translate: -50% 0;
+        scale: 0;
+        transform-origin: top;
+        transition: scale 0.15s;
+    }
+
+    &:hover,
+    &:has(.on) {
+        > .floating-tooltip {
+            scale: 1;
+        }
+    }
+
+    &:has(.button-marker-write:hover) {
+        .floating-tooltip {
+            scale: 1.2;
+        }
+    }
+}
+
+.button-marker-selector-opener {
+    width: 1.2rem;
+    height: 1.2rem;
+    border: 0.15rem solid rgb(var(--clr-background));
+    border-radius: var(--rad-full);
+    border-bottom-left-radius: 0;
+    background-color: rgb(var(--clr-mid-tone));
+    box-shadow: -0.6rem 0.6rem 0.4rem rgb(var(--clr-text) / 0.25);
+    rotate: -45deg;
 
     &::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;
+        inset: 0;
+        margin: auto;
+        width: 0.3rem;
+        height: 0.3rem;
+        border-radius: var(--rad-full);
+        background-color: rgb(var(--clr-background) / 0.5);
         content: '';
     }
+
+    > span {
+        display: none;
+    }
+
+    &.on {
+        background-color: rgb(var(--clr-notify));
+        outline: 0.2rem solid
+            rgb(var(--pulse-color, var(--clr-point)) / var(--pulse-opaq, 0.9));
+        animation: pulse 1s ease-out infinite;
+    }
+}
+
+.marker-selector-container {
+    position: absolute;
+    inset-block-end: 30%;
+    inset-inline-start: 50%;
+    width: 10rem;
+    translate: -50% 0;
+
+    &.on {
+        .button-marker-write {
+            scale: 1;
+            opacity: 1;
+        }
+    }
 }
 
 .marker-label {
     padding: 0.4rem;
-    color: rgb(var(--clr-text-on-tint));
 }
 
 .marker-controls {
-    display: flex;
-    gap: 0.2rem;
+    position: relative;
 }
 
 .button-marker-write {
-    padding-inline: 0.8rem;
-    height: 1.6rem;
-    border-radius: var(--rad-sm);
-    background-color: rgb(var(--clr-white));
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline: 0;
+    padding: 0.2rem;
+    width: 3.2rem;
+    height: 3.2rem;
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-text));
+    box-shadow: 0 0.4rem 0.8rem rgb(var(--clr-text) / 0.5);
+    color: rgb(var(--clr-text-on-tint));
+    scale: 0;
+    transition:
+        scale 0.15s,
+        opacity 0.15s;
+    opacity: 0;
+
+    .remix {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    > div {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        pointer-events: none;
+    }
+
+    &.missing {
+        margin-inline-end: auto;
+        transform-origin: right;
+    }
+
+    &.places {
+        margin-block-end: 1.8rem;
+        margin-inline: auto;
+        transform-origin: bottom;
+    }
+
+    &.rescue {
+        margin-inline-start: auto;
+        transform-origin: left;
+    }
+
+    &:hover {
+        background-color: rgb(var(--clr-surface-40));
+
+        .remix {
+            scale: 1.2;
+            opacity: 1;
+        }
+
+        > div {
+            background-color: rgb(var(--clr-background));
+            color: rgb(var(--clr-mid-tone));
+        }
+    }
 }
 
 /* _mallangMap.scss */