Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT] 마이페이지 커뮤니티 조회 및 삭제 연동 #81

Merged
merged 3 commits into from
Aug 21, 2024
Merged

[FEAT] 마이페이지 커뮤니티 조회 및 삭제 연동 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a98b95
[FEAT] 마이페이지 커뮤니티 조회 및 삭제 연동
haydenCho Aug 21, 2024
948e52c
[UPDATE] 임시 데이터 삭제
haydenCho Aug 21, 2024
993a6a1
Merge branch 'IT-Cotato:develop' into develop
haydenCho Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/api/instance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,10 @@ instance.interceptors.response.use(
console.log('Decoded Token:', checkAcces); // 디코딩된 토큰 로그 확인
removeSessionStorage('accessToken');
removeSessionStorage('role');
removeSessionStorage('memberId');
setSessionStorage('accessToken', accessToken);
setSessionStorage('role', checkAcces.role);
setSessionStorage('memberId', checkAcces.memberId);
}
if (refreshToken) {
const checkRefresh = jwtDecode(refreshToken);
Expand Down
23 changes: 21 additions & 2 deletions src/components/MyCommunityItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,36 @@
import { useNavigate } from "react-router-dom";
import { format } from 'date-fns';
import instance from "../api/instance";

const categoryMap = {
'FREE': '자유게시판',
'PORTFOLIO': '포트폴리오',
'TEAM': '팀원모집',
}

// 지원현황 페이지 - 아이템 컴포넌트
const MyCommunityItem = ({ id, category, title, writer, date }) => {
const nav = useNavigate();

// 삭제 함수 추가
const handleDelete = async () => {
try {
await instance.delete(`/api/post/${id}/delete`);
alert('삭제되었습니다.');
window.location.reload();
} catch (error) {
console.error('삭제 실패:', error);
alert('삭제에 실패했습니다.');
}
};

return (
<div className="apply-item-container h-[88px] my-[5px] text-[15px] border rounded-[10px] flex gap-[50px] flex bg-white items-center">
<div className="w-2/12 pl-[40px] cursor-pointer text-left font-medium">{category}</div>
<div className="w-2/12 pl-[40px] cursor-pointer text-left font-medium">{categoryMap[category]}</div>
<div className="w-6/12 pl-[100px] cursor-pointer text-left">{title}</div>
<div className="w-1/12 cursor-pointer">{writer}</div>
<div className="w-2/12">{`${format(new Date(date), 'yyyy.MM.dd')}`}</div>
<div onClick={()=>nav('/user/mypage/editinfo')} className="w-1/12 cursor-pointer text-[15px] text-gray-deleteBtn text-center">삭제</div>
<div onClick={handleDelete} className="w-1/12 cursor-pointer text-[15px] text-gray-deleteBtn text-center">삭제</div>
</div>
);
};
Expand Down
109 changes: 80 additions & 29 deletions src/pages/MyCommunity.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,69 @@ import MenubarMyPage from "../components/MenubarMyPage";
import MyCommunityItem from "../components/MyCommunityItem";
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import Toggle from "../components/Toggle";

const communityData = [
{
id: 0,
category: "포트폴리오",
title: "프론트엔드 개발자 구하는 방법 물어봅니다.",
writer: "김수윤",
date: new Date("2024-7-24"),
},
{
id: 1,
category: "자유",
title: "백엔드 스터디 같이 하실 분 찾아요",
writer: "김수윤",
date: new Date("2024-7-24"),
},
];
import instance from "../api/instance";

const MyCommunity = () => {
const [memberData, jobPostData, applicationData, applicaionDetailData, infoData] = useContext(GrowthStateContext);
const [selectedMenu, setSelectedMenu] = useState("작성한 글");
const [data, setData] = useState([]);
const memberId = sessionStorage.getItem('memberId');

// 선택된 메뉴에 따라 데이터를 가져오는 함수
const fetchData = async (menu) => {
let url = "";
let responseData = [];

try {
switch (menu) {
case "작성한 글": {
const response = await instance.get('/api/post');
if (response.status === 200) {
console.log(response.data.data);
responseData = response.data.data.posts;
} else {
console.log('사용자 작성 글 목록 조회 실패:', response.data.message);
}
break;
}

case "작성한 댓글": {
const response = await instance.get('/api/post');
if (response.status === 200) {
console.log(response.data.data);
responseData = response.data.data.commentList;
} else {
console.log('사용자 작성 댓글 목록 조회 실패:', response.data.message);
}
break;
}

case "저장한 글": {
url = `/api/post/saves/${memberId}/list`;
const response = await instance.get(url);
if (response.status === 200) {
console.log(response.data.data);
responseData = response.data.data;
} else {
console.log('사용자 저장 글 목록 조회 실패:', response.data.message);
}
break;
}

default:
console.error('알 수 없는 메뉴:', menu);
}

setData(responseData);

} catch (error) {
console.error('API 요청 에러:', error);
}
};

// 토글에서 메뉴 선택이 변경될 때마다 데이터를 요청함
useEffect(() => {
fetchData(selectedMenu);
}, [selectedMenu]);

// 아이콘 스타일
const iconClass = 'size-6 stroke-1';
Expand All @@ -34,15 +77,20 @@ const MyCommunity = () => {
<div>
<div className="mx-[70px] mt-[53px]">
<div>
<HeaderMyPage name={infoData.name} company={infoData.company} />
<HeaderMyPage />
</div>
<div className="mypage-content-container flex-col">
<div className="menubar">
<MenubarMyPage />
</div>
<div className="mypage-content h-[692px] bg-white flex flex-col mt-[28px] mb-[153px] rounded-[10px]">
<div className="mypage-toggle h-[112px] mt-[42px] mb-[28px] mr-[41px] flex justify-end relative">
<Toggle menuItems={["작성한 글", "작성한 댓글", "저장한 글"]} bg={'bg-navy-mypageToggle'} />
<Toggle
menuItems={["작성한 글", "작성한 댓글", "저장한 글"]}
bg={'bg-navy-mypageToggle'}
placeholder={"작성한 글"}
onChange={setSelectedMenu}
/>
</div>
<div className="mypage-list w-[100%]">
<div className="my-community-category flex gap-[50px] h-[61px] pt-[20px] pb-[21px] ml-[59px] mr-[50px] text-[16px] border-t-2 border-b">
Expand All @@ -53,17 +101,20 @@ const MyCommunity = () => {
<div className="w-1/12 h-[19px]"></div>
</div>
<div className="my-community-content h-[477px] ml-[61px] mr-[50px] my-[21px] flex-col">
{communityData.map((data)=>{// 아이템 순회하면서 렌더링
return (
{data && data.length > 0 ? (
data.map((item, index) => (
<MyCommunityItem
key={data.id}
category={data.category}
title={data.title}
writer={data.writer}
date={data.date}
key={index}
id={item.postId}
category={item.parentCategory || item.subCategory || "카테고리 없음"}
title={item.title || item.content}
writer={item.memberNickname || "작성자 없음"}
date={item.createdAt ? new Date(item.createdAt) : new Date()}
/>
);
})}
))
) : (
<div className="text-center py-8">데이터가 없습니다.</div>
)}
</div>
</div>
</div>
Expand Down