diff --git a/src/App.tsx b/src/App.tsx index d61bb41e..59271401 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,32 @@ 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"; + +// Wiki page import Wiki from "./pages/Wiki"; +// 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 ( @@ -13,8 +34,32 @@ const App = () => {
} /> - } /> - } /> + {/* wiki */} + }> + {/* office-life */} + } /> + } + /> + } + /> + {/* project */} + } /> + } /> + } /> + {/* onboarding */} + } /> + } /> + + {/* gallery */} + }> + } /> + } /> + } /> + ); 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) - -// 예시 - // 2xl - // lg - -// blue icon color: #087EA4 - ------------------------------------------------------------------------------- - -// Font Awesome script - - ------------------------------------------------------------------------------- - -// ------ all ------ - -// right icon - - -// left icon - - -// github icon - - -// x icon - - - -// ------ wiki page ------ - -// laptop icon - - -// write button icon - - -// check button icon - - - -// ------ gallery page ------ - -// clip icon - - 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 (
- + 회사내규 - + 팀소개 - + 조직도
diff --git a/src/components/SideBar/Photos.tsx b/src/components/SideBar/Photos.tsx deleted file mode 100644 index 6f0f8eee..00000000 --- a/src/components/SideBar/Photos.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Link } from "react-router-dom"; -import { Text } from "../../styles/SideBarStyle"; - -const OfficePhoto = () => { - return
내부사진 내용
; -}; - -const Business = () => { - return
협력사 내용
; -}; - -const JobPosting = () => { - return
채용공고 내용
; -}; - -const Photos = () => { - return ( -
- - 내부 사진 - - - 협력사 - - - 내부 사진 - -
- ); -}; - -export { Photos, OfficePhoto, Business, JobPosting }; diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 5629c6a1..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 ( + {/* CompanyRules */} - - -
- - 회사생활 -
- +
+ - - - {CompanyTextVisible && } + 회사생활 +
+ + + {CompanyTextVisible && ( + <> + + 회사내규 + + + 팀소개 + + + 조직도 + + + )} + {/* Project */} - - -
- - 프로젝트 -
- +
+ - - - {ProjectTextVisible && } + 프로젝트 +
+ + + {ProjectTextVisible && ( + <> + + 진행중인 프로젝트 + + + 예정된 프로젝트 + + + 완료된 프로젝트 + + + )} + {/* Onboarding */} - - -
- - 온보딩 -
- +
+ - - - {OnboardingTextVisible && } + 온보딩 +
+ + + {OnboardingTextVisible && ( + <> + + 신입사원 필독서 + + + 온보딩 주제 + + + )} ); }; @@ -141,68 +165,37 @@ const GallerySideBar = () => { return ( - - -
- - 온보딩 -
- +
+ - + 사진첩 +
+ + + + 내부 사진 + + + 협력사 + + + 채용공고 - {PhotosTextVisible && } ); }; -const Wikis = () => { - return ( - - }> - }> - } /> - } /> - } /> - - }> - } /> - } /> - } /> - - }> - } /> - } /> - - - - ); -}; - -const Gallerys = () => { - return ( - - }> - }> - } /> - } /> - } /> - - - - ); -}; - -export { Wikis, Gallerys }; +export { WikiSideBar, GallerySideBar }; diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index ee470633..cabc016a 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -55,16 +55,20 @@ const Header = () => { return ( - + + + - wiki + + wiki + - gellery + gellery 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
협력사 내용
; +}; + +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
채용공고 내용
; +}; + +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
내부 사진 내용
; +}; + +export default OfficePhoto; 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
회사내규 내용
; +}; + +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
조직도 내용
; +}; + +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
팀소개 내용
; +}; + +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
ReadingList
; +}; + +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
Topics
; +}; + +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
Completed
; +}; + +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
InProject
; +}; + +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
UpComing
; +}; + +export default UpComing; diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx index 880aa715..e01b56f4 100644 --- a/src/pages/Gallery.tsx +++ b/src/pages/Gallery.tsx @@ -1,11 +1,13 @@ -import React, { useState } from "react"; +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; - justify-content: space-between; + // justify-content: space-between; `; const Gallery = () => { @@ -17,11 +19,11 @@ const Gallery = () => { return ( - {/* 사이드바 컴포넌트 */} - - + + + {/* */} {/* Modal */} - {isModal && } + {/* {isModal && } */} ); }; diff --git a/src/pages/Wiki.tsx b/src/pages/Wiki.tsx index 9664b52f..af002bba 100644 --- a/src/pages/Wiki.tsx +++ b/src/pages/Wiki.tsx @@ -1,13 +1,17 @@ -import { BrowserRouter } from "react-router-dom"; -import { Wikis } from "../components/SideBar/SideBar"; -import GlobalStyle from "../styles/globalStyle"; +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 ( - <> - - - + + + + ); }; diff --git a/src/styles/SideBarStyle.tsx b/src/styles/SideBarStyle.tsx index 49c44f60..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-top: 15px; + 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;