Merge pull request #138 from My-Own-Weapon/refactor/#137-shareMapPage

user가 투표 종료시 머리에 말풍선 뜨도록 변경 - #137

src/app/share/page.module.scss

@@ -1,8 +1,9 @@
-@import '@/styles/variables/radius.scss';
-@import '@/styles/variables/textSize.scss';
-@import '@/styles/variables/zIndex.scss';
-@import '@/styles/variables/fontWeight.scss';
-@import '@/styles/mixins/index.scss';
+@import '@styles/variables/colors.scss';
+@import '@styles/variables/radius.scss';
+@import '@styles/variables/textSize.scss';
+@import '@styles/variables/fontWeight.scss';
+@import '@styles/variables/zIndex.scss';
+@import '@styles/mixins/index.scss';
 
 .addVoteContainer {
   position: relative;
@@ -113,8 +114,32 @@
 .startVoteContainer {
   background-color: $white;
 
+  @include flexColumnStart;
+  gap: 24px;
+
+  .userContainer {
+    width: auto;
+
+    padding: 0 24px;
+    @include flexRowStart;
+    gap: 8px;
+
+    .votingUsers {
+      width: 60px;
+      height: 106px;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+
   .startVoteWrapper {
-    padding: 40px 24px 140px 24px;
+    width: calc(100% - 48px);
+
+    padding: 0 24px 140px 24px;
   }
 }
 
@@ -250,3 +275,90 @@
     gap: 16px;
   }
 }
+
+@import url('https://fonts.cdnfonts.com/css/nats');
+
+.sharePageHeaderContainer {
+  position: sticky;
+  z-index: $header;
+
+  padding: 0 24px;
+  height: 60px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background-color: $bgWhite;
+
+  .logoTitle {
+    color: $primaryOrange;
+    font-family: 'NATS', sans-serif;
+    font-size: $textTitle;
+    font-weight: $regular;
+  }
+
+  .navBtnArea {
+    @include flexCenter;
+    gap: 16px;
+
+    .profileContainer {
+      position: relative;
+
+      .profileIcon {
+        cursor: pointer;
+      }
+
+      .dropdownMenu {
+        display: none;
+
+        position: absolute;
+        z-index: $dropDown;
+        right: 0;
+
+        width: 140px;
+
+        background-color: $white;
+
+        border: 1px solid $gray300;
+        border-radius: $radiusSmall;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+        .myPage {
+          display: inline-block;
+          height: 40px;
+
+          @include flexCenter;
+
+          font-size: $textMedium;
+          font-weight: $medium;
+          color: $textTitleColor;
+
+          cursor: pointer;
+        }
+
+        .logout {
+          display: inline-block;
+
+          width: 100%;
+          height: 40px;
+
+          @include flexCenter;
+
+          background-color: transparent;
+
+          cursor: pointer;
+
+          .logoutBtn {
+            background-color: transparent;
+          }
+          .text {
+            font-size: $textMedium;
+            font-weight: $medium;
+            color: $textTitleColor;
+          }
+        }
+      }
+    }
+  }
+}