Skip to content

Commit b3af72b

Browse files
khkim6040khkim6040
committed
Add feature to check uploaded pdf in modal
1 parent c6ab577 commit b3af72b

File tree

2 files changed

+110
-63
lines changed

2 files changed

+110
-63
lines changed

‎components/board/whitebook/whitebook.create.modal.jsx

+47-31
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ const WhitebookCreateModal = (props) => {
88
const [content, setContent] = useState('');
99
const [showOnlyLogin, setShowOnlyLogin] = useState(false);
1010

11-
// PDF 또는 링크 선택 관련 상태
12-
const [inputType, setInputType] = useState('link'); // 기본값은 'link'
11+
const [inputType, setInputType] = useState('link');
1312
const [link, setLink] = useState('');
1413
const [pdfFile, setPdfFile] = useState(null);
1514

@@ -23,29 +22,32 @@ const WhitebookCreateModal = (props) => {
2322
};
2423

2524
const handleSubmit = async () => {
26-
try {
27-
const formData = new FormData();
28-
formData.append('title', title);
29-
formData.append('content', content);
30-
formData.append('show_only_login', showOnlyLogin);
25+
const formData = new FormData();
26+
formData.append('title', title);
27+
formData.append('content', content);
28+
formData.append('show_only_login', showOnlyLogin);
3129

32-
if (inputType === 'link' && link) {
33-
formData.append('link', link);
34-
} else if (inputType === 'pdf' && pdfFile) {
35-
formData.append('pdf_file', pdfFile);
36-
}
30+
if (inputType === 'link' && link) {
31+
formData.append('link', link);
32+
} else if (inputType === 'pdf' && pdfFile) {
33+
formData.append('pdf_file', pdfFile);
34+
} else {
35+
alert('링크 또는 PDF 파일을 입력해주세요.');
36+
return;
37+
}
3738

38-
await PoPoAxios.post(`/whitebook`, formData, {
39-
withCredentials: true,
40-
headers: { 'Content-Type': 'multipart/form-data' },
39+
await PoPoAxios.post(`/whitebook`, formData, {
40+
withCredentials: true,
41+
headers: { 'Content-Type': 'multipart/form-data' },
42+
})
43+
.then(() => {
44+
alert('생활백서를 생성 했습니다.');
45+
window.location.reload();
46+
})
47+
.catch((err) => {
48+
alert('생활백서 생성에 실패했습니다.');
49+
console.error(err);
4150
});
42-
43-
setOpen(false);
44-
window.location.reload();
45-
} catch (e) {
46-
alert('생활백서 생성에 실패했습니다.');
47-
console.error(e);
48-
}
4951
};
5052

5153
return (
@@ -76,7 +78,6 @@ const WhitebookCreateModal = (props) => {
7678
checked={inputType === 'link'}
7779
onChange={() => {
7880
setInputType('link');
79-
setPdfFile(null); // PDF 파일 초기화
8081
}}
8182
/>
8283
</Form.Field>
@@ -88,7 +89,6 @@ const WhitebookCreateModal = (props) => {
8889
checked={inputType === 'pdf'}
8990
onChange={() => {
9091
setInputType('pdf');
91-
setLink(''); // 링크 입력 초기화
9292
}}
9393
/>
9494
</Form.Field>
@@ -106,13 +106,29 @@ const WhitebookCreateModal = (props) => {
106106

107107
{/* 조건부 렌더링: PDF 업로드 필드 */}
108108
{inputType === 'pdf' && (
109-
<Form.Input
110-
required
111-
type="file"
112-
label={'생활백서 PDF'}
113-
accept="application/pdf"
114-
onChange={(e) => handleFileChange(e.target.files[0])}
115-
/>
109+
<Form.Field>
110+
<Form.Input
111+
required
112+
label={'생활백서 PDF'}
113+
type="file"
114+
accept="application/pdf"
115+
onChange={(e) => handleFileChange(e.target.files[0])}
116+
/>
117+
<label>
118+
{pdfFile && (
119+
<a
120+
href={URL.createObjectURL(pdfFile)}
121+
target="_blank"
122+
rel="noopener noreferrer"
123+
style={{
124+
textDecoration: 'underline',
125+
}}
126+
>
127+
업로드한 PDF 확인
128+
</a>
129+
)}
130+
</label>
131+
</Form.Field>
116132
)}
117133

118134
<Form.TextArea

‎components/board/whitebook/whitebook.update.modal.jsx

+63-32
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,24 @@ const WhitebookUpdateModal = ({ trigger, whitebook }) => {
1010
const [title, setTitle] = useState(whitebook.title);
1111
const [content, setContent] = useState(whitebook.content);
1212
const [showOnlyLogin, setShowOnlyLogin] = useState(whitebook.show_only_login);
13-
const [inputType, setInputType] = useState(whitebook.link ? 'link' : 'pdf'); // 초기값 설정
13+
const [inputType, setInputType] = useState(whitebook.link ? 'link' : 'pdf');
1414
const [link, setLink] = useState(whitebook.link || '');
1515
const [pdfFile, setPdfFile] = useState(null);
1616

17+
const handleModalOpen = () => {
18+
setOpen(true);
19+
// 링크에 whitebook이 들어간다면 S3에 있는 pdf 파일임
20+
if (whitebook.link && whitebook.link.includes('whitebook')) {
21+
const link = whitebook.link;
22+
setLink('');
23+
setInputType('pdf');
24+
fetch(link)
25+
.then((res) => res.blob())
26+
.then((blob) => setPdfFile(blob))
27+
.catch((err) => console.error(err));
28+
}
29+
};
30+
1731
const handleFileChange = (file) => {
1832
if (!file || file.type !== 'application/pdf') {
1933
alert('PDF 파일만 업로드 가능합니다.');
@@ -24,32 +38,32 @@ const WhitebookUpdateModal = ({ trigger, whitebook }) => {
2438
};
2539

2640
const handleSubmit = async () => {
27-
try {
28-
const formData = new FormData();
29-
formData.append('title', title);
30-
formData.append('content', content);
31-
formData.append('show_only_login', showOnlyLogin);
41+
const formData = new FormData();
42+
formData.append('title', title);
43+
formData.append('content', content);
44+
formData.append('show_only_login', showOnlyLogin);
3245

33-
if (inputType === 'link' && link) {
34-
formData.append('link', link);
35-
} else if (inputType === 'pdf' && pdfFile) {
36-
formData.append('pdf_file', pdfFile);
37-
} else {
38-
alert('링크 또는 PDF 파일을 입력해주세요.');
39-
return;
40-
}
46+
if (inputType === 'link' && link) {
47+
formData.append('link', link);
48+
} else if (inputType === 'pdf' && pdfFile) {
49+
formData.append('pdf_file', pdfFile);
50+
} else {
51+
alert('링크 또는 PDF 파일을 입력해주세요.');
52+
return;
53+
}
4154

42-
await PoPoAxios.put(`/whitebook/${whitebook.uuid}`, formData, {
43-
withCredentials: true,
44-
headers: { 'Content-Type': 'multipart/form-data' },
55+
await PoPoAxios.put(`/whitebook/${whitebook.uuid}`, formData, {
56+
withCredentials: true,
57+
headers: { 'Content-Type': 'multipart/form-data' },
58+
})
59+
.then(() => {
60+
alert('생활백서 정보를 수정 했습니다.');
61+
window.location.reload();
62+
})
63+
.catch((err) => {
64+
alert('생활백서 수정에 실패했습니다.');
65+
console.error(err);
4566
});
46-
47-
setOpen(false);
48-
window.location.reload();
49-
} catch (e) {
50-
alert('생활백서 수정에 실패했습니다.');
51-
console.error(e);
52-
}
5367
};
5468

5569
return (
@@ -58,7 +72,7 @@ const WhitebookUpdateModal = ({ trigger, whitebook }) => {
5872
open={open}
5973
trigger={trigger}
6074
onClose={() => setOpen(false)}
61-
onOpen={() => setOpen(true)}
75+
onOpen={handleModalOpen}
6276
>
6377
<Modal.Header>생활백서 수정</Modal.Header>
6478
<Modal.Content>
@@ -110,13 +124,29 @@ const WhitebookUpdateModal = ({ trigger, whitebook }) => {
110124

111125
{/* 조건부 렌더링: PDF 업로드 필드 */}
112126
{inputType === 'pdf' && (
113-
<Form.Input
114-
required
115-
type="file"
116-
label={'생활백서 PDF'}
117-
accept="application/pdf"
118-
onChange={(e) => handleFileChange(e.target.files[0])}
119-
/>
127+
<Form.Field>
128+
<Form.Input
129+
required
130+
label={'생활백서 PDF'}
131+
type="file"
132+
accept="application/pdf"
133+
onChange={(e) => handleFileChange(e.target.files[0])}
134+
/>
135+
<label>
136+
{pdfFile && (
137+
<a
138+
href={URL.createObjectURL(pdfFile)}
139+
target="_blank"
140+
rel="noopener noreferrer"
141+
style={{
142+
textDecoration: 'underline',
143+
}}
144+
>
145+
업로드한 PDF 확인
146+
</a>
147+
)}
148+
</label>
149+
</Form.Field>
120150
)}
121151

122152
<Form.TextArea
@@ -125,6 +155,7 @@ const WhitebookUpdateModal = ({ trigger, whitebook }) => {
125155
value={content}
126156
onChange={(e) => setContent(e.target.value)}
127157
/>
158+
128159
<Form.Checkbox
129160
required
130161
label={'로그인 유저에게만 보이기'}

0 commit comments

Comments
 (0)