Merge branch 'develop' into feat/#101

KUSITMS-29th-TEAM-B · May 20, 2024 · 9030598 · 9030598
2 parents d2a6452 + a2c9ae6
commit 9030598
Show file tree

Hide file tree

Showing 18 changed files with 1,529 additions and 419 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import "./App.css";
 import { Route, Routes } from "react-router-dom";
-import MainPage from "./pages/MainPage";
 import Navbar from "./components/common/Navbar";
 import JDDetailPage from "./pages/JDDetailPage";
 import JDPlusPage from "./pages/JDPlusPage";
@@ -18,6 +17,7 @@ import InfoPage from "./pages/InfoPage";
 import ApplyEditPage from "./pages/ApplyEditPage";
 import ApplyPage from "./pages/ApplyPage";
 import JDEditPage from "./pages/JDEditPage";
+import ExperienceEditPage from "./pages/ExperienceEditPage";
 
 const App: React.FC = () => {
   return (
@@ -60,6 +60,12 @@ const App: React.FC = () => {
             element={<ExperienceDetailPage />}
           />
         </Route>
+        <Route element={<PrivateRoute />} path="/">
+          <Route
+            path="/experience/detail/:id/edit"
+            element={<ExperienceEditPage />}
+          />
+        </Route>
         <Route path="/sign-in" element={<SignInPage />} />
         <Route element={<PrivateRoute />} path="/">
           <Route path="/sign-up" element={<SignupPage />} />

diff --git a/src/components/JD/ExpContainer.tsx b/src/components/JD/ExpContainer.tsx
@@ -8,12 +8,12 @@ import JDChip from "./JDChip";
 import ArrowIcon from "../../assets/icons/icon_arrow_right_main500.svg";
 
 interface JobContainerProps {
-  expId: number;
+  expId: number | string;
 }
 
 const ExperienceBox: React.FC<JobContainerProps> = ({ expId }) => {
-  const expData = ExpData[expId - 1];
-  const [detailId, setDetailId] = useRecoilState<number>(detailStore);
+  const expData = ExpData[0];
+  const [detailId, setDetailId] = useRecoilState<number | string>(detailStore);
 
   return (
     <ExpContainer>
@@ -68,32 +68,32 @@ const ExperienceBox: React.FC<JobContainerProps> = ({ expId }) => {
 export default ExperienceBox;
 
 const ScrollDiv = styled.div`
-    width: 100%;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background: #ccc;
-    }
-    ::-webkit-scrollbar-track {
-    }
+  width: 100%;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: #ccc;
+  }
+  ::-webkit-scrollbar-track {
+  }
 `;
 
 const ExpContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 40rem;
-    align-items: flex-start;
-    gap: 0.625rem;
-    //padding: 2rem;
-    flex-shrink: 0;
-    border-radius: 0.9rem;
-    border: 1px solid var(--neutral-200, #EEEFF7);
-    background: var(--neutral-0, #FFF);
-    //min-height: 100rem;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 40rem;
+  align-items: flex-start;
+  gap: 0.625rem;
+  //padding: 2rem;
+  flex-shrink: 0;
+  border-radius: 0.9rem;
+  border: 1px solid var(--neutral-200, #eeeff7);
+  background: var(--neutral-0, #fff);
+  //min-height: 100rem;
 `;
 
 const TagContainer = styled.div`
@@ -114,7 +114,7 @@ const ButtonContainer = styled.div`
   flex-direction: row;
   align-items: center;
   color: ${(props) => props.theme.colors.neutral600};
-  div{
+  div {
     width: 100%;
     ${(props) => props.theme.fonts.cap3};
   }
@@ -145,7 +145,7 @@ const SubContainer = styled.div`
   gap: 0.75rem;
   color: ${(props) => props.theme.colors.neutral500};
   ${(props) => props.theme.fonts.body4};
-  border-bottom: 1px solid  ${(props) => props.theme.colors.neutral300};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral300};
   padding-bottom: 1.25rem;
 `;
 
@@ -161,42 +161,42 @@ const TopContainer = styled.div`
 `;
 
 const ExpBottomBox = styled.div`
-    height: 27rem;
-    color: var(--neutral-700, #343A5D);
-    //overflow-y: scroll;
-    margin: 0rem 0rem 2rem 2rem;
+  height: 27rem;
+  color: var(--neutral-700, #343a5d);
+  //overflow-y: scroll;
+  margin: 0rem 0rem 2rem 2rem;
 `;
 
 const ChipWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    text-align: center;
+  display: flex;
+  align-items: center;
+  text-align: center;
 `;
 
 const QuestionsWrapper = styled.div`
-    width: 100%;
-    display: flex;
-    padding-right: 1.5rem;
-    flex-direction: column;
-    justify-content: start;
-    margin-top: 1.25rem;
-    .question-title{
-        margin-top: 0.5rem;
-        ${(props) => props.theme.fonts.subtitle3};
-        color: ${(props) => props.theme.colors.neutral700};
-    }
+  width: 100%;
+  display: flex;
+  padding-right: 1.5rem;
+  flex-direction: column;
+  justify-content: start;
+  margin-top: 1.25rem;
+  .question-title {
+    margin-top: 0.5rem;
+    ${(props) => props.theme.fonts.subtitle3};
+    color: ${(props) => props.theme.colors.neutral700};
+  }
 `;
 
 const AnswerWrapper = styled.div`
-    width: 100%;
-    display: flex;
-    padding: 1rem 1.125rem;
-    align-items: center;
-    gap: 0.625rem;
-    border-radius: 0.75rem;
-    height: 6rem;
-    background: ${(props) => props.theme.colors.neutral50};
-    margin-top: 0.75rem;
+  width: 100%;
+  display: flex;
+  padding: 1rem 1.125rem;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.75rem;
+  height: 6rem;
+  background: ${(props) => props.theme.colors.neutral50};
+  margin-top: 0.75rem;
 `;
 
 const AnswerText = styled.div<{ isEmpty: boolean }>`

diff --git a/src/components/JD/Experience.tsx b/src/components/JD/Experience.tsx
@@ -5,17 +5,20 @@ import { detailStore } from "../../store/jdStore";
 import { Question } from "../../types/type";
 import bookmarkFillIcon from "../../assets/icons/icon_bookmark_fill.svg";
 import bookmarkBlankIcon from "../../assets/icons/icon_bookmark_blank.svg";
+import dayjs from "dayjs";
 
 interface ExpProps {
   type?: "card" | "section";
-  id: number;
+  id: string | number;
   title: string;
   tags: string[];
   maintag: string;
   subtag: string;
-  period: string;
+  period?: string;
   bookmark?: boolean;
   question?: number;
+  startedAt?: string;
+  endedAt?: string;
   detail?: Question[];
   checkedKeywords?: string[];
   onClick?: () => void;
@@ -29,7 +32,8 @@ const Experience: React.FC<ExpProps> = ({
   maintag,
   subtag,
   bookmark,
-  period,
+  startedAt,
+  endedAt,
   question,
   detail,
   checkedKeywords,
@@ -90,7 +94,10 @@ const Experience: React.FC<ExpProps> = ({
       <SubContainer className={isSection ? "section" : ""}>
         <div>{maintag + ">" + subtag}</div>
         <div>|</div>
-        <div>{period}</div>
+        <div>
+          {dayjs(new Date(startedAt || new Date())).format("YYYY.MM.DD")}~
+          {dayjs(new Date(endedAt || new Date())).format("YYYY.MM.DD")}
+        </div>
       </SubContainer>
       {question ? (
         <AnswerContainer>

diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -34,7 +34,7 @@ const Navbar = () => {
           </MenuItem>
         </MenuList>
       </ItemContainer>
-      <ItemContainer>
+      <ItemContainer className="profile">
         {user?.token ? (
           <>
             <img
@@ -81,7 +81,10 @@ const ItemContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.5rem;
+  gap: 2.5rem;
+  &.profile {
+    gap: 0.5rem;
+  }
 `;
 
 const MenuList = styled.div`