[#37] fix: Navbar dropdown buttons

super-waffle · Feb 3, 2022 · 4fe2da6 · 4fe2da6
1 parent c2c1d25
commit 4fe2da6
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 18 deletions.
diff --git a/src/components/login.js b/src/components/login.js
@@ -36,7 +36,7 @@ function Login() {
             const currentToken = localStorage.getItem("accessToken");
             if (currentToken !== null) {
               navigate({
-                pathname: "/home",
+                pathname: "/home/tab=todays",
                 state: { email: email },
               });
               window.location.reload();

diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -295,15 +295,15 @@ function Navbar() {
         </div>
         <div className="navbar-dropdown-list">
           <button
-            className="dropdown-menu"
+            // className="dropdown-menu"
             onClick={() => {
               navigate("profile");
             }}
           >
             내 프로필
           </button>
           <button
-            className="dropdown-menu"
+            // className="dropdown-menu"
             onClick={() => {
               navigate("settings");
             }}
@@ -312,9 +312,7 @@ function Navbar() {
           </button>
         </div>
         <div className="navbar-dropdown-list">
-          <button className="dropdown-menu" onClick={onClickLogout}>
-            로그아웃
-          </button>
+          <button onClick={onClickLogout}>로그아웃</button>
         </div>
       </div>
     </div>

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 import NavbarHome from "../components/navbarHome";
 import isLogin from "../utils/isLogin";
+import "../statics/css/home.css";
 
 export default function Home() {
   const TOKEN = localStorage.getItem("accessToken");
@@ -39,11 +40,41 @@ export default function Home() {
   return (
     <div>
       <NavbarHome sticky="top" />
-      <div className="home-userprofile">
-        <div className="home-userprofile-userimg"></div>
-        <div className="home-userprofile-nickname"></div>
-        <div className="home-userprofile-email"></div>
-        <div className="home-userprofile-msg"></div>
+      <div className="home-profile">
+        <div className="home-profile-userimg">
+          {profileImg === null && (
+            <svg
+              className="home-profile-img"
+              // width="40"
+              // height="40"
+              viewBox="0 0 40 40"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clipPath="url(#clip0_233_15455)">
+                <path
+                  d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+                  fill="#f4f4f4"
+                />
+                <path
+                  d="M40 34.9906V40.0023H0V35.009C2.32658 31.8997 5.34651 29.3762 8.81965 27.6391C12.2928 25.9019 16.1233 24.9991 20.0067 25.0023C28.18 25.0023 35.44 28.9256 40 34.9906ZM26.67 15.0006C26.67 16.7688 25.9676 18.4645 24.7174 19.7147C23.4671 20.9649 21.7714 21.6673 20.0033 21.6673C18.2352 21.6673 16.5395 20.9649 15.2893 19.7147C14.039 18.4645 13.3367 16.7688 13.3367 15.0006C13.3367 13.2325 14.039 11.5368 15.2893 10.2866C16.5395 9.03636 18.2352 8.33398 20.0033 8.33398C21.7714 8.33398 23.4671 9.03636 24.7174 10.2866C25.9676 11.5368 26.67 13.2325 26.67 15.0006Z"
+                  fill="#c0c0c0"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_233_15455">
+                  <path
+                    d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+                    fill="white"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+          )}
+        </div>
+        <div className="home-profile-nickname">{nickname}</div>
+        <div className="home-profile-email"></div>
+        <div className="home-profile-msg"></div>
       </div>
       <Outlet />
     </div>

diff --git a/src/statics/css/Schedule.css b/src/statics/css/Schedule.css
diff --git a/src/statics/css/Schedule.css.map b/src/statics/css/Schedule.css.map
diff --git a/src/statics/css/home.css b/src/statics/css/home.css
diff --git a/src/statics/css/home.css.map b/src/statics/css/home.css.map
diff --git a/src/statics/css/navbar.css b/src/statics/css/navbar.css
diff --git a/src/statics/css/navbar.css.map b/src/statics/css/navbar.css.map
diff --git a/src/statics/scss/home.scss b/src/statics/scss/home.scss
@@ -0,0 +1,19 @@
+@import "main.scss";
+
+.home-profile {
+  font-family: $font-family;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 108px;
+  left: 8%;
+  .home-profile-userimg {
+    svg {
+      &.home-profile-img {
+        height: 256px;
+      }
+    }
+  }
+  .home-profile-nickname {
+  }
+}
diff --git a/src/statics/scss/navbar.scss b/src/statics/scss/navbar.scss
@@ -43,7 +43,7 @@
 }
 .navbar-dropdown {
   font-family: $font-family;
-  position: absolute;
+  position: fixed;
   top: 46px;
   right: 20px;
   width: 180px;
@@ -53,7 +53,8 @@
   border-radius: 4px;
   color: #4b4b4b;
   z-index: 1;
-  .dropdown-menu {
+  // button {
+  & button {
     cursor: pointer;
     border: none;
     background-color: var(--bgColor);
@@ -65,6 +66,7 @@
     &:hover {
       background-color: var(--borderColor);
     }
+    // }
   }
   .navbar-dropdown-list {
     display: flex;