alphagom · kettle4ot · Feb 6, 2023 · Feb 7, 2023 · Feb 8, 2023
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.2.1",
     "eslint-import-resolver-typescript": "^3.5.2",
     "react": "^18.2.0",
+    "react-contexify": "^6.0.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",

diff --git a/front/src/components/NavBar.scss b/front/src/components/NavBar.scss
@@ -1,5 +1,25 @@
 @import '../styles/mixins';
 
+// dropdown(react-contexify) style overriding
+.contexify {
+  font-weight: bold;
+  border: 1px solid #36cc7c;
+  --contexify-zIndex: 666;
+  --contexify-menu-minWidth: 200px;
+  --contexify-menu-padding: 6px;
+  --contexify-menu-radius: 20px;
+  --contexify-menu-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1),
+    2px 2px 2px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.1);
+
+  --contexify-separator-color: #36cc7c;
+  --contexify-separator-margin: 5px;
+  --contexify-itemContent-padding: 10px 10px 10px 20px;
+  --contexify-activeItem-radius: 13px;
+  --contexify-item-color: #333;
+  --contexify-activeItem-color: #000;
+  --contexify-activeItem-bgColor: #d7f5e5;
+}
+
 // 스크롤 다운 이벤트 감지 시 높이 변화 줄 예정
 
 .nav-item-line {
@@ -104,11 +124,20 @@
     font-family: $NanumSquareExtraBold;
     color: $black;
   }
-  .user-icon {
+  .nav-dropdown-btn {
     position: absolute;
-    width: 67px;
     bottom: 67px;
     right: 145px;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    overflow: auto;
+    cursor: pointer;
+  }
+  .user-icon {
+    width: 67px;
   }
   /* 선택된 상태의 컬러를 유지하기 위해선 tsx 파일 쪽에서 클래스를 추가하는 등의 행위가 필요함 */
 }
diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx
@@ -1,13 +1,57 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React, { useState, useCallback } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { Menu, Item, Separator, useContextMenu } from 'react-contexify'
+import LoginModal from './modals/LoginModal'
 import './NavBar.scss'
+import 'react-contexify/dist/ReactContexify.css'
 import logo from '../assets/devgom.png'
 import title from '../assets/title.png'
 import UserIcon from './UserIcon'
 
+const MENU_ID = 'menu-id'
+
 function NavBar() {
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState<boolean>(false)
+  const navigate = useNavigate()
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  })
+
+  // DropDown Menu Event Func
+  function displayMenu(e: React.MouseEvent) {
+    show({
+      event: e,
+    })
+    return e
+  }
+
+  // Show DropDown Menu Handler
+  const clickProfileHandler = (e: React.MouseEvent) => {
+    displayMenu(e)
+  }
+
+  // Login Modal Func
+  const loginModalHandler = useCallback(() => {
+    setIsLoginModalOpen(!isLoginModalOpen)
+  }, [isLoginModalOpen])
+
   return (
     <div className="navbar">
+      {/* Context Menu */}
+      <Menu id={MENU_ID}>
+        <Item>좋아요한 포트폴리오</Item>
+        <Item>저장한 포트폴리오</Item>
+        <Item onClick={() => navigate(`/myportfolio`)}>내 포트폴리오</Item>
+        <Item>계정 설정</Item>
+        <Separator />
+        {/* 로그인 모달 띄우기 */}
+        <Item onClick={loginModalHandler}>로그인</Item>
+      </Menu>
+
+      {/* Login Modal */}
+      {isLoginModalOpen && <LoginModal loginModalHandler={loginModalHandler} />}
+
       <div className="navbar-content">
         <a href="/">
           <img src={logo} alt="devgom logo" width="155" />
@@ -31,7 +75,13 @@ function NavBar() {
           </div>
         </div>
       </div>
-      <UserIcon />
+      <button
+        className="nav-dropdown-btn"
+        type="button"
+        onClick={clickProfileHandler}
+      >
+        <UserIcon />
+      </button>
     </div>
   )
 }

diff --git a/front/src/components/modals/LoginModal.scss b/front/src/components/modals/LoginModal.scss
@@ -0,0 +1,45 @@
+@import '../../styles/mixins';
+.modal {
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+}
+.modal-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+.modal-dialog-box {
+  width: 535px;
+  height: 870px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 0 0 30px rgba(30, 30, 30, 0.185);
+  box-sizing: border-box;
+  background-color: white;
+  z-index: 10000;
+}
+.modal-backdrop {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+@include mobile {
+}
+
+@include tablet {
+}
+
+@include desktop {
+}
diff --git a/front/src/components/modals/LoginModal.tsx b/front/src/components/modals/LoginModal.tsx
@@ -1,9 +1,39 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
+import './LoginModal.scss'
 
-function LoginModal() {
+interface ModalDefaultType {
+  loginModalHandler: () => void
+}
+
+function LoginModal({
+  loginModalHandler,
+  children,
+}: PropsWithChildren<ModalDefaultType>) {
+  const onClickHandler = (e: React.MouseEvent) => {
+    e.preventDefault()
+    if (loginModalHandler) {
+      loginModalHandler()
+    }
+  }
+  const onKeyDownHandler = () => {
+    // hahahaha
+  }
   return (
-    <div>
-      <div>LoginModal</div>
+    <div className="modal">
+      <div className="modal-container">
+        <div className="modal-dialog-box">
+          LoginModal
+          {children}
+        </div>
+        {/* div tag에 onClick 사용하는 방법!!!!! */}
+        <div
+          className="modal-backdrop"
+          role="button"
+          aria-hidden="true"
+          onClick={onClickHandler}
+          onKeyDown={onKeyDownHandler}
+        />
+      </div>
     </div>
   )
 }

diff --git a/front/src/styles/_variables.scss b/front/src/styles/_variables.scss
@@ -29,6 +29,7 @@ $code_bg: #f4f3ec !default;
 $light-green: #d6ffbe !default;
 $light-mint: #94d794 !default;
 $green: #36cc7c !default;
+$green_op20: rgba($green, 0.2) !default;
 $light-gray-leaf: #98a99a !default;
 $leaf: #77a668 !default;
 $light-tree: #6fab97 !default;

diff --git a/front/yarn.lock b/front/yarn.lock
@@ -3284,6 +3284,11 @@
   "resolved" "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   "version" "1.0.4"
 
+"clsx@^1.2.1":
+  "integrity" "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+  "resolved" "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  "version" "1.2.1"
+
 "co@^4.6.0":
   "integrity" "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ=="
   "resolved" "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -7921,6 +7926,13 @@
     "regenerator-runtime" "^0.13.9"
     "whatwg-fetch" "^3.6.2"
 
+"react-contexify@^6.0.0":
+  "integrity" "sha512-jMhz6yZI81Jv3UDj7TXqCkhdkCFEEmvwGCPXsQuA2ZUC8EbCuVQ6Cy8FzKMXa0y454XTDClBN2YFvvmoFlrFkg=="
+  "resolved" "https://registry.npmjs.org/react-contexify/-/react-contexify-6.0.0.tgz"
+  "version" "6.0.0"
+  dependencies:
+    "clsx" "^1.2.1"
+
 "react-dev-utils@^12.0.1":
   "integrity" "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ=="
   "resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
@@ -7951,7 +7963,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.8":
+"react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16", "react-dom@>=16.8":
   "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   "version" "18.2.0"
@@ -8054,7 +8066,7 @@
   optionalDependencies:
     "fsevents" "^2.3.2"
 
-"react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=16.13.1", "react@>=16.8":
+"react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=16", "react@>=16.13.1", "react@>=16.8":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"