Skip to content

Commit

Permalink
feat : API 함수 작성
Browse files Browse the repository at this point in the history
- API 연결을 위한 postingAPI 작성

ref : #18
  • Loading branch information
minseoKim-11 committed Nov 11, 2024
1 parent 0339e76 commit 5bf5803
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 79 deletions.
3 changes: 2 additions & 1 deletion src/api/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
signupCEOAPI,
} from "./signupAPI";
import { loginAPI } from "./loginAPI";
import{ postJobPosting } from "./postingAPI";
import{ postJobPosting, updateJobPosting } from "./postingAPI";
import { postListAPI, searchPostListAPI } from "./homeAPI";

export {
Expand All @@ -15,6 +15,7 @@ export {
signupCEOAPI, // 사업자유저 회원가입 API
loginAPI, // 로그인 API
postJobPosting,
updateJobPosting,
postListAPI, // 알바리스트 불러오기(홈) API
searchPostListAPI, // 알바리스트 불러오기 (검색) API
};
79 changes: 30 additions & 49 deletions src/api/postingAPI.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,39 @@
import { privateAxios } from "../utils/customAxios";
import {privateAxios} from "../utils/customAxios";

export const postJobPosting = async (accessToken, dispatch, formData) => {
const headers = {
Authorization: `Bearer ${accessToken}`, // Bearer 토큰 설정
};
/*---- 게시글 등록 ----*/
export const postJobPosting = async (payload) => {

const { workLocation = "" } = formData;
const [doName = "", siName = "", detailName = ""] = workLocation.split(" ");
const { start = "09:00", end = "18:00" } = formData.workTime || {};
const endpoint = `/api/v1/post`;

const [startHour, startMinute] = start.split(":").map(Number);
const [endHour, endMinute] = end.split(":").map(Number);

const body = {
postId: 0,
userId: 1,
storeName: formData.storeName,
workPlaceAddress: formData.workLocation, //주소 필드 해뒀음
postData: {
doName,
siName,
detailName,
workType: formData.workTags[0] || "기타",
title: formData.title,
content: formData.description,
pay: parseInt(formData.pay, 10),
workStartHour: startHour,
workStartMinute: startMinute,
workEndHour: endHour,
workEndTimeMinute: endMinute,
isNegotiable: formData.isNegotiable || false,
applyNumber: formData.applyNumber,
workDays: formData.workDays.join(","),
isShortTermJob: formData.workPeriod === "단기",
payType: formData.payType,
isNumberPublic: formData.isNumberPublic,
imageList: formData.imageList || [""], // 이미지 리스트
imageUrlList: [""], // Swagger 요청 구조에 따라서 빈 리스트 추가
lastUpdatedTime: new Date().toISOString(),
},
};
try {
const result = await privateAxios.post(endpoint, payload);
return {
isSuccess: true,
message: result.data.message,
postId: result.data.postId,
};
} catch (error) {
return {
isSuccess: false,
message: error.response?.data?.message || "API 요청 실패",
};
}
};

const response = { isSuccess: false, message: "" };
/*---- 게시글 수정 ----*/
export const updateJobPosting = async (payload) => {
const endpoint = `api/v1/post/update`;

try {
const result = await privateAxios(accessToken, dispatch).post("/post", body, { headers });
if (result.status === 200) {
response.isSuccess = true;
response.message = result.data.message;
}
const result = await privateAxios.post(endpoint, payload);
return {
isSuccess: true,
message: result.data.message,
};
} catch (error) {
response.message = error.response?.data?.message || error.message;
console.error("API 요청 실패:", error);
return {
isSuccess: false,
message: error.response?.data?.message || "API 요청 실패",
};
}

return response;
};
16 changes: 15 additions & 1 deletion src/components/ButtonsModal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,20 @@ const ContentText = styled.button`

const ButtonsModal = ({ isMode, setIsMode, postId }) => {
const navigate = useNavigate();
//게시글 수정
const modifyPosts = () => {
const result = confirm("해당 게시글을 수정하시겠습니까?");
if(result){
navigate(`/modify`, {
state: {
postId: postId,
mode: "modify",
},
});
setIsMode(false); // 모달 닫기
};
}

// 게시글 삭제
const deletePosts = () => {
setIsMode((pre) => !pre);
Expand All @@ -56,7 +70,7 @@ const ButtonsModal = ({ isMode, setIsMode, postId }) => {
<>
<Modal $display={isMode}>
<Content>
<ContentText>수정</ContentText>
<ContentText onClick={modifyPosts}>수정</ContentText>
<ContentText onClick={deletePosts}>삭제</ContentText>
</Content>
</Modal>
Expand Down
62 changes: 62 additions & 0 deletions src/pages/recruitment/ModifyPost.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
const ModifyPost = () => {
navigate(`/post`, {
state: {
mode: "modify", // 수정 모드 설정
postData: {//세 게시글 데이터
}, // 현재 게시글 데이터 전달
},
});
};
// const ModifyPost = () => {
// const location = useLocation();
// const navigate = useNavigate();
// const { postId } = location.state || {};
// const [formData, setFormData] = useState(null); // 기존 게시글 데이터를 담을 state

// // 게시글 상세 정보 가져오기
// useEffect(() => {
// if (postId) {
// getPostDetails(postId).then((data) => {
// setFormData(data.postData); // 서버에서 받은 데이터 중 postData만 폼 데이터로 설정
// });
// }
// }, [postId]);

// const handleChange = (key, value) => {
// setFormData((prevData) => ({
// ...prevData,
// [key]: value,
// }));
// };

// // 게시글 수정 API 호출
// const handleSubmit = async (e) => {
// e.preventDefault();
// const response = await updatePost(postId, formData);
// if (response.isSuccess) {
// alert("게시글이 성공적으로 수정되었습니다.");
// navigate(`/post/detail/${postId}`); // 수정된 게시글 상세 페이지로 이동하도록 설정
// } else {
// alert("게시글 수정에 실패했습니다.");
// }
// };

// return (
// formData && (
// <form onSubmit={handleSubmit}>
// {/* 수정할 폼들을 넣을 필드 이후에 작성 예정, 여기서 handlChange*/}
// {/* <label>내용</label>
// <textarea
// value={formData.content}
// onChange={(e) => handleChange("content", e.target.value)}
// ></textarea> */}

// <button type="submit">저장</button>
// </form>
// )
// );
// };

export default ModifyPost;
123 changes: 95 additions & 28 deletions src/pages/recruitment/Posting.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import React, { useState } from "react";
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,
Expand All @@ -16,18 +20,18 @@ import {
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 location = useLocation();
const navigate = useNavigate();
const { mode, postData } = location.state || {};

// handleToggleClick 함수 정의
const handleToggleClick = (value) => {
console.log("Toggle clicked with value:", value);
setIsOptionSelected(true);
};

const [isOptionSelected, setIsOptionSelected] = useState(false);

const handleToggleClick = (value) => {
console.log("Toggle clicked with value:", value);
setIsOptionSelected(true);
};

const [formData, setFormData] = useState({
title: "",
Expand All @@ -42,8 +46,35 @@ const Posting = () => {
isNumberPublic: true,
description: "",
workPeriod: "1개월 이상",
imageList: [],
imageUrlList: [],
});

//전달된 데이터로 form 초기화 해줌
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,
Expand Down Expand Up @@ -74,13 +105,36 @@ const Posting = () => {
return { doName, siName, detailName };
};

const convertDays = (days) => {
const dayMap = {
: "MONDAY",
: "TUESDAY",
: "WEDNESDAY",
: "THURSDAY",
: "FRIDAY",
: "SATURDAY",
: "SUNDAY",
};

return days
.map((day) => {
const convertedDay = dayMap[day];
if (!convertedDay) {
console.warn(`Unknown day: ${day}`); // 디버깅용: 변환되지 않은 값 경고
}
return convertedDay || day;
})
.join(", ");
};

const createPayload = () => {
const workDays = convertDays(formData.workDays);
const { doName, siName, detailName } = parseAddress(formData.workLocation);
const [startHour, startMinute] = formData.workTime.start.split(":").map(Number);
const [endHour, endMinute] = formData.workTime.end.split(":").map(Number);

return {
postId: 0,
postId: mode === "modify" ? postData.postId : 0, // postId 수정모드 처리
userId: 1,
storeName: formData.storeName,
workPlaceAddress: formData.workLocation,
Expand All @@ -98,18 +152,17 @@ const Posting = () => {
workEndTimeMinute: endMinute,
isNegotiable: formData.isNegotiable || false,
applyNumber: formData.applyNumber,
workDays: formData.workDays.join(","), // workDays 배열을 String으로 변환
workDays,
isShortTermJob: formData.workPeriod === "단기",
payType: formData.payType,
isNumberPublic: formData.isNumberPublic,
imageList: [""],
imageUrlList: [""], // 빈 값 처리
imageList: formData.imageList, // 파일 이미지 전달
imageUrlList: formData.imageUrlList, // 업로드된 URL들
lastUpdatedTime: new Date().toISOString(),
},
};
};
};

const dispatch = useDispatch();
const accessToken = getAccessToken();

const handleSubmit = async () => {
Expand All @@ -118,19 +171,33 @@ const Posting = () => {
alert("모든 필드를 올바르게 입력해주세요.");
return;
}

const payload = createPayload();
const response = await postJobPosting(accessToken, dispatch, payload);

if (response.isSuccess) {
console.log("성공:", response.message);
alert("게시글이 성공적으로 등록되었습니다.");
} else {
console.error("실패:", response.message);
alert("게시글 등록에 실패했습니다.");

console.log("Form Data (사용자 입력):", formData);
console.log("Payload (API로 전송되는 데이터):", payload);

try {
const endpoint = mode === "modify" ? "api/v1/post/update" : "api/v1/post";
console.log("Attempting to call API Endpoint:", endpoint);

const response =
mode === "modify"
? await updateJobPosting(accessToken, payload) // 수정 API 호출
: await postJobPosting(accessToken, payload); // 등록 API 호출

if (response.isSuccess) {
alert(mode === "modify" ? "게시글이 성공적으로 수정되었습니다." : "게시글이 성공적으로 등록되었습니다.");
navigate(`/post/detail/${response.postId}`); // 성공 시 상세 페이지로 이동
} else {
alert("게시글 저장에 실패했습니다.");
}
} catch (error) {
console.error("API 호출 중 오류 발생:", error);
alert("실패");
}
};

return (
<PageContainer>
<ContentContainer>
Expand Down

0 comments on commit 5bf5803

Please sign in to comment.