diff --git a/src/api/index.js b/src/api/index.js index bfc7c8c..fbf5bd4 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -14,8 +14,8 @@ export { signupUserAPI, // 일반유저 회원가입 API signupCEOAPI, // 사업자유저 회원가입 API loginAPI, // 로그인 API - postJobPosting, - updateJobPosting, + postJobPosting, //모집글 작성 API + updateJobPosting, //모집글 수정 API postListAPI, // 알바리스트 불러오기(홈) API searchPostListAPI, // 알바리스트 불러오기 (검색) API }; diff --git a/src/api/postingAPI.js b/src/api/postingAPI.js index 0073687..5a42f91 100644 --- a/src/api/postingAPI.js +++ b/src/api/postingAPI.js @@ -1,7 +1,7 @@ import { privateAxios } from "../utils/customAxios"; /*---- 게시글 등록 ----*/ -export const postJobPosting = async (payload) => { +export const postJobPosting = async (accessToken, payload) => { const response = { isSuccess: false, message: "", @@ -9,46 +9,54 @@ export const postJobPosting = async (payload) => { }; try { - const result = await privateAxios.get("/api/v1/post", { - params: payload, - }); - + const result = await privateAxios(accessToken).patch("/api/v1/post", payload); + if (result.status === 200) { response.isSuccess = true; response.message = result.data.message; - response.data = result.data.data; + response.data = result.data.data; // 필요에 따라 데이터 할당 } - } catch (error) { + } catch (err) { response.isSuccess = false; - response.message = - error.response?.status === 404 - ? "존재하지 않는 유저입니다." - : error.response?.status === 400 - ? "정의되지 않은 유저입니다." - : error.response?.data?.message || error.message; + response.message = err.response?.data?.message || err.message; + + if (err.response?.status === 401) { + alert("인증이 필요합니다. 다시 로그인해주세요."); + // 여기서 로그아웃 및 재로그인 프로세스를 트리거할 수 있음 + } + } return response; }; -/*---- 게시글 수정 ----*/ -export const updateJobPosting = async (payload) => { +// /*---- 게시글 수정 ----*/ +export const updateJobPosting = async (accessToken, postId, postData) => { const response = { isSuccess: false, message: "", + data: null, }; try { - const result = await privateAxios.patch("/{postId}", payload); + const body = { + postId, // 백엔드에서 postId가 필요하지 않다고 명시했으나, 요청 형식에 포함 + userId: 0, // 사용하지 않음 + storeName: "", // 수정 불가 + workPlaceAddress: "", // 수정 불가 + postData, // 수정 가능한 postData만 포함 + }; + + const result = await privateAxios(accessToken).patch(`/api/v1/post/${postId}`, body); if (result.status === 200) { response.isSuccess = true; response.message = result.data.message; + response.data = result.data.data; } - } catch (error) { + } catch (err) { response.isSuccess = false; - response.message = - error.response?.data?.message || "API 요청 실패"; + response.message = err.response?.data?.message || err.message; } return response; diff --git a/src/components/ButtonsModal.jsx b/src/components/ButtonsModal.jsx index f8ef401..d1ff80d 100644 --- a/src/components/ButtonsModal.jsx +++ b/src/components/ButtonsModal.jsx @@ -44,17 +44,15 @@ const ButtonsModal = ({ isMode, setIsMode, postId }) => { const navigate = useNavigate(); //게시글 수정 const modifyPosts = () => { - const result = confirm("해당 게시글을 수정하시겠습니까?"); - if(result){ - navigate(`/modify`, { - state: { - postId: postId, - mode: "modify", - }, - }); - setIsMode(false); // 모달 닫기 + if (confirm("해당 게시글을 수정하시겠습니까?")) { + navigate(`/modify`, { + state: { + postId: postId, + mode: "modify", // 수정 모드 전달 + }, + }); + } }; -} // 게시글 삭제 const deletePosts = () => { diff --git a/src/pages/recruitment/Posting.jsx b/src/pages/recruitment/Posting.jsx index 33deed3..f32fd02 100644 --- a/src/pages/recruitment/Posting.jsx +++ b/src/pages/recruitment/Posting.jsx @@ -1,35 +1,20 @@ -import React, { useState, useEffect } from "react"; -import { useLocation, useNavigate } from "react-router-dom"; -import { useDispatch } from "react-redux"; -import { postJobPosting, updateJobPosting } from "../../api"; // 수정 및 포스팅 API -import getAccessToken from "../../utils/getAccessToken"; -import { PageContainer, ContentContainer, FixedButtonContainer } from "../../styles/posting/PostingStyles"; -import { - InputField, - Tag, - Toggle, - WeekdayPicker, - WorkTimePicker, - PayPicker, - AddressInput, - PhotoUpload, - DescriptionInput, - PhoneInput, - Button, -} from "../../components"; +import React, { useState } from "react"; +import { PageContainer, ContentContainer, FixedButtonContainer} from "../../styles/posting/PostingStyles"; +import {InputField,Tag,Toggle,WeekdayPicker,WorkTimePicker,PayPicker,AddressInput,PhotoUpload,DescriptionInput,PhoneInput,Button} from "../../components"; import "../../styles/posting/Posting.css"; import { POSTING_UPMU_TAG } from "../../constants"; +import { postJobPosting } from "../../api"; +import getAccessToken from "../../utils/getAccessToken"; +import { useDispatch } from "react-redux"; const Posting = () => { const [isOptionSelected, setIsOptionSelected] = useState(false); + // 토글 클릭 시 하위 컴포넌트 활성화 시키도록 설정해둠 const handleToggleClick = (value) => { - setIsOptionSelected(true); + handleChange("selectedOption", value); + setIsOptionSelected(true); }; - const location = useLocation(); - const navigate = useNavigate(); - const { mode, postData } = location.state || {}; - const [formData, setFormData] = useState({ title: "", workTags: [], @@ -42,36 +27,10 @@ const Posting = () => { applyNumber: "", isNumberPublic: true, description: "", - workPeriod: "1개월 이상", - imageList: [], - imageUrlList: [], + workPeriod: "1개월 이상" }); - //전달된 데이터로 formData 초기화 해줌 - useEffect(() => { - if (mode === "modify" && postData) { - setFormData({ - title: postData.title, - workTags: [postData.workType], - workDays: postData.workDays.split(","), - workTime: { - start: `${postData.workStartHour}:${postData.workStartMinute}`, - end: `${postData.workEndHour}:${postData.workEndTimeMinute}`, - }, - pay: postData.pay, - payType: postData.payType, - workLocation: `${postData.doName} ${postData.siName} ${postData.detailName}`, - storeName: postData.storeName, - applyNumber: postData.applyNumber, - isNumberPublic: postData.isNumberPublic, - description: postData.content, - workPeriod: postData.isShortTermJob ? "단기" : "장기", - imageList: postData.imageList || [], - imageUrlList: postData.imageUrlList || [], - }); - } - }, [postData, mode]); - + // 값의 길이에 대한 유효성 검증하여 제출을 막아둠 const [validStates, setValidStates] = useState({ title: true, description: true, @@ -79,13 +38,19 @@ const Posting = () => { }); const handleChange = (key, value) => { - setFormData((prev) => ({ ...prev, [key]: value })); + setFormData((prev) => ({ + ...prev, + [key]: value, + })); }; const handleValidityChange = (key, isValid) => { - setValidStates((prev) => ({ ...prev, [key]: isValid })); + setValidStates((prev) => ({ + ...prev, + [key]: isValid, + })); }; - + const handlePhoneInputChange = ({ phone, noCalls }) => { handleChange("applyNumber", phone); handleChange("isNumberPublic", !noCalls); @@ -106,17 +71,17 @@ const Posting = () => { 토: "SATURDAY", 일: "SUNDAY", }; - return days.map((day) => dayMap[day] || day).join(","); + return days.map((day) => dayMap[day]).join(", "); }; const createPayload = () => { - const workDays = convertDays(formData.workDays); const { doName, siName, detailName } = parseAddress(formData.workLocation); + const workDays = convertDays(formData.workDays); const [startHour, startMinute] = formData.workTime.start.split(":").map(Number); const [endHour, endMinute] = formData.workTime.end.split(":").map(Number); - + return { - postId: mode === "modify" ? postData.postId : 0, + postId: 0, userId: 1, storeName: formData.storeName, workPlaceAddress: formData.workLocation, @@ -138,44 +103,50 @@ const Posting = () => { isShortTermJob: formData.workPeriod === "단기", payType: formData.payType, isNumberPublic: formData.isNumberPublic, - imageList: formData.imageList, - imageUrlList: formData.imageUrlList, + imageList: [""], + imageUrlList: [""], // 빈 값 처리 lastUpdatedTime: new Date().toISOString(), + }, }; }; - const accessToken = getAccessToken(); - - const handleSubmit = async () => { - if (!Object.values(validStates).every(Boolean)) { - alert("모든 필드를 올바르게 입력해주세요."); - return; - } - - const payload = createPayload(); - - console.log("Form Data (사용자 입력):", formData); - console.log("Payload (API로 전송되는 데이터):", payload); + const validateForm = (payload, formData) => { + const requiredFields = { + "제목": payload.postData.title, + "하는 일": payload.postData.workType, + "일하는 기간": formData.workPeriod, + "일하는 요일": formData.workDays, + "일하는 시간": formData.workTime.start && formData.workTime.end, + "급여": formData.pay, + "일하는 장소": formData.workLocation, + "업체명": payload.storeName, + "연락처": payload.postData.applyNumber, + }; - try { - const response = - mode === "modify" - ? await updateJobPosting(payload) - : await postJobPosting(payload); - - if (response.isSuccess) { - alert(mode === "modify" ? "게시글이 성공적으로 수정되었습니다." : "게시글이 성공적으로 등록되었습니다."); - navigate(`/post/detail/${response.data.postId}`); - } else { - alert("게시글 저장에 실패했습니다."); + for (const [label, value] of Object.entries(requiredFields)) { + if (!value || (Array.isArray(value) && value.length === 0)) { + alert(`${label}을(를) 입력해주세요.`); + return false; // 유효성 검사 실패 } - } catch (error) { - console.error("API 호출 중 오류 발생:", error); - alert("서버와의 통신 중 문제가 발생했습니다."); } + return true; // 유효성 검사 성공 }; + const handleSubmit = () => { + const allValid = Object.values(validStates).every((isValid) => isValid); + if (!allValid) { + alert("모든 필드를 올바르게 입력해주세요."); + return; + } + + const payload = createPayload(); // payload 생성 로직 분리 + if (!validateForm(payload, formData)) return; // 유효성 검사 실패 시 중단 + console.log("Payload:", payload); + // API 호출 + // axios.post('/api/posting', payload).then(...); + }; + return ( @@ -256,7 +227,7 @@ const Posting = () => {
handleChange("description", value)} onValidityChange={(isValid) => handleValidityChange("description", isValid)} /> @@ -293,7 +264,7 @@ const Posting = () => { size="18px" onClick={handleSubmit} > - {mode === "modify" ? "수정하기" : "등록하기"} + 다음