Merge pull request #128 from KUIT-MAPU/126-feat-user별-프로필-화면+api-받아오기

feat/126-UserProfile-Login/out+API implented
KUIT-MAPU · Aug 15, 2024 · 7d1e983 · 7d1e983
2 parents 69f7db7 + e1baf8d
commit 7d1e983
Show file tree

Hide file tree

Showing 7 changed files with 400 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start:windows": "set HTTPS=true&&set SSL_CRT_FILE=cert/localhost.pem&&set SSL_KEY_FILE=cert/localhost-key.pem&&npm run start",
+    "start:windows": "set HTTPS=true&&set SSL_CRT_FILE=./localhost.pem&&set SSL_KEY_FILE=./localhost-key.pem&&npm run start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

diff --git a/src/components/userProfile/userInfoBarCard/EmptyUSerInfobar.module.scss b/src/components/userProfile/userInfoBarCard/EmptyUSerInfobar.module.scss
@@ -0,0 +1,118 @@
+@font-face {
+    font-family: Freesentation;
+    src: url('../../../assets/fonts/Freesentation-Bold.woff');
+  }
+
+  @font-face {
+    font-family: Freesentation;
+    src: url('../../../assets/fonts/Freesentation-Regular.woff');
+  }
+
+  @font-face {
+    font-family: Freesentation;
+    src: url('../../../assets/fonts/Freesentation-SemiBold.woff');
+  }
+
+  .UserInfoBar {
+    width: 300px;
+    background-color: var(--white);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    border-right: 1px solid var(--gray_50);
+  }
+
+  .UserPhoto {
+    width: 120px;
+    height: 120px;
+    background-color: var(--gray_100);
+    margin-top: 72px;
+    border-radius: 760px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .UserName {
+    margin-top: 4px;
+    min-width: 111px;
+    width: auto;
+    min-height: 64px;
+    height: auto;
+    padding: 10px;
+    background-color: white;
+    text-align: center;
+  }
+
+  .UserName h1 {
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 33px;
+    font: 'Freesentation';
+  }
+
+  .UserName span {
+    size: 18px;
+    font-weight: 400;
+    line-height: 27px;
+    font: 'Freesentation';
+    color: var(--gray_500);
+  }
+
+  .UserProfileNumber {
+    margin-top: 12px;
+    min-width: 216px;
+    width: auto;
+    min-height: 72px;
+    height: auto;
+    background-color: white;
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .UserProfilBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .UserProfileBox span {
+    display: block;
+    text-align: center;
+    margin-bottom: 5px;
+  }
+
+  .ProfileBottom {
+    margin-top: 20px;
+    width: 260px;
+    height: 32px;
+    background-color: var(--gray_50);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .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 → ...file/userInfoBarCard/EmptyUserInfoBar.tsx b/src/components/userProfile/UserInfoBar.tsx → ...file/userInfoBarCard/EmptyUserInfoBar.tsx
@@ -1,127 +1,99 @@
-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';
-import Follower from './followModal/Follower';
-
-import instance from '../../apis/instance';
-
-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 [userData, setUserData] = useState({
-    profileImage:'',
-    profileId:'',
-    mapCnt:0,
-    followerCnt:0,
-    followingCnt:0,
-  })
-
-  useEffect(() => {
-    const fetchUserData = async () => {
-      try {
-        const response = await instance.get('/user');
-        const data = response.data;
-
-        setUserData({
-          profileImage: data.profileImage,
-          mapCnt:data.mapCnt,
-          profileId: data.profileId,
-          followerCnt: data.followerCnt,
-          followingCnt: data.followingCnt,
-        });
-      } catch (error) {
-        console.error('Failed to fetch user data', error);
-      }
-    };
-
-    fetchUserData();
-  }, [userData]);
-
-  const { loginNeeded, registerStatus, setLoginNeededStatus } =
-    useRegisterStore();
-
-  const openFollowing = () => {
-    setIsFollowingOpen(true);
-  };
-
-  const closeFollowing = () => {
-    setIsFollowingOpen(false);
-  };
-
-  const openFollower = () => {
-    setIsFollowerOpen(true);
-  };
-
-  const closeFollower = () => {
-    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 = () => {
-    setLoginNeededStatus(false);
-    setIsOverlayVisible(false);
-  };
-
-  const handleLoginClick = () => {
-    setLoginNeededStatus(true);
-    setIsOverlayVisible(true);
-  };
-
-  return (
-    <div className={styles.UserInfoBar}>
-      <div className={styles.UserPhoto}>
-        <ProfilePerson />
-      </div>
-      <div className={styles.UserName}>
-        <h1>환영해요!</h1>
-        <span>로그인이 필요해요</span>
-      </div>
-      <div className={styles.UserProfileNumber}>
-        <div className={styles.UserProfileBox}>
-          <div>내 지도</div>
-          <span>0</span>
-        </div>
-        <div className={styles.UserProfileBox} onClick={openFollower}>
-          <div>팔로워</div>
-          <span>{userData.followerCnt}</span>
-        </div>
-        <div className={styles.UserProfileBox} onClick={openFollowing}>
-          <div>팔로잉</div>
-          <span>{userData.followingCnt}</span>
-        </div>
-      </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>
-  );
-};
-
-export default UserInfoBar;
+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';
+import Follower from '../followModal/Follower';
+
+import instance from '../../../apis/instance';
+
+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, setLoginNeededStatus } =
+    useRegisterStore();
+
+  const openFollowing = () => {
+    setIsFollowingOpen(true);
+  };
+
+  const closeFollowing = () => {
+    setIsFollowingOpen(false);
+  };
+
+  const openFollower = () => {
+    setIsFollowerOpen(true);
+  };
+
+  const closeFollower = () => {
+    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 = () => {
+    setLoginNeededStatus(false);
+    setIsOverlayVisible(false);
+  };
+
+  const handleLoginClick = () => {
+    setLoginNeededStatus(true);
+    setIsOverlayVisible(true);
+  };
+
+  return (
+    <div className={styles.UserInfoBar}>
+      <div className={styles.UserPhoto}>
+        <ProfilePerson />
+      </div>
+      <div className={styles.UserName}>
+        <h1>환영해요!</h1>
+        <span>로그인이 필요해요</span>
+      </div>
+      <div className={styles.UserProfileNumber}>
+        <div className={styles.UserProfileBox}>
+          <div>내 지도</div>
+          <span>0</span>
+        </div>
+        <div className={styles.UserProfileBox} onClick={openFollower}>
+          <div>팔로워</div>
+          <span>0</span>
+        </div>
+        <div className={styles.UserProfileBox} onClick={openFollowing}>
+          <div>팔로잉</div>
+          <span>0</span>
+        </div>
+      </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>
+  );
+};
+
+export default UserInfoBar;
diff --git a/...nents/userProfile/UserInfoBar.module.scss → ...serInfoBarCard/GetUserInfoBar.module.scss b/...nents/userProfile/UserInfoBar.module.scss → ...serInfoBarCard/GetUserInfoBar.module.scss
@@ -1,16 +1,16 @@
 @font-face {
   font-family: Freesentation;
-  src: url('../../assets/fonts/Freesentation-Bold.woff');
+  src: url('../../../assets/fonts/Freesentation-Bold.woff');
 }
 
 @font-face {
   font-family: Freesentation;
-  src: url('../../assets/fonts/Freesentation-Regular.woff');
+  src: url('../../../assets/fonts/Freesentation-Regular.woff');
 }
 
 @font-face {
   font-family: Freesentation;
-  src: url('../../assets/fonts/Freesentation-SemiBold.woff');
+  src: url('../../../assets/fonts/Freesentation-SemiBold.woff');
 }
 
 .UserInfoBar {