From 77ba5e5ae4a8123f301bbdc29da8137f4fb79814 Mon Sep 17 00:00:00 2001 From: HSCHEOL Date: Wed, 2 Oct 2024 12:36:10 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=EC=9D=B4=EB=AF=B8=EC=A7=80=20url=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=84=B1=EA=B3=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/NotionAdd.tsx | 42 +++++++++++++++++++++++++ src/pages/dist/NotionAdd.js | 61 ++++++++++++++++++++++++++++++++----- vite.config.ts | 7 ----- 3 files changed, 95 insertions(+), 15 deletions(-) diff --git a/src/pages/NotionAdd.tsx b/src/pages/NotionAdd.tsx index 5ed6a94..91ecc4a 100644 --- a/src/pages/NotionAdd.tsx +++ b/src/pages/NotionAdd.tsx @@ -40,6 +40,8 @@ const INITIAL_FORM_STATE: FormData = { }; const API_URL = "https://kdt.frontend.5th.programmers.co.kr:5009"; +const CLOUD_NAME = import.meta.env.VITE_CLOUD_NAME; +const UPLOAD_PRESET = import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET; const NotionAdd: React.FC = () => { const [formData, setFormData] = useState(INITIAL_FORM_STATE); @@ -51,6 +53,43 @@ const NotionAdd: React.FC = () => { const [channels, setChannels] = useState([]); + //이미지 업로드 부분(충돌 방지 주석)--------------------------------------------------------------- + const [image, setImage] = useState(null); + const [imageUrl, setImageUrl] = useState(null); + + const handleFileChange = useCallback( + async (e: ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + setImage(file); // 선택된 파일을 저장 + const formData = new FormData(); + formData.append("file", file); + formData.append("upload_preset", UPLOAD_PRESET); + + try { + const response = await fetch( + `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, + { + method: "POST", + body: formData, + } + ); + const data = await response.json(); + setImageUrl(data.secure_url); // 업로드된 이미지 URL 설정 + setFormData((prev) => ({ ...prev, image: data.secure_url })); // 폼 데이터에 이미지 URL 저장 + } catch (error) { + console.error("이미지 업로드 실패:", error); + } + } + }, + [] + ); + + useEffect(() => { + console.log(imageUrl); + }, [imageUrl]); + // 이미지 업로드 부분 여기까지--------------------------------------------------------------- + const navigate = useNavigate(); useEffect(() => { @@ -110,6 +149,7 @@ const NotionAdd: React.FC = () => { meetingTime: meetingTime, meetingSpot: formData.meetingSpot, channel: formData.channel, + image: formData.image, //이미지 업로드 부분 }; const submitData = new FormData(); @@ -326,6 +366,8 @@ const NotionAdd: React.FC = () => { type="file" id="image" name="image" + accept="image/*" + onChange={handleFileChange} className="absolute hidden" /> diff --git a/src/pages/dist/NotionAdd.js b/src/pages/dist/NotionAdd.js index 099be38..ae507e6 100644 --- a/src/pages/dist/NotionAdd.js +++ b/src/pages/dist/NotionAdd.js @@ -67,10 +67,54 @@ var INITIAL_FORM_STATE = { meetingInfo: "" }; var API_URL = "https://kdt.frontend.5th.programmers.co.kr:5009"; +var CLOUD_NAME = import.meta.env.VITE_CLOUD_NAME; +var UPLOAD_PRESET = import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET; var NotionAdd = function () { var _a = react_1.useState(INITIAL_FORM_STATE), formData = _a[0], setFormData = _a[1]; var _b = react_1.useState(null), selectedLocation = _b[0], setSelectedLocation = _b[1]; var _c = react_1.useState([]), channels = _c[0], setChannels = _c[1]; + //이미지 업로드 부분(충돌 방지 주석)--------------------------------------------------------------- + var _d = react_1.useState(null), image = _d[0], setImage = _d[1]; + var _e = react_1.useState(null), imageUrl = _e[0], setImageUrl = _e[1]; + var handleFileChange = react_1.useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () { + var file, formData_1, response, data_1, error_1; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]; + if (!file) return [3 /*break*/, 5]; + setImage(file); // 선택된 파일을 저장 + formData_1 = new FormData(); + formData_1.append("file", file); + formData_1.append("upload_preset", UPLOAD_PRESET); + _b.label = 1; + case 1: + _b.trys.push([1, 4, , 5]); + return [4 /*yield*/, fetch("https://api.cloudinary.com/v1_1/" + CLOUD_NAME + "/image/upload", { + method: "POST", + body: formData_1 + })]; + case 2: + response = _b.sent(); + return [4 /*yield*/, response.json()]; + case 3: + data_1 = _b.sent(); + setImageUrl(data_1.secure_url); // 업로드된 이미지 URL 설정 + setFormData(function (prev) { return (__assign(__assign({}, prev), { image: data_1.secure_url })); }); // 폼 데이터에 이미지 URL 저장 + return [3 /*break*/, 5]; + case 4: + error_1 = _b.sent(); + console.error("이미지 업로드 실패:", error_1); + return [3 /*break*/, 5]; + case 5: return [2 /*return*/]; + } + }); + }); }, []); + react_1.useEffect(function () { + console.log(imageUrl); + }, [imageUrl]); + // 이미지 업로드 부분 여기까지--------------------------------------------------------------- var navigate = react_router_dom_1.useNavigate(); react_1.useEffect(function () { fetchChannels(); @@ -82,7 +126,7 @@ var NotionAdd = function () { } }, []); var fetchChannels = function () { return __awaiter(void 0, void 0, void 0, function () { - var response, data, error_1; + var response, data, error_2; return __generator(this, function (_a) { switch (_a.label) { case 0: @@ -99,8 +143,8 @@ var NotionAdd = function () { setChannels(data); return [3 /*break*/, 4]; case 3: - error_1 = _a.sent(); - console.error("Error fetching channels:", error_1); + error_2 = _a.sent(); + console.error("Error fetching channels:", error_2); return [3 /*break*/, 4]; case 4: return [2 /*return*/]; } @@ -117,7 +161,7 @@ var NotionAdd = function () { setFormData(function (prev) { return (__assign(__assign({}, prev), { channel: category })); }); }, []); var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () { - var channelId, meetingTime, customJsonData, submitData, response, data, error_2; + var channelId, meetingTime, customJsonData, submitData, response, data, error_3; var _a; return __generator(this, function (_b) { switch (_b.label) { @@ -132,7 +176,8 @@ var NotionAdd = function () { meetingCapacity: formData.meetingCapacity, meetingTime: meetingTime, meetingSpot: formData.meetingSpot, - channel: formData.channel + channel: formData.channel, + image: formData.image }; submitData = new FormData(); submitData.append("title", JSON.stringify(customJsonData)); @@ -158,8 +203,8 @@ var NotionAdd = function () { console.log("Post", data); return [3 /*break*/, 5]; case 4: - error_2 = _b.sent(); - console.error("Error: ", error_2 instanceof Error ? error_2.message : String(error_2)); + error_3 = _b.sent(); + console.error("Error: ", error_3 instanceof Error ? error_3.message : String(error_3)); return [3 /*break*/, 5]; case 5: return [2 /*return*/]; } @@ -208,7 +253,7 @@ var NotionAdd = function () { react_1["default"].createElement("div", { className: "mb-6" }, react_1["default"].createElement("p", { className: "font-bold text-xl mt-6" }, "\uC0AC\uC9C4 \uB4F1\uB85D"), react_1["default"].createElement("label", { htmlFor: "image", className: "w-[160px] h-[140px] border-2 border-solid rounded text-[#A7E30A] text-xl flex justify-center items-center relative mt-2.5" }, "+ \uC0AC\uC9C4 \uC5C5\uB85C\uB4DC"), - react_1["default"].createElement("input", { type: "file", id: "image", name: "image", className: "absolute hidden" })), + react_1["default"].createElement("input", { type: "file", id: "image", name: "image", accept: "image/*", onChange: handleFileChange, className: "absolute hidden" })), react_1["default"].createElement(Button_1["default"], { label: "\uBAA8\uC784 \uB4F1\uB85D", size: "full", color: "green", onClick: handleSubmit }))))); }; exports["default"] = NotionAdd; diff --git a/vite.config.ts b/vite.config.ts index 0c5f8d8..b08d4aa 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -13,12 +13,5 @@ export default defineConfig({ server: { port: 8080, // 서버 포트를 8080으로 설정 strictPort: true, - proxy: { - "/posts": { - target: "https://kdt.frontend.5th.programmers.co.kr:5009", // 요청할 서버 - changeOrigin: true, // 호스트 헤더를 대상 URL로 변경 - secure: false, // HTTPS의 경우, SSL 인증서를 무시 - }, - }, }, }); From bbe932ac99512c1faac519c2244034722f905edd Mon Sep 17 00:00:00 2001 From: HSCHEOL Date: Wed, 2 Oct 2024 14:04:51 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C?= =?UTF-8?q?=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/NotionPage.tsx | 11 ++++++++--- src/pages/dist/NotionPage.js | 4 ++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/pages/NotionPage.tsx b/src/pages/NotionPage.tsx index c4bb288..1fc767c 100644 --- a/src/pages/NotionPage.tsx +++ b/src/pages/NotionPage.tsx @@ -160,9 +160,14 @@ const NotionPage = () => {
- {PrevData.image ? ( -
- 게시글사진 + {postData.image ? ( +
+ 게시글사진
) : (

사진이 없습니다.

diff --git a/src/pages/dist/NotionPage.js b/src/pages/dist/NotionPage.js index 5a507ad..74936cc 100644 --- a/src/pages/dist/NotionPage.js +++ b/src/pages/dist/NotionPage.js @@ -147,8 +147,8 @@ var NotionPage = function () { react_1["default"].createElement("section", { className: "mt-7" }, react_1["default"].createElement("div", null, react_1["default"].createElement(NotionItem_1["default"], { content: postData.meetingInfo })), - PrevData.image ? (react_1["default"].createElement("div", { className: "flex w-[160px] h-[150px] border-2 border-solid rounded-xl" }, - react_1["default"].createElement("img", { src: PrevData.image, alt: "\uAC8C\uC2DC\uAE00\uC0AC\uC9C4", id: "notionImg" }))) : (react_1["default"].createElement("p", { className: "my-10" }, "\uC0AC\uC9C4\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."))), + postData.image ? (react_1["default"].createElement("div", { className: "flex justify-center" }, + react_1["default"].createElement("img", { className: "w-96 h-96", src: postData.image, alt: "\uAC8C\uC2DC\uAE00\uC0AC\uC9C4", id: "notionImg" }))) : (react_1["default"].createElement("p", { className: "my-10" }, "\uC0AC\uC9C4\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."))), react_1["default"].createElement("section", { className: "mt-11 flex flex-col gap-5" }, react_1["default"].createElement("div", null, react_1["default"].createElement("p", { className: "text-lg font-bold" }, From fff42cb9ad41ac876ca1dd8fbc8bc163beb9d536 Mon Sep 17 00:00:00 2001 From: HSCHEOL Date: Wed, 2 Oct 2024 15:08:39 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=AC=EB=9F=AC=EA=B0=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/NotionAdd.tsx | 101 +++++++++++++++++++++-------------- src/pages/NotionPage.tsx | 22 ++++---- src/pages/dist/NotionAdd.js | 78 +++++++++++++++++---------- src/pages/dist/NotionPage.js | 4 +- 4 files changed, 123 insertions(+), 82 deletions(-) diff --git a/src/pages/NotionAdd.tsx b/src/pages/NotionAdd.tsx index 91ecc4a..de76a4b 100644 --- a/src/pages/NotionAdd.tsx +++ b/src/pages/NotionAdd.tsx @@ -15,7 +15,7 @@ interface FormData { meetingEndTime: string; isTimeFlexible: boolean; meetingSpot: string; - image: string | null; + images: string[]; meetingInfo: string; } @@ -35,7 +35,7 @@ const INITIAL_FORM_STATE: FormData = { meetingEndTime: "", isTimeFlexible: false, meetingSpot: "", - image: null, + images: [], meetingInfo: "", }; @@ -54,40 +54,48 @@ const NotionAdd: React.FC = () => { const [channels, setChannels] = useState([]); //이미지 업로드 부분(충돌 방지 주석)--------------------------------------------------------------- - const [image, setImage] = useState(null); - const [imageUrl, setImageUrl] = useState(null); + const [previewUrl, setPreviewUrl] = useState(null); + const [imageFiles, setImageFiles] = useState([]); // 선택된 파일들 + const [imageUrls, setImageUrls] = useState([]); // 업로드된 이미지 URL들 const handleFileChange = useCallback( async (e: ChangeEvent) => { - const file = e.target.files?.[0]; - if (file) { - setImage(file); // 선택된 파일을 저장 + const files = e.target.files; + if (files) { + const newFiles = Array.from(files); + setImageFiles((prev) => [...prev, ...newFiles]); // 기존 파일에 추가 + + const newUrls: string[] = []; const formData = new FormData(); - formData.append("file", file); - formData.append("upload_preset", UPLOAD_PRESET); - - try { - const response = await fetch( - `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, - { - method: "POST", - body: formData, - } - ); - const data = await response.json(); - setImageUrl(data.secure_url); // 업로드된 이미지 URL 설정 - setFormData((prev) => ({ ...prev, image: data.secure_url })); // 폼 데이터에 이미지 URL 저장 - } catch (error) { - console.error("이미지 업로드 실패:", error); + + for (const file of newFiles) { + formData.append("file", file); + formData.append("upload_preset", UPLOAD_PRESET); + + try { + const response = await fetch( + `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, + { + method: "POST", + body: formData, + } + ); + const data = await response.json(); + newUrls.push(data.secure_url); // 업로드된 이미지 URL 추가 + } catch (error) { + console.error("이미지 업로드 실패:", error); + } } + setImageUrls((prev) => [...prev, ...newUrls]); // 기존 URL에 추가 + setFormData((prev) => ({ + ...prev, + images: [...prev.images, ...newUrls], + })); // 폼 데이터에 이미지 URL 배열 저장 } }, [] ); - useEffect(() => { - console.log(imageUrl); - }, [imageUrl]); // 이미지 업로드 부분 여기까지--------------------------------------------------------------- const navigate = useNavigate(); @@ -149,7 +157,7 @@ const NotionAdd: React.FC = () => { meetingTime: meetingTime, meetingSpot: formData.meetingSpot, channel: formData.channel, - image: formData.image, //이미지 업로드 부분 + image: formData.images, //이미지 업로드 부분 }; const submitData = new FormData(); @@ -356,20 +364,31 @@ const NotionAdd: React.FC = () => { {/* 사진 등록 */}

사진 등록

- - +
+ {previewUrl && ( +
+ 미리보기 +
+ )} + + +
{/* 모임 등록 버튼 */} diff --git a/src/pages/NotionPage.tsx b/src/pages/NotionPage.tsx index 1fc767c..b296f40 100644 --- a/src/pages/NotionPage.tsx +++ b/src/pages/NotionPage.tsx @@ -21,7 +21,7 @@ interface ParsedPost { meetingEndTime: string; isTimeFlexible: boolean; meetingSpot: string; - image: string | null; + image: []; author: string; createdAt: string; updatedAt: string; @@ -160,15 +160,17 @@ const NotionPage = () => {
- {postData.image ? ( -
- 게시글사진 -
+ {postData.image && postData.image.length > 0 ? ( + postData.image.map((URL, i) => ( +
+ 게시글사진 +
+ )) ) : (

사진이 없습니다.

)} diff --git a/src/pages/dist/NotionAdd.js b/src/pages/dist/NotionAdd.js index ae507e6..2d8cdb8 100644 --- a/src/pages/dist/NotionAdd.js +++ b/src/pages/dist/NotionAdd.js @@ -46,6 +46,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) { if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; exports.__esModule = true; var react_1 = require("react"); var Button_1 = require("../components/Button"); @@ -63,7 +70,7 @@ var INITIAL_FORM_STATE = { meetingEndTime: "", isTimeFlexible: false, meetingSpot: "", - image: null, + images: [], meetingInfo: "" }; var API_URL = "https://kdt.frontend.5th.programmers.co.kr:5009"; @@ -74,46 +81,56 @@ var NotionAdd = function () { var _b = react_1.useState(null), selectedLocation = _b[0], setSelectedLocation = _b[1]; var _c = react_1.useState([]), channels = _c[0], setChannels = _c[1]; //이미지 업로드 부분(충돌 방지 주석)--------------------------------------------------------------- - var _d = react_1.useState(null), image = _d[0], setImage = _d[1]; - var _e = react_1.useState(null), imageUrl = _e[0], setImageUrl = _e[1]; + var _d = react_1.useState(null), previewUrl = _d[0], setPreviewUrl = _d[1]; + var _e = react_1.useState([]), imageFiles = _e[0], setImageFiles = _e[1]; // 선택된 파일들 + var _f = react_1.useState([]), imageUrls = _f[0], setImageUrls = _f[1]; // 업로드된 이미지 URL들 var handleFileChange = react_1.useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () { - var file, formData_1, response, data_1, error_1; - var _a; - return __generator(this, function (_b) { - switch (_b.label) { + var files, newFiles_2, newUrls_1, formData_1, _i, newFiles_1, file, response, data, error_1; + return __generator(this, function (_a) { + switch (_a.label) { case 0: - file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]; - if (!file) return [3 /*break*/, 5]; - setImage(file); // 선택된 파일을 저장 + files = e.target.files; + if (!files) return [3 /*break*/, 8]; + newFiles_2 = Array.from(files); + setImageFiles(function (prev) { return __spreadArrays(prev, newFiles_2); }); // 기존 파일에 추가 + newUrls_1 = []; formData_1 = new FormData(); + _i = 0, newFiles_1 = newFiles_2; + _a.label = 1; + case 1: + if (!(_i < newFiles_1.length)) return [3 /*break*/, 7]; + file = newFiles_1[_i]; formData_1.append("file", file); formData_1.append("upload_preset", UPLOAD_PRESET); - _b.label = 1; - case 1: - _b.trys.push([1, 4, , 5]); + _a.label = 2; + case 2: + _a.trys.push([2, 5, , 6]); return [4 /*yield*/, fetch("https://api.cloudinary.com/v1_1/" + CLOUD_NAME + "/image/upload", { method: "POST", body: formData_1 })]; - case 2: - response = _b.sent(); - return [4 /*yield*/, response.json()]; case 3: - data_1 = _b.sent(); - setImageUrl(data_1.secure_url); // 업로드된 이미지 URL 설정 - setFormData(function (prev) { return (__assign(__assign({}, prev), { image: data_1.secure_url })); }); // 폼 데이터에 이미지 URL 저장 - return [3 /*break*/, 5]; + response = _a.sent(); + return [4 /*yield*/, response.json()]; case 4: - error_1 = _b.sent(); + data = _a.sent(); + newUrls_1.push(data.secure_url); // 업로드된 이미지 URL 추가 + return [3 /*break*/, 6]; + case 5: + error_1 = _a.sent(); console.error("이미지 업로드 실패:", error_1); - return [3 /*break*/, 5]; - case 5: return [2 /*return*/]; + return [3 /*break*/, 6]; + case 6: + _i++; + return [3 /*break*/, 1]; + case 7: + setImageUrls(function (prev) { return __spreadArrays(prev, newUrls_1); }); // 기존 URL에 추가 + setFormData(function (prev) { return (__assign(__assign({}, prev), { images: __spreadArrays(prev.images, newUrls_1) })); }); // 폼 데이터에 이미지 URL 배열 저장 + _a.label = 8; + case 8: return [2 /*return*/]; } }); }); }, []); - react_1.useEffect(function () { - console.log(imageUrl); - }, [imageUrl]); // 이미지 업로드 부분 여기까지--------------------------------------------------------------- var navigate = react_router_dom_1.useNavigate(); react_1.useEffect(function () { @@ -177,7 +194,7 @@ var NotionAdd = function () { meetingTime: meetingTime, meetingSpot: formData.meetingSpot, channel: formData.channel, - image: formData.image + image: formData.images }; submitData = new FormData(); submitData.append("title", JSON.stringify(customJsonData)); @@ -252,8 +269,11 @@ var NotionAdd = function () { react_1["default"].createElement("input", { type: "text", id: "meetingInfo", name: "meetingInfo", value: formData.meetingInfo, onChange: handleChange, placeholder: "\uBAA8\uC784 \uC124\uBA85\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694.", className: "border-2 border-solid border-[#e8e8e8] w-[600px] h-[45px] mt-2.5 text-lg pl-2.5" })), react_1["default"].createElement("div", { className: "mb-6" }, react_1["default"].createElement("p", { className: "font-bold text-xl mt-6" }, "\uC0AC\uC9C4 \uB4F1\uB85D"), - react_1["default"].createElement("label", { htmlFor: "image", className: "w-[160px] h-[140px] border-2 border-solid rounded text-[#A7E30A] text-xl flex justify-center items-center relative mt-2.5" }, "+ \uC0AC\uC9C4 \uC5C5\uB85C\uB4DC"), - react_1["default"].createElement("input", { type: "file", id: "image", name: "image", accept: "image/*", onChange: handleFileChange, className: "absolute hidden" })), + react_1["default"].createElement("div", { className: "flex flex-wrap" }, + previewUrl && (react_1["default"].createElement("div", { className: "mt-4 mx-4" }, + react_1["default"].createElement("img", { src: previewUrl, alt: "\uBBF8\uB9AC\uBCF4\uAE30", className: "w-[160px] h-[140px]" }))), + react_1["default"].createElement("label", { htmlFor: "image", className: "w-[160px] h-[140px] border-2 border-solid rounded text-[#A7E30A] text-xl flex justify-center items-center relative mt-4" }, "+ \uC0AC\uC9C4 \uC5C5\uB85C\uB4DC"), + react_1["default"].createElement("input", { type: "file", id: "image", name: "image", accept: "image/*", onChange: handleFileChange, className: "absolute hidden" }))), react_1["default"].createElement(Button_1["default"], { label: "\uBAA8\uC784 \uB4F1\uB85D", size: "full", color: "green", onClick: handleSubmit }))))); }; exports["default"] = NotionAdd; diff --git a/src/pages/dist/NotionPage.js b/src/pages/dist/NotionPage.js index 74936cc..d6c6b55 100644 --- a/src/pages/dist/NotionPage.js +++ b/src/pages/dist/NotionPage.js @@ -147,8 +147,8 @@ var NotionPage = function () { react_1["default"].createElement("section", { className: "mt-7" }, react_1["default"].createElement("div", null, react_1["default"].createElement(NotionItem_1["default"], { content: postData.meetingInfo })), - postData.image ? (react_1["default"].createElement("div", { className: "flex justify-center" }, - react_1["default"].createElement("img", { className: "w-96 h-96", src: postData.image, alt: "\uAC8C\uC2DC\uAE00\uC0AC\uC9C4", id: "notionImg" }))) : (react_1["default"].createElement("p", { className: "my-10" }, "\uC0AC\uC9C4\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."))), + postData.image && postData.image.length > 0 ? (postData.image.map(function (URL, i) { return (react_1["default"].createElement("div", { className: "flex flex-wrap justify-center border-2 border-gray-200 my-2" }, + react_1["default"].createElement("img", { className: "w-96 h-96", src: URL, alt: "\uAC8C\uC2DC\uAE00\uC0AC\uC9C4", id: "notionImg" }))); })) : (react_1["default"].createElement("p", { className: "my-10" }, "\uC0AC\uC9C4\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."))), react_1["default"].createElement("section", { className: "mt-11 flex flex-col gap-5" }, react_1["default"].createElement("div", null, react_1["default"].createElement("p", { className: "text-lg font-bold" }, From 0facee892dc66ac98fd286c49bea198859c49804 Mon Sep 17 00:00:00 2001 From: HSCHEOL Date: Wed, 2 Oct 2024 15:12:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/NotionAdd.tsx | 18 +++++++++--------- src/pages/dist/NotionAdd.js | 3 +-- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/pages/NotionAdd.tsx b/src/pages/NotionAdd.tsx index de76a4b..8d2e45e 100644 --- a/src/pages/NotionAdd.tsx +++ b/src/pages/NotionAdd.tsx @@ -365,15 +365,15 @@ const NotionAdd: React.FC = () => {

사진 등록

- {previewUrl && ( -
- 미리보기 -
- )} + {imageUrls.map((url, index) => ( + {`uploaded-${index}`} + ))} + + { />
+ {/*사진 초기화하기 */} + {imageUrls && imageUrls.length > 0 && ( +
+ +
+ )} {/* 모임 등록 버튼 */}