[FE] FEAT : profile layout

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import LoginPage from "@/pages/LoginPage";
 import MainPage from "@/pages/MainPage";
 import AdminMainPage from "@/pages/admin/AdminMainPage";
 import LoadingAnimation from "@/components/Common/LoadingAnimation";
+import ProfilePage from "./pages/ProfilePage";
 
 const NotFoundPage = lazy(() => import("@/pages/NotFoundPage"));
 const LoginFailurePage = lazy(() => import("@/pages/LoginFailurePage"));
@@ -28,7 +29,8 @@ function App(): React.ReactElement {
             <Route path="login" element={<LoginPage />} />
             <Route path="home" element={<HomePage />} />
             <Route path="main" element={<MainPage />} />
-            <Route path="log" element={<LogPage />} />
+            <Route path="profile/log" element={<LogPage />} />
+            <Route path="profile" element={<ProfilePage />} />
           </Route>
           {/* admin용 라우터 */}
           <Route path="/admin/" element={<AdminLayout />}>

frontend/src/components/LeftNav/LeftMainNav/LeftMainNav.container.tsx

@@ -109,6 +109,11 @@ const LeftMainNavContainer = ({ isAdmin }: { isAdmin?: boolean }) => {
     closeAll();
   };
 
+  const onClickProfileButton = () => {
+    navigator("profile");
+    closeAll();
+  };
+
   const onClickLogoutButton = (): void => {
     const adminToken = isAdmin ? "admin_" : "";
     if (import.meta.env.VITE_IS_LOCAL === "true") {
@@ -138,6 +143,7 @@ const LeftMainNavContainer = ({ isAdmin }: { isAdmin?: boolean }) => {
       onClickSearchButton={onClickSearchButton}
       onClickLogoutButton={onClickLogoutButton}
       onClickClubButton={onClickClubButton}
+      onClickProfileButton={onClickProfileButton}
       isAdmin={isAdmin}
     />
   );

frontend/src/components/LeftNav/LeftMainNav/LeftMainNav.tsx

@@ -10,6 +10,7 @@ interface ILeftMainNav {
   onClickLentLogButton: React.MouseEventHandler;
   onClickSearchButton: React.MouseEventHandler;
   onClickClubButton: React.MouseEventHandler;
+  onClickProfileButton: React.MouseEventHandler;
   isAdmin?: boolean;
 }
 
@@ -23,6 +24,7 @@ const LeftMainNav = ({
   onClickLentLogButton,
   onClickSearchButton,
   onClickClubButton,
+  onClickProfileButton,
   isAdmin,
 }: ILeftMainNav) => {
   return (
@@ -58,75 +60,66 @@ const LeftMainNav = ({
       <BottomSectionStyled>
         <BottomBtnsStyled>
           {isAdmin && (
-            <BottomBtnStyled
-              className={
-                pathname.includes("search")
-                  ? "active cabiButton"
-                  : " cabiButton"
-              }
-              src={"/src/assets/images/search.svg"}
-              onClick={onClickSearchButton}
-            >
-              <div></div>
-              Search
-            </BottomBtnStyled>
-          )}
-          {!isAdmin && (
-            <BottomBtnStyled
-              className={
-                pathname.includes("log") ? "active cabiButton" : " cabiButton"
-              }
-              src={"/src/assets/images/log.svg"}
-              onClick={onClickLentLogButton}
-            >
-              <div></div>
-              Log
-            </BottomBtnStyled>
-          )}
-          <BottomBtnStyled
-            src={"/src/assets/images/slack.svg"}
-            className="cabiButton"
-          >
-            <a
-              href="https://42born2code.slack.com/archives/C02V6GE8LD7"
-              target="_blank"
-              title="슬랙 캐비닛 채널 새창으로 열기"
-            >
-              <div></div>
-              Contact
-            </a>
-          </BottomBtnStyled>
-          <BottomBtnStyled
-            src={"/src/assets/images/clubIconGray.svg"}
-            className="cabiButton"
-          >
-            {isAdmin ? (
-              <>
-                <a onClick={onClickClubButton}>
+            <>
+              <BottomBtnStyled
+                className={
+                  pathname.includes("search")
+                    ? "active cabiButton"
+                    : " cabiButton"
+                }
+                src={"/src/assets/images/search.svg"}
+                onClick={onClickSearchButton}
+              >
+                <div></div>
+                Search
+              </BottomBtnStyled>
+              <BottomBtnStyled
+                src={"/src/assets/images/slack.svg"}
+                className="cabiButton"
+              >
+                <a
+                  href="https://42born2code.slack.com/archives/C02V6GE8LD7"
+                  target="_blank"
+                  title="슬랙 캐비닛 채널 새창으로 열기"
+                >
                   <div></div>
-                  Club
+                  Contact
                 </a>
-              </>
-            ) : (
-              <a
-                href="https://docs.google.com/forms/d/e/1FAIpQLSfp-d7qq8gTvmQe5i6Gtv_mluNSICwuv5pMqeTBqt9NJXXP7w/closedform"
-                target="_blank"
-                title="동아리 사물함 사용 신청서 새창으로 열기"
+              </BottomBtnStyled>
+              <BottomBtnStyled
+                src={"/src/assets/images/clubIconGray.svg"}
+                className="cabiButton"
+                onClick={onClickClubButton}
               >
                 <div></div>
                 Club
-              </a>
-            )}
-          </BottomBtnStyled>
-
-          <BottomBtnStyled
-            className="cabiButton"
-            onClick={onClickLogoutButton}
-            src={"/src/assets/images/close-square.svg"}
-          >
-            <div></div>
-            Logout
-          </BottomBtnStyled>
+              </BottomBtnStyled>
+              <BottomBtnStyled
+                className="cabiButton"
+                onClick={onClickLogoutButton}
+                src={"/src/assets/images/close-square.svg"}
+              >
+                <div></div>
+                Logout
+              </BottomBtnStyled>
+            </>
+          )}
+          {!isAdmin && (
+            <>
+              <BottomBtnStyled
+                className={
+                  pathname.includes("profile")
+                    ? "active cabiButton"
+                    : " cabiButton"
+                }
+                src={"/src/assets/images/profile-circle.svg"}
+                onClick={onClickProfileButton}
+              >
+                <div></div>
+                Profile
+              </BottomBtnStyled>
+            </>
+          )}
         </BottomBtnsStyled>
       </BottomSectionStyled>
     </LeftNavStyled>

frontend/src/components/LeftNav/LeftNav.tsx

@@ -2,14 +2,15 @@ import styled from "styled-components";
 import LeftMainNavContainer from "@/components/LeftNav/LeftMainNav/LeftMainNav.container";
 import LeftSectionNavContainer from "@/components/LeftNav/LeftSectionNav/LeftSectionNav.container";
 
-const LeftNav: React.FC<{ isVisible: boolean; isAdmin?: boolean }> = ({
-  isAdmin,
-  isVisible,
-}) => {
+const LeftNav: React.FC<{
+  isVisible: boolean;
+  isAdmin?: boolean;
+  isProfile: boolean;
+}> = ({ isAdmin, isVisible, isProfile }) => {
   return (
     <LeftNavWrapStyled id="leftNavWrap">
       <LeftMainNavContainer isAdmin={isAdmin} />
-      <LeftSectionNavContainer isVisible={isVisible} />
+      <LeftSectionNavContainer isVisible={isVisible} isProfile={isProfile} />
     </LeftNavWrapStyled>
   );
 };

frontend/src/components/LeftNav/LeftSectionNav/LeftSectionNav.container.tsx

@@ -1,28 +1,68 @@
+import { useLocation, useNavigate } from "react-router-dom";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { currentSectionNameState } from "@/recoil/atoms";
 import { currentFloorSectionState } from "@/recoil/selectors";
 import LeftSectionNav from "@/components/LeftNav/LeftSectionNav/LeftSectionNav";
 import useMenu from "@/hooks/useMenu";
 
-const LeftSectionNavContainer = ({ isVisible }: { isVisible: boolean }) => {
+const LeftSectionNavContainer = ({
+  isVisible,
+  isProfile,
+}: {
+  isVisible: boolean;
+  isProfile: boolean;
+}) => {
   const floorSection = useRecoilValue<Array<string>>(currentFloorSectionState);
   const [currentFloorSection, setCurrentFloorSection] = useRecoilState<string>(
     currentSectionNameState
   );
-
+  const navigator = useNavigate();
+  const { pathname } = useLocation();
   const { closeLeftNav } = useMenu();
 
   const onClickSection = (section: string) => {
     closeLeftNav();
     setCurrentFloorSection(section);
   };
 
+  const onClickProfile = () => {
+    closeLeftNav();
+    navigator("profile");
+  };
+
+  const onClickLentLogButton = () => {
+    closeLeftNav();
+    navigator("profile/log");
+  };
+
+  const onClickSlack = () => {
+    window.open(
+      "https://42born2code.slack.com/archives/C02V6GE8LD7",
+      "_blank",
+      "noopener noreferrer"
+    );
+  };
+
+  const onClickClubForm = () => {
+    window.open(
+      "https://docs.google.com/forms/d/e/1FAIpQLSfp-d7qq8gTvmQe5i6Gtv_mluNSICwuv5pMqeTBqt9NJXXP7w/closedform",
+      "_blank",
+      "noopener noreferrer"
+    );
+  };
+
   return (
     <LeftSectionNav
+      pathname={pathname}
       isVisible={isVisible}
-      onClickSection={onClickSection}
+      isProfile={isProfile}
       currentFloorSection={currentFloorSection}
       floorSection={floorSection}
+      onClickSection={onClickSection}
+      onClickProfile={onClickProfile}
+      onClickLentLogButton={onClickLentLogButton}
+      onClickSlack={onClickSlack}
+      onClickClubForm={onClickClubForm}
     />
   );
 };