Skip to content

Commit 630fd80

Browse files
seungw0oseungw0o
committed
Merge branch 'develop'
2 parents d3a132d + dc358ee commit 630fd80

File tree

8 files changed

+263
-211
lines changed

8 files changed

+263
-211
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@tanstack/react-query": "^5.83.0",
67
"@team-aliens/design-system": "^1.3.42",
78
"@testing-library/jest-dom": "^5.14.1",
89
"@testing-library/react": "^13.0.0",

‎src/components/Volunteer/ApplicationHistory.tsx‎

Lines changed: 89 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,110 @@
1-
import { useEffect, useState } from "react";
2-
import styled from "styled-components"
3-
import { getMyVolunteers } from "../../apis/volunteers";
4-
import { getMyVolunteersResponse } from "../../apis/volunteers/response";
5-
import { VolunteerStatus } from "../../apis/volunteers/response";
6-
import { deleteApplicationVolunteer } from "../../apis/volunteers";
7-
import { useLocation } from "react-router-dom";
1+
import styled from 'styled-components';
2+
import { useLocation } from 'react-router-dom';
3+
import {
4+
useGetMyVolunteers,
5+
useDeleteApplicationVolunteer,
6+
} from '../../hooks/useVolunteerApi';
7+
import { VolunteerStatus } from '../../apis/volunteers/response';
8+
import React from 'react';
89

910
enum THEME {
10-
'LIGHT' = 'LIGHT',
11-
'DARK' = 'DARK',
11+
LIGHT = 'LIGHT',
12+
DARK = 'DARK',
1213
}
1314

1415
interface ApplicationHistoryProps {
15-
status: VolunteerStatus
16-
name: string;
17-
volunteerId: string;
16+
status: VolunteerStatus;
17+
name: string;
18+
volunteerId: string;
1819
}
1920

20-
export const ApplicationHistory = ({name, status, volunteerId}: ApplicationHistoryProps) => {
21-
const [histories, setHistories] = useState<any[]>([]);
22-
const location = useLocation();
23-
const initTheme = new URLSearchParams(location.search);
24-
const [userTheme] = useState<THEME>(
25-
initTheme.get('theme') === 'dark' ? THEME.DARK : THEME.LIGHT,
26-
)
21+
export const ApplicationHistory = ({
22+
name,
23+
status,
24+
volunteerId,
25+
}: ApplicationHistoryProps) => {
26+
const location = useLocation();
27+
const initTheme = new URLSearchParams(location.search);
28+
const [userTheme] = React.useState<THEME>(
29+
initTheme.get('theme') === 'dark' ? THEME.DARK : THEME.LIGHT,
30+
);
2731

28-
const handleDelete = async () => {
29-
try {
30-
await deleteApplicationVolunteer(volunteerId);
31-
setHistories(histories.filter(history => history.volunteer_id !== volunteerId));
32-
} catch (error) {
33-
console.log(error);
34-
}
35-
}
32+
const { data, refetch } = useGetMyVolunteers();
3633

37-
useEffect(() => {
38-
getMyVolunteers()
39-
.then((response: getMyVolunteersResponse) => {
40-
setHistories(response.volunteer_applications || []);
41-
})
42-
.catch((error) => {
43-
console.error('내 봉사 신청 내역을 가져오는 중 오류가 발생했습니다: ', error);
44-
});
45-
}, []);
34+
const deleteMutation = useDeleteApplicationVolunteer();
4635

47-
const getButtonLabel = () => {
48-
if (status === 'APPLYING') return '신청중';
49-
if (status === 'APPLIED') return '신청 완료';
36+
const handleDelete = async () => {
37+
try {
38+
await deleteMutation.mutateAsync(volunteerId);
39+
await refetch();
40+
} catch (error) {
41+
console.error('삭제 중 에러:', error);
5042
}
43+
};
5144

52-
return (
53-
<>
54-
<Wrapper Theme={userTheme}>
55-
<Name Theme={userTheme}>{name}</Name>
56-
<Button>{getButtonLabel()}</Button>
57-
{status === 'APPLYING' && (
58-
<CancleButton Theme={userTheme} onClick={handleDelete}>취소</CancleButton>
59-
)}
60-
</Wrapper>
61-
</>
62-
)
63-
}
45+
const getButtonLabel = () => {
46+
if (status === 'APPLYING') return '신청중';
47+
if (status === 'APPLIED') return '신청 완료';
48+
return '';
49+
};
50+
51+
const application = data?.volunteer_applications?.find(
52+
(app) => app.volunteer_id === volunteerId,
53+
);
54+
if (!application) return null;
55+
56+
return (
57+
<Wrapper Theme={userTheme}>
58+
<Name Theme={userTheme}>{name}</Name>
59+
<Button>{getButtonLabel()}</Button>
60+
{status === 'APPLYING' && (
61+
<CancleButton Theme={userTheme} onClick={handleDelete}>
62+
취소
63+
</CancleButton>
64+
)}
65+
</Wrapper>
66+
);
67+
};
6468

65-
const Wrapper = styled.div<{Theme: THEME}>`
66-
width: 100%;
67-
height: 74px;
68-
display: flex;
69-
padding: 16px;
70-
align-items: center;
71-
background-color: ${({Theme}) => Theme === THEME.LIGHT ? 'white' : '2C2C2E'};
72-
border-radius: 8px;
69+
const Wrapper = styled.div<{ Theme: THEME }>`
70+
width: 100%;
71+
height: 74px;
72+
display: flex;
73+
padding: 16px;
74+
align-items: center;
75+
background-color: ${({ Theme }) =>
76+
Theme === THEME.LIGHT ? 'white' : '#2C2C2E'};
77+
border-radius: 8px;
7378
`;
7479

7580
const Button = styled.div`
76-
height: 30px;
77-
border-radius: 8px;
78-
display: flex;
79-
align-items: center;
80-
justify-content: center;
81-
font-weight: 600;
82-
font-size: 12px;
83-
background-color: '#F1F1F1';
84-
padding: 0 14px;
85-
background-color: #E4F3FF;
86-
color: #3C78EA;
81+
height: 30px;
82+
border-radius: 8px;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
font-weight: 600;
87+
font-size: 12px;
88+
background-color: #e4f3ff;
89+
color: #3c78ea;
90+
padding: 0 14px;
8791
`;
8892

89-
const CancleButton = styled.button<{Theme: THEME}>`
90-
background-color: ${({Theme}) => Theme === THEME.LIGHT ? '#F6F9FE' : 'black'};
91-
color: ${({Theme}) => Theme === THEME.LIGHT ? 'black' : 'white'};
92-
width: 49px;
93-
height: 30px;
94-
border-radius: 8px;
95-
margin-left: 6px;
96-
font-weight: 600;
97-
font-size: 12px;
93+
const CancleButton = styled.button<{ Theme: THEME }>`
94+
background-color: ${({ Theme }) =>
95+
Theme === THEME.LIGHT ? '#F6F9FE' : 'black'};
96+
color: ${({ Theme }) => (Theme === THEME.LIGHT ? 'black' : 'white')};
97+
width: 49px;
98+
height: 30px;
99+
border-radius: 8px;
100+
margin-left: 6px;
101+
font-weight: 600;
102+
font-size: 12px;
98103
`;
99104

100-
const Name = styled.p<{Theme: THEME}>`
101-
font-size: 14px;
102-
font-weight: 600;
103-
margin-right: auto;
104-
color: ${({Theme}) => Theme === THEME.LIGHT ? 'black' : 'white'};
105+
const Name = styled.p<{ Theme: THEME }>`
106+
font-size: 14px;
107+
font-weight: 600;
108+
margin-right: auto;
109+
color: ${({ Theme }) => (Theme === THEME.LIGHT ? 'black' : 'white')};
105110
`;

0 commit comments

Comments
 (0)