diff --git a/src/App.tsx b/src/App.tsx index 89ed212ad..c2eafcb42 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,13 @@ import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import HomePage from "./pages/HomePage/HomePage"; -import LoginPage from "./pages/LoginPage/LoginPage"; +import LoginPage from "./pages/auth/LoginPage"; import MarketPage from "./pages/MarketPage/MarketPage"; import AddItemPage from "./pages/AddItemPage/AddItemPage"; import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage"; import Header from "./components/Layout/Header"; import ItemPage from "./pages/ItemPage/ItemPage"; -import SignupPage from "./pages/LoginPage/SignupPage"; +import SignupPage from "./pages/auth/SignupPage"; function App() { return ( diff --git a/src/api/itemApi.ts b/src/api/itemApi.ts index d0cc7f961..072433f94 100644 --- a/src/api/itemApi.ts +++ b/src/api/itemApi.ts @@ -164,3 +164,62 @@ export async function deleteProductComment(commentId: number) { throw error; } } + +export interface NewProduct { + images: string[]; + tags: string[]; + price: number; + description: string; + name: string; +} + +export async function uploadProduct(newProduct: NewProduct) { + if (!newProduct) { + throw new Error("Invalid product data"); + } + + try { + const response = await fetch(`${baseURL}/products/`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(newProduct), + }); + + if (!response.ok) { + const errorBody = await response.json(); + throw new Error( + `Failed to upload the post. ${errorBody.message || "Unknown error"}` + ); + } + + const body = await response.json(); + return body; + } catch (error) { + console.error("Failed to upload product:", error); + throw error; + } +} + +export async function uploadImage(imageFile: File) { + const formData = new FormData(); + formData.append("image", imageFile); + + try { + const response = await fetch(`${baseURL}/images/upload`, { + method: "POST", + body: formData, + }); + + if (!response.ok) { + throw new Error(`HTTP error: ${response.status}`); + } + + const body = await response.json(); + return body.url; // Assuming the response contains the URL of the uploaded image + } catch (error) { + console.error("Failed to upload image:", error); + throw error; + } +} diff --git a/src/components/UI/ImageUpload.tsx b/src/components/UI/ImageUpload.tsx index ad0ba8d54..342947169 100644 --- a/src/components/UI/ImageUpload.tsx +++ b/src/components/UI/ImageUpload.tsx @@ -70,9 +70,10 @@ const HiddenFileInput = styled.input` interface ImageUploadProps { title?: string; + setImageFiles: (images: File[]) => void; } -const ImageUpload = ({ title }: ImageUploadProps) => { +const ImageUpload: React.FC = ({ title, setImageFiles }) => { const [imagePreviewUrl, setImagePreviewUrl] = useState(""); const handleImageChange = (event: ChangeEvent) => { @@ -80,11 +81,13 @@ const ImageUpload = ({ title }: ImageUploadProps) => { if (file) { const imageUrl = URL.createObjectURL(file); setImagePreviewUrl(imageUrl); + setImageFiles([file]); // File 객체를 넘겨줌 } }; const handleDelete = () => { setImagePreviewUrl(""); + setImageFiles([]); // 빈 배열을 넘겨줌 }; return ( diff --git a/src/pages/AddItemPage/AddItemPage.tsx b/src/pages/AddItemPage/AddItemPage.tsx index cbca5d18a..a7fc40f50 100644 --- a/src/pages/AddItemPage/AddItemPage.tsx +++ b/src/pages/AddItemPage/AddItemPage.tsx @@ -35,6 +35,7 @@ const AddItemPage: React.FC = () => { const [description, setDescription] = useState(""); const [price, setPrice] = useState(""); const [tags, setTags] = useState([]); + const [imageFiles, setImageFiles] = useState([]); const addTag = (tag: string) => { if (!tags.includes(tag)) { @@ -59,7 +60,7 @@ const AddItemPage: React.FC = () => { - +