Merge pull request #681 from Lee-Dong-Seok/React-이동석-sprint7

[이동석] sprint7

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.0",

src/App.js

@@ -7,6 +7,7 @@ import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage";
 import Header from "./components/Layout/Header";
 import ItemDetailPage from './pages/MarketPage/components/ItemDetailPage';
 
+
 function App() {
   return (
     <BrowserRouter>

src/api/itemApi.js

@@ -1,10 +1,42 @@
+const baseurl = process.env.REACT_APP_BASE_URL;
 export async function getProducts(params = {}) {
   // URLSearchParams을 이용하면 파라미터 값을 자동으로 쉽게 인코딩할 수 있어요.
   const query = new URLSearchParams(params).toString();
+  try {
+    const response = await fetch(
+      `${baseurl}/products?${query}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch products:", error);
+    throw error;
+  }
+}
+
+export async function getProductInformation(itemId) {
+  try {
+    const response = await fetch(
+      `${baseurl}/products/${itemId}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch products:", error);
+    throw error;
+  }
+}
 
+export async function getComments(itemId) {
   try {
     const response = await fetch(
-      `https://panda-market-api.vercel.app/products?${query}`
+      `${baseurl}/products/${itemId}/comments/?limit=100`
     );
     if (!response.ok) {
       throw new Error(`HTTP error: ${response.status}`);
@@ -16,3 +48,4 @@ export async function getProducts(params = {}) {
     throw error;
   }
 }
+

src/pages/AddItemPage/AddItemPage.jsx

@@ -2,80 +2,7 @@ import React, { useState } from "react";
 import styled from 'styled-components';
 import FileInput from './components/FileInput';
 import TagClose from '../../assets/images/icons/tag_close.png'
-
-const Container = styled.form`
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px 12px;
-`
-const RegisterArea = styled.div`
-  height: 42px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-const RegisterTitle = styled.h1`
-  font-size: 28px;
-`
-const RegisterBtn = styled.button`
-  width: 88px;
-  height: 42px;
-  border-radius: 8px;
-  color: #ffffff;
-  background-color: #3692FF;
-  border: none;
-  cursor: pointer;
-  &:hover {
-    background-color: #2083fd;
-  }
-  &:disabled {
-    cursor: default;
-    background-color: #9CA3AF;
-  }
-`
-
-const ProductNameArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-top: 24px;
-`;
-const Input = styled.input`
-  background-color: #F3F4F6;
-  max-width: 1200px;
-  height: 56px;
-  border-radius: 12px;
-  border: none;
-  padding: 0 24px;
-  ::placeholder {
-    color: #9CA3AF;
-  }
-`
-const TextArea = styled.textarea`
-  background-color: #F3F4F6;
-  max-width: 1200px;
-  height: 233px;
-  border-radius: 12px;
-  border: none;
-  padding: 16px 24px;
-  resize: none;
-`
-const TagArea = styled.div`
-  display: flex;
-  gap: 5px;
-`
-const TagBtn = styled.div`
-  display: flex;
-  height: 48px;
-  padding: 12px 12px 12px 16px;
-  gap: 10px;
-  border-radius: 26px 0px 0px 0px;
-  border: 1px solid #F3F4F6;
-  border-radius: 24px;
-`
-const TagCloseBtn = styled.img`
-  cursor: pointer;
-`
+import '../../styles/global.css'
 
 function AddItemPage() {
   const [tags, setTags] = useState([]);
@@ -117,12 +44,19 @@ function AddItemPage() {
   const handleSubmit = (e) => {
     e.preventDefault();
   }
+  const disabled = () => {
+    if(values.productItd !=='' && values.productName !== '' && values.productPrice !== '' && tags.length > 0) {
+      return false
+    } else {
+      return true
+    }
+  }
 
   return (
     <Container onSubmit={handleSubmit}>
       <RegisterArea>
         <RegisterTitle>상품 등록하기</RegisterTitle>
-        <RegisterBtn disabled={values.productItd !=='' && values.productName !== '' && values.productPrice !== '' && tags.length > 0 ? false : true} type='submit'>등록</RegisterBtn>
+        <RegisterBtn disabled={disabled()} type='submit'>등록</RegisterBtn>
       </RegisterArea>
       <FileInput name="imgFile" value={values.imgFile} onChange={handleChange}/>
       <ProductNameArea>
@@ -149,4 +83,78 @@ function AddItemPage() {
   )
 }
 
+const Container = styled.form`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 12px;
+`
+const RegisterArea = styled.div`
+  height: 42px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+const RegisterTitle = styled.h1`
+  font-size: 28px;
+`
+const RegisterBtn = styled.button`
+  width: 88px;
+  height: 42px;
+  border-radius: 8px;
+  color: #FFFFFF;
+  background-color: var(--blue);
+  border: none;
+  cursor: pointer;
+  &:hover {
+    background-color: #2083FD;
+  }
+  &:disabled {
+    cursor: default;
+    background-color: #9CA3AF;
+  }
+`
+
+const ProductNameArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 24px;
+`;
+const Input = styled.input`
+  background-color: #F3F4F6;
+  max-width: 1200px;
+  height: 56px;
+  border-radius: 12px;
+  border: none;
+  padding: 0 24px;
+  ::placeholder {
+    color: #9CA3AF;
+  }
+`
+const TextArea = styled.textarea`
+  background-color: #F3F4F6;
+  max-width: 1200px;
+  height: 233px;
+  border-radius: 12px;
+  border: none;
+  padding: 16px 24px;
+  resize: none;
+`
+const TagArea = styled.div`
+  display: flex;
+  gap: 5px;
+`
+const TagBtn = styled.div`
+  display: flex;
+  height: 48px;
+  padding: 12px 12px 12px 16px;
+  gap: 10px;
+  border-radius: 26px 0px 0px 0px;
+  border: 1px solid #F3F4F6;
+  border-radius: 24px;
+`
+const TagCloseBtn = styled.img`
+  cursor: pointer;
+`
+
 export default AddItemPage;