diff --git a/src/components/HeaderMyPage.jsx b/src/components/HeaderMyPage.jsx index 2785871..11b8fc3 100644 --- a/src/components/HeaderMyPage.jsx +++ b/src/components/HeaderMyPage.jsx @@ -1,11 +1,14 @@ -const HeaderMyPage = ({name, company}) => { +const HeaderMyPage = () => { + const name = sessionStorage.getItem('nickname'); + const company = sessionStorage.getItem('field'); + return (
Profile
-
+
{name}
{company}
diff --git a/src/components/InputField.jsx b/src/components/InputField.jsx index cbc8d0b..95e6a94 100644 --- a/src/components/InputField.jsx +++ b/src/components/InputField.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; -const InputField = ({ placeholderText, className, icon: Icon, onChange, type, onKeyDown, place, value, showError }) => { +const InputField = ({ placeholderText, className, icon: Icon, onChange, type, onKeyDown, place, value, showError, name }) => { let inputStyle = 'border border-[#26408B] rounded-[10px] w-[336px] h-14 pl-[65px] placeholder:text-[17px]'; switch (place) { @@ -29,24 +29,27 @@ const InputField = ({ placeholderText, className, icon: Icon, onChange, type, on break; // 마이페이지 페이지에서 사용하는 입력창 case 'belongInfo': - inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-[447px] h-[48px] pl-[20px] placeholder:text-[17px]'; + inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-[447px] h-[48px] pl-[20px] placeholder:text-[17px] mb-[15px] outline-none'; + break; + case 'belongInfoReadOnly': + inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-[447px] h-[48px] pl-[20px] placeholder:text-[17px] mb-[15px] outline-none disabled'; break; case 'abilityInfo': - inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-4/5 h-[128px] pl-[20px] placeholder:text-[17px]'; + inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-4/5 h-[128px] pl-[20px] placeholder:text-[17px] outline-none'; break; case 'awardInfo': - inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-4/5 h-[90px] pl-[20px] placeholder:text-[17px]'; + inputStyle = 'bg-[#FFFFFF] rounded-[10px] w-4/5 h-[90px] pl-[20px] placeholder:text-[17px] outline-none'; break; case 'setting': - inputStyle = 'bg-[#F5F5F5] rounded-[10px] w-[60%] h-[48px] pl-[20px] placeholder:text-[14px] font-normal'; + inputStyle = 'bg-[#F5F5F5] rounded-[10px] w-[60%] h-[48px] pl-[20px] placeholder:text-[14px] font-normal outline-none'; break; case 'careerInfo': inputStyle = - 'bg-[#FFFFFF] rounded-[10px] w-full h-[350px] pl-[20px] placeholder:text-[17px] placeholder:text-wrap'; + 'bg-[#FFFFFF] rounded-[10px] w-full h-[350px] pl-[20px] placeholder:text-[17px] placeholder:text-wrap outline-none'; break; case 'aboutInfo': inputStyle = - 'bg-[#FFFFFF] rounded-[10px] w-full h-[325px] pl-[20px] placeholder:text-[17px] placeholder:text-wrap'; + 'bg-[#FFFFFF] rounded-[10px] w-full h-[325px] pl-[20px] placeholder:text-[17px] placeholder:text-wrap outline-none'; break; case 'applyTitle': inputStyle = @@ -77,6 +80,7 @@ const InputField = ({ placeholderText, className, icon: Icon, onChange, type, on onChange={onChange} onKeyDown={onKeyDown} value={value} + name={name} /> {showError && ( { const nav = useNavigate(); - const [memberData, jobPostData, applicationData, applicaionDetailData, infoData] = useContext(GrowthStateContext); + const [infoData, setInfoData] = useState(); + const [formData, setFormData] = useState({ + career: "", + aboutMe: "" + }); + + // 서버로부터 데이터 GET + useEffect(() => { + const fetchData = async () => { + try { + const response = await instance.get('/api/member/info'); + if (response.data && response.data.status === 'success') { + console.log(response.data.data); + setInfoData(response.data.data); // 받아온 데이터를 applyData 상태에 저장 + // 받아온 데이터를 formData에 저장 + setFormData({ + educationBackground: response.data.data.educationBackground || "", + skill: response.data.data.skill || "", + activityHistory: response.data.data.activityHistory || "", + award: response.data.data.award || "", + languageScore: response.data.data.languageScore || "", + career: response.data.data.career || "", + aboutMe: response.data.data.aboutMe || "" + }); + } + } catch (error) { + console.error('Error fetching apply data:', error); + } + }; + + fetchData(); + }, []); + + // infoData가 null일 때 로딩 스피너나 대체 UI를 표시할 수 있음 + if (!infoData) { + return
Loading...
; // 데이터를 불러오는 동안 표시될 내용 + } + + // 입력값을 업데이트하는 함수 + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData({ + ...formData, + [name]: value + }); + }; + + // 저장 버튼 클릭 시 서버로 POST 요청 + const handleSave = async () => { + try { + const payload = { + ...formData, + }; + const response = await instance.post('/api/member/additional-info', payload); + if (response.data.status === 'success') { + nav("/user/mypage"); // 저장 후 마이페이지로 이동 + } + } catch (error) { + console.error('Error saving info data:', error); + } + }; // 텍스트 카테고리 스타일 (소속, 교육 ...) const textCategoryClass = 'font-semibold h-[21px] text-[18px] mb-[24px]'; @@ -15,22 +75,34 @@ const EditMyAbout = () => {
-
소속
+
경력
- +
-
이력 및 활동
+
나에 대해서
- +
-
); diff --git a/src/pages/EditMyInfo.jsx b/src/pages/EditMyInfo.jsx index ca6325c..8e38333 100644 --- a/src/pages/EditMyInfo.jsx +++ b/src/pages/EditMyInfo.jsx @@ -1,29 +1,131 @@ import { useNavigate } from "react-router-dom"; -import { useContext } from "react"; -import { GrowthStateContext } from "../App"; +import { useState, useEffect } from "react"; import Button from "../components/Button"; import InputField from "../components/InputField"; +import instance from "../api/instance"; + +const jobMap = { + "COLLEGE_STUDENT": "대학생", + "GRADUTE": "졸업생", + "JOB_SEEKER": "구직자", + "PREPARING_FOR_JOB_CHACE": "이직자", +} const EditMyInfo = () => { const nav = useNavigate(); - const [memberData, jobPostData, applicationData, applicaionDetailData, infoData] = useContext(GrowthStateContext); + const [infoData, setInfoData] = useState(); + const [formData, setFormData] = useState({ + educationBackground: "", + skill: "", + activityHistory: "", + award: "", + languageScore: "", + }); + + // 서버로부터 데이터 GET + useEffect(() => { + const fetchData = async () => { + try { + const response = await instance.get('/api/member/info'); + if (response.data && response.data.status === 'success') { + console.log(response.data.data); + setInfoData(response.data.data); // 받아온 데이터를 applyData 상태에 저장 + // 받아온 데이터를 formData에 저장 + setFormData({ + educationBackground: response.data.data.educationBackground || "", + skill: response.data.data.skill || "", + activityHistory: response.data.data.activityHistory || "", + award: response.data.data.award || "", + languageScore: response.data.data.languageScore || "", + career: response.data.data.career || "", + aboutMe: response.data.data.aboutMe || "" + }); + } + } catch (error) { + console.error('Error fetching apply data:', error); + } + }; + + fetchData(); + }, []); + + // infoData가 null일 때 로딩 스피너나 대체 UI를 표시할 수 있음 + if (!infoData) { + return
Loading...
; // 데이터를 불러오는 동안 표시될 내용 + } + + // 입력값을 업데이트하는 함수 + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData({ + ...formData, + [name]: value + }); + }; + + // 저장 버튼 클릭 시 서버로 POST 요청 + const handleSave = async () => { + try { + const payload = { + ...formData, + }; + const response = await instance.post('/api/member/additional-info', payload); + if (response.data.status === 'success') { + nav("/user/mypage"); // 저장 후 마이페이지로 이동 + } + } catch (error) { + console.error('Error saving info data:', error); + } + }; // 텍스트 카테고리 스타일 (소속, 교육 ...) - const textCategoryClass = 'font-semibold h-[21px] text-[18px] mb-[24px]'; + const textCategoryClass = 'font-semibold h-[21px] text-[18px] mb-[20px]'; return (
-
-
+
+
소속
- + + {/* */}
-
교육
+
직업
+
+ + {/* */} +
+
+
+
학력
- +
@@ -31,30 +133,54 @@ const EditMyInfo = () => {
스킬
- +
이력 및 활동
- +
수상내역
- +
토플점수
- +
-
-
); diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx index 7bcb79b..1e38bc6 100644 --- a/src/pages/MyPage.jsx +++ b/src/pages/MyPage.jsx @@ -1,17 +1,46 @@ import { useNavigate } from "react-router-dom"; -import { GrowthStateContext } from "../App"; -import { useContext } from "react"; import HeaderMyPage from "../components/HeaderMyPage"; import MenubarMyPage from "../components/MenubarMyPage"; +import { useState, useEffect } from "react"; +import instance from "../api/instance"; + +const jobMap = { + "COLLEGE_STUDENT": "대학생", + "GRADUTE": "졸업생", + "JOB_SEEKER": "구직자", + "PREPARING_FOR_JOB_CHACE": "이직자", +} const MyPage = () => { const nav = useNavigate(); - const [memberData, jobPostData, applicationData, applicaionDetailData, infoData] = useContext(GrowthStateContext); + const [infoData, setInfoData] = useState(); + + // 서버로부터 데이터 GET + useEffect(() => { + const fetchData = async () => { + try { + const response = await instance.get('/api/member/info'); + if (response.data && response.data.status === 'success') { + console.log(response.data.data); + setInfoData(response.data.data); // 받아온 데이터를 applyData 상태에 저장 + } + } catch (error) { + console.error('Error fetching apply data:', error); + } + }; + + fetchData(); + }, []); + + // infoData가 null일 때 로딩 스피너나 대체 UI를 표시할 수 있음 + if (!infoData) { + return
Loading...
; // 데이터를 불러오는 동안 표시될 내용 + } // 텍스트 공통 스타일 - const textClass = 'mypage-text mb-[55px] flex-col text-left'; + const textClass = 'mypage-text mb-[30px] flex-col text-left'; // 텍스트 카테고리 스타일 (소속, 교육 ...) - const textCategoryClass = 'font-semibold text-[17px] mb-[16px]'; + const textCategoryClass = 'font-semibold text-[17px] mb-[14px]'; // 텍스트 내용 스타일 const textContentClass = 'font-regular text-[16px] text-wrap'; @@ -19,7 +48,7 @@ const MyPage = () => {
- +
@@ -31,14 +60,18 @@ const MyPage = () => {
nav('/user/mypage/editinfo')} className="cursor-pointer inline text-[14px] text-navy-dark">편집
-
+
소속
{infoData.belong}
-
교육
-
{infoData.education}
+
직업
+
{jobMap[infoData.job]}
+
+
+
학력
+
{infoData.educationBackground}
@@ -49,7 +82,7 @@ const MyPage = () => {
이력 및 활동
-
{infoData.activity}
+
{infoData.activityHistory}
수상내역
@@ -57,7 +90,7 @@ const MyPage = () => {
토플 점수
-
{infoData.toefl}
+
{infoData.languageScore}
@@ -71,10 +104,10 @@ const MyPage = () => {
{infoData.career}
-
+
나에 대해서
-
{infoData.about}
+
{infoData.aboutMe}