{maintag + ">" + subtag}
|
- {period}
+
+ {dayjs(new Date(startedAt || new Date())).format("YYYY.MM.DD")}~
+ {dayjs(new Date(endedAt || new Date())).format("YYYY.MM.DD")}
+
-
- 나의 경험 상세보기
-
- -
-
-
-
+
+ 나의 경험 상세보기
+
+
+ 삭제하기
+ navigate("edit")}>수정하기
+
+ +
+
+
+ + 신중히 생각해주세요. + + } + buttons={["취소", "네 삭제할게요."]} + isOpen={isModalOpen} + onClose={closeModal} + onConfirm={handleDelete} + /> + ); }; @@ -101,14 +156,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/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx new file mode 100644 index 0000000..908180c --- /dev/null +++ b/src/pages/ExperienceEditPage.tsx @@ -0,0 +1,983 @@ +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
+
+
+
+ 경험 기간
+
+
+ setExpData({ ...expData, startedAt: date.toISOString() })
+ }
+ style={customDatePickerCss}
+ />
+ -
+
+ setExpData({ ...expData, endedAt: date.toISOString() })
+ }
+ style={customDatePickerCss}
+ />
+
+
+
+ 경험 분류
+
+
+ {">"}
+
+ {popperInfo && (
+
+
+
+ setNewTag(e.target.value)}
+ onKeyDown={handleTagSearch}
+ />
+
+ {popperInfo === "prime" ? (
+ <>
+
+
+ )}
+
+
+
+ )}
+
+ ) : (
+ <>
+
+
+ )}
+
+ )}
+
+
+
+ {resultKeywords.length > 0 ? (
+
+
+
+
+
+
+
+
+ 역량 키워드 선택
+
+ {resultKeywords.map((item) => (
+
+ ) : (
+ "최대 5개까지 추가 가능 (ex) 커뮤니케이션, 협업 등)"
+ )}
+
+
+ {keywordTabOption === "basic" ? (
+
+
+ {keywordTabOption === "basic" ? (
+ setKeywordTabOption("basic")}
+ >
+ 기본
+
+ setKeywordTabOption("my")}
+ >
+ MY
+
+
+ {currentBasicKeywords.map((item) => (
+ handleKeywordChange(e, "basic")}
+ />
+ ))}
+
+ ) : (
+
+
+
+
+ )}
+
+ {currentMyKeywords.map((item) => (
+ handleKeywordChange(e, "my")}
+ />
+ ))}
+
+
+ {checkedKeywords.map((item) => (
+ handleDeleteTag(item.id)}
+ />
+ ))}
+
+
+
+
+