Merge pull request #94 from KUIT-MAPU/feat/93-User-LogIn

feat:UserPage->LoginModal implemented
KUIT-MAPU · Aug 8, 2024 · 9a26d99 · 9a26d99
2 parents 142779c + 1d1784f
commit 9a26d99
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git 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
@@ -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;
+}
diff --git 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>
   );
 };