Skip to content

Commit

Permalink
feat: 위키 및 갤러리 라우팅 설정
Browse files Browse the repository at this point in the history
  • Loading branch information
@yeongmins
yeongmins committed Sep 18, 2023
1 parent b40742d commit 408dbb6
Show file tree
Hide file tree
Showing 10 changed files with 207 additions and 137 deletions.
90 changes: 45 additions & 45 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>
Expand Down
214 changes: 122 additions & 92 deletions src/components/SideBar/SideBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand All @@ -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>
);
};
Expand All @@ -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>
);
Expand Down
5 changes: 5 additions & 0 deletions src/components/wiki/office-life/CompanyRules.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const CompanyRules = () => {
return <div>회사내규 내용</div>;
};

export default CompanyRules;
Loading

0 comments on commit 408dbb6

Please sign in to comment.