From 1d1784f6979019438bc2c03fdc786609e5c716d2 Mon Sep 17 00:00:00 2001
From: jyc0328 <sykc2002@gmail.com>
Date: Fri, 9 Aug 2024 05:16:10 +0900
Subject: [PATCH] feat:UserPage->LoginModal implemented

---
 src/components/global/GlobalNavigationBar.tsx |  2 +-
 .../userProfile/UserInfoBar.module.scss       | 13 +++++++
 src/components/userProfile/UserInfoBar.tsx    | 38 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx
index 69f1aa2..32df8f3 100644
--- a/src/components/global/GlobalNavigationBar.tsx
+++ b/src/components/global/GlobalNavigationBar.tsx
@@ -26,7 +26,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
             <Explore className={styles.icon} />
           </div>
         </Link>
-        <Link to="/user" className={styles.link}>
+        <Link to="/user/:userId" className={styles.link}>
           <div
             className={`${styles.iconContainer} ${styles.userIconContainer}`}
           >
diff --git a/src/components/userProfile/UserInfoBar.module.scss b/src/components/userProfile/UserInfoBar.module.scss
index 3c9a114..98e06f5 100644
--- a/src/components/userProfile/UserInfoBar.module.scss
+++ b/src/components/userProfile/UserInfoBar.module.scss
@@ -100,3 +100,16 @@
   justify-content: center;
   text-align: center;
 }
+
+.authContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
\ No newline at end of file
diff --git a/src/components/userProfile/UserInfoBar.tsx b/src/components/userProfile/UserInfoBar.tsx
index 5951e53..a614fc6 100644
--- a/src/components/userProfile/UserInfoBar.tsx
+++ b/src/components/userProfile/UserInfoBar.tsx
@@ -1,4 +1,8 @@
 import React, { useState, useEffect } from 'react';
+import AuthContainer from '../login/AuthContainer';
+import useRegisterStore from '../../stores/registerStore';
+import { RegisterStatus } from '../../types/enum/RegisterStatus'
+
 import styles from './UserInfoBar.module.scss';
 import { ReactComponent as ProfilePerson } from '../../assets/img_user_default_profile.svg';
 import Following from './followModal/Following';
@@ -7,6 +11,10 @@ import Follower from './followModal/Follower';
 const UserInfoBar = (props: { children?: React.ReactNode }) => {
   const [isFollowingOpen, setIsFollowingOpen] = useState(false);
   const [isFollowerOpen, setIsFollowerOpen] = useState(false);
+  const [isLog, setIsLog] = useState<boolean>(false);
+  const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
+
+  const { loginNeeded, registerStatus, setLoginNeeded } = useRegisterStore();
 
   const openFollowing = () => {
     setIsFollowingOpen(true);
@@ -24,6 +32,28 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
     setIsFollowerOpen(false);
   };
 
+  useEffect(() => {
+    if(registerStatus !== RegisterStatus.LOG_IN && loginNeeded) {
+      setIsLog(false);
+      setIsOverlayVisible(true);
+      console.log('setDimmed(true');
+    }else{
+      setIsLog(true);
+      setIsOverlayVisible(false);
+      console.log('setDimmed(false)');
+    }
+  },[loginNeeded,registerStatus]);
+
+  const handleClose = () => {
+    setLoginNeeded(false);
+    setIsOverlayVisible(false);
+  };
+
+  const handleLoginClick = () => {
+    setLoginNeeded(true);
+    setIsOverlayVisible(true);
+  }
+
   return (
     <div className={styles.UserInfoBar}>
       <div className={styles.UserPhoto}>
@@ -47,10 +77,16 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
           <span>0</span>
         </div>
       </div>
-      <div className={styles.ProfileBottom}>로그인하기</div>
+      <div className={styles.ProfileBottom} onClick={handleLoginClick}>로그인하기</div>
 
       {isFollowingOpen && <Following onClose={closeFollowing} />}
       {isFollowerOpen && <Follower onClose={closeFollower} />}
+      {isOverlayVisible && (
+        <>
+          <div onClick={handleClose} />
+          <AuthContainer className={styles.authContainer} />
+        </>
+      )}
     </div>
   );
 };