Skip to content

Commit 73fd33d

Browse files
smb0123smb0123
authored
프로덕션 서버 최신화 (#293)
2 parents d360edf + ba2de02 commit 73fd33d

File tree

10 files changed

+179
-66
lines changed

10 files changed

+179
-66
lines changed

‎design-system/src/lib/button/button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export function Button({
3131
return (
3232
<button
3333
{...props}
34+
disabled={disabled}
3435
className={clsx(
3536
'rounded-lg transition-all duration-150 ease-in-out',
3637
disabled

‎service-apply/src/assets/spinner.css‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@
99
box-sizing: border-box;
1010
display: block;
1111
position: absolute;
12-
left: calc(50% - 40px);
13-
top: calc(50% - 40px);
14-
transform: translate(-50%, -50%);
12+
left: 50%;
13+
top: 50%;
1514
width: 80px;
1615
height: 80px;
17-
margin: 8px;
16+
margin: -40px 0 0 -40px;
1817
border: 8px solid black;
1918
border-radius: 50%;
2019
animation: lds-ring 1.2s 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;

‎service-apply/src/components/apply/ApplyForm.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { AFFILIATION_LIST } from '../../constants/affiliation';
1616
import { DEPARTMENT_LIST } from '../../constants/department';
1717
import { PrivacyCheckModal } from './PrivacyCheckModal';
1818
import { Spinner } from '../../assets/Spinner';
19+
import Loader from '../common/Loader';
1920

2021
const DEFAULT_PARKING_SECTION_OPTIONS = [
2122
{
@@ -72,6 +73,7 @@ export const ApplyForm = () => {
7273
setIsAgreed,
7374
isError,
7475
errorMessage,
76+
temporarySaveStatus,
7577
} = useApplyForm();
7678

7779
const parkingSectionOptions = DEFAULT_PARKING_SECTION_OPTIONS.concat(
@@ -221,8 +223,16 @@ export const ApplyForm = () => {
221223
</Txt>
222224
)}
223225
<div className="flex flex-row justify-between mt-2 mb-12">
224-
<Button color="secondary" onClick={onTemporarySave}>
225-
임시 저장
226+
<Button
227+
color="secondary"
228+
onClick={onTemporarySave}
229+
disabled={temporarySaveStatus}
230+
>
231+
{temporarySaveStatus ? (
232+
<Loader color="#000" size="sm" />
233+
) : (
234+
'임시 저장'
235+
)}
226236
</Button>
227237
<Button
228238
color="primary"

‎service-apply/src/components/common/Loader.css‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
.lds-roller {
22
/* color: #1c4c5b; */
3+
--loader-size: 80px;
4+
--loader-center: 40px;
5+
--loader-dot-size: 7.2px;
6+
--loader-dot-margin: -3.6px;
37
}
48
.lds-roller,
59
.lds-roller div,
@@ -9,78 +13,108 @@
913
.lds-roller {
1014
display: inline-block;
1115
position: relative;
12-
width: 80px;
13-
height: 80px;
14-
}
16+
width: var(--loader-size);
17+
height: var(--loader-size);
18+
}
19+
20+
/* Size variants */
21+
.lds-roller--sm {
22+
--loader-size: 40px;
23+
--loader-center: 20px;
24+
--loader-dot-size: 3.6px;
25+
--loader-dot-margin: -1.8px;
26+
}
27+
28+
.lds-roller--md {
29+
--loader-size: 80px;
30+
--loader-center: 40px;
31+
--loader-dot-size: 7.2px;
32+
--loader-dot-margin: -3.6px;
33+
}
34+
35+
.lds-roller--lg {
36+
--loader-size: 120px;
37+
--loader-center: 60px;
38+
--loader-dot-size: 10.8px;
39+
--loader-dot-margin: -5.4px;
40+
}
41+
42+
.lds-roller--xl {
43+
--loader-size: 160px;
44+
--loader-center: 80px;
45+
--loader-dot-size: 14.4px;
46+
--loader-dot-margin: -7.2px;
47+
}
48+
1549
.lds-roller div {
1650
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
17-
transform-origin: 40px 40px;
51+
transform-origin: var(--loader-center) var(--loader-center);
1852
}
1953
.lds-roller div:after {
2054
content: ' ';
2155
display: block;
2256
position: absolute;
23-
width: 7.2px;
24-
height: 7.2px;
57+
width: var(--loader-dot-size);
58+
height: var(--loader-dot-size);
2559
border-radius: 50%;
2660
background: currentColor;
27-
margin: -3.6px 0 0 -3.6px;
61+
margin: var(--loader-dot-margin) 0 0 var(--loader-dot-margin);
2862
}
2963
.lds-roller div:nth-child(1) {
3064
animation-delay: -0.036s;
3165
}
3266
.lds-roller div:nth-child(1):after {
33-
top: 62.62742px;
34-
left: 62.62742px;
67+
top: calc(var(--loader-center) + var(--loader-center) * 0.5656);
68+
left: calc(var(--loader-center) + var(--loader-center) * 0.5656);
3569
}
3670
.lds-roller div:nth-child(2) {
3771
animation-delay: -0.072s;
3872
}
3973
.lds-roller div:nth-child(2):after {
40-
top: 67.71281px;
41-
left: 56px;
74+
top: calc(var(--loader-center) + var(--loader-center) * 0.6928);
75+
left: calc(var(--loader-center) + var(--loader-center) * 0.4);
4276
}
4377
.lds-roller div:nth-child(3) {
4478
animation-delay: -0.108s;
4579
}
4680
.lds-roller div:nth-child(3):after {
47-
top: 70.90963px;
48-
left: 48.28221px;
81+
top: calc(var(--loader-center) + var(--loader-center) * 0.7726);
82+
left: calc(var(--loader-center) + var(--loader-center) * 0.2071);
4983
}
5084
.lds-roller div:nth-child(4) {
5185
animation-delay: -0.144s;
5286
}
5387
.lds-roller div:nth-child(4):after {
54-
top: 72px;
55-
left: 40px;
88+
top: calc(var(--loader-center) + var(--loader-center) * 0.8);
89+
left: var(--loader-center);
5690
}
5791
.lds-roller div:nth-child(5) {
5892
animation-delay: -0.18s;
5993
}
6094
.lds-roller div:nth-child(5):after {
61-
top: 70.90963px;
62-
left: 31.71779px;
95+
top: calc(var(--loader-center) + var(--loader-center) * 0.7726);
96+
left: calc(var(--loader-center) - var(--loader-center) * 0.2071);
6397
}
6498
.lds-roller div:nth-child(6) {
6599
animation-delay: -0.216s;
66100
}
67101
.lds-roller div:nth-child(6):after {
68-
top: 67.71281px;
69-
left: 24px;
102+
top: calc(var(--loader-center) + var(--loader-center) * 0.6928);
103+
left: calc(var(--loader-center) - var(--loader-center) * 0.4);
70104
}
71105
.lds-roller div:nth-child(7) {
72106
animation-delay: -0.252s;
73107
}
74108
.lds-roller div:nth-child(7):after {
75-
top: 62.62742px;
76-
left: 17.37258px;
109+
top: calc(var(--loader-center) + var(--loader-center) * 0.5656);
110+
left: calc(var(--loader-center) - var(--loader-center) * 0.5656);
77111
}
78112
.lds-roller div:nth-child(8) {
79113
animation-delay: -0.288s;
80114
}
81115
.lds-roller div:nth-child(8):after {
82-
top: 56px;
83-
left: 12.28719px;
116+
top: calc(var(--loader-center) + var(--loader-center) * 0.4);
117+
left: calc(var(--loader-center) - var(--loader-center) * 0.6928);
84118
}
85119
@keyframes lds-roller {
86120
0% {

‎service-apply/src/components/common/Loader.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@ import './Loader.css';
22

33
interface LoaderProps {
44
color?: string;
5+
size?: 'sm' | 'md' | 'lg' | 'xl';
56
}
67

7-
const Loader = ({ color = '#FFF' }: LoaderProps) => {
8+
const Loader = ({ color = '#FFF', size = 'md' }: LoaderProps) => {
89
return (
9-
<div className={`lds-roller text-[${color}]`}>
10+
<div
11+
className={`lds-roller lds-roller--${size}`}
12+
style={{ color } as React.CSSProperties}
13+
>
1014
<div />
1115
<div />
1216
<div />

‎service-apply/src/hooks/apply/useApplyForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const useApplyForm = () => {
3131
});
3232
}, [registrationData]);
3333

34-
const { postTemporarySave } = useTemporarySaveMutate();
34+
const { postTemporarySave, temporarySaveStatus } = useTemporarySaveMutate();
3535
const [isCaptchaModalOpen, setIsCaptchaModalOpen] = useState(false);
3636
const [isPrivacyModalOpen, setIsPrivacyModalOpen] = useState(false);
3737
const [isAgreed, setIsAgreed] = useState(false);
@@ -114,5 +114,6 @@ export const useApplyForm = () => {
114114
setIsAgreed,
115115
isError,
116116
errorMessage,
117+
temporarySaveStatus,
117118
};
118119
};

‎service-apply/src/hooks/react-query/useApply.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const useApplyMutate = () => {
4747
};
4848

4949
export const useTemporarySaveMutate = () => {
50-
const { mutate } = useMutation({
50+
const { mutate, isPending } = useMutation({
5151
mutationKey: ['applyTemporarySave'],
5252
mutationFn: postTemporarySave,
5353
});
@@ -72,6 +72,7 @@ export const useTemporarySaveMutate = () => {
7272
},
7373
});
7474
},
75+
temporarySaveStatus: isPending,
7576
};
7677
};
7778

‎service-manager/src/components/apply-list/ApplyList.tsx‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
} from '../../hooks/react-query/useRegistration';
88
import { useSectorQueryById } from '../../hooks/react-query/useSetting';
99
import { ApplyCount } from './ApplyCount';
10+
import { EXCEL_HEADERS, TABLE_HEADERS } from '../../constants/apply';
11+
import { getExcelCellValue, getTableCellValue } from '../../functions/apply';
1012
import ErrorBoundary from '../common/ErrorBoundary';
1113

1214
interface ApplyListProps {
@@ -30,17 +32,15 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
3032
.filter(
3133
(registration) => registration.sectorNum === sector.sectorNumber,
3234
)
33-
.map((registration, index) => ({
34-
구간: registration.sectorNum,
35-
순서: index + 1,
36-
이름: registration.name,
37-
학과: registration.department,
38-
차량번호: registration.carNumber,
39-
학생번호: registration.studentNumber,
40-
경차여부: registration.isCompact ? '경차' : '경차 아님',
41-
휴대폰번호: registration.phoneNumber,
42-
이메일: registration.email,
43-
})),
35+
.map((registration) =>
36+
EXCEL_HEADERS.reduce(
37+
(acc, header) => ({
38+
...acc,
39+
...getExcelCellValue(header, registration, registrations),
40+
}),
41+
{},
42+
),
43+
),
4444
)
4545
.flat();
4646

@@ -91,15 +91,9 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
9191
<table className="w-full min-w-[50rem]">
9292
<thead>
9393
<tr>
94-
<th>순서</th>
95-
<th>이름</th>
96-
<th>단과 대학</th>
97-
<th>학과</th>
98-
<th>차량 번호</th>
99-
<th>학생 번호</th>
100-
<th>경차 여부</th>
101-
<th>휴대폰 번호</th>
102-
<th>이메일</th>
94+
{TABLE_HEADERS.map((header) => (
95+
<th key={header.key}>{header.label}</th>
96+
))}
10397
</tr>
10498
</thead>
10599
<tbody className="text-center">
@@ -110,19 +104,15 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
110104
.map((registration) => {
111105
return (
112106
<tr key={registration.id}>
113-
<td>
114-
{registrations.findIndex(
115-
(data) => data.id === registration.id,
116-
) + 1}
117-
</td>
118-
<td>{registration.name}</td>
119-
<td>{registration.affiliation}</td>
120-
<td> {registration.department} </td>
121-
<td>{registration.carNumber}</td>
122-
<td>{registration.studentNumber}</td>
123-
<td>{registration.isCompact ? '경차' : '경차 아님'}</td>
124-
<td>{registration.phoneNumber}</td>
125-
<td>{registration.email}</td>
107+
{TABLE_HEADERS.map((header) => (
108+
<td key={header.key}>
109+
{getTableCellValue(
110+
header.key,
111+
registration,
112+
registrations,
113+
)}
114+
</td>
115+
))}
126116
</tr>
127117
);
128118
})}

‎service-manager/src/constants/apply.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { RegistrationResponse } from '../apis/dtos/registration.dto';
2+
3+
export const TABLE_HEADERS = [
4+
{ key: 'order', label: '순서' },
5+
{ key: 'name', label: '이름' },
6+
{ key: 'affiliation', label: '단과 대학' },
7+
{ key: 'department', label: '학과' },
8+
{ key: 'carNumber', label: '차량 번호' },
9+
{ key: 'studentNumber', label: '학생 번호' },
10+
{ key: 'isCompact', label: '경차 여부' },
11+
{ key: 'phoneNumber', label: '휴대폰 번호' },
12+
{ key: 'email', label: '이메일' },
13+
] as const;
14+
15+
export const EXCEL_HEADERS = [
16+
{ key: 'sector', label: '구간' },
17+
...TABLE_HEADERS,
18+
] as const;

0 commit comments

Comments
 (0)