From f153dc6def524ccaa809455e6a04abedd726e7e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 05:12:22 +0900
Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=EA=B2=BD=ED=97=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceDetailPage.tsx       | 33 +++++++++++++++---------
 src/services/Experience/experienceApi.ts |  9 +++++++
 src/types/experience.ts                  |  4 +++
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/pages/ExperienceDetailPage.tsx b/src/pages/ExperienceDetailPage.tsx
index 4e25922..07ba08e 100644
--- a/src/pages/ExperienceDetailPage.tsx
+++ b/src/pages/ExperienceDetailPage.tsx
@@ -8,19 +8,27 @@ import ExpData from "../services/JD/ExpData";
 import { questions } from "../assets/data/questions";
 import Chip from "../components/common/Chip";
 import Textarea from "../components/common/Textarea";
+import { getExperience } from "../services/Experience/experienceApi";
+import { ExperienceDetailType } from "../types/experience";
+import { getCookie } from "../services/cookie";
 
 const ExperienceDetailPage = () => {
+  const user = getCookie("user");
   const navigate = useNavigate();
   const theme = useTheme();
+  const [expData, setExpData] = React.useState<ExperienceDetailType>();
+  const expKeywords = expData?.strongPointIds?.map((item) => item.name) || [];
 
   const { id } = useParams();
 
   React.useEffect(() => {
-    window.scrollTo({
-      top: 0,
-      behavior: "auto",
-    });
-  }, []);
+    if (id) {
+      getExperience(id, user?.token).then((res) => {
+        console.log(res);
+        setExpData(res.data);
+      });
+    }
+  }, [id, user?.token]);
 
   return (
     <MainContainer className="page">
@@ -43,22 +51,23 @@ const ExperienceDetailPage = () => {
       <ContentContainer>
         <Experience
           type="section"
-          id={ExpData[0].id}
-          key={0}
-          title={ExpData[0].title}
-          tags={ExpData[0].tags}
+          id={expData?.id || ExpData[0].id}
+          title={expData?.title || ""}
+          tags={expKeywords}
           maintag={ExpData[0].mainTag}
           subtag={ExpData[0].subTag}
-          period={ExpData[0].period}
+          startedAt={expData?.startedAt}
+          endedAt={expData?.endedAt}
         />
         <hr style={{ width: "100%", color: theme.colors.neutral300 }} />
         <AnswerList>
-          {questions.map((item, index) => (
+          {expData?.contents?.map((item, index) => (
             <AnswerItem>
               <div style={{ display: "flex" }}>
-                <Chip text={item.type} />
+                <Chip text={questions[index].type} />
               </div>
               <Textarea
+                value={item.answer}
                 label={`${index + 1}. ${item.question}`}
                 rows={8}
                 labelStyle={
diff --git a/src/services/Experience/experienceApi.ts b/src/services/Experience/experienceApi.ts
index 77b54cf..f0f8709 100644
--- a/src/services/Experience/experienceApi.ts
+++ b/src/services/Experience/experienceApi.ts
@@ -13,6 +13,15 @@ export const postExperience = async (
   });
 };
 
+// 경험 상세 조회
+export const getExperience = async (expId: string, token: string) => {
+  return await client.get(`/api/experiences/${expId}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
+
 // 경험 수정
 export const patchExperience = async (
   expId: string,
diff --git a/src/types/experience.ts b/src/types/experience.ts
index 889298e..a551277 100644
--- a/src/types/experience.ts
+++ b/src/types/experience.ts
@@ -13,6 +13,10 @@ export interface ExperienceType {
   endedAt: string;
 }
 
+export interface ExperienceDetailType extends ExperienceType {
+  id: string;
+}
+
 export interface KeywordType {
   id: string;
   name: string;

From ddf39777d2f62de484596952c5ddad90c2c9ecd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 05:13:20 +0900
Subject: [PATCH 02/17] =?UTF-8?q?fix:=20Experience=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?prop=20=EB=B3=80=EA=B2=BD=20=EB=A7=88=EC=9D=B4=EA=B7=B8?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JD/ExpContainer.tsx | 110 +++++------
 src/components/JD/Experience.tsx   |  15 +-
 src/pages/JDDetailPage.tsx         | 293 ++++++++++++++---------------
 src/pages/JDEditPage.tsx           | 228 +++++++++++-----------
 src/pages/JDWritePage.tsx          | 228 +++++++++++-----------
 src/store/jdStore.ts               |   2 +-
 6 files changed, 441 insertions(+), 435 deletions(-)

diff --git a/src/components/JD/ExpContainer.tsx b/src/components/JD/ExpContainer.tsx
index 29dc753..e7f56b3 100644
--- 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
index e2ce511..97cd274 100644
--- 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/pages/JDDetailPage.tsx b/src/pages/JDDetailPage.tsx
index ef93ad3..a6dccc6 100644
--- a/src/pages/JDDetailPage.tsx
+++ b/src/pages/JDDetailPage.tsx
@@ -23,7 +23,7 @@ const JDDetailPage: React.FC = () => {
   const [activebutton, setActivebutton] = useState("");
   const jdId = useParams().id;
   const nav = useNavigate();
-  const [detailId, setDetailId] = useRecoilState<number>(detailStore);
+  const [detailId, setDetailId] = useRecoilState<number | string>(detailStore);
   const [jdData, setJdData] = useState<JobDescriptionAPI>({
     enterpriseName: "",
     title: "",
@@ -232,7 +232,7 @@ const StyledDivContainer = styled.div`
   flex-direction: column;
   align-items: center;
   position: relative;
-  background-color: #FBFBFD;
+  background-color: #fbfbfd;
   overflow-x: hidden;
 `;
 
@@ -259,35 +259,35 @@ const TopTitleBar = styled.div`
 `;
 
 const Title = styled.h1`
-    display: flex;
-    flex-direction: row;
-    color:#343A5D;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  color: #343a5d;
+  align-items: center;
 `;
 
 const TopButton = styled.button`
-    display: inline-flex;
-    padding: 0.5rem 2.75rem;
-    align-items: flex-start;
-    gap: 0.625rem;
-    justify-content: center;
-    text-align: center;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 600;
-    align-items: center;
-    border-radius: 0.5rem;
-    border: none;
-    color:var(--white);
-    background: var(--main-500, #7D82FF);
+  display: inline-flex;
+  padding: 0.5rem 2.75rem;
+  align-items: flex-start;
+  gap: 0.625rem;
+  justify-content: center;
+  text-align: center;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  align-items: center;
+  border-radius: 0.5rem;
+  border: none;
+  color: var(--white);
+  background: var(--main-500, #7d82ff);
 `;
 
 const TopButtonText = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 `;
 
 const MainContainer = styled.div`
@@ -296,147 +296,146 @@ const MainContainer = styled.div`
   position: relative;
   justify-content: center;
   overflow: hidden;
-  background-color: #FBFBFD;
+  background-color: #fbfbfd;
 `;
 
 const JobContainer = 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 ScrollDiv = styled.div`
-    overflow-y: auto;
-    width: 100%;
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background: #ccc;
-    }
-    ::-webkit-scrollbar-track {
-    }
+  overflow-y: auto;
+  width: 100%;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: #ccc;
+  }
+  ::-webkit-scrollbar-track {
+  }
 `;
 
 const JobTopBox = styled.div`
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    padding: 1.5rem;
-    padding-bottom: 0rem;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 1.5rem;
+  padding-bottom: 0rem;
 `;
 
 const JobStatusBar = styled.div`
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    padding: 0.75rem 2rem;
-    height: 3rem;
-    background: ${(props) => props.theme.colors.neutral50};
-    border-top-right-radius: 0.9rem;
-    border-top-left-radius: 0.9rem;
-    align-items: center;
-    .job_date {
-        color:  ${(props) => props.theme.colors.neutral500};
-        ${(props) => props.theme.fonts.cap1};
-        margin-left: 1rem;
-    }
-    
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  padding: 0.75rem 2rem;
+  height: 3rem;
+  background: ${(props) => props.theme.colors.neutral50};
+  border-top-right-radius: 0.9rem;
+  border-top-left-radius: 0.9rem;
+  align-items: center;
+  .job_date {
+    color: ${(props) => props.theme.colors.neutral500};
+    ${(props) => props.theme.fonts.cap1};
+    margin-left: 1rem;
+  }
 `;
 
 const JobTopTitleBox = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.75rem;
+  color: var(--neutral-700, #343a5d);
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 600;
+  .job_detail_dday {
     display: flex;
-    width: 100%;
+    height: 1.5rem;
+    min-width: 5rem;
+    flex: 1;
+    padding: 0.25rem 0.5rem;
     justify-content: center;
-    align-items: flex-start;
-    gap: 0.75rem;
-    color: var(--neutral-700, #343A5D);
-    font-size: 1.4rem;
+    align-items: center;
+    gap: 0.625rem;
+    border-radius: 3.125rem;
+    border: 1px solid var(--main-500, #7d82ff);
+    color: var(--main-500, #7d82ff);
+    text-align: center;
+    font-size: 0.875rem;
     font-style: normal;
-    font-weight: 600;
-    .job_detail_dday{
-        display: flex;
-        height: 1.5rem;
-        min-width: 5rem;
-        flex:1;
-        padding: 0.25rem 0.5rem;
-        justify-content: center;
-        align-items: center;
-        gap: 0.625rem;
-        border-radius: 3.125rem;
-        border: 1px solid var(--main-500, #7D82FF);
-        color: var(--main-500, #7D82FF);
-        text-align: center;
-        font-size: 0.875rem;
-        font-style: normal;
-        font-weight: 500;
-        margin-top: 0.25rem;
-    }
-    .job_detail_title{
-        flex: 12;
-        display: flex;
-        text-align: center;
-        align-items: center;
-        padding-top: 0.25rem;
-    }
+    font-weight: 500;
+    margin-top: 0.25rem;
+  }
+  .job_detail_title {
+    flex: 12;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    padding-top: 0.25rem;
+  }
 `;
 
 const JobTopDescription = styled.div`
-    color: var(--neutral-600, #63698D);
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 1.25rem; 
-    padding: 1rem 0;
+  color: var(--neutral-600, #63698d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.25rem;
+  padding: 1rem 0;
 `;
 
 const JobSubBox = styled.div`
-    width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: var(--neutral-500, #a6aac0);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #eaebf3;
+  .period {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    color: var(--neutral-500, #A6AAC0);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 500;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #EAEBF3;
-    .period{
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .link{
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        color: var(--neutral-500, #A6AAC0);
-        ${(props) => props.theme.fonts.link};
-    }
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--neutral-500, #a6aac0);
+    ${(props) => props.theme.fonts.link};
+  }
 `;
 
 const JobBottomBox = styled.div`
-    height: 23rem;
-    color: var(--neutral-700, #343A5D);
-    //overflow-y: scroll;
-    margin: 0rem 0rem 2rem 2rem;
-    div {
-        padding-right: 1rem;
-    }
+  height: 23rem;
+  color: var(--neutral-700, #343a5d);
+  //overflow-y: scroll;
+  margin: 0rem 0rem 2rem 2rem;
+  div {
+    padding-right: 1rem;
+  }
 `;
 
 const CenteredContainer = styled(motion.div)`
-  width: 100%; 
+  width: 100%;
   border-radius: 10px;
   background: transparent;
   padding: 2rem;
@@ -448,8 +447,8 @@ const CenteredContainer = styled(motion.div)`
 const ActiveContainer = styled(motion.div)<{ isActive: boolean }>`
   width: 45%;
   border-radius: 10px;
-  margin: 0 3.5rem; 
-  margin-top : 10rem;
+  margin: 0 3.5rem;
+  margin-top: 10rem;
   background: ${(props) => (props.isActive ? "#FFF" : "#F7F7FB")};
   //background: red;
   box-shadow: 5px 5px 10px 0px rgba(166, 170, 192, 0.09);
@@ -457,7 +456,7 @@ const ActiveContainer = styled(motion.div)<{ isActive: boolean }>`
 `;
 
 const buttonActiveStyle = css`
-  background: #7D82FF; 
+  background: #7d82ff;
 `;
 
 interface ButtonProps {
@@ -473,17 +472,17 @@ const ExperienceButton = styled.button<ButtonProps>`
   flex-shrink: 0;
   border: none;
   border-radius: 0.66019rem 0rem 0rem 0.66019rem;
-  background: var(--neutral-300, #EAEBF3);
+  background: var(--neutral-300, #eaebf3);
   ${({ active }) => active && buttonActiveStyle}
 `;
 
 const ButtonText = styled.div<ButtonProps>`
-    display: flex;
-    width: 1rem;
-    ${(props) => props.theme.fonts.body5};
-    height: 5rem;
-    flex-direction: column;
-    justify-content: center;
-    flex-shrink: 0;
-    color: ${({ active }) => (active ? "#FFFFFF" : "#63698D")};
+  display: flex;
+  width: 1rem;
+  ${(props) => props.theme.fonts.body5};
+  height: 5rem;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${({ active }) => (active ? "#FFFFFF" : "#63698D")};
 `;
diff --git a/src/pages/JDEditPage.tsx b/src/pages/JDEditPage.tsx
index 2ea672b..8f3d828 100644
--- a/src/pages/JDEditPage.tsx
+++ b/src/pages/JDEditPage.tsx
@@ -30,7 +30,7 @@ const JDEditPage: React.FC = () => {
   const [completed, setCompleted] = useState(false); //작성 완료
   const [isAllFilled, setIsAllFilled] = useState(false); // 문항이 빈칸이 없는지 검사
 
-  const [detailId, setDetailId] = useRecoilState<number>(detailStore); //경험의 고유 id(0이 아니여야함)
+  const [detailId, setDetailId] = useRecoilState<number | string>(detailStore); //경험의 고유 id(0이 아니여야함)
   const [isModalOpen, setIsModalOpen] = useState(false); // 문항 삭제 모달
   const [discardModal, setdiscardModal] = useState(false); // 작성내용 버리기 모달
   const [deleteIdx, setDeleteIdx] = useState<number>(-1); //modal 열기전 삭제할 index 저장
@@ -365,7 +365,7 @@ const StyledDivContainer = styled.div`
   flex-direction: column;
   align-items: center;
   position: relative;
-  background-color: #FBFBFD;
+  background-color: #fbfbfd;
   overflow-x: hidden;
 `;
 
@@ -412,7 +412,7 @@ const TopTitleBar = styled.div`
 const Title = styled.h1`
   display: flex;
   flex-direction: row;
-  color:#343A5D;
+  color: #343a5d;
   align-items: center;
 `;
 
@@ -425,68 +425,68 @@ const TopWrapper = styled.div`
 `;
 
 const TextCountWrapper = styled.div`
-    display: flex;
-    justify-content: end;
-    width: 100%;
-    color: ${(props) => props.theme.colors.neutral500};
-    ${(props) => props.theme.fonts.cap3}
+  display: flex;
+  justify-content: end;
+  width: 100%;
+  color: ${(props) => props.theme.colors.neutral500};
+  ${(props) => props.theme.fonts.cap3}
 `;
 
 const SaveButton = styled.button<{ isNotNull: boolean }>`
-    display: inline-flex;
-    padding: 0.625rem 4rem;
-    justify-content: center;
-    align-items: center;
-    color:#FFF;
-    gap: 0.625rem;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    border: 1px solid transparent;
-    border-radius: 0.5rem;
-    background:  ${(props) => props.theme.colors.neutral500};
+  display: inline-flex;
+  padding: 0.625rem 4rem;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  gap: 0.625rem;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  background: ${(props) => props.theme.colors.neutral500};
   ${(props) =>
     props.isNotNull &&
     css`
-        background: ${(props) => props.theme.colors.main500};
+      background: ${(props) => props.theme.colors.main500};
     `}
 `;
 
 const EditButton = styled.button<{ iscanEdit: boolean }>`
-    display: inline-flex;
-    padding: 0.625rem 4rem;
-    justify-content: center;
-    align-items: center;
-    color:#A6AAC0;
-    gap: 0.625rem;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    border-radius: 0.5rem;
-    border: 1px solid ${(props) => props.theme.colors.main500};
-    background: #FFF;
-    ${(props) => props.theme.fonts.button2}
-    color: ${(props) => props.theme.colors.main500};
+  display: inline-flex;
+  padding: 0.625rem 4rem;
+  justify-content: center;
+  align-items: center;
+  color: #a6aac0;
+  gap: 0.625rem;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  border-radius: 0.5rem;
+  border: 1px solid ${(props) => props.theme.colors.main500};
+  background: #fff;
+  ${(props) => props.theme.fonts.button2}
+  color: ${(props) => props.theme.colors.main500};
   ${(props) =>
     props.iscanEdit &&
     css`
-        border: 1px solid var(--neutral-500, #A6AAC0);
-        color: ${(props) => props.theme.colors.neutral500};
+      border: 1px solid var(--neutral-500, #a6aac0);
+      color: ${(props) => props.theme.colors.neutral500};
     `}
 `;
 
 const ToggleWrapper = styled.div`
-    display: inline-flex;
-    flex-direction: row;
-    color: var(--neutral-700, #343A5D);
-    font-family: Pretendard;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.25rem; 
-    letter-spacing: -0.02rem;
-    gap: 0.75rem;
-    align-items: center;
+  display: inline-flex;
+  flex-direction: row;
+  color: var(--neutral-700, #343a5d);
+  font-family: Pretendard;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: -0.02rem;
+  gap: 0.75rem;
+  align-items: center;
 `;
 
 const MainContainer = styled.div`
@@ -495,11 +495,11 @@ const MainContainer = styled.div`
   position: relative;
   justify-content: center;
   overflow: hidden;
-  background-color: #FBFBFD;
+  background-color: #fbfbfd;
 `;
 
 const CenteredContainer = styled(motion.div)`
-    /* width: 100%; 
+  /* width: 100%; 
     border-radius: 10px;
     background: transparent;
     padding: 2rem;
@@ -507,46 +507,46 @@ const CenteredContainer = styled(motion.div)`
     flex-direction: column;
     min-height: 30rem;
     margin: 0.5rem 0.25rem 0.5rem 0.5rem;   */
-    width: 100%; 
-    border-radius: 10px;
-    background: transparent;
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    //min-height: 100rem;
+  width: 100%;
+  border-radius: 10px;
+  background: transparent;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  //min-height: 100rem;
 `;
 
 const ScrollDiv = styled.div`
-    overflow-y: auto;
-    overflow-x: hidden;
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background: #ccc;
-    }
-    ::-webkit-scrollbar-track {
-    }
+  overflow-y: auto;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: #ccc;
+  }
+  ::-webkit-scrollbar-track {
+  }
 `;
 
 const EditContainer = styled.div`
-    width: 100%;
-    align-items: flex-start;
-    min-height: 15rem;
-    padding: 2rem 0rem;
-    gap: 0.625rem;
-    flex-shrink: 0;
-    border-radius: 0.9rem;
-    border: 1px solid var(--neutral-200, #EEEFF7);
-    background: var(--neutral-0, #FFF);
+  width: 100%;
+  align-items: flex-start;
+  min-height: 15rem;
+  padding: 2rem 0rem;
+  gap: 0.625rem;
+  flex-shrink: 0;
+  border-radius: 0.9rem;
+  border: 1px solid var(--neutral-200, #eeeff7);
+  background: var(--neutral-0, #fff);
 `;
 
 const ActiveContainer = styled(motion.div)<{ isActive: boolean }>`
   width: 45%;
   border-radius: 10px;
-  margin: 0 3.5rem; 
-  margin-top : 10rem;
+  margin: 0 3.5rem;
+  margin-top: 10rem;
   background: ${(props) => (props.isActive ? "#FFF" : "#F7F7FB")};
   //background: red;
   box-shadow: 5px 5px 10px 0px rgba(166, 170, 192, 0.09);
@@ -554,7 +554,7 @@ const ActiveContainer = styled(motion.div)<{ isActive: boolean }>`
 `;
 
 const buttonActiveStyle = css`
-  background: #7D82FF; 
+  background: #7d82ff;
 `;
 
 interface ButtonProps {
@@ -570,7 +570,7 @@ const JDButton = styled.button<ButtonProps>`
   flex-shrink: 0;
   border: none;
   border-radius: 0.66019rem 0rem 0rem 0.66019rem;
-  background: var(--neutral-300, #EAEBF3);
+  background: var(--neutral-300, #eaebf3);
   ${({ active }) => active && buttonActiveStyle}
 `;
 
@@ -583,56 +583,56 @@ const ExperienceButton = styled.button<ButtonProps>`
   flex-shrink: 0;
   border: none;
   border-radius: 0.66019rem 0rem 0rem 0.66019rem;
-  background: var(--neutral-300, #EAEBF3);
+  background: var(--neutral-300, #eaebf3);
   ${({ active }) => active && buttonActiveStyle}
 `;
 
 const QuestionsWrapper = styled.div`
-    height: 30rem;
-    color: var(--neutral-700, #343A5D);
-    padding: 0 2rem;
-    .img_box {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    //overflow-y: scroll;
+  height: 30rem;
+  color: var(--neutral-700, #343a5d);
+  padding: 0 2rem;
+  .img_box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  //overflow-y: scroll;
 `;
 
 const AnswersWrapper = styled.div`
-    height: 30rem;
-    color: var(--neutral-700, #343A5D);
-    padding: 0 2rem;
-    //overflow-y: scroll;
+  height: 30rem;
+  color: var(--neutral-700, #343a5d);
+  padding: 0 2rem;
+  //overflow-y: scroll;
 `;
 
 const Answer = styled.div`
-    margin-bottom: 1.75rem;
-    ${(props) => props.theme.fonts.body5};
+  margin-bottom: 1.75rem;
+  ${(props) => props.theme.fonts.body5};
 `;
 
 const AnswerHeader = styled.h3`
-    color: var(--neutral-700, #343A5D);
-    /* subtitle 3 (semibold 16pt) */
-    ${(props) => props.theme.fonts.subtitle3}
-    margin-bottom: 1rem;
+  color: var(--neutral-700, #343a5d);
+  /* subtitle 3 (semibold 16pt) */
+  ${(props) => props.theme.fonts.subtitle3}
+  margin-bottom: 1rem;
 `;
 
 const AnswerContent = styled.p`
-    color: var(--neutral-700, #343A5D);
-    /* body 5 (regular 13pt) */
-    border-top: 1px solid #EAEBF3;
-    padding: 1.25rem;
-    ${(props) => props.theme.fonts.body5};
+  color: var(--neutral-700, #343a5d);
+  /* body 5 (regular 13pt) */
+  border-top: 1px solid #eaebf3;
+  padding: 1.25rem;
+  ${(props) => props.theme.fonts.body5};
 `;
 
 const ButtonText = styled.div<ButtonProps>`
-    display: flex;
-    width: 1rem;
-    ${(props) => props.theme.fonts.body5};
-    height: 5rem;
-    flex-direction: column;
-    justify-content: center;
-    flex-shrink: 0;
-    color: ${({ active }) => (active ? "#FFFFFF" : "#63698D")};
+  display: flex;
+  width: 1rem;
+  ${(props) => props.theme.fonts.body5};
+  height: 5rem;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${({ active }) => (active ? "#FFFFFF" : "#63698D")};
 `;
diff --git a/src/pages/JDWritePage.tsx b/src/pages/JDWritePage.tsx
index ba171d4..9f1b21c 100644
--- a/src/pages/JDWritePage.tsx
+++ b/src/pages/JDWritePage.tsx
@@ -30,7 +30,7 @@ const JDWritePage: React.FC = () => {
   const [completed, setCompleted] = useState(false); //작성 완료
   const [isAllFilled, setIsAllFilled] = useState(false); // 문항이 빈칸이 없는지 검사
 
-  const [detailId, setDetailId] = useRecoilState<number>(detailStore); //경험의 고유 id(0이 아니여야함)
+  const [detailId, setDetailId] = useRecoilState<number | string>(detailStore); //경험의 고유 id(0이 아니여야함)
   const [isModalOpen, setIsModalOpen] = useState(false); // 문항 삭제 모달
   const [discardModal, setdiscardModal] = useState(false); // 작성내용 버리기 모달
   const [deleteIdx, setDeleteIdx] = useState<number>(-1); //modal 열기전 삭제할 index 저장
@@ -346,7 +346,7 @@ const StyledDivContainer = styled.div`
   flex-direction: column;
   align-items: center;
   position: relative;
-  background-color: #FBFBFD;
+  background-color: #fbfbfd;
   overflow-x: hidden;
 `;
 
@@ -393,7 +393,7 @@ const TopTitleBar = styled.div`
 const Title = styled.h1`
   display: flex;
   flex-direction: row;
-  color:#343A5D;
+  color: #343a5d;
   align-items: center;
 `;
 
@@ -406,68 +406,68 @@ const TopWrapper = styled.div`
 `;
 
 const TextCountWrapper = styled.div`
-    display: flex;
-    justify-content: end;
-    width: 100%;
-    color: ${(props) => props.theme.colors.neutral500};
-    ${(props) => props.theme.fonts.cap3}
+  display: flex;
+  justify-content: end;
+  width: 100%;
+  color: ${(props) => props.theme.colors.neutral500};
+  ${(props) => props.theme.fonts.cap3}
 `;
 
 const SaveButton = styled.button<{ isNotNull: boolean }>`
-    display: inline-flex;
-    padding: 0.625rem 4rem;
-    justify-content: center;
-    align-items: center;
-    color:#FFF;
-    gap: 0.625rem;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    border: 1px solid transparent;
-    border-radius: 0.5rem;
-    background:  ${(props) => props.theme.colors.neutral500};
+  display: inline-flex;
+  padding: 0.625rem 4rem;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  gap: 0.625rem;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  background: ${(props) => props.theme.colors.neutral500};
   ${(props) =>
     props.isNotNull &&
     css`
-        background: ${(props) => props.theme.colors.main500};
+      background: ${(props) => props.theme.colors.main500};
     `}
 `;
 
 const EditButton = styled.button<{ iscanEdit: boolean }>`
-    display: inline-flex;
-    padding: 0.625rem 4rem;
-    justify-content: center;
-    align-items: center;
-    color:#A6AAC0;
-    gap: 0.625rem;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    border-radius: 0.5rem;
-    border: 1px solid ${(props) => props.theme.colors.main500};
-    background: #FFF;
-    ${(props) => props.theme.fonts.button2}
-    color: ${(props) => props.theme.colors.main500};
+  display: inline-flex;
+  padding: 0.625rem 4rem;
+  justify-content: center;
+  align-items: center;
+  color: #a6aac0;
+  gap: 0.625rem;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  border-radius: 0.5rem;
+  border: 1px solid ${(props) => props.theme.colors.main500};
+  background: #fff;
+  ${(props) => props.theme.fonts.button2}
+  color: ${(props) => props.theme.colors.main500};
   ${(props) =>
     props.iscanEdit &&
     css`
-        border: 1px solid var(--neutral-500, #A6AAC0);
-        color: ${(props) => props.theme.colors.neutral500};
+      border: 1px solid var(--neutral-500, #a6aac0);
+      color: ${(props) => props.theme.colors.neutral500};
     `}
 `;
 
 const ToggleWrapper = styled.div`
-    display: inline-flex;
-    flex-direction: row;
-    color: var(--neutral-700, #343A5D);
-    font-family: Pretendard;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.25rem; 
-    letter-spacing: -0.02rem;
-    gap: 0.75rem;
-    align-items: center;
+  display: inline-flex;
+  flex-direction: row;
+  color: var(--neutral-700, #343a5d);
+  font-family: Pretendard;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: -0.02rem;
+  gap: 0.75rem;
+  align-items: center;
 `;
 
 const MainContainer = styled.div`
@@ -476,11 +476,11 @@ const MainContainer = styled.div`
   position: relative;
   justify-content: center;
   overflow: hidden;
-  background-color: #FBFBFD;
+  background-color: #fbfbfd;
 `;
 
 const CenteredContainer = styled(motion.div)`
-    /* width: 100%; 
+  /* width: 100%; 
     border-radius: 10px;
     background: transparent;
     padding: 2rem;
@@ -488,46 +488,46 @@ const CenteredContainer = styled(motion.div)`
     flex-direction: column;
     min-height: 30rem;
     margin: 0.5rem 0.25rem 0.5rem 0.5rem;   */
-    width: 100%; 
-    border-radius: 10px;
-    background: transparent;
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    //min-height: 100rem;
+  width: 100%;
+  border-radius: 10px;
+  background: transparent;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  //min-height: 100rem;
 `;
 
 const ScrollDiv = styled.div`
-    overflow-y: auto;
-    overflow-x: hidden;
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background: #ccc;
-    }
-    ::-webkit-scrollbar-track {
-    }
+  overflow-y: auto;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: #ccc;
+  }
+  ::-webkit-scrollbar-track {
+  }
 `;
 
 const EditContainer = styled.div`
-    width: 100%;
-    align-items: flex-start;
-    min-height: 15rem;
-    padding: 2rem 0rem;
-    gap: 0.625rem;
-    flex-shrink: 0;
-    border-radius: 0.9rem;
-    border: 1px solid var(--neutral-200, #EEEFF7);
-    background: var(--neutral-0, #FFF);
+  width: 100%;
+  align-items: flex-start;
+  min-height: 15rem;
+  padding: 2rem 0rem;
+  gap: 0.625rem;
+  flex-shrink: 0;
+  border-radius: 0.9rem;
+  border: 1px solid var(--neutral-200, #eeeff7);
+  background: var(--neutral-0, #fff);
 `;
 
 const ActiveContainer = styled(motion.div)<{ isActive: boolean }>`
   width: 45%;
   border-radius: 10px;
-  margin: 0 3.5rem; 
-  margin-top : 10rem;
+  margin: 0 3.5rem;
+  margin-top: 10rem;
   background: ${(props) => (props.isActive ? "#FFF" : "#F7F7FB")};
   //background: red;
   box-shadow: 5px 5px 10px 0px rgba(166, 170, 192, 0.09);
@@ -535,7 +535,7 @@ const ActiveContainer = styled(motion.div)<{ isActive: boolean }>`
 `;
 
 const buttonActiveStyle = css`
-  background: #7D82FF; 
+  background: #7d82ff;
 `;
 
 interface ButtonProps {
@@ -551,7 +551,7 @@ const JDButton = styled.button<ButtonProps>`
   flex-shrink: 0;
   border: none;
   border-radius: 0.66019rem 0rem 0rem 0.66019rem;
-  background: var(--neutral-300, #EAEBF3);
+  background: var(--neutral-300, #eaebf3);
   ${({ active }) => active && buttonActiveStyle}
 `;
 
@@ -564,56 +564,56 @@ const ExperienceButton = styled.button<ButtonProps>`
   flex-shrink: 0;
   border: none;
   border-radius: 0.66019rem 0rem 0rem 0.66019rem;
-  background: var(--neutral-300, #EAEBF3);
+  background: var(--neutral-300, #eaebf3);
   ${({ active }) => active && buttonActiveStyle}
 `;
 
 const QuestionsWrapper = styled.div`
-    height: 30rem;
-    color: var(--neutral-700, #343A5D);
-    padding: 0 2rem;
-    .img_box {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    //overflow-y: scroll;
+  height: 30rem;
+  color: var(--neutral-700, #343a5d);
+  padding: 0 2rem;
+  .img_box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  //overflow-y: scroll;
 `;
 
 const AnswersWrapper = styled.div`
-    height: 30rem;
-    color: var(--neutral-700, #343A5D);
-    padding: 0 2rem;
-    //overflow-y: scroll;
+  height: 30rem;
+  color: var(--neutral-700, #343a5d);
+  padding: 0 2rem;
+  //overflow-y: scroll;
 `;
 
 const Answer = styled.div`
-    margin-bottom: 1.75rem;
-    ${(props) => props.theme.fonts.body5};
+  margin-bottom: 1.75rem;
+  ${(props) => props.theme.fonts.body5};
 `;
 
 const AnswerHeader = styled.h3`
-    color: var(--neutral-700, #343A5D);
-    /* subtitle 3 (semibold 16pt) */
-    ${(props) => props.theme.fonts.subtitle3}
-    margin-bottom: 1rem;
+  color: var(--neutral-700, #343a5d);
+  /* subtitle 3 (semibold 16pt) */
+  ${(props) => props.theme.fonts.subtitle3}
+  margin-bottom: 1rem;
 `;
 
 const AnswerContent = styled.p`
-    color: var(--neutral-700, #343A5D);
-    /* body 5 (regular 13pt) */
-    border-top: 1px solid #EAEBF3;
-    padding: 1.25rem;
-    ${(props) => props.theme.fonts.body5};
+  color: var(--neutral-700, #343a5d);
+  /* body 5 (regular 13pt) */
+  border-top: 1px solid #eaebf3;
+  padding: 1.25rem;
+  ${(props) => props.theme.fonts.body5};
 `;
 
 const ButtonText = styled.div<ButtonProps>`
-    display: flex;
-    width: 1rem;
-    ${(props) => props.theme.fonts.body5};
-    height: 5rem;
-    flex-direction: column;
-    justify-content: center;
-    flex-shrink: 0;
-    color: ${({ active }) => (active ? "#FFFFFF" : "#63698D")};
+  display: flex;
+  width: 1rem;
+  ${(props) => props.theme.fonts.body5};
+  height: 5rem;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${({ active }) => (active ? "#FFFFFF" : "#63698D")};
 `;
diff --git a/src/store/jdStore.ts b/src/store/jdStore.ts
index 34c6159..5f5eac4 100644
--- a/src/store/jdStore.ts
+++ b/src/store/jdStore.ts
@@ -1,6 +1,6 @@
 import { atom } from "recoil";
 
-export const detailStore = atom<number>({
+export const detailStore = atom<string | number>({
   key: "detailId",
   default: 0,
 });

From e7899ceb896830961903ec78b301ef02459a7553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 06:20:09 +0900
Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EA=B2=BD=ED=97=98=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceDetailPage.tsx       | 177 +++++++++++++++--------
 src/services/Experience/experienceApi.ts |  11 +-
 2 files changed, 127 insertions(+), 61 deletions(-)

diff --git a/src/pages/ExperienceDetailPage.tsx b/src/pages/ExperienceDetailPage.tsx
index 07ba08e..c613af9 100644
--- a/src/pages/ExperienceDetailPage.tsx
+++ b/src/pages/ExperienceDetailPage.tsx
@@ -8,83 +8,126 @@ import ExpData from "../services/JD/ExpData";
 import { questions } from "../assets/data/questions";
 import Chip from "../components/common/Chip";
 import Textarea from "../components/common/Textarea";
-import { getExperience } from "../services/Experience/experienceApi";
+import {
+  deleteExperience,
+  getExperience,
+} from "../services/Experience/experienceApi";
 import { ExperienceDetailType } from "../types/experience";
 import { getCookie } from "../services/cookie";
+import Modal from "../components/common/Modal";
+import warningImg from "../assets/images/warningIcon.png";
 
 const ExperienceDetailPage = () => {
   const user = getCookie("user");
+  const { id: expId } = useParams();
   const navigate = useNavigate();
   const theme = useTheme();
   const [expData, setExpData] = React.useState<ExperienceDetailType>();
   const expKeywords = expData?.strongPointIds?.map((item) => item.name) || [];
 
-  const { id } = useParams();
+  // 삭제 모달
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  // 모달 관리
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleDelete = () => {
+    if (expId) {
+      deleteExperience(expId, user?.token).then((res) => {
+        console.log(res);
+        navigate(`/experience`);
+      });
+    }
+  };
 
   React.useEffect(() => {
-    if (id) {
-      getExperience(id, user?.token).then((res) => {
+    if (expId) {
+      getExperience(expId, user?.token).then((res) => {
         console.log(res);
         setExpData(res.data);
       });
     }
-  }, [id, user?.token]);
+  }, [expId, user?.token]);
 
   return (
-    <MainContainer className="page">
-      <TopContainer>
-        <div className="title">
-          <button
-            onClick={() => navigate(-1)}
-            style={{
-              padding: 0,
-              background: "none",
-              border: "none",
-            }}
-          >
-            <ArrowLeft />
-          </button>
-          나의 경험 상세보기
-        </div>
-        <CustomButton>수정하기</CustomButton>
-      </TopContainer>
-      <ContentContainer>
-        <Experience
-          type="section"
-          id={expData?.id || ExpData[0].id}
-          title={expData?.title || ""}
-          tags={expKeywords}
-          maintag={ExpData[0].mainTag}
-          subtag={ExpData[0].subTag}
-          startedAt={expData?.startedAt}
-          endedAt={expData?.endedAt}
-        />
-        <hr style={{ width: "100%", color: theme.colors.neutral300 }} />
-        <AnswerList>
-          {expData?.contents?.map((item, index) => (
-            <AnswerItem>
-              <div style={{ display: "flex" }}>
-                <Chip text={questions[index].type} />
-              </div>
-              <Textarea
-                value={item.answer}
-                label={`${index + 1}. ${item.question}`}
-                rows={8}
-                labelStyle={
-                  theme.fonts.title4 + `color: ${theme.colors.neutral700}`
-                }
-                style={{
-                  border: "none",
-                  borderRadius: "12px",
-                  background: `${theme.colors.neutral50}`,
-                  padding: "24px 30px",
-                }}
-              />
-            </AnswerItem>
-          ))}
-        </AnswerList>
-      </ContentContainer>
-    </MainContainer>
+    <>
+      <MainContainer className="page">
+        <TopContainer>
+          <div className="title">
+            <button
+              onClick={() => navigate(-1)}
+              style={{
+                padding: 0,
+                background: "none",
+                border: "none",
+              }}
+            >
+              <ArrowLeft />
+            </button>
+            나의 경험 상세보기
+          </div>
+          <div className="button-list">
+            <DeleteButton onClick={openModal}>삭제하기</DeleteButton>
+            <EditButton onClick={() => navigate("edit")}>수정하기</EditButton>
+          </div>
+        </TopContainer>
+        <ContentContainer>
+          <Experience
+            type="section"
+            id={expData?.id || ExpData[0].id}
+            title={expData?.title || ""}
+            tags={expKeywords}
+            maintag={ExpData[0].mainTag}
+            subtag={ExpData[0].subTag}
+            startedAt={expData?.startedAt}
+            endedAt={expData?.endedAt}
+          />
+          <hr style={{ width: "100%", color: theme.colors.neutral300 }} />
+          <AnswerList>
+            {expData?.contents?.map((item, index) => (
+              <AnswerItem>
+                <div style={{ display: "flex" }}>
+                  <Chip text={questions[index].type} />
+                </div>
+                <Textarea
+                  value={item.answer}
+                  label={`${index + 1}. ${item.question}`}
+                  rows={8}
+                  labelStyle={
+                    theme.fonts.title4 + `color: ${theme.colors.neutral700}`
+                  }
+                  style={{
+                    border: "none",
+                    borderRadius: "12px",
+                    background: `${theme.colors.neutral50}`,
+                    padding: "24px 30px",
+                  }}
+                />
+              </AnswerItem>
+            ))}
+          </AnswerList>
+        </ContentContainer>
+      </MainContainer>
+      <Modal
+        image={<img src={warningImg} alt="warning" />}
+        title={"이 경험을 삭제하시겠어요?"}
+        description={
+          <>
+            삭제한 경험은 복구할 수 없어요. <br />
+            신중히 생각해주세요.
+          </>
+        }
+        buttons={["취소", "네 삭제할게요."]}
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        onConfirm={handleDelete}
+      />
+    </>
   );
 };
 
@@ -110,14 +153,28 @@ const TopContainer = styled.div`
     ${(props) => props.theme.fonts.title1};
     color: ${(props) => props.theme.colors.neutral700};
   }
+  .button-list {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+  }
 `;
 
-const CustomButton = styled(MainButton)`
+const EditButton = styled(MainButton)`
   padding: 10px 64px;
   border-radius: 8px;
   ${(props) => props.theme.fonts.button2};
 `;
 
+const DeleteButton = styled(MainButton)`
+  padding: 10px 32px;
+  border-radius: 8px;
+  border: 1px solid ${(props) => props.theme.colors.main500};
+  background: ${(props) => props.theme.colors.neutral0};
+  color: ${(props) => props.theme.colors.main500};
+  ${(props) => props.theme.fonts.button2};
+`;
+
 const ContentContainer = styled.div`
   width: 100%;
   padding: 80px;
diff --git a/src/services/Experience/experienceApi.ts b/src/services/Experience/experienceApi.ts
index f0f8709..3d76f89 100644
--- a/src/services/Experience/experienceApi.ts
+++ b/src/services/Experience/experienceApi.ts
@@ -28,7 +28,16 @@ export const patchExperience = async (
   expData: ExperienceType,
   token: string
 ) => {
-  return await client.patch(`/api/experiences/${expId}}`, expData, {
+  return await client.patch(`/api/experiences/${expId}`, expData, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
+
+// 경험 삭제
+export const deleteExperience = async (expId: string, token: string) => {
+  return await client.delete(`/api/experiences/${expId}`, {
     headers: {
       Authorization: `Bearer ${token}`,
     },

From 6cffb5efa7168421db0281732f9eb6ec3ff73197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 07:02:13 +0900
Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=EA=B2=BD=ED=97=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                      |   8 +-
 src/pages/ExperienceEditPage.tsx | 969 +++++++++++++++++++++++++++++++
 2 files changed, 976 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/ExperienceEditPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 274ae68..1fbfa92 100644
--- 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 JDEditPage from "./pages/JDEditPage";
 import JDDetailPage from "./pages/JDDetailPage";
@@ -17,6 +16,7 @@ import ProfileEditPage from "./pages/ProfileEditPage";
 import PrivateRoute from "./services/router/PrivateRoute";
 import InfoPage from "./pages/InfoPage";
 import JDWritePage from "./pages/JDWritePage";
+import ExperienceEditPage from "./pages/ExperienceEditPage";
 
 const App: React.FC = () => {
   return (
@@ -51,6 +51,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/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
new file mode 100644
index 0000000..2a9dde9
--- /dev/null
+++ b/src/pages/ExperienceEditPage.tsx
@@ -0,0 +1,969 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import MainButton from "../components/common/MainButton";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Popper,
+} from "@mui/material";
+import { ArrowDown, ArrowLeft, Plus2, Search } from "../assets";
+import Textarea from "../components/common/Textarea";
+import { questions } from "../assets/data/questions";
+import { useNavigate, useParams } from "react-router-dom";
+import Chip from "../components/common/Chip";
+import OneDatePick from "../components/common/DatePicker";
+import Input from "../components/common/Input";
+import Checkbox from "../components/common/Checkbox";
+import { basicKeywords } from "../assets/data/keywords";
+import PopperPagination from "../components/Experience/PopperPagination";
+import Modal from "../components/common/Modal";
+import airplaneImg from "../assets/images/airplane.png";
+import Tag from "../components/common/Tag";
+import RadioGroup from "../components/common/RadioGroup";
+import { myKeywords } from "../services/Experience/myKeywords";
+import {
+  getExperience,
+  patchExperience,
+} from "../services/Experience/experienceApi";
+import {
+  ExperienceDetailType,
+  ExperienceType,
+  KeywordType,
+  TagType,
+} from "../types/experience";
+import { getKeywords, postKeyword } from "../services/Experience/keywordApi";
+import { getCookie } from "../services/cookie";
+import {
+  getPrimeTags,
+  getSubTags,
+  postPrimeTag,
+  postSubTag,
+} from "../services/Experience/tagApi";
+
+type TabType = "basic" | "my";
+type TagPopperType = "prime" | "sub" | null;
+
+const ExperienceEditPage = () => {
+  const user = getCookie("user");
+  const { id: expId } = useParams();
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const [expData, setExpData] = React.useState<ExperienceType>({
+    title: "",
+    parentTagId: "",
+    childTagId: "",
+    strongPointIds: [],
+    contents: questions.map((item) => ({
+      question: item.question,
+      answer: "",
+    })),
+    startedAt: new Date().toISOString(),
+    endedAt: new Date().toISOString(),
+  });
+  const [primeTagItem, setPrimeTagItem] = React.useState<TagType>({
+    id: "",
+    name: "",
+  });
+  const [subTagItem, setSubTagItem] = React.useState<TagType>({
+    id: "",
+    name: "",
+  });
+  // 저장 모달
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const [popperInfo, setPopperInfo] = React.useState<TagPopperType>(null);
+
+  const [keywordTabOption, setKeywordTabOption] =
+    React.useState<TabType>("basic");
+  const [newTag, setNewTag] = React.useState("");
+  const [primeTagList, setPrimeTagList] = React.useState<TagType[]>([]);
+  const [subTagList, setSubTagList] = React.useState<TagType[]>([]);
+  const [checkedKeywords, setCheckedKeywords] = React.useState<KeywordType[]>(
+    []
+  );
+  const [newKeyword, setNewKeyword] = React.useState("");
+  const [myKeywordList, setMyKeywordList] = React.useState<KeywordType[]>([]);
+  // 키워드 아코디언 관리
+  const [expanded, setExpanded] = React.useState(false);
+  const [resultKeywords, setResultKeywords] = React.useState<KeywordType[]>([]);
+
+  // 상위 태그 페이지네이션
+  const tagsPerPage = 9;
+  const [currentPrimeTagPage, setCurrentPrimeTagPage] = React.useState(1);
+  const firstPrimeTagIndex = (currentPrimeTagPage - 1) * tagsPerPage;
+  const lastPrimeTagIndex = firstPrimeTagIndex + tagsPerPage;
+  const currentPrimeTags = primeTagList.slice(
+    firstPrimeTagIndex,
+    lastPrimeTagIndex
+  );
+
+  // 하위 태그 페이지네이션
+  const [currentSubTagPage, setCurrentSubTagPage] = React.useState(1);
+  const firstSubTagIndex = (currentSubTagPage - 1) * tagsPerPage;
+  const lastSubTagIndex = firstSubTagIndex + tagsPerPage;
+  const currentSubTags = subTagList.slice(firstSubTagIndex, lastSubTagIndex);
+
+  // 기본 키워드 선택 페이지네이션
+  const keywordsPerPage = 12;
+  const [currentBasicKeywordPage, setCurrentBasicKeywordPage] =
+    React.useState(1);
+  const firstBasicKeywordIndex =
+    (currentBasicKeywordPage - 1) * keywordsPerPage;
+  const lastBasicKeywordIndex = firstBasicKeywordIndex + keywordsPerPage;
+  const currentBasicKeywords = basicKeywords.slice(
+    firstBasicKeywordIndex,
+    lastBasicKeywordIndex
+  );
+  // My 키워드 선택 페이지네이션
+  const [currentMyKeywordPage, setCurrentMyKeywordPage] = React.useState(1);
+  const firstMyKeywordIndex = (currentMyKeywordPage - 1) * keywordsPerPage;
+  const lastMyKeywordIndex = firstMyKeywordIndex + keywordsPerPage;
+  const currentMyKeywords = myKeywordList.slice(
+    firstMyKeywordIndex,
+    lastMyKeywordIndex
+  );
+
+  const handleSaveExperience = async () => {
+    let experienceData = { ...expData };
+    // 상위 태그 생성 후 하위 태그 생성한 경우
+    if (primeTagItem.id === primeTagItem.name) {
+      const primeTagRes = await postPrimeTag(primeTagItem.name, user?.token);
+      const primeTagId = primeTagRes.data.id;
+
+      const subTagRes = await postSubTag(
+        primeTagId,
+        subTagItem.name,
+        user?.token
+      );
+      const subTagId = subTagRes.data.id;
+
+      experienceData = {
+        ...expData,
+        parentTagId: primeTagId,
+        childTagId: subTagId,
+      };
+    }
+    // 하위 태그만 생성한 경우
+    else if (subTagItem.id === subTagItem.name) {
+      const subTagRes = await postSubTag(
+        primeTagItem.id,
+        subTagItem.name,
+        user?.token
+      );
+      const subTagId = subTagRes.data.id;
+      experienceData = {
+        ...expData,
+        childTagId: subTagId,
+      };
+    }
+    // 새로운 역량 키워드 있을 경우
+    const newKeywordsNames = checkedKeywords
+      .filter((item) => item.id === item.name)
+      .map((item) => ({ name: item.name }));
+    if (newKeywordsNames.length !== 0) {
+      const originStrongPointIds = checkedKeywords
+        .filter((item) => item.id !== item.name)
+        .map((item) => item.id);
+
+      const newStrongPointsRes = await postKeyword(
+        newKeywordsNames,
+        user?.token
+      );
+      const newStrongPointIds = newStrongPointsRes.data.map(
+        (item: KeywordType) => item.id
+      );
+      const totalStrongPointIds = [
+        ...originStrongPointIds,
+        ...newStrongPointIds,
+      ];
+      experienceData = {
+        ...expData,
+        strongPointIds: totalStrongPointIds,
+      };
+    }
+    // 질문 수정
+    if (expId) {
+      patchExperience(expId, experienceData, user?.token)
+        .then((res) => {
+          openModal();
+        })
+        .catch((err) => console.log(err));
+    }
+  };
+
+  // 질문 답변 핸들러
+  const handleAnswerChange = (index: number, value: string) => {
+    const newContents = [...expData.contents];
+    newContents[index] = { ...newContents[index], answer: value };
+    setExpData({ ...expData, contents: newContents });
+  };
+
+  // 상위 태그 라디오 버튼 클릭 함수
+  const handlePrimeRadioChange = (item: TagType) => {
+    // 기존 상위 태그 선택한 경우
+    if (item.id !== item.name) {
+      setPrimeTagItem(item);
+      setExpData({ ...expData, parentTagId: item.id });
+      getSubTags(item.id, user?.token).then((res) => {
+        setSubTagList(res.data.tags);
+      });
+    }
+    // 새로 생성한 상위 태그 선택한 경우
+    else {
+      setPrimeTagItem(item);
+      setExpData({ ...expData, parentTagId: "" });
+      setSubTagList([]);
+    }
+    setPopperInfo(null);
+  };
+
+  // 하위 태그 라디오 버튼 클릭 함수
+  const handleSubRadioChange = (item: TagType) => {
+    // 기존 하위 태그 선택한 경우
+    if (item.id !== item.name) {
+      setSubTagItem(item);
+      setExpData({ ...expData, childTagId: item.id });
+    }
+    // 새로 생성한 하위 태그 선택한 경우
+    else {
+      setSubTagItem(item);
+      setExpData({ ...expData, childTagId: "" });
+    }
+    setPopperInfo(null);
+  };
+
+  // 태그 생성 및 검색
+  const handleTagSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      if (popperInfo === "prime") {
+        const primeTagNames = primeTagList.map((item) => item.name);
+        if (primeTagNames.includes(newTag)) {
+          const tagIndex = primeTagNames.indexOf(newTag);
+          const primeTagPage =
+            Math.floor((tagIndex + 1) / (tagsPerPage + 1)) + 1;
+          setCurrentPrimeTagPage(primeTagPage);
+        } else {
+          setPrimeTagList([...primeTagList, { id: newTag, name: newTag }]);
+          const lastPrimePage =
+            Math.floor((primeTagList.length + 1) / (tagsPerPage + 1)) + 1;
+          setCurrentPrimeTagPage(lastPrimePage);
+        }
+      }
+      if (popperInfo === "sub") {
+        const subTagNames = subTagList.map((item) => item.name);
+        if (subTagNames.includes(newTag)) {
+          const tagIndex = subTagNames.indexOf(newTag);
+          const subTagPage = Math.floor((tagIndex + 1) / (tagsPerPage + 1)) + 1;
+          setCurrentSubTagPage(subTagPage);
+        } else {
+          setSubTagList([...subTagList, { id: newTag, name: newTag }]);
+          const lastSubPage =
+            Math.floor((subTagList.length + 1) / tagsPerPage) + 1;
+          setCurrentSubTagPage(lastSubPage);
+        }
+      }
+      setNewTag("");
+    }
+  };
+
+  // 키워드 체크박스 체크 여부
+  const isKeywordChecked = (item: KeywordType) => {
+    return checkedKeywords.some(
+      (keyword) => keyword.id === item.id && keyword.name === item.name
+    );
+  };
+
+  // 키워드 체크박스 핸들러
+  const handleKeywordChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    type: TabType
+  ) => {
+    if (e.target) {
+      if (e.target.checked) {
+        const keywordId = e.target.value;
+        const selectedKeyword = (
+          type === "basic" ? basicKeywords : myKeywordList
+        ).find((item) => item.id === keywordId);
+        setCheckedKeywords([
+          ...checkedKeywords,
+          { id: keywordId, name: selectedKeyword?.name || "" },
+        ]);
+      } else {
+        setCheckedKeywords(
+          checkedKeywords.filter((item) => item.id !== e.target.value)
+        );
+      }
+    }
+  };
+
+  // 키워드 생성 로직 (1. my에 이미 있는 키워드, 2. basic에 이미 있는 키워드, 3. 새로운 키워드)
+  const handleMyKeywords = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      const myKeywordNames = myKeywordList.map((item) => item.name);
+      const basicKeywordNames = basicKeywords.map((item) => item.name);
+      if (myKeywordNames.includes(newKeyword)) {
+        const keywordIndex = myKeywordNames.indexOf(newKeyword);
+        const keywordPage =
+          Math.floor((keywordIndex + 1) / (keywordsPerPage + 1)) + 1;
+        setCurrentMyKeywordPage(keywordPage);
+      } else if (basicKeywordNames.includes(newKeyword)) {
+        const keywordIndex = basicKeywordNames.indexOf(newKeyword);
+        const keywordPage =
+          Math.floor((keywordIndex + 1) / (keywordsPerPage + 1)) + 1;
+        setKeywordTabOption("basic");
+        setCurrentBasicKeywordPage(keywordPage);
+      } else {
+        setMyKeywordList([
+          ...myKeywordList,
+          { id: newKeyword, name: newKeyword },
+        ]);
+        const lastKeywordPage =
+          Math.floor((myKeywordList.length + 1) / (keywordsPerPage + 1)) + 1;
+        setCurrentMyKeywordPage(lastKeywordPage);
+      }
+      setNewKeyword("");
+    }
+  };
+
+  // 키워드 삭제
+  const handleDeleteTag = (item: string) => {
+    setCheckedKeywords(checkedKeywords.filter((choice) => choice.id !== item));
+  };
+
+  // 모달 관리
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleChange = () => {
+    if (expanded) {
+      setResultKeywords([...checkedKeywords]);
+    }
+    setExpanded(!expanded);
+  };
+
+  // 경험 분류 클릭 함수
+  const handleTagPopper = (event: React.MouseEvent<HTMLElement>) => {
+    if (popperInfo === event.currentTarget.id) {
+      setPopperInfo(null);
+    } else {
+      setAnchorEl(event.currentTarget);
+      setPopperInfo(event.currentTarget.id as TagPopperType);
+    }
+  };
+
+  //
+  //
+  //
+  React.useEffect(() => {
+    // 경험 데이터 조회
+    if (expId) {
+      getExperience(expId, user?.token).then((res) => {
+        console.log(res);
+        // 상위태그, 하위태그 객체 형태로 저장
+        // 역량 키워드 => 객체 리스트로 저장
+        const { id, strongPoints, ...rest } = res.data;
+        setExpData({ ...rest });
+        setCheckedKeywords(strongPoints);
+      });
+    }
+    // 상위 태그 조회
+    getPrimeTags(user?.token)
+      .then((res) => {
+        setPrimeTagList(res.data.tags);
+      })
+      .catch((err) => console.log(err));
+
+    // My 역량 키워드 조회
+    getKeywords(user?.token)
+      .then((res) => setMyKeywordList(res.data.strongPoints))
+      .catch((err) => console.log(err));
+  }, [user?.token]);
+
+  /**
+   * 경험 기본 정보
+   */
+  const renderExperienceBasicInfo = () => {
+    return (
+      <SectionContainer>
+        <SectionTitle>경험 기본 정보</SectionTitle>
+        <BasicFormContainer>
+          <div className="top">
+            <div className="form-item">
+              <div className="label">경험 기간</div>
+              <div className="input">
+                <OneDatePick
+                  date={new Date(expData.startedAt)}
+                  setDate={(date: Date) =>
+                    setExpData({ ...expData, startedAt: date.toISOString() })
+                  }
+                  style={customDatePickerCss}
+                />
+                &nbsp;-&nbsp;
+                <OneDatePick
+                  date={new Date(expData.endedAt)}
+                  setDate={(date: Date) =>
+                    setExpData({ ...expData, endedAt: date.toISOString() })
+                  }
+                  style={customDatePickerCss}
+                />
+              </div>
+            </div>
+            <div className="form-item">
+              <div className="label">경험 분류</div>
+              <div className="input">
+                <Input
+                  readOnly
+                  id="prime"
+                  value={primeTagItem.name}
+                  style={customInputCss}
+                  onClick={handleTagPopper}
+                  placeholder="상위 경험 분류"
+                />
+                &nbsp;{">"}&nbsp;
+                <Input
+                  readOnly
+                  id="sub"
+                  value={subTagItem.name}
+                  style={customInputCss}
+                  onClick={handleTagPopper}
+                  placeholder="하위 경험 분류"
+                />
+                {popperInfo && (
+                  <Popper
+                    open={open}
+                    anchorEl={anchorEl}
+                    sx={{ paddingTop: "8px" }}
+                  >
+                    <TagPopperBox>
+                      <TagSearchBox>
+                        <input
+                          value={newTag}
+                          onChange={(e) => setNewTag(e.target.value)}
+                          onKeyDown={handleTagSearch}
+                        />
+                        <Search />
+                      </TagSearchBox>
+                      {popperInfo === "prime" ? (
+                        <>
+                          <RadioGroup
+                            value={primeTagItem.id}
+                            name="prime-tag"
+                            options={currentPrimeTags}
+                            onChange={handlePrimeRadioChange}
+                          />
+                          <div className="pagination">
+                            <PopperPagination
+                              postsNum={primeTagList.length}
+                              postsPerPage={tagsPerPage}
+                              setCurrentPage={setCurrentPrimeTagPage}
+                              currentPage={currentPrimeTagPage}
+                            />
+                          </div>
+                        </>
+                      ) : (
+                        <>
+                          <RadioGroup
+                            value={subTagItem.id}
+                            name="sub-tag"
+                            options={currentSubTags}
+                            onChange={handleSubRadioChange}
+                          />
+                          <div className="pagination">
+                            <PopperPagination
+                              postsNum={subTagList.length}
+                              postsPerPage={tagsPerPage}
+                              setCurrentPage={setCurrentSubTagPage}
+                              currentPage={currentSubTagPage}
+                            />
+                          </div>
+                        </>
+                      )}
+                    </TagPopperBox>
+                  </Popper>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="form-item">
+            <div className="label">역량 키워드 선택</div>
+            <Accordion
+              expanded={expanded}
+              onChange={handleChange}
+              sx={{
+                maxWidth: "800px",
+                background: theme.colors.neutral0,
+                borderRadius: "12px",
+                border: `1px solid ${theme.colors.neutral200}`,
+                boxShadow: "none",
+                "&:first-of-type": {
+                  borderRadius: "12px",
+                },
+                "&:last-of-type": {
+                  borderRadius: "12px",
+                },
+                "&::before": {
+                  backgroundColor: "transparent",
+                },
+                "&.Mui-expanded": {
+                  margin: "0px",
+                },
+              }}
+            >
+              <AccordionSummary
+                expandIcon={<ArrowDown />}
+                aria-controls="basic-info"
+                id="basic-info"
+                sx={{
+                  "&.Mui-expanded": {
+                    minHeight: 0,
+                  },
+                  ".MuiAccordionSummary-content": {
+                    "&.Mui-expanded": {
+                      margin: "12px 0px",
+                    },
+                  },
+                  minHeight: 0,
+                  borderBottom: `1px solid ${theme.colors.neutral200}`,
+                }}
+              >
+                <KeywordInput>
+                  {resultKeywords.length > 0 ? (
+                    <div className="tag-list">
+                      {resultKeywords.map((item) => (
+                        <Tag text={item.name} />
+                      ))}
+                    </div>
+                  ) : (
+                    "최대 5개까지 추가 가능 (ex) 커뮤니케이션, 협업 등)"
+                  )}
+                </KeywordInput>
+              </AccordionSummary>
+              <AccordionDetails sx={{ padding: "0px" }}>
+                <KeywordSelect>
+                  <div className="top-container">
+                    <div className="tab-list">
+                      <div
+                        className={
+                          keywordTabOption === "basic"
+                            ? "tab-item active"
+                            : "tab-item"
+                        }
+                        onClick={() => setKeywordTabOption("basic")}
+                      >
+                        기본
+                      </div>
+                      <div
+                        className={
+                          keywordTabOption === "my"
+                            ? "tab-item active"
+                            : "tab-item"
+                        }
+                        onClick={() => setKeywordTabOption("my")}
+                      >
+                        MY
+                      </div>
+                    </div>
+                    {keywordTabOption === "basic" ? (
+                      <PopperPagination
+                        postsNum={basicKeywords.length}
+                        postsPerPage={keywordsPerPage}
+                        setCurrentPage={setCurrentBasicKeywordPage}
+                        currentPage={currentBasicKeywordPage}
+                      />
+                    ) : (
+                      <PopperPagination
+                        postsNum={myKeywords.length}
+                        postsPerPage={keywordsPerPage}
+                        setCurrentPage={setCurrentMyKeywordPage}
+                        currentPage={currentMyKeywordPage}
+                      />
+                    )}
+                  </div>
+                  {keywordTabOption === "basic" ? (
+                    <div className="checkbox-list">
+                      {currentBasicKeywords.map((item) => (
+                        <Checkbox
+                          value={item.id}
+                          label={item.name}
+                          checked={isKeywordChecked(item)}
+                          onChange={(e) => handleKeywordChange(e, "basic")}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="my-keyword">
+                      <MyKeywordInput>
+                        <Plus2 />
+                        <input
+                          value={newKeyword}
+                          placeholder="직접 역량 태그를 생성할 수 있어요"
+                          onChange={(e) => setNewKeyword(e.target.value)}
+                          onKeyDown={(e) => handleMyKeywords(e)}
+                        />
+                      </MyKeywordInput>
+                      <div className="checkbox-list">
+                        {currentMyKeywords.map((item) => (
+                          <Checkbox
+                            value={item.id}
+                            label={item.name}
+                            checked={isKeywordChecked(item)}
+                            onChange={(e) => handleKeywordChange(e, "my")}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  <div className="keyword-list">
+                    {checkedKeywords.map((item) => (
+                      <Tag
+                        text={item.name}
+                        deleteOption={true}
+                        onDelete={() => handleDeleteTag(item.id)}
+                      />
+                    ))}
+                  </div>
+                </KeywordSelect>
+              </AccordionDetails>
+            </Accordion>
+          </div>
+        </BasicFormContainer>
+      </SectionContainer>
+    );
+  };
+
+  /**
+   * 질문과 답변폼
+   */
+  const renderQuestionForm = () => {
+    return (
+      <SectionContainer>
+        <SectionTitle>경험 질문</SectionTitle>
+        <QuestionList>
+          {questions.map((item, index) => (
+            <div className="question-item">
+              <div style={{ display: "flex" }}>
+                <Chip text={item.type} />
+              </div>
+              <Textarea
+                value={expData.contents[index].answer}
+                label={`${index + 1}. ${item.question}`}
+                rows={8}
+                labelStyle={
+                  theme.fonts.title4 + `color: ${theme.colors.neutral700}`
+                }
+                style={{
+                  borderRadius: "12px",
+                  border: `1px solid ${theme.colors.neutral400}`,
+                  background: `${theme.colors.neutral0}`,
+                  padding: "24px 30px",
+                }}
+                onChange={(e) => handleAnswerChange(index, e.target.value)}
+              />
+            </div>
+          ))}
+        </QuestionList>
+      </SectionContainer>
+    );
+  };
+
+  //
+  //
+  //
+  return (
+    <>
+      <MainContainer className="page">
+        <TopContainer>
+          <div className="title">
+            <button
+              onClick={() => navigate(-1)}
+              style={{
+                padding: 0,
+                background: "none",
+                border: "none",
+              }}
+            >
+              <ArrowLeft />
+            </button>
+            경험 작성
+          </div>
+          <CustomButton onClick={handleSaveExperience}>저장</CustomButton>
+        </TopContainer>
+        <ContentContainer>
+          <TitleInput
+            value={expData.title}
+            placeholder="경험의 제목을 입력해주세요"
+            onChange={(e) => setExpData({ ...expData, title: e.target.value })}
+          ></TitleInput>
+          {renderExperienceBasicInfo()}
+          {renderQuestionForm()}
+        </ContentContainer>
+      </MainContainer>
+      <Modal
+        image={<img src={airplaneImg} alt="airplane" />}
+        title={
+          <>
+            새로운 경험 작성이
+            <br />
+            완료되었어요!
+          </>
+        }
+        buttons={["작성된 경험 확인하기"]}
+        onConfirm={() => navigate(`/experience/detail/${expId}`)}
+        isOpen={isModalOpen}
+        onClose={closeModal}
+      />
+    </>
+  );
+};
+
+const MainContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  background: ${(props) => props.theme.colors.neutral20};
+`;
+
+const TopContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    ${(props) => props.theme.fonts.title1};
+    color: ${(props) => props.theme.colors.neutral700};
+  }
+`;
+
+const ContentContainer = styled.div`
+  width: 100%;
+  padding: 80px;
+  border-radius: 15px;
+  border: 1px solid var(--neutral-200, #eeeff7);
+  background: var(--neutral-0, #fff);
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+`;
+
+const CustomButton = styled(MainButton)`
+  padding: 10px 64px;
+  border-radius: 8px;
+  ${(props) => props.theme.fonts.button2};
+`;
+
+const TitleInput = styled.input`
+  width: 100%;
+  border: none;
+  padding: 24px 0px;
+  border-bottom: 0.775px solid ${(props) => props.theme.colors.neutral300};
+  outline: none;
+  ${(props) => props.theme.fonts.title1};
+  &::placeholder {
+    color: ${(props) => props.theme.colors.neutral500};
+  }
+`;
+
+const SectionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const SectionTitle = styled.div`
+  margin-bottom: 32px;
+  border-radius: 12px;
+  background: ${(props) => props.theme.colors.main50};
+  padding: 15px 30px;
+  ${(props) => props.theme.fonts.title3};
+  color: ${(props) => props.theme.colors.neutral600};
+`;
+
+const BasicFormContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 34px;
+  padding: 0px 20px;
+  .top {
+    display: flex;
+    flex-direction: row;
+    gap: 64px;
+  }
+  .form-item {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .label {
+    ${(props) => props.theme.fonts.subtitle2};
+    color: ${(props) => props.theme.colors.neutral700};
+  }
+  .input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+const KeywordSelect = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 25px 32px;
+  gap: 20px;
+  .top-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tab-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 150px;
+    height: 34px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background: var(--neutral-50, #f7f7fb);
+  }
+  .tab-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ${(props) => props.theme.fonts.body4};
+    color: ${(props) => props.theme.colors.neutral500};
+    width: 72px;
+    height: 27px;
+    flex-shrink: 0;
+    &:hover,
+    &.active {
+      ${(props) => props.theme.fonts.subtitle5};
+      color: ${(props) => props.theme.colors.neutral600};
+      border-radius: 4px;
+      background: var(--neutral-0, #fff);
+    }
+  }
+  .checkbox-list {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .my-keyword {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .keyword-list {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+`;
+
+const KeywordInput = styled.div`
+  ${(props) => props.theme.fonts.body3};
+  color: ${(props) => props.theme.colors.neutral500};
+  .tag-list {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+`;
+
+const MyKeywordInput = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 9px;
+  padding: 10px 15px;
+  border-radius: 4px;
+  background: ${(props) => props.theme.colors.neutral50};
+  input {
+    width: 100%;
+    ${(props) => props.theme.fonts.cap3};
+    color: ${(props) => props.theme.colors.neutral600};
+    border: none;
+    background: none;
+    outline: none;
+  }
+`;
+
+const QuestionList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  .question-item {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+`;
+
+const customDatePickerCss = `
+  margin: 0px;
+  padding: 9px 35px;
+  background: #FFF;
+  border-radius: 5px;
+  border: 1px solid var(--neutral-400, #D9DBE6);
+  text-align: center;
+`;
+
+const customInputCss = {
+  gap: "0px",
+  padding: "9px 22px",
+  background: "none",
+  borderRadius: "5px",
+  border: `1px solid var(--neutral-400, #D9DBE6)`,
+  maxWidth: "131px",
+  color: `var(--main-500, #7D82FF)`,
+};
+
+const TagPopperBox = styled.div`
+  width: 355px;
+  display: flex;
+  flex-direction: column;
+  padding: 21px 22px 21px 20px;
+  border-radius: 8px;
+  border: 1px solid var(--main-200, #e5e6ff);
+  background: #fff;
+  gap: 25px;
+  .checkbox-list {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .pagination {
+    display: flex;
+    justify-content: flex-end;
+  }
+`;
+
+const TagSearchBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  background: var(--neutral-50, #f7f7fb);
+  padding: 8px 12px;
+  input {
+    width: 100%;
+    border: none;
+    background: none;
+    outline: none;
+  }
+`;
+
+export default ExperienceEditPage;

From 9293a827113893bdc4295c375817f537e4eaea92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 07:19:12 +0900
Subject: [PATCH 05/17] =?UTF-8?q?fix:=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceEditPage.tsx  | 50 +++++++++++++++++--------------
 src/pages/ExperienceWritePage.tsx | 50 +++++++++++++++++--------------
 2 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
index 2a9dde9..9cbfbe3 100644
--- a/src/pages/ExperienceEditPage.tsx
+++ b/src/pages/ExperienceEditPage.tsx
@@ -458,14 +458,16 @@ const ExperienceEditPage = () => {
                             options={currentPrimeTags}
                             onChange={handlePrimeRadioChange}
                           />
-                          <div className="pagination">
-                            <PopperPagination
-                              postsNum={primeTagList.length}
-                              postsPerPage={tagsPerPage}
-                              setCurrentPage={setCurrentPrimeTagPage}
-                              currentPage={currentPrimeTagPage}
-                            />
-                          </div>
+                          {primeTagList.length !== 0 && (
+                            <div className="pagination">
+                              <PopperPagination
+                                postsNum={primeTagList.length}
+                                postsPerPage={tagsPerPage}
+                                setCurrentPage={setCurrentPrimeTagPage}
+                                currentPage={currentPrimeTagPage}
+                              />
+                            </div>
+                          )}
                         </>
                       ) : (
                         <>
@@ -475,14 +477,16 @@ const ExperienceEditPage = () => {
                             options={currentSubTags}
                             onChange={handleSubRadioChange}
                           />
-                          <div className="pagination">
-                            <PopperPagination
-                              postsNum={subTagList.length}
-                              postsPerPage={tagsPerPage}
-                              setCurrentPage={setCurrentSubTagPage}
-                              currentPage={currentSubTagPage}
-                            />
-                          </div>
+                          {subTagList.length !== 0 && (
+                            <div className="pagination">
+                              <PopperPagination
+                                postsNum={subTagList.length}
+                                postsPerPage={tagsPerPage}
+                                setCurrentPage={setCurrentSubTagPage}
+                                currentPage={currentSubTagPage}
+                              />
+                            </div>
+                          )}
                         </>
                       )}
                     </TagPopperBox>
@@ -578,12 +582,14 @@ const ExperienceEditPage = () => {
                         currentPage={currentBasicKeywordPage}
                       />
                     ) : (
-                      <PopperPagination
-                        postsNum={myKeywords.length}
-                        postsPerPage={keywordsPerPage}
-                        setCurrentPage={setCurrentMyKeywordPage}
-                        currentPage={currentMyKeywordPage}
-                      />
+                      myKeywordList.length !== 0 && (
+                        <PopperPagination
+                          postsNum={myKeywordList.length}
+                          postsPerPage={keywordsPerPage}
+                          setCurrentPage={setCurrentMyKeywordPage}
+                          currentPage={currentMyKeywordPage}
+                        />
+                      )
                     )}
                   </div>
                   {keywordTabOption === "basic" ? (
diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx
index 37276e6..b0658fd 100644
--- a/src/pages/ExperienceWritePage.tsx
+++ b/src/pages/ExperienceWritePage.tsx
@@ -438,14 +438,16 @@ const ExperienceWritePage = () => {
                             options={currentPrimeTags}
                             onChange={handlePrimeRadioChange}
                           />
-                          <div className="pagination">
-                            <PopperPagination
-                              postsNum={primeTagList.length}
-                              postsPerPage={tagsPerPage}
-                              setCurrentPage={setCurrentPrimeTagPage}
-                              currentPage={currentPrimeTagPage}
-                            />
-                          </div>
+                          {primeTagList.length !== 0 && (
+                            <div className="pagination">
+                              <PopperPagination
+                                postsNum={primeTagList.length}
+                                postsPerPage={tagsPerPage}
+                                setCurrentPage={setCurrentPrimeTagPage}
+                                currentPage={currentPrimeTagPage}
+                              />
+                            </div>
+                          )}
                         </>
                       ) : (
                         <>
@@ -455,14 +457,16 @@ const ExperienceWritePage = () => {
                             options={currentSubTags}
                             onChange={handleSubRadioChange}
                           />
-                          <div className="pagination">
-                            <PopperPagination
-                              postsNum={subTagList.length}
-                              postsPerPage={tagsPerPage}
-                              setCurrentPage={setCurrentSubTagPage}
-                              currentPage={currentSubTagPage}
-                            />
-                          </div>
+                          {subTagList.length !== 0 && (
+                            <div className="pagination">
+                              <PopperPagination
+                                postsNum={subTagList.length}
+                                postsPerPage={tagsPerPage}
+                                setCurrentPage={setCurrentSubTagPage}
+                                currentPage={currentSubTagPage}
+                              />
+                            </div>
+                          )}
                         </>
                       )}
                     </TagPopperBox>
@@ -558,12 +562,14 @@ const ExperienceWritePage = () => {
                         currentPage={currentBasicKeywordPage}
                       />
                     ) : (
-                      <PopperPagination
-                        postsNum={myKeywords.length}
-                        postsPerPage={keywordsPerPage}
-                        setCurrentPage={setCurrentMyKeywordPage}
-                        currentPage={currentMyKeywordPage}
-                      />
+                      myKeywordList.length !== 0 && (
+                        <PopperPagination
+                          postsNum={myKeywordList.length}
+                          postsPerPage={keywordsPerPage}
+                          setCurrentPage={setCurrentMyKeywordPage}
+                          currentPage={currentMyKeywordPage}
+                        />
+                      )
                     )}
                   </div>
                   {keywordTabOption === "basic" ? (

From cc4862a2bedb6137c4bebfa99e2e238aff760c7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 07:26:45 +0900
Subject: [PATCH 06/17] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20useEffect=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DatePicker.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/common/DatePicker.tsx b/src/components/common/DatePicker.tsx
index 271175b..ad16e57 100644
--- a/src/components/common/DatePicker.tsx
+++ b/src/components/common/DatePicker.tsx
@@ -28,24 +28,16 @@ interface DatePickerProps {
 }
 
 const OneDatePick: React.FC<DatePickerProps> = ({ date, setDate, style }) => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
-
   const handleDateChange = (date: Date | null) => {
     if (date) {
-      setStartDate(date);
       setDate(date);
-    } else {
     }
   };
 
-  useEffect(() => {
-    setStartDate(date);
-  }, [date]);
-
   return (
     <StyledDatePicker
-      isactive={startDate !== null}
-      selected={startDate}
+      isactive={date !== null}
+      selected={date}
       onChange={handleDateChange}
       closeOnScroll={true}
       style={style || ""}

From b192b4800b8c092fdee69fffd87b682b503094f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 20:14:01 +0900
Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=EA=B2=BD=ED=97=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceDetailPage.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/ExperienceDetailPage.tsx b/src/pages/ExperienceDetailPage.tsx
index c613af9..1e2791a 100644
--- a/src/pages/ExperienceDetailPage.tsx
+++ b/src/pages/ExperienceDetailPage.tsx
@@ -23,7 +23,9 @@ const ExperienceDetailPage = () => {
   const navigate = useNavigate();
   const theme = useTheme();
   const [expData, setExpData] = React.useState<ExperienceDetailType>();
-  const expKeywords = expData?.strongPointIds?.map((item) => item.name) || [];
+  const primeTag = expData?.childTag.name || "상위태그값없음";
+  const subTag = expData?.parentTag.name || "하위태그값없음";
+  const expKeywords = expData?.strongPoints?.map((item) => item.name) || [];
 
   // 삭제 모달
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -82,8 +84,8 @@ const ExperienceDetailPage = () => {
             id={expData?.id || ExpData[0].id}
             title={expData?.title || ""}
             tags={expKeywords}
-            maintag={ExpData[0].mainTag}
-            subtag={ExpData[0].subTag}
+            maintag={primeTag}
+            subtag={subTag}
             startedAt={expData?.startedAt}
             endedAt={expData?.endedAt}
           />
@@ -107,6 +109,7 @@ const ExperienceDetailPage = () => {
                     background: `${theme.colors.neutral50}`,
                     padding: "24px 30px",
                   }}
+                  readOnly
                 />
               </AnswerItem>
             ))}

From 03d3f4d1b12db2b12b4598e4c82026d6bfc67657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 20:20:32 +0900
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=EA=B2=BD=ED=97=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceDetailPage.tsx |  4 ++--
 src/pages/ExperienceEditPage.tsx   | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/ExperienceDetailPage.tsx b/src/pages/ExperienceDetailPage.tsx
index 1e2791a..a3ad11a 100644
--- a/src/pages/ExperienceDetailPage.tsx
+++ b/src/pages/ExperienceDetailPage.tsx
@@ -23,8 +23,8 @@ const ExperienceDetailPage = () => {
   const navigate = useNavigate();
   const theme = useTheme();
   const [expData, setExpData] = React.useState<ExperienceDetailType>();
-  const primeTag = expData?.childTag.name || "상위태그값없음";
-  const subTag = expData?.parentTag.name || "하위태그값없음";
+  const primeTag = expData?.parentTag.name || "상위태그값없음";
+  const subTag = expData?.childTag.name || "하위태그값없음";
   const expKeywords = expData?.strongPoints?.map((item) => item.name) || [];
 
   // 삭제 모달
diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
index 9cbfbe3..bed559e 100644
--- a/src/pages/ExperienceEditPage.tsx
+++ b/src/pages/ExperienceEditPage.tsx
@@ -368,8 +368,15 @@ const ExperienceEditPage = () => {
         console.log(res);
         // 상위태그, 하위태그 객체 형태로 저장
         // 역량 키워드 => 객체 리스트로 저장
-        const { id, strongPoints, ...rest } = res.data;
-        setExpData({ ...rest });
+        const { id, parentTag, childTag, strongPoints, ...rest } = res.data;
+        setExpData({
+          ...rest,
+          parentTagId: parentTag.id,
+          childTagId: childTag.id,
+          strongPointIds: strongPoints.map((item: KeywordType) => item.id),
+        });
+        setPrimeTagItem(parentTag);
+        setSubTagItem(childTag);
         setCheckedKeywords(strongPoints);
       });
     }

From d5ee01ae8d1df24b5cd9ef7b39a3c1d25d229923 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 20:21:09 +0900
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=EA=B2=BD=ED=97=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/experience.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/types/experience.ts b/src/types/experience.ts
index a551277..ba49086 100644
--- a/src/types/experience.ts
+++ b/src/types/experience.ts
@@ -15,6 +15,13 @@ export interface ExperienceType {
 
 export interface ExperienceDetailType extends ExperienceType {
   id: string;
+  title: string;
+  parentTag: TagType;
+  childTag: TagType;
+  strongPoints: KeywordType[];
+  contents: QuestionType[];
+  startedAt: string;
+  endedAt: string;
 }
 
 export interface KeywordType {

From 1c8898d88698324ee687852fa6c5d38c41f6fdec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 20:25:06 +0900
Subject: [PATCH 10/17] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=98=86=20=EB=A7=88=EC=A7=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Navbar.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
index db8cf62..9c92af4 100644
--- 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`

From 9521ac631652309d877a2efaf1d485e155855eae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 20:29:59 +0900
Subject: [PATCH 11/17] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperiencePage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ExperiencePage.tsx b/src/pages/ExperiencePage.tsx
index 0460d76..75f42b4 100644
--- a/src/pages/ExperiencePage.tsx
+++ b/src/pages/ExperiencePage.tsx
@@ -13,8 +13,10 @@ import MoreTab from "../components/Experience/MoreTab";
 import Modal from "../components/common/Modal";
 import React from "react";
 import warningImg from "../assets/images/warningIcon.png";
+import { getCookie } from "../services/cookie";
 
 const ExperiencePage = () => {
+  const user = getCookie("user");
   const [componentRef, size] = useComponentSize();
   const [selectedYear, setSelectedYear] = useRecoilState(yearState);
   const [selectedKeyword, setSelectedKeyword] = useRecoilState(keywordState);
@@ -22,8 +24,6 @@ const ExperiencePage = () => {
 
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const name = "사용자";
-
   // 모달 관리
   const openDeleteModal = () => {
     setIsModalOpen(true);
@@ -94,7 +94,7 @@ const ExperiencePage = () => {
         {/* <NoExperience /> */}
         {selectedKeyword ? null : (
           <Description>
-            <span className="user">{name}</span>
+            <span className="user">{user?.nickName || "사용자"}</span>
             님의 여정을
             <br />
             시작해볼까요?

From 74283b6afdb445016dc3d9e3b3ed0195319cfe15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 20:58:12 +0900
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProfilePage.tsx | 38 ++++++++++++++++++++++----------------
 src/types/user.ts         |  1 +
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 6ff24fb..91eb112 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -5,6 +5,8 @@ import TicketContent from "../assets/images/ticketContent.svg";
 import { GoogleIcon, KakaoIcon } from "../assets";
 import { useNavigate } from "react-router-dom";
 import { getCookie, removeCookie } from "../services/cookie";
+import { getUserInfo } from "../services/user";
+import { UserDataType } from "../types/user";
 
 interface UserDetail {
   question: string;
@@ -12,38 +14,42 @@ interface UserDetail {
 }
 
 const ProfilePage = () => {
-  const navigate = useNavigate();
+  const nav = useNavigate();
   const user = getCookie("user");
-  const username = user.nickName;
-  const useremail = "email@gmail.com";
-  const userAccount: string = user.provider; //or google
+  const [userData, setUserData] = React.useState<UserDataType>();
   const userDetailList: UserDetail[] = [
     {
       question: "구직활동 여부",
-      answer:
-        "직무공고를 탐색하고, 취업을 위한 적극적 구직 활동을 하고 있어요.",
+      answer: userData?.jobSearchStatus || "",
     },
     {
       question: "희망 직무",
-      answer: "서비스 기획자",
+      answer: userData?.desiredJob || "",
     },
     {
       question: "역량 탐색",
-      answer:
-        "프로젝트 경험은 많은데 실제로 사용자를 받아보거나 서비스를 운영해본 경험은 없다. 한 가지 프로젝트를 깊게 파보면서도 내가 가진 창의력과 아이디어를 최대한 활용해 마케팅이나 브랜딩으로 유저를 끌어모으는 경험을 해보고 싶다.",
+      answer: userData?.goal || "",
     },
     {
       question: "꿈",
-      answer:
-        "난난꿈이있어요버려지고찢겨남루하여도그래요있어요 블라블라 오찌고 저쭈그",
+      answer: userData?.dream || "",
     },
   ];
-  const nav = useNavigate();
 
   const handlelogout = () => {
     removeCookie("user");
-    navigate(`/sign-in`);
+    nav(`/sign-in`);
   };
+
+  useEffect(() => {
+    if (user?.token) {
+      getUserInfo(user?.token).then((res) => {
+        console.log(res);
+        setUserData(res.data);
+      });
+    }
+  }, []);
+
   useEffect(() => {
     window.scrollTo({
       top: 0,
@@ -58,10 +64,10 @@ const ProfilePage = () => {
         <img src={TicketContainer} alt="ticketContainer" />
         <LogoutWrapper onClick={handlelogout}>로그아웃</LogoutWrapper>
         <ProfileWrapper>
-          <div className="profile_username">{username}</div>
+          <div className="profile_username">{userData?.nickName}</div>
           <div className="profile_email">
-            {userAccount === "GOOGLE" ? <GoogleIcon /> : <KakaoIcon />}
-            {useremail}
+            {userData?.provider === "GOOGLE" ? <GoogleIcon /> : <KakaoIcon />}
+            {userData?.email}
           </div>
           <div
             className="profile_edit_btn"
diff --git a/src/types/user.ts b/src/types/user.ts
index 7be385d..e59450d 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -15,6 +15,7 @@ export interface UserDataType {
   nickName: string;
   jobSearchStatus: string;
   desiredJob: string;
+  email: string;
   goal: string;
   dream: string;
 }

From c2259d19e2f21c9f663255270546cf9f53270403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 21:00:06 +0900
Subject: [PATCH 13/17] =?UTF-8?q?feat:=20=EC=97=AD=EB=9F=89=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EB=93=B1=EB=A1=9D=20api=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceWritePage.tsx     | 2 +-
 src/services/Experience/keywordApi.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx
index b0658fd..14a7dcb 100644
--- a/src/pages/ExperienceWritePage.tsx
+++ b/src/pages/ExperienceWritePage.tsx
@@ -164,7 +164,7 @@ const ExperienceWritePage = () => {
         newKeywordsNames,
         user?.token
       );
-      const newStrongPointIds = newStrongPointsRes.data.map(
+      const newStrongPointIds = newStrongPointsRes.data.strongPoints.map(
         (item: KeywordType) => item.id
       );
       const totalStrongPointIds = [
diff --git a/src/services/Experience/keywordApi.ts b/src/services/Experience/keywordApi.ts
index 5da3e64..8364af8 100644
--- a/src/services/Experience/keywordApi.ts
+++ b/src/services/Experience/keywordApi.ts
@@ -1,11 +1,11 @@
 import client from "../client";
 
 // 역량 키워드 등록
-export const postKeyword = async (name: { name: string }[], token: string) => {
+export const postKeyword = async (names: { name: string }[], token: string) => {
   return await client.post(
     `/api/strong-points`,
     {
-      names: name,
+      names: names,
     },
     {
       headers: {

From 02f5a0c6e2307e9b428cecdb4218d7dee8ddc7fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 21:20:21 +0900
Subject: [PATCH 14/17] =?UTF-8?q?fix:=20=EA=B2=BD=ED=97=98=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceWritePage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx
index 14a7dcb..29536b1 100644
--- a/src/pages/ExperienceWritePage.tsx
+++ b/src/pages/ExperienceWritePage.tsx
@@ -133,7 +133,7 @@ const ExperienceWritePage = () => {
       const subTagId = subTagRes.data.id;
 
       experienceData = {
-        ...expData,
+        ...experienceData,
         parentTagId: primeTagId,
         childTagId: subTagId,
       };
@@ -147,7 +147,7 @@ const ExperienceWritePage = () => {
       );
       const subTagId = subTagRes.data.id;
       experienceData = {
-        ...expData,
+        ...experienceData,
         childTagId: subTagId,
       };
     }
@@ -172,7 +172,7 @@ const ExperienceWritePage = () => {
         ...newStrongPointIds,
       ];
       experienceData = {
-        ...expData,
+        ...experienceData,
         strongPointIds: totalStrongPointIds,
       };
     }

From cd196b030f9e7b97cd056777db30789d8cae03bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 21:23:15 +0900
Subject: [PATCH 15/17] =?UTF-8?q?fix:=20=EC=B2=B4=ED=81=AC=EB=90=9C=20?=
 =?UTF-8?q?=EC=97=AD=EB=9F=89=20=ED=82=A4=EC=9B=8C=EB=93=9C=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ExperienceEditPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
index bed559e..908180c 100644
--- a/src/pages/ExperienceEditPage.tsx
+++ b/src/pages/ExperienceEditPage.tsx
@@ -378,6 +378,7 @@ const ExperienceEditPage = () => {
         setPrimeTagItem(parentTag);
         setSubTagItem(childTag);
         setCheckedKeywords(strongPoints);
+        setResultKeywords(strongPoints);
       });
     }
     // 상위 태그 조회

From 1834989ecbb67e730249fe005906543f23b6dd76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 21:39:23 +0900
Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=82=A4=EC=9B=8C=EB=93=9C=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20api=20url=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/Experience/tagApi.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/Experience/tagApi.tsx b/src/services/Experience/tagApi.tsx
index bd15d8d..6cd21e4 100644
--- a/src/services/Experience/tagApi.tsx
+++ b/src/services/Experience/tagApi.tsx
@@ -2,7 +2,7 @@ import client from "../client";
 
 // 상위 태그 조회
 export const getPrimeTags = async (token: string) => {
-  return await client.get(`/api/tags`, {
+  return await client.get(`/api/tags/my`, {
     headers: {
       Authorization: `Bearer ${token}`,
     },

From cc67f9f4395aa9f38f793d36935ae44ae6611dad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Mon, 20 May 2024 21:46:28 +0900
Subject: [PATCH 17/17] =?UTF-8?q?fix:=20datepicker=20=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DatePicker.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/common/DatePicker.tsx b/src/components/common/DatePicker.tsx
index ad16e57..271175b 100644
--- a/src/components/common/DatePicker.tsx
+++ b/src/components/common/DatePicker.tsx
@@ -28,16 +28,24 @@ interface DatePickerProps {
 }
 
 const OneDatePick: React.FC<DatePickerProps> = ({ date, setDate, style }) => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
   const handleDateChange = (date: Date | null) => {
     if (date) {
+      setStartDate(date);
       setDate(date);
+    } else {
     }
   };
 
+  useEffect(() => {
+    setStartDate(date);
+  }, [date]);
+
   return (
     <StyledDatePicker
-      isactive={date !== null}
-      selected={date}
+      isactive={startDate !== null}
+      selected={startDate}
       onChange={handleDateChange}
       closeOnScroll={true}
       style={style || ""}