From f73ca82e017b85f72c692f4e797e323c87a1f8f7 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Sat, 16 Sep 2023 04:46:49 +0900
Subject: [PATCH 1/8] =?UTF-8?q?rename:=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                             |  2 ++
 src/assets/icons/fontAwesome.txt        | 47 -------------------------
 src/components/SideBar/SideBar.tsx      |  4 +--
 src/components/common/Header.tsx        |  4 ++-
 src/components/commute/CommuteModal.tsx |  1 -
 src/pages/Gallery.tsx                   |  2 +-
 src/pages/Wiki.tsx                      |  2 +-
 7 files changed, 9 insertions(+), 53 deletions(-)
 delete mode 100644 src/assets/icons/fontAwesome.txt

diff --git a/src/App.tsx b/src/App.tsx
index 47cd73be..32bdcc5d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import Footer from "./components/common/Footer";
 import Home from "./pages/Home";
 import Gallery from "./pages/Gallery";
 import GlobalStyle from "./styles/globalStyle";
+import Wiki from "./pages/Wiki";
 
 const App = () => {
   return (
@@ -13,6 +14,7 @@ const App = () => {
       <Footer />
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/wiki" element={<Wiki />} />
         <Route path="/gallery" element={<Gallery />} />
       </Routes>
     </BrowserRouter>
diff --git a/src/assets/icons/fontAwesome.txt b/src/assets/icons/fontAwesome.txt
deleted file mode 100644
index 6eca50ac..00000000
--- a/src/assets/icons/fontAwesome.txt
+++ /dev/null
@@ -1,47 +0,0 @@
-// icon 크기는 2xs 부터 2xl 까지 가능합니다. (2xs - xs - sm - lg - xl - 2xl)
-
-// 예시
-<i class="fa-brands fa-github fa-2xs" style="color: #000000;"></i> // 2xl
-<i class="fa-brands fa-github fa-lg" style="color: #087EA4;"></i> // lg
-
-// blue icon color: #087EA4
-
-------------------------------------------------------------------------------
-
-// Font Awesome script
-<script src="https://kit.fontawesome.com/8d5fe92c5f.js" crossorigin="anonymous"></script>
-
-------------------------------------------------------------------------------
-
-// ------ all ------
-
-// right icon
-<i class="fa-solid fa-chevron-right" style="color: #000000;"></i>
-
-// left icon
-<i class="fa-solid fa-chevron-left" style="color: #000000;"></i>
-
-// github icon
-<i class="fa-brands fa-github" style="color: #000000;"></i>
-
-// x icon
-<i class="fa-solid fa-x" style="color: #000000;"></i>
-
-
-// ------ wiki page ------
-
-// laptop icon
-<i class="fa-solid fa-laptop" style="color: #000000;"></i>
-
-// write button icon
-<i class="fa-regular fa-pen-to-square" style="color: #000000;"></i>
-
-// check button icon
-<i class="fa-solid fa-check" style="color: #000000;"></i>
-
-
-// ------ gallery page ------
-
-// clip icon
-<i class="fa-solid fa-paperclip" style="color: #000000;"></i>
-
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 5629c6a1..5306ad03 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -171,7 +171,7 @@ const GallerySideBar = () => {
 const Wikis = () => {
   return (
     <Routes>
-      <Route path="/" element={<WikiSideBar />}>
+      <Route path="/wiki" element={<WikiSideBar />}>
         <Route path="office-life" element={<OfficeLife />}>
           <Route path="company-rules" element={<CompanyRules />} />
           <Route path="team-introduction" element={<TeamIntroduction />} />
@@ -194,7 +194,7 @@ const Wikis = () => {
 const Gallerys = () => {
   return (
     <Routes>
-      <Route path="/" element={<GallerySideBar />}>
+      <Route path="/gallery" element={<GallerySideBar />}>
         <Route path="photos" element={<Photos />}>
           <Route path="office-photo" element={<OfficePhoto />} />
           <Route path="business" element={<Business />} />
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index ee470633..ccc83ce5 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -59,7 +59,9 @@ const Header = () => {
         <HeaderItems>
           <HeaderItem>
             <IconImg src={wikiBlack} alt="wiki icon" />
-            <Span>wiki</Span>
+            <Span>
+              <Link to="/wiki">wiki</Link>
+            </Span>
           </HeaderItem>
           <HeaderItem>
             <IconImg src={gelleryBlack} alt="gellery icon" />
diff --git a/src/components/commute/CommuteModal.tsx b/src/components/commute/CommuteModal.tsx
index a07f3163..06cc7ae5 100644
--- a/src/components/commute/CommuteModal.tsx
+++ b/src/components/commute/CommuteModal.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import "./CommuteModal.css";
 import { doc, deleteDoc, setDoc } from "firebase/firestore";
 import { db } from "../../firebase";
 import {
diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx
index 880aa715..e5e88b37 100644
--- a/src/pages/Gallery.tsx
+++ b/src/pages/Gallery.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import styled from "styled-components";
 import GallerySection from "../components/gallery/GallerySection";
 import GalleryModal from "../components/gallery/GalleryModal";
diff --git a/src/pages/Wiki.tsx b/src/pages/Wiki.tsx
index b5f69546..166dc1eb 100644
--- a/src/pages/Wiki.tsx
+++ b/src/pages/Wiki.tsx
@@ -1,6 +1,6 @@
 import { BrowserRouter } from "react-router-dom";
 import Header from "../components/common/Header";
-import { Wikis } from "../components/SideBar/SideBar";
+import { Wikis } from "../components/sidebar/SideBar";
 import GlobalStyle from "../styles/globalStyle";
 
 const Wiki = () => {

From d02ec4841d4661a244d12ad1952ae18d2d1c9488 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Mon, 18 Sep 2023 18:50:38 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=201?=
 =?UTF-8?q?=EC=B0=A8=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   | 49 ++++++++++++++++++-
 src/components/SideBar/OfficeLife.tsx         |  6 +--
 src/components/SideBar/Photos.tsx             | 17 ++++---
 src/components/SideBar/SideBar.tsx            | 47 ++----------------
 src/components/common/Header.tsx              |  4 +-
 .../commute/CommuteButtonComponent.tsx        | 16 +++---
 src/pages/Gallery.tsx                         |  6 ++-
 src/pages/Wiki.tsx                            | 16 +++---
 8 files changed, 88 insertions(+), 73 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 32bdcc5d..df14fe5b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,31 @@ import Footer from "./components/common/Footer";
 import Home from "./pages/Home";
 import Gallery from "./pages/Gallery";
 import GlobalStyle from "./styles/globalStyle";
+import { WikiSideBar, GallerySideBar } from "./components/sidebar/SideBar";
 import Wiki from "./pages/Wiki";
+import {
+  CompanyRules,
+  OfficeLife,
+  OrganizationChart,
+  TeamIntroduction,
+} from "./components/sidebar/OfficeLife";
+import {
+  Photos,
+  OfficePhoto,
+  Business,
+  JobPosting,
+} from "./components/sidebar/Photos";
+import {
+  Onboarding,
+  ReadingList,
+  Topics,
+} from "./components/sidebar/Onboarding";
+import {
+  Project,
+  InProject,
+  UpComing,
+  Completed,
+} from "./components/sidebar/Project";
 
 const App = () => {
   return (
@@ -14,8 +38,29 @@ const App = () => {
       <Footer />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/wiki" element={<Wiki />} />
-        <Route path="/gallery" element={<Gallery />} />
+        <Route path="/wiki" element={<Wiki />}>
+          <Route path="office-life" element={<OfficeLife />}>
+            <Route path="company-rules" element={<CompanyRules />} />
+            <Route path="team-introduction" element={<TeamIntroduction />} />
+            <Route path="organization-chart" element={<OrganizationChart />} />
+          </Route>
+          <Route path="project" element={<Project />}>
+            <Route path="in-progress" element={<InProject />} />
+            <Route path="upcoming" element={<UpComing />} />
+            <Route path="completed" element={<Completed />} />
+          </Route>
+          <Route path="onboarding" element={<Onboarding />}>
+            <Route path="reading-list" element={<ReadingList />} />
+            <Route path="topics" element={<Topics />} />
+          </Route>
+        </Route>
+        <Route path="/gallery" element={<Gallery />}>
+          <Route path="photos" element={<Photos />}>
+            <Route path="office-photo" element={<OfficePhoto />} />
+            <Route path="business" element={<Business />} />
+            <Route path="job-posting" element={<JobPosting />} />
+          </Route>
+        </Route>
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/components/SideBar/OfficeLife.tsx b/src/components/SideBar/OfficeLife.tsx
index ff6877ee..09987835 100644
--- a/src/components/SideBar/OfficeLife.tsx
+++ b/src/components/SideBar/OfficeLife.tsx
@@ -16,13 +16,13 @@ const OrganizationChart = () => {
 const OfficeLife = () => {
   return (
     <div>
-      <Link to="company-rules">
+      <Link to="/wiki/office-life/company-rules">
         <Text>회사내규</Text>
       </Link>
-      <Link to="team-introduction">
+      <Link to="/wiki/office-life/team-introduction">
         <Text>팀소개</Text>
       </Link>
-      <Link to="organization-chart">
+      <Link to="/wiki/office-life/organization-chart">
         <Text>조직도</Text>
       </Link>
     </div>
diff --git a/src/components/SideBar/Photos.tsx b/src/components/SideBar/Photos.tsx
index 6f0f8eee..3a2bd1c0 100644
--- a/src/components/SideBar/Photos.tsx
+++ b/src/components/SideBar/Photos.tsx
@@ -1,8 +1,13 @@
+import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { Text } from "../../styles/SideBarStyle";
 
+const Div = styled.div`
+  height: 300px;
+`;
+
 const OfficePhoto = () => {
-  return <div>내부사진 내용</div>;
+  return <Div>내부사진 내용</Div>;
 };
 
 const Business = () => {
@@ -15,17 +20,17 @@ const JobPosting = () => {
 
 const Photos = () => {
   return (
-    <div>
-      <Link to="office-photo">
+    <>
+      <Link to="/gallery/photo/office-photo">
         <Text>내부 사진</Text>
       </Link>
-      <Link to="business">
+      <Link to="/gallery/photo/business">
         <Text>협력사</Text>
       </Link>
-      <Link to="job-posting">
+      <Link to="/gallery/photo/job-posting">
         <Text>내부 사진</Text>
       </Link>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 5306ad03..ebfe3ebf 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -55,7 +55,7 @@ const WikiSideBar = () => {
   return (
     <SideBarBox>
       <SideBarItem>
-        <Link to="/office-life">
+        <Link to="office-life">
           <SideBarMainText
             onClick={ToggleCompanyText}
             style={{
@@ -79,7 +79,7 @@ const WikiSideBar = () => {
         {CompanyTextVisible && <Outlet />}
       </SideBarItem>
       <SideBarItem>
-        <Link to="/project">
+        <Link to="project">
           <SideBarMainText
             onClick={ToggleProjectText}
             style={{
@@ -103,7 +103,7 @@ const WikiSideBar = () => {
         {ProjectTextVisible && <Outlet />}
       </SideBarItem>
       <SideBarItem>
-        <Link to="/onboarding">
+        <Link to="onboarding">
           <SideBarMainText
             onClick={ToggleOnboardingText}
             style={{
@@ -141,7 +141,7 @@ const GallerySideBar = () => {
   return (
     <SideBarBox>
       <SideBarItem>
-        <Link to="/photos">
+        <Link to="photos">
           <SideBarMainText
             onClick={ToggleCompanyText}
             style={{
@@ -168,41 +168,4 @@ const GallerySideBar = () => {
   );
 };
 
-const Wikis = () => {
-  return (
-    <Routes>
-      <Route path="/wiki" element={<WikiSideBar />}>
-        <Route path="office-life" element={<OfficeLife />}>
-          <Route path="company-rules" element={<CompanyRules />} />
-          <Route path="team-introduction" element={<TeamIntroduction />} />
-          <Route path="organization-chart" element={<OrganizationChart />} />
-        </Route>
-        <Route path="project" element={<Project />}>
-          <Route path="in-progress" element={<InProject />} />
-          <Route path="upcoming" element={<UpComing />} />
-          <Route path="completed" element={<Completed />} />
-        </Route>
-        <Route path="onboarding" element={<Onboarding />}>
-          <Route path="reading-list" element={<ReadingList />} />
-          <Route path="topics" element={<Topics />} />
-        </Route>
-      </Route>
-    </Routes>
-  );
-};
-
-const Gallerys = () => {
-  return (
-    <Routes>
-      <Route path="/gallery" element={<GallerySideBar />}>
-        <Route path="photos" element={<Photos />}>
-          <Route path="office-photo" element={<OfficePhoto />} />
-          <Route path="business" element={<Business />} />
-          <Route path="job-posting" element={<JobPosting />} />
-        </Route>
-      </Route>
-    </Routes>
-  );
-};
-
-export { Wikis, Gallerys };
+export { WikiSideBar, GallerySideBar };
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index ccc83ce5..4110543e 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -55,7 +55,9 @@ const Header = () => {
   return (
     <HeaderBox>
       <HeaderNav>
-        <Logo />
+        <Link to="/">
+          <Logo />
+        </Link>
         <HeaderItems>
           <HeaderItem>
             <IconImg src={wikiBlack} alt="wiki icon" />
diff --git a/src/components/commute/CommuteButtonComponent.tsx b/src/components/commute/CommuteButtonComponent.tsx
index dba4a1ff..78daf448 100644
--- a/src/components/commute/CommuteButtonComponent.tsx
+++ b/src/components/commute/CommuteButtonComponent.tsx
@@ -50,14 +50,14 @@ const CommuteButtonComponent = () => {
     }
   };
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      checkOnOff();
-    }, 1000);
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
+  // useEffect(() => {
+  //   const timer = setInterval(() => {
+  //     checkOnOff();
+  //   }, 1000);
+  //   return () => {
+  //     clearInterval(timer);
+  //   };
+  // }, []);
 
   return (
     <>
diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx
index e5e88b37..0bffab2e 100644
--- a/src/pages/Gallery.tsx
+++ b/src/pages/Gallery.tsx
@@ -1,7 +1,9 @@
+import { Outlet } from "react-router-dom";
 import { useState } from "react";
 import styled from "styled-components";
 import GallerySection from "../components/gallery/GallerySection";
 import GalleryModal from "../components/gallery/GalleryModal";
+import { GallerySideBar } from "../components/sidebar/SideBar";
 
 const GalleryWrapper = styled.div`
   display: flex;
@@ -17,8 +19,8 @@ const Gallery = () => {
 
   return (
     <GalleryWrapper>
-      {/* 사이드바 컴포넌트 */}
-
+      <GallerySideBar />
+      <Outlet />
       <GallerySection isModalChange={isModalChange} />
       {/* Modal */}
       {isModal && <GalleryModal isModalChange={isModalChange} />}
diff --git a/src/pages/Wiki.tsx b/src/pages/Wiki.tsx
index 166dc1eb..70840baf 100644
--- a/src/pages/Wiki.tsx
+++ b/src/pages/Wiki.tsx
@@ -1,15 +1,13 @@
-import { BrowserRouter } from "react-router-dom";
-import Header from "../components/common/Header";
-import { Wikis } from "../components/sidebar/SideBar";
-import GlobalStyle from "../styles/globalStyle";
+import { Outlet } from "react-router-dom";
+import { WikiSideBar } from "../components/sidebar/SideBar";
 
 const Wiki = () => {
   return (
-    <BrowserRouter>
-      <GlobalStyle />
-      <Header />
-      <Wikis />
-    </BrowserRouter>
+    <>
+      <WikiSideBar />
+      <Outlet />
+      {/* <Wikis /> */}
+    </>
   );
 };
 

From 2bff8a31c174153d85de2a4017be0a5e63add325 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Mon, 18 Sep 2023 20:31:20 +0900
Subject: [PATCH 3/8] =?UTF-8?q?Feat:=20=EA=B0=A4=EB=9F=AC=EB=A6=AC=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SideBar/Photos.tsx  | 8 ++++----
 src/components/SideBar/SideBar.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/SideBar/Photos.tsx b/src/components/SideBar/Photos.tsx
index 3a2bd1c0..5e000894 100644
--- a/src/components/SideBar/Photos.tsx
+++ b/src/components/SideBar/Photos.tsx
@@ -21,14 +21,14 @@ const JobPosting = () => {
 const Photos = () => {
   return (
     <>
-      <Link to="/gallery/photo/office-photo">
+      <Link to="/gallery/photos/office-photo">
         <Text>내부 사진</Text>
       </Link>
-      <Link to="/gallery/photo/business">
+      <Link to="/gallery/photos/business">
         <Text>협력사</Text>
       </Link>
-      <Link to="/gallery/photo/job-posting">
-        <Text>내부 사진</Text>
+      <Link to="/gallery/photos/job-posting">
+        <Text>채용공고</Text>
       </Link>
     </>
   );
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index ebfe3ebf..56526df0 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -162,7 +162,7 @@ const GallerySideBar = () => {
             />
           </SideBarMainText>
         </Link>
-        {PhotosTextVisible && <Outlet />}
+        {/* {PhotosTextVisible && <Outlet />} */}
       </SideBarItem>
     </SideBarBox>
   );

From e69a2514fdf0c348782eac59490e3126b67a6018 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Mon, 18 Sep 2023 22:37:52 +0900
Subject: [PATCH 4/8] =?UTF-8?q?design:=20margin=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/SideBarStyle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/SideBarStyle.tsx b/src/styles/SideBarStyle.tsx
index 49c44f60..77c184f7 100644
--- a/src/styles/SideBarStyle.tsx
+++ b/src/styles/SideBarStyle.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const SideBarBox = styled.div`
   width: 370px;
   height: 90vh;
-  margin-top: 15px;
+  margin: 15px 20px 0 0;
   font-family: "NotoSansKR-Regular";
 `;
 

From ab5be29645434eb03b141782ae4c744834256667 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Tue, 19 Sep 2023 01:57:32 +0900
Subject: [PATCH 5/8] =?UTF-8?q?Feat:=20=EA=B0=A4=EB=9F=AC=EB=A6=AC=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SideBar/Photos.tsx      | 37 --------------------------
 src/components/gallery/Business.tsx    |  5 ++++
 src/components/gallery/JobPosting.tsx  |  5 ++++
 src/components/gallery/OfficePhoto.tsx |  5 ++++
 4 files changed, 15 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/SideBar/Photos.tsx
 create mode 100644 src/components/gallery/Business.tsx
 create mode 100644 src/components/gallery/JobPosting.tsx
 create mode 100644 src/components/gallery/OfficePhoto.tsx

diff --git a/src/components/SideBar/Photos.tsx b/src/components/SideBar/Photos.tsx
deleted file mode 100644
index 5e000894..00000000
--- a/src/components/SideBar/Photos.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import { Text } from "../../styles/SideBarStyle";
-
-const Div = styled.div`
-  height: 300px;
-`;
-
-const OfficePhoto = () => {
-  return <Div>내부사진 내용</Div>;
-};
-
-const Business = () => {
-  return <div>협력사 내용</div>;
-};
-
-const JobPosting = () => {
-  return <div>채용공고 내용</div>;
-};
-
-const Photos = () => {
-  return (
-    <>
-      <Link to="/gallery/photos/office-photo">
-        <Text>내부 사진</Text>
-      </Link>
-      <Link to="/gallery/photos/business">
-        <Text>협력사</Text>
-      </Link>
-      <Link to="/gallery/photos/job-posting">
-        <Text>채용공고</Text>
-      </Link>
-    </>
-  );
-};
-
-export { Photos, OfficePhoto, Business, JobPosting };
diff --git a/src/components/gallery/Business.tsx b/src/components/gallery/Business.tsx
new file mode 100644
index 00000000..d8ec69b2
--- /dev/null
+++ b/src/components/gallery/Business.tsx
@@ -0,0 +1,5 @@
+const Business = () => {
+  return <div>협력사 내용</div>;
+};
+
+export default Business;
diff --git a/src/components/gallery/JobPosting.tsx b/src/components/gallery/JobPosting.tsx
new file mode 100644
index 00000000..ddabebe2
--- /dev/null
+++ b/src/components/gallery/JobPosting.tsx
@@ -0,0 +1,5 @@
+const JobPosting = () => {
+  return <div>채용공고 내용</div>;
+};
+
+export default JobPosting;
diff --git a/src/components/gallery/OfficePhoto.tsx b/src/components/gallery/OfficePhoto.tsx
new file mode 100644
index 00000000..f99395e9
--- /dev/null
+++ b/src/components/gallery/OfficePhoto.tsx
@@ -0,0 +1,5 @@
+const OfficePhoto = () => {
+  return <div>내부 사진 내용</div>;
+};
+
+export default OfficePhoto;

From 8c51a9cd10680816772f94e34e13a101fba5dcd5 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Tue, 19 Sep 2023 02:37:06 +0900
Subject: [PATCH 6/8] =?UTF-8?q?design:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/SideBarStyle.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/SideBarStyle.tsx b/src/styles/SideBarStyle.tsx
index 77c184f7..0906a87f 100644
--- a/src/styles/SideBarStyle.tsx
+++ b/src/styles/SideBarStyle.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const SideBarBox = styled.div`
   width: 370px;
   height: 90vh;
-  margin: 15px 20px 0 0;
+  margin: 15px 50px 0 0;
   font-family: "NotoSansKR-Regular";
 `;
 
@@ -50,6 +50,7 @@ const Text = styled.a`
   cursor: pointer;
   display: flex;
   align-items: center;
+  color: #000;
 
   &:hover {
     background-color: #f6f7f9;

From b40742d86698d89f4c607588c9b1cb6f7ee703a5 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Tue, 19 Sep 2023 02:38:00 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EA=B2=BD=EB=A1=9C=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header.tsx |  4 ++--
 src/pages/Gallery.tsx            |  6 +++---
 src/pages/Wiki.tsx               | 10 +++++++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 4110543e..cabc016a 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -62,13 +62,13 @@ const Header = () => {
           <HeaderItem>
             <IconImg src={wikiBlack} alt="wiki icon" />
             <Span>
-              <Link to="/wiki">wiki</Link>
+              <Link to="/wiki/office-life/company-rules">wiki</Link>
             </Span>
           </HeaderItem>
           <HeaderItem>
             <IconImg src={gelleryBlack} alt="gellery icon" />
             <Span>
-              <Link to="/gallery">gellery</Link>
+              <Link to="/gallery/office-photo">gellery</Link>
             </Span>
           </HeaderItem>
           <HeaderItem>
diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx
index 0bffab2e..e01b56f4 100644
--- a/src/pages/Gallery.tsx
+++ b/src/pages/Gallery.tsx
@@ -7,7 +7,7 @@ import { GallerySideBar } from "../components/sidebar/SideBar";
 
 const GalleryWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
+  // justify-content: space-between;
 `;
 
 const Gallery = () => {
@@ -21,9 +21,9 @@ const Gallery = () => {
     <GalleryWrapper>
       <GallerySideBar />
       <Outlet />
-      <GallerySection isModalChange={isModalChange} />
+      {/* <GallerySection isModalChange={isModalChange} /> */}
       {/* Modal */}
-      {isModal && <GalleryModal isModalChange={isModalChange} />}
+      {/* {isModal && <GalleryModal isModalChange={isModalChange} />} */}
     </GalleryWrapper>
   );
 };
diff --git a/src/pages/Wiki.tsx b/src/pages/Wiki.tsx
index 70840baf..af002bba 100644
--- a/src/pages/Wiki.tsx
+++ b/src/pages/Wiki.tsx
@@ -1,13 +1,17 @@
+import styled from "styled-components";
 import { Outlet } from "react-router-dom";
 import { WikiSideBar } from "../components/sidebar/SideBar";
 
+const WikiWrapper = styled.div`
+  display: flex;
+`;
+
 const Wiki = () => {
   return (
-    <>
+    <WikiWrapper>
       <WikiSideBar />
       <Outlet />
-      {/* <Wikis /> */}
-    </>
+    </WikiWrapper>
   );
 };
 

From 408dbb6dc81b437787705991f3cb5f8c90f64723 Mon Sep 17 00:00:00 2001
From: yeongmins <oxox123456@naver.com>
Date: Tue, 19 Sep 2023 02:38:30 +0900
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EC=9C=84=ED=82=A4=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B0=A4=EB=9F=AC=EB=A6=AC=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  90 ++++----
 src/components/SideBar/SideBar.tsx            | 214 ++++++++++--------
 .../wiki/office-life/CompanyRules.tsx         |   5 +
 .../wiki/office-life/OrganizationChart.tsx    |   5 +
 .../wiki/office-life/TeamIntroduction.tsx     |   5 +
 .../wiki/onboarding/ReadingList.tsx           |   5 +
 src/components/wiki/onboarding/Topics.tsx     |   5 +
 src/components/wiki/project/Completed.tsx     |   5 +
 src/components/wiki/project/InProject.tsx     |   5 +
 src/components/wiki/project/UpComing.tsx      |   5 +
 10 files changed, 207 insertions(+), 137 deletions(-)
 create mode 100644 src/components/wiki/office-life/CompanyRules.tsx
 create mode 100644 src/components/wiki/office-life/OrganizationChart.tsx
 create mode 100644 src/components/wiki/office-life/TeamIntroduction.tsx
 create mode 100644 src/components/wiki/onboarding/ReadingList.tsx
 create mode 100644 src/components/wiki/onboarding/Topics.tsx
 create mode 100644 src/components/wiki/project/Completed.tsx
 create mode 100644 src/components/wiki/project/InProject.tsx
 create mode 100644 src/components/wiki/project/UpComing.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ced8854e..59271401 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,34 +1,31 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import GlobalStyle from "./styles/globalStyle";
 import Header from "./components/common/Header";
 import Footer from "./components/common/Footer";
 import Home from "./pages/Home";
-import Gallery from "./pages/Gallery";
-import GlobalStyle from "./styles/globalStyle";
-import { WikiSideBar, GallerySideBar } from "./components/sidebar/SideBar";
+
+// Wiki page
 import Wiki from "./pages/Wiki";
-import {
-  CompanyRules,
-  OfficeLife,
-  OrganizationChart,
-  TeamIntroduction,
-} from "./components/sidebar/OfficeLife";
-import {
-  Photos,
-  OfficePhoto,
-  Business,
-  JobPosting,
-} from "./components/sidebar/Photos";
-import {
-  Onboarding,
-  ReadingList,
-  Topics,
-} from "./components/sidebar/Onboarding";
-import {
-  Project,
-  InProject,
-  UpComing,
-  Completed,
-} from "./components/sidebar/Project";
+
+// office-life Componenets
+import CompanyRules from "./components/wiki/office-life/CompanyRules";
+import OrganizationChart from "./components/wiki/office-life/OrganizationChart";
+import TeamIntroduction from "./components/wiki/office-life/TeamIntroduction";
+
+// project Components
+import InProject from "./components/wiki/project/InProject";
+import UpComing from "./components/wiki/project/UpComing";
+import Completed from "./components/wiki/project/Completed";
+
+// onboarding Components
+import ReadingList from "./components/wiki/onboarding/ReadingList";
+import Topics from "./components/wiki/onboarding/Topics";
+
+// Gallery Componenets
+import Gallery from "./pages/Gallery";
+import OfficePhoto from "./components/gallery/OfficePhoto";
+import Business from "./components/gallery/Business";
+import JobPosting from "./components/gallery/JobPosting";
 
 const App = () => {
   return (
@@ -37,28 +34,31 @@ const App = () => {
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
+        {/* wiki */}
         <Route path="/wiki" element={<Wiki />}>
-          <Route path="office-life" element={<OfficeLife />}>
-            <Route path="company-rules" element={<CompanyRules />} />
-            <Route path="team-introduction" element={<TeamIntroduction />} />
-            <Route path="organization-chart" element={<OrganizationChart />} />
-          </Route>
-          <Route path="project" element={<Project />}>
-            <Route path="in-progress" element={<InProject />} />
-            <Route path="upcoming" element={<UpComing />} />
-            <Route path="completed" element={<Completed />} />
-          </Route>
-          <Route path="onboarding" element={<Onboarding />}>
-            <Route path="reading-list" element={<ReadingList />} />
-            <Route path="topics" element={<Topics />} />
-          </Route>
+          {/* office-life */}
+          <Route path="office-life/company-rules" element={<CompanyRules />} />
+          <Route
+            path="office-life/team-introduction"
+            element={<TeamIntroduction />}
+          />
+          <Route
+            path="office-life/organization-chart"
+            element={<OrganizationChart />}
+          />
+          {/* project */}
+          <Route path="project/in-progress" element={<InProject />} />
+          <Route path="project/upcoming" element={<UpComing />} />
+          <Route path="project/completed" element={<Completed />} />
+          {/* onboarding */}
+          <Route path="onboarding/reading-list" element={<ReadingList />} />
+          <Route path="onboarding/topics" element={<Topics />} />
         </Route>
+        {/* gallery */}
         <Route path="/gallery" element={<Gallery />}>
-          <Route path="photos" element={<Photos />}>
-            <Route path="office-photo" element={<OfficePhoto />} />
-            <Route path="business" element={<Business />} />
-            <Route path="job-posting" element={<JobPosting />} />
-          </Route>
+          <Route path="office-photo" element={<OfficePhoto />} />
+          <Route path="business" element={<Business />} />
+          <Route path="job-posting" element={<JobPosting />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 56526df0..e4f5d555 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -1,4 +1,4 @@
-import { Routes, Route, Link, Outlet } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import "../../assets/fonts/Font.css";
 import companyBlack from "../../assets/icons/sidebar_icon/company_black_icon.png";
@@ -10,26 +10,19 @@ import projectBlue from "../../assets/icons/sidebar_icon/project_blue_icon.png";
 import onboardingBlack from "../../assets/icons/sidebar_icon/onboarding_black_icon.png";
 import onboardingBlue from "../../assets/icons/sidebar_icon/onboarding_blue_icon.png";
 import photosBlue from "../../assets/icons/sidebar_icon/photos_blue_icon.png";
-import { Photos, OfficePhoto, Business, JobPosting } from "./Photos";
-import { Onboarding, ReadingList, Topics } from "./Onboarding";
-import { Project, InProject, UpComing, Completed } from "./Project";
-import {
-  OfficeLife,
-  CompanyRules,
-  TeamIntroduction,
-  OrganizationChart,
-} from "./OfficeLife";
 import {
   SideBarBox,
   SideBarItem,
   Section,
   SideBarMainText,
   MainText,
+  Text,
   CompanyIcon,
   BottomIcon,
 } from "../../styles/SideBarStyle";
 
 const WikiSideBar = () => {
+  const navigate = useNavigate();
   const [CompanyTextVisible, setCompanyTextVisible] = useState(true);
   const [ProjectTextVisible, setProjectTextVisible] = useState(false);
   const [OnboardingTextVisible, setOnboardingTextVisible] = useState(false);
@@ -38,96 +31,127 @@ const WikiSideBar = () => {
     setCompanyTextVisible(true);
     setProjectTextVisible(false);
     setOnboardingTextVisible(false);
+    navigate("/wiki/office-life/company-rules");
   };
 
   const ToggleProjectText = () => {
     setCompanyTextVisible(false);
     setProjectTextVisible(true);
     setOnboardingTextVisible(false);
+    navigate("/wiki/project/in-progress");
   };
 
   const ToggleOnboardingText = () => {
     setCompanyTextVisible(false);
     setProjectTextVisible(false);
     setOnboardingTextVisible(true);
+    navigate("/wiki/onboarding/reading-list");
   };
 
   return (
     <SideBarBox>
+      {/* CompanyRules */}
       <SideBarItem>
-        <Link to="office-life">
-          <SideBarMainText
-            onClick={ToggleCompanyText}
-            style={{
-              backgroundColor: CompanyTextVisible ? "#e6f7ff" : "transparent",
-              color: CompanyTextVisible ? "#087ea4" : "black",
-            }}>
-            <Section>
-              <CompanyIcon
-                src={CompanyTextVisible ? companyBlue : companyBlack}
-                alt="회사 아이콘"
-              />
-              <MainText>회사생활</MainText>
-            </Section>
-            <BottomIcon
-              src={CompanyTextVisible ? bottomBlue : bottomBlack}
+        <SideBarMainText
+          onClick={ToggleCompanyText}
+          style={{
+            backgroundColor: CompanyTextVisible ? "#e6f7ff" : "transparent",
+            color: CompanyTextVisible ? "#087ea4" : "black",
+          }}>
+          <Section>
+            <CompanyIcon
+              src={CompanyTextVisible ? companyBlue : companyBlack}
               alt="회사 아이콘"
-              className={CompanyTextVisible ? "rotate" : ""}
             />
-          </SideBarMainText>
-        </Link>
-        {CompanyTextVisible && <Outlet />}
+            <MainText>회사생활</MainText>
+          </Section>
+          <BottomIcon
+            src={CompanyTextVisible ? bottomBlue : bottomBlack}
+            alt="회사 아이콘"
+            className={CompanyTextVisible ? "rotate" : ""}
+          />
+        </SideBarMainText>
       </SideBarItem>
+      {CompanyTextVisible && (
+        <>
+          <Link to="/wiki/office-life/company-rules">
+            <Text>회사내규</Text>
+          </Link>
+          <Link to="/wiki/office-life/team-introduction">
+            <Text>팀소개</Text>
+          </Link>
+          <Link to="/wiki/office-life/organization-chart">
+            <Text>조직도</Text>
+          </Link>
+        </>
+      )}
+      {/* Project */}
       <SideBarItem>
-        <Link to="project">
-          <SideBarMainText
-            onClick={ToggleProjectText}
-            style={{
-              backgroundColor: ProjectTextVisible ? "#e6f7ff" : "transparent",
-              color: ProjectTextVisible ? "#087ea4" : "black",
-            }}>
-            <Section>
-              <CompanyIcon
-                src={ProjectTextVisible ? projectBlue : projectBlack}
-                alt="프로젝트 아이콘"
-              />
-              <MainText>프로젝트</MainText>
-            </Section>
-            <BottomIcon
-              src={ProjectTextVisible ? bottomBlue : bottomBlack}
+        <SideBarMainText
+          onClick={ToggleProjectText}
+          style={{
+            backgroundColor: ProjectTextVisible ? "#e6f7ff" : "transparent",
+            color: ProjectTextVisible ? "#087ea4" : "black",
+          }}>
+          <Section>
+            <CompanyIcon
+              src={ProjectTextVisible ? projectBlue : projectBlack}
               alt="프로젝트 아이콘"
-              className={ProjectTextVisible ? "rotate" : ""}
             />
-          </SideBarMainText>
-        </Link>
-        {ProjectTextVisible && <Outlet />}
+            <MainText>프로젝트</MainText>
+          </Section>
+          <BottomIcon
+            src={ProjectTextVisible ? bottomBlue : bottomBlack}
+            alt="프로젝트 아이콘"
+            className={ProjectTextVisible ? "rotate" : ""}
+          />
+        </SideBarMainText>
       </SideBarItem>
+      {ProjectTextVisible && (
+        <>
+          <Link to="/wiki/project/in-progress">
+            <Text>진행중인 프로젝트</Text>
+          </Link>
+          <Link to="/wiki/project/upcoming">
+            <Text>예정된 프로젝트</Text>
+          </Link>
+          <Link to="/wiki/project/completed">
+            <Text>완료된 프로젝트</Text>
+          </Link>
+        </>
+      )}
+      {/* Onboarding */}
       <SideBarItem>
-        <Link to="onboarding">
-          <SideBarMainText
-            onClick={ToggleOnboardingText}
-            style={{
-              backgroundColor: OnboardingTextVisible
-                ? "#e6f7ff"
-                : "transparent",
-              color: OnboardingTextVisible ? "#087ea4" : "black",
-            }}>
-            <Section>
-              <CompanyIcon
-                src={OnboardingTextVisible ? onboardingBlue : onboardingBlack}
-                alt="온보딩 아이콘"
-              />
-              <MainText>온보딩</MainText>
-            </Section>
-            <BottomIcon
-              src={OnboardingTextVisible ? bottomBlue : bottomBlack}
+        <SideBarMainText
+          onClick={ToggleOnboardingText}
+          style={{
+            backgroundColor: OnboardingTextVisible ? "#e6f7ff" : "transparent",
+            color: OnboardingTextVisible ? "#087ea4" : "black",
+          }}>
+          <Section>
+            <CompanyIcon
+              src={OnboardingTextVisible ? onboardingBlue : onboardingBlack}
               alt="온보딩 아이콘"
-              className={OnboardingTextVisible ? "rotate" : ""}
             />
-          </SideBarMainText>
-        </Link>
-        {OnboardingTextVisible && <Outlet />}
+            <MainText>온보딩</MainText>
+          </Section>
+          <BottomIcon
+            src={OnboardingTextVisible ? bottomBlue : bottomBlack}
+            alt="온보딩 아이콘"
+            className={OnboardingTextVisible ? "rotate" : ""}
+          />
+        </SideBarMainText>
       </SideBarItem>
+      {OnboardingTextVisible && (
+        <>
+          <Link to="/wiki/onboarding/reading-list">
+            <Text>신입사원 필독서</Text>
+          </Link>
+          <Link to="/wiki/onboarding/topics">
+            <Text>온보딩 주제</Text>
+          </Link>
+        </>
+      )}
     </SideBarBox>
   );
 };
@@ -141,28 +165,34 @@ const GallerySideBar = () => {
   return (
     <SideBarBox>
       <SideBarItem>
-        <Link to="photos">
-          <SideBarMainText
-            onClick={ToggleCompanyText}
-            style={{
-              backgroundColor: PhotosTextVisible ? "#e6f7ff" : "transparent",
-              color: PhotosTextVisible ? "#087ea4" : "black",
-            }}>
-            <Section>
-              <CompanyIcon
-                src={PhotosTextVisible ? photosBlue : " "}
-                alt="온보딩 아이콘"
-              />
-              <MainText>온보딩</MainText>
-            </Section>
-            <BottomIcon
-              src={PhotosTextVisible ? bottomBlue : bottomBlack}
-              alt="온보딩 아이콘"
-              className={PhotosTextVisible ? "rotate" : ""}
+        <SideBarMainText
+          onClick={ToggleCompanyText}
+          style={{
+            backgroundColor: PhotosTextVisible ? "#e6f7ff" : "transparent",
+            color: PhotosTextVisible ? "#087ea4" : "black",
+          }}>
+          <Section>
+            <CompanyIcon
+              src={PhotosTextVisible ? photosBlue : " "}
+              alt="사진첩 아이콘"
             />
-          </SideBarMainText>
+            <MainText>사진첩</MainText>
+          </Section>
+          <BottomIcon
+            src={PhotosTextVisible ? bottomBlue : bottomBlack}
+            alt="사진첩 아이콘"
+            className={PhotosTextVisible ? "rotate" : ""}
+          />
+        </SideBarMainText>
+        <Link to="/gallery/office-photo">
+          <Text>내부 사진</Text>
+        </Link>
+        <Link to="/gallery/business">
+          <Text>협력사</Text>
+        </Link>
+        <Link to="/gallery/job-posting">
+          <Text>채용공고</Text>
         </Link>
-        {/* {PhotosTextVisible && <Outlet />} */}
       </SideBarItem>
     </SideBarBox>
   );
diff --git a/src/components/wiki/office-life/CompanyRules.tsx b/src/components/wiki/office-life/CompanyRules.tsx
new file mode 100644
index 00000000..93de9175
--- /dev/null
+++ b/src/components/wiki/office-life/CompanyRules.tsx
@@ -0,0 +1,5 @@
+const CompanyRules = () => {
+  return <div>회사내규 내용</div>;
+};
+
+export default CompanyRules;
diff --git a/src/components/wiki/office-life/OrganizationChart.tsx b/src/components/wiki/office-life/OrganizationChart.tsx
new file mode 100644
index 00000000..5404ee12
--- /dev/null
+++ b/src/components/wiki/office-life/OrganizationChart.tsx
@@ -0,0 +1,5 @@
+const OrganizationChart = () => {
+  return <div>조직도 내용</div>;
+};
+
+export default OrganizationChart;
diff --git a/src/components/wiki/office-life/TeamIntroduction.tsx b/src/components/wiki/office-life/TeamIntroduction.tsx
new file mode 100644
index 00000000..80ce4745
--- /dev/null
+++ b/src/components/wiki/office-life/TeamIntroduction.tsx
@@ -0,0 +1,5 @@
+const TeamIntroduction = () => {
+  return <div>팀소개 내용</div>;
+};
+
+export default TeamIntroduction;
diff --git a/src/components/wiki/onboarding/ReadingList.tsx b/src/components/wiki/onboarding/ReadingList.tsx
new file mode 100644
index 00000000..2ad9853a
--- /dev/null
+++ b/src/components/wiki/onboarding/ReadingList.tsx
@@ -0,0 +1,5 @@
+const ReadingList = () => {
+  return <div>ReadingList</div>;
+};
+
+export default ReadingList;
diff --git a/src/components/wiki/onboarding/Topics.tsx b/src/components/wiki/onboarding/Topics.tsx
new file mode 100644
index 00000000..c39b614f
--- /dev/null
+++ b/src/components/wiki/onboarding/Topics.tsx
@@ -0,0 +1,5 @@
+const Topics = () => {
+  return <div>Topics</div>;
+};
+
+export default Topics;
diff --git a/src/components/wiki/project/Completed.tsx b/src/components/wiki/project/Completed.tsx
new file mode 100644
index 00000000..93844985
--- /dev/null
+++ b/src/components/wiki/project/Completed.tsx
@@ -0,0 +1,5 @@
+const Completed = () => {
+  return <div>Completed</div>;
+};
+
+export default Completed;
diff --git a/src/components/wiki/project/InProject.tsx b/src/components/wiki/project/InProject.tsx
new file mode 100644
index 00000000..3d7240e5
--- /dev/null
+++ b/src/components/wiki/project/InProject.tsx
@@ -0,0 +1,5 @@
+const InProject = () => {
+  return <div>InProject</div>;
+};
+
+export default InProject;
diff --git a/src/components/wiki/project/UpComing.tsx b/src/components/wiki/project/UpComing.tsx
new file mode 100644
index 00000000..66c419e4
--- /dev/null
+++ b/src/components/wiki/project/UpComing.tsx
@@ -0,0 +1,5 @@
+const UpComing = () => {
+  return <div>UpComing</div>;
+};
+
+export default UpComing;