From 17b54180b296d7077b387c2dfa6e844a849208a3 Mon Sep 17 00:00:00 2001 From: Seunghyo Date: Thu, 23 May 2024 10:42:19 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B3=A0=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC,=20icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/JDPlusPage.tsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/pages/JDPlusPage.tsx b/src/pages/JDPlusPage.tsx index 55b2d7f..c91895b 100644 --- a/src/pages/JDPlusPage.tsx +++ b/src/pages/JDPlusPage.tsx @@ -4,17 +4,19 @@ import AirplaneToggle from "../components/JD/AirplaneToggle"; import BundleEditor from "../components/editor/BundleEditor"; import TimeSelector from "../components/common/TimePicker"; import OneDatePick from "../components/common/DatePicker"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import Modal from "../components/JD/JDModal"; import ClockIcon from "../assets/icons/icon_clock_net600.svg"; import { jobpost } from "../services/JD/jdApi"; import { JobAPI } from "../types/type"; import { getCookie } from "../services/cookie"; +import arrowLeft from "../assets/icons/icon_arrow_left.svg"; const JDPlusPage: React.FC = () => { const [selectedTime, setSelectedTime] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const nav = useNavigate(); + const location = useLocation(); const user = getCookie("user"); const [jobData, setJobData] = useState({ title: "", @@ -32,6 +34,18 @@ const JDPlusPage: React.FC = () => { }); }, []); + useEffect(() => { + const handleBackNavigation = () => { + openModal(); + }; + + window.history.pushState(null, document.title, location.pathname); + window.addEventListener("popstate", handleBackNavigation); + return () => { + window.removeEventListener("popstate", handleBackNavigation); + }; + }, [location.pathname]); + //유효성검사 const isJobDataComplete = () => { const { title, enterpriseName, content, link, startAt, endedAt } = jobData; @@ -133,7 +147,10 @@ const JDPlusPage: React.FC = () => { - 새로운 공고 등록 + + <img src={arrowLeft} alt="arrowicon" onClick={openModal} /> + 새로운 공고 등록 + 취소 Date: Thu, 23 May 2024 11:27:45 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B3=A0=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=ED=95=84=EC=88=98=20=EC=9E=85=EB=A0=A5=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/JD/ExperienceList.tsx | 3 +- src/pages/JDDetailPage.tsx | 2 - src/pages/JDListPage.tsx | 4 +- src/pages/JDPlusPage.tsx | 67 ++++++++++++++++------------ 4 files changed, 42 insertions(+), 34 deletions(-) diff --git a/src/components/JD/ExperienceList.tsx b/src/components/JD/ExperienceList.tsx index 462e6d2..65431b0 100644 --- a/src/components/JD/ExperienceList.tsx +++ b/src/components/JD/ExperienceList.tsx @@ -93,7 +93,7 @@ const ExperienceList: React.FC = ({ const getExperienceList = async (jdId: string, token: string) => { try { const response = await getAllExperienceList(jdId, token); - console.log(response); + //console.log(response); setExperienceData(response.data.experiences); } catch (error) { console.error(error); @@ -418,6 +418,7 @@ const ExperienceList: React.FC = ({ {keywordTabOption === "basic" ? currentBasicKeywords.map((item) => ( { endedAt: response.data.endedAt, }; setJdData(jdApiData); - console.log(jdData); } catch (error) { console.error(error); alert(JSON.stringify(error)); @@ -119,7 +118,6 @@ const JDDetailPage: React.FC = () => { const handleJDDelete = async (jobId: string, token: string) => { try { const response = await jobdelete(jobId, token); - console.log(response); nav("/jd"); } catch (error) { console.error(error); diff --git a/src/pages/JDListPage.tsx b/src/pages/JDListPage.tsx index dc8b412..2f87438 100644 --- a/src/pages/JDListPage.tsx +++ b/src/pages/JDListPage.tsx @@ -127,7 +127,7 @@ const JDListPage: React.FC = () => { } else { setpageTotal(1); } - console.log(jobsData); + setIsLoading(false); } catch (error) { console.error(error); @@ -205,7 +205,7 @@ const JDListPage: React.FC = () => { })); setJobsData(mappedData); setpageTotal(response.data.totalPage); - console.log(jobsData); + setIsLoading(false); } catch (error) { console.error(error); diff --git a/src/pages/JDPlusPage.tsx b/src/pages/JDPlusPage.tsx index c91895b..0baa99c 100644 --- a/src/pages/JDPlusPage.tsx +++ b/src/pages/JDPlusPage.tsx @@ -59,21 +59,6 @@ const JDPlusPage: React.FC = () => { ); }; - // endTime 계산 - const getEndTime = () => { - if (!jobData.endedAt) return null; // endDate가 null이면 null 반환 - if (selectedTime) { - const hours = parseInt(selectedTime.split(":")[0]); - const minutes = parseInt(selectedTime.split(":")[1]); - - const endTime = new Date(jobData.endedAt); // endDate를 기반으로 새 Date 객체 생성 - endTime.setHours(hours, minutes, 0); // 시간과 분 설정 - console.log("최종시간은", endTime); - return endTime; - } - }; - const endTime = getEndTime(); - const openModal = () => { setIsModalOpen(true); document.body.style.overflow = "hidden"; @@ -101,7 +86,7 @@ const JDPlusPage: React.FC = () => { const handleEDateChange = (date: Date) => { if (!jobData.endedAt && !jobData.startAt) { setJobData({ ...jobData, endedAt: date }); - } else if (jobData.startAt && jobData.startAt) { + } else if (jobData.startAt && date > jobData.startAt) { setJobData({ ...jobData, endedAt: date }); } else { setJobData({ ...jobData, endedAt: jobData.startAt }); @@ -112,11 +97,23 @@ const JDPlusPage: React.FC = () => { setJobData({ ...jobData, content: newContent }); }; - // useEffect(() => { - // console.log("Dates updated:", startDate, endDate); - // console.log("Time was updated:", selectedTime); - // console.log(endTime); - // }, [selectedTime, startDate, endDate]); + useEffect(() => { + if (jobData.startAt && jobData.endedAt) { + getEndTime(); + console.log("Dates updated:", jobData.startAt, jobData.endedAt); + } + }, [selectedTime]); + + // endTime 계산 + const getEndTime = () => { + if (!jobData.endedAt) return null; + if (selectedTime) { + const endTime = new Date(jobData.endedAt); + const [hours, minutes] = selectedTime.split(":"); + endTime.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0, 0); + setJobData({ ...jobData, endedAt: endTime }); + } + }; //api const handleJDPost = async (job: JobAPI, token: string) => { @@ -130,9 +127,8 @@ const JDPlusPage: React.FC = () => { startAt: job.startAt, endedAt: job.endedAt, }, - user.token + token ); - console.log(response); nav("/jd"); } catch (error) { console.error(error); @@ -170,7 +166,9 @@ const JDPlusPage: React.FC = () => { - 기업명 + + 기업명
*
+ @@ -182,7 +180,9 @@ const JDPlusPage: React.FC = () => { /> - 제목 + + 제목
*
+ @@ -196,7 +196,9 @@ const JDPlusPage: React.FC = () => { - 지원기간 + + 지원기간
*
+ {jobData.startAt ? (
@@ -234,7 +236,9 @@ const JDPlusPage: React.FC = () => { - 링크 + + 링크
*
+ @@ -268,6 +272,11 @@ const StyledDivContainer = styled.div` position: relative; background-color: #FBFBFD; overflow-x: hidden; + .required { + margin-left: 4px; + ${(props) => props.theme.fonts.cap1}; + color: var(--sub-tertiary-800, #ffa63e); + } `; const ToggleContainer = styled.div` @@ -370,12 +379,12 @@ const InputContainer = styled.div` `; const InputTitle = styled.div` - width: 4rem; + width: 70px; display: flex; + font-size: 16px; justify-content: center; color: var(--neutral-600, #63698D); text-align: right; - font-size: 1.125rem; font-style: normal; font-weight: 600; margin-right: 1.25rem; From 1486f185fa8c7879d4fba0ac0829aed4e7d61213 Mon Sep 17 00:00:00 2001 From: Seunghyo Date: Thu, 23 May 2024 11:39:48 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20time=20error=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/JDPlusPage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/JDPlusPage.tsx b/src/pages/JDPlusPage.tsx index 0baa99c..3e0e3c4 100644 --- a/src/pages/JDPlusPage.tsx +++ b/src/pages/JDPlusPage.tsx @@ -100,7 +100,6 @@ const JDPlusPage: React.FC = () => { useEffect(() => { if (jobData.startAt && jobData.endedAt) { getEndTime(); - console.log("Dates updated:", jobData.startAt, jobData.endedAt); } }, [selectedTime]); @@ -110,7 +109,7 @@ const JDPlusPage: React.FC = () => { if (selectedTime) { const endTime = new Date(jobData.endedAt); const [hours, minutes] = selectedTime.split(":"); - endTime.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0, 0); + endTime.setHours(parseInt(hours, 10) + 9, parseInt(minutes, 10), 0, 0); setJobData({ ...jobData, endedAt: endTime }); } }; @@ -129,6 +128,7 @@ const JDPlusPage: React.FC = () => { }, token ); + console.log(job.endedAt); nav("/jd"); } catch (error) { console.error(error); @@ -136,6 +136,10 @@ const JDPlusPage: React.FC = () => { } }; + useEffect(() => { + console.log(jobData.endedAt); + }, [jobData.endedAt]); + return ( From 0987a88e39db8540d0bafa7d7495978af7f9fd3d Mon Sep 17 00:00:00 2001 From: Seunghyo Date: Thu, 23 May 2024 11:45:50 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20navbar=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=ED=81=AC=EA=B8=B0=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 | 11 +++++++---- src/pages/JDPlusPage.tsx | 2 +- src/styles/theme.ts | 6 ++++++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx index cc2cd06..cdd5b0b 100644 --- a/src/components/common/Navbar.tsx +++ b/src/components/common/Navbar.tsx @@ -52,14 +52,14 @@ const Navbar = () => { } alt="profile" style={{ - width: "32px", - height: "32px", + width: "40px", + height: "40px", borderRadius: "50%", }} onError={handleImgError} /> navigate(`/profile`)}> - {userData?.nickName}님 + {userData?.nickName + " "}님 ) : ( @@ -118,9 +118,12 @@ const MenuItem = styled.div` `; const UserInfo = styled.div` - ${(props) => props.theme.fonts.cap2} + ${(props) => props.theme.fonts.cap4} color: ${(props) => props.theme.colors.neutral800}; flex-shrink: 0; + .username{ + ${(props) => props.theme.fonts.subtitle5} + } `; const LoginButton = styled.div` diff --git a/src/pages/JDPlusPage.tsx b/src/pages/JDPlusPage.tsx index 3e0e3c4..b4acd7d 100644 --- a/src/pages/JDPlusPage.tsx +++ b/src/pages/JDPlusPage.tsx @@ -108,7 +108,7 @@ const JDPlusPage: React.FC = () => { if (!jobData.endedAt) return null; if (selectedTime) { const endTime = new Date(jobData.endedAt); - const [hours, minutes] = selectedTime.split(":"); + let [hours, minutes] = selectedTime.split(":"); endTime.setHours(parseInt(hours, 10) + 9, parseInt(minutes, 10), 0, 0); setJobData({ ...jobData, endedAt: endTime }); } diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 188c566..fd26327 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -172,6 +172,12 @@ const fonts = { size: 12, lineHeight: 14, }), + cap4: FONT({ + family: "Pretendard-Regular", + weight: 400, + size: 14, + lineHeight: 14, + }), button1: FONT({ family: "Pretendard-SemiBold", weight: 400, From 8c88cf4602a77e777ce51cba6ccdfe20a5f06bef Mon Sep 17 00:00:00 2001 From: Seunghyo Date: Thu, 23 May 2024 14:21:22 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20time=20error=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20in=20JDEDit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/JDEditPage.tsx | 44 +++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/src/pages/JDEditPage.tsx b/src/pages/JDEditPage.tsx index b997791..b160a0d 100644 --- a/src/pages/JDEditPage.tsx +++ b/src/pages/JDEditPage.tsx @@ -4,7 +4,7 @@ import AirplaneToggle from "../components/JD/AirplaneToggle"; import BundleEditor from "../components/editor/BundleEditor"; import TimeSelector from "../components/common/TimePicker"; import OneDatePick from "../components/common/DatePicker"; -import { useNavigate, useParams } from "react-router-dom"; +import { useLocation, useNavigate, useParams } from "react-router-dom"; import Modal from "../components/JD/JDEditModal"; import ClockIcon from "../assets/icons/icon_clock_net600.svg"; import { jobdescriptionget, jobpatch, jobpost } from "../services/JD/jdApi"; @@ -12,9 +12,10 @@ import { JobAPI, JobDescriptionAPI } from "../types/type"; import { getCookie } from "../services/cookie"; const JDEditPage: React.FC = () => { - const [selectedTime, setSelectedTime] = useState("10:00"); + const [selectedTime, setSelectedTime] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const nav = useNavigate(); + const location = useLocation(); const user = getCookie("user"); const [jdData, setJdData] = useState({ enterpriseName: "", @@ -30,6 +31,18 @@ const JDEditPage: React.FC = () => { const jdId = useParams().jdId; const [isLoading, setIsLoading] = useState(true); + useEffect(() => { + const handleBackNavigation = () => { + openModal(); + }; + + window.history.pushState(null, document.title, location.pathname); + window.addEventListener("popstate", handleBackNavigation); + return () => { + window.removeEventListener("popstate", handleBackNavigation); + }; + }, [location.pathname]); + useEffect(() => { window.scrollTo({ top: 0, @@ -42,17 +55,21 @@ const JDEditPage: React.FC = () => { // endTime 계산 const getEndTime = () => { - if (!jdData.endedAt) return null; // endDate가 null이면 null 반환 - - const hours = parseInt(selectedTime.split(":")[0]); - const minutes = parseInt(selectedTime.split(":")[1]); - - const endTime = new Date(jdData.endedAt); // endDate를 기반으로 새 Date 객체 생성 - endTime.setHours(hours, minutes, 0); // 시간과 분 설정 - console.log("최종시간은", endTime); - return endTime; + if (!jdData.endedAt) return null; + if (selectedTime) { + const endTime = new Date(jdData.endedAt); + let [hours, minutes] = selectedTime.split(":"); + endTime.setHours(parseInt(hours, 10) + 9, parseInt(minutes, 10), 0, 0); + setJdData({ ...jdData, endedAt: endTime }); + } }; - const endTime = getEndTime(); + + useEffect(() => { + if (jdData.startAt && jdData.endedAt && selectedTime !== null) { + getEndTime(); + } + console.log(selectedTime); + }, [selectedTime]); const openModal = () => { setIsModalOpen(true); @@ -131,7 +148,7 @@ const JDEditPage: React.FC = () => { enterpriseName: response.data.enterpriseName, title: response.data.title, remainingDate: response.data.remainingDate, - content: response.data.link, + content: response.data.content, writeStatus: response.data.writeStatus, link: response.data.link, createdAt: response.data.createdAt, @@ -139,7 +156,6 @@ const JDEditPage: React.FC = () => { endedAt: response.data.endedAt, }; setJdData(jdApiData); - setSelectedTime(response.data.endedAt); console.log(jdData); } catch (error) { console.error(error); From 59966de1631723ad4797972f8e819d8609259586 Mon Sep 17 00:00:00 2001 From: Seunghyo Date: Thu, 23 May 2024 14:36:26 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/JDPlusPage.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/JDPlusPage.tsx b/src/pages/JDPlusPage.tsx index b4acd7d..7db3963 100644 --- a/src/pages/JDPlusPage.tsx +++ b/src/pages/JDPlusPage.tsx @@ -239,12 +239,13 @@ const JDPlusPage: React.FC = () => {
- + 링크
*
 setJobData({ ...jobData, @@ -372,6 +373,7 @@ const RightTitleContainer = styled.div` display: flex; flex-direction: column; z-index: 100; + padding-bottom: 10px; `; const InputContainer = styled.div` @@ -380,6 +382,7 @@ const InputContainer = styled.div` padding: 1rem; align-items: center; justify-content: space-between; + `; const InputTitle = styled.div` @@ -393,6 +396,7 @@ const InputTitle = styled.div` font-weight: 600; margin-right: 1.25rem; letter-spacing: -0.0225rem; + `; const InputBox = styled.input` @@ -415,8 +419,6 @@ const PeriodBox = styled.div` flex-direction: row; align-items: center; flex: 8; - .datepicker{ - } `; const ContentContainer = styled.div`