add react function

codeit-bootcamp-frontend · Dec 4, 2024 · 73a0b0e · 73a0b0e
1 parent 0cc9659
commit 73a0b0e
Show file tree

Hide file tree

Showing 31 changed files with 271 additions and 46 deletions.
diff --git a/.github/component/AllItem.css b/.github/component/AllItem.css
diff --git a/.github/component/AllItem.jsx b/.github/component/AllItem.jsx
@@ -0,0 +1,26 @@
+import "./AllItem.css";
+
+function AllItem({ imageUrl, title, price, likeCount, size }) {
+  return (
+    <div>
+      <div className="All-list">
+        <img
+          className="product-image"
+          src={imageUrl}
+          alt="product"
+          style={{
+            width: `${size}px`,
+            height: `${size}px`,
+          }}
+        />
+        <p>{title}</p>
+        <p>{price}원</p>
+        <div>
+          <img src={heart} alt="좋아요 수" /> {likeCount}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AllItem;
diff --git a/.github/component/BestItem.css b/.github/component/BestItem.css
diff --git a/.github/component/BestItem.jsx b/.github/component/BestItem.jsx
@@ -0,0 +1,29 @@
+import heart from "../ImgFile/icon_wish.svg";
+
+import "./BestItem.css";
+
+function BestItem({ imageUrl, title, price, likeCount, size }) {
+  return (
+    <div>
+      <div>
+        <img
+          className="Best-image"
+          src={imageUrl}
+          alt="product"
+          style={{
+            width: `${size}px`,
+            height: `${size}px`,
+          }}
+        />
+        <p>{title}</p>
+        <p>{price}원</p>
+        <div>
+          <img src={heart} alt="좋아요 수" />
+          {likeCount}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BestItem;
diff --git a/.github/component/HeaderNav.jsx b/.github/component/HeaderNav.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+function ItemCard({ item }) {
+  return (
+    <div className="itemCard">
+      <img src={item.images[0]} alt={item.name} className="itemCardThumbnail" />
+      <div className="itemSummary">
+        <h2 className="itemName">{item.name}</h2>
+        <p className="itemPrice">{item.price.toLocaleString()}원</p>
+        <div className="favoriteCount">
+          {item.favoriteCount}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ItemCard;
diff --git a/.github/component/ItemCard.jsx b/.github/component/ItemCard.jsx
diff --git a/Img_home_01.png → components/Img_home_01.png b/Img_home_01.png → components/Img_home_01.png
diff --git a/Img_home_02.png → components/Img_home_02.png b/Img_home_02.png → components/Img_home_02.png
diff --git a/Img_home_03.png → components/Img_home_03.png b/Img_home_03.png → components/Img_home_03.png
diff --git a/bottom-banner.png → components/bottom-banner.png b/bottom-banner.png → components/bottom-banner.png
diff --git a/google-logo.png → components/google-logo.png b/google-logo.png → components/google-logo.png
diff --git a/ic_facebook.png → components/ic_facebook.png b/ic_facebook.png → components/ic_facebook.png
diff --git a/ic_instagram.png → components/ic_instagram.png b/ic_instagram.png → components/ic_instagram.png
diff --git a/components/ic_search.png b/components/ic_search.png
diff --git a/components/ic_sort.png b/components/ic_sort.png
diff --git a/ic_twitter.png → components/ic_twitter.png b/ic_twitter.png → components/ic_twitter.png
diff --git a/ic_youtube.png → components/ic_youtube.png b/ic_youtube.png → components/ic_youtube.png
diff --git a/kakao-logo.png → components/kakao-logo.png b/kakao-logo.png → components/kakao-logo.png
diff --git a/logo.png → components/logo.png b/logo.png → components/logo.png
diff --git a/main-banner.png → components/main-banner.png b/main-banner.png → components/main-banner.png
diff --git a/passwordDefault.png → components/passwordDefault.png b/passwordDefault.png → components/passwordDefault.png
diff --git a/passwordVariant.png → components/passwordVariant.png b/passwordVariant.png → components/passwordVariant.png
diff --git a/components/profile.png b/components/profile.png
diff --git a/components/size=large, _status=inactive.png b/components/size=large, _status=inactive.png
diff --git a/components/wishlist.png b/components/wishlist.png
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 <body>
     <header>
         <a href="/" class="header__logo">
-            <img src="logo.png">
+            <img src="compnents/logo.png">
         </a>
         <a href="/login.html" class="header__btn">
             로그인
@@ -24,10 +24,10 @@ <h1>일상의 모든 물건을<br>
                 구경하러 가기
             </a>
         </div>
-        <img src="main-banner.png">
+        <img src="components/main-banner.png">
     </section>
     <section class="content-section">
-        <img src="Img_home_01.png" class="content-section__img">
+        <img src="components/Img_home_01.png" class="content-section__img">
         <div class="content-section__container">
             <h3>Hot item</h3>
             <h2>인기 상품을<br>
@@ -44,10 +44,10 @@ <h2>구매를 원하는 상품을<br>
             <p>구매하고 싶은 물품은<br>
                검색해서 쉽게 찾아보세요</p>
         </div>
-        <img src="Img_home_02.png" class="content-section__img">
+        <img src="components/Img_home_02.png" class="content-section__img">
     </section>
     <section class="content-section">
-        <img src="Img_home_03.png" class="content-section__img">
+        <img src="components/Img_home_03.png" class="content-section__img">
         <div class="content-section__container">
             <h3>Register</h3>
             <h2>판매를 원하는 상품을<br>
@@ -59,7 +59,7 @@ <h2>판매를 원하는 상품을<br>
     <div class="bottom-banner">
         <h2>믿을 수 있는<br>
             판다마켓 중고 거래</h2>
-        <img src="bottom-banner.png">
+        <img src="components/bottom-banner.png">
     </div>
     <footer>
         <span>ⓒcodeit - 2024</span>
@@ -69,16 +69,16 @@ <h2>믿을 수 있는<br>
         </div>
         <div>
             <a href="http://facebook.com" target="_blank">
-              <img src="ic_facebook.png">
+              <img src="components/ic_facebook.png">
             </a>
             <a href="http://twitter.com" target="_blank">
-              <img src="ic_twitter.png">
+              <img src="components/ic_twitter.png">
             </a>
             <a href="http://youtube.com" target="_blank">
-              <img src="ic_youtube.png">
+              <img src="components/ic_youtube.png">
             </a>
             <a href="http://instagram.com" target="_blank">
-              <img src="ic_instagram.png">
+              <img src="components/ic_instagram.png">
             </a>
         </div>
     </footer>

diff --git a/login.html b/login.html
@@ -1,48 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓</title>
-    <link rel="stylesheet" href="asset.css">
-    <link rel="stylesheet" href="signup.css">
-</head>
-<body>
+    <link rel="stylesheet" href="asset.css" />
+    <link rel="stylesheet" href="signup.css" />
+  </head>
+  <body>
     <div class="container">
-    <header class="header__logo">
+      <header class="header__logo">
         <a href="/">
-            <img src="logo.png" width= "396px">
+          <img src="components/logo.png" width="396px" />
         </a>
-    </header>
-    <form class="form__container">
+      </header>
+      <form class="form__container">
         <div class="form__form-group">
-            <label for="email">이메일</label><br>
-            <input id="email" type="text" name="email" placeholder="이메일을 입력해주세요">
+          <label for="email">이메일</label><br />
+          <input
+            id="email"
+            type="text"
+            name="email"
+            placeholder="이메일을 입력해주세요"
+          />
         </div>
         <div class="form__form-group">
-            <label for="password">비밀번호</label><br>
-            <input id="password" type="password" name="userPassword" placeholder="비밀번호를 입력해주세요">
+          <label for="password">비밀번호</label><br />
+          <input
+            id="password"
+            type="password"
+            name="userPassword"
+            placeholder="비밀번호를 입력해주세요"
+          />
         </div>
-        <button type="button" class="password-toggle-button" arialabel="비밀번호 보기">
-            <img src="passwordDefault.png">
+        <button
+          type="button"
+          class="password-toggle-button"
+          arialabel="비밀번호 보기"
+        >
+          <img src="components/passwordDefault.png" />
         </button>
-        <button type="submit" class="form__signup-button"style="border:0 solid black">로그인</button>
-    </form> 
-    <section class="section__container">
+        <button
+          type="submit"
+          class="form__signup-button"
+          style="border: 0 solid black"
+        >
+          로그인
+        </button>
+      </form>
+      <section class="section__container">
         <h3>간편 로그인하기</h3>
         <div class="section__icon-container">
-            <a href="http://www.google.com" target="_blank">
-                <img src="google-logo.png">
-            </a>
-            <a href="http://www.kakaocorp.com/page" target="_blank">
-                <img src="kakao-logo.png">
-            </a>
+          <a href="http://www.google.com" target="_blank">
+            <img src="components/google-logo.png" />
+          </a>
+          <a href="http://www.kakaocorp.com/page" target="_blank">
+            <img src="components/kakao-logo.png" />
+          </a>
         </div>
-    </section>
-    <footer class="footer__container">
+      </section>
+      <footer class="footer__container">
         판다마켓이 처음이신가요?
         <a href="signup.html">회원가입</a>
-    </footer>
-</div>
-</body>
-</html>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/signup.html b/signup.html
@@ -27,14 +27,14 @@
                 <label for="password">비밀번호</label><br>
                 <input id="password" type="password" name="userPassword" placeholder="비밀번호를 입력해주세요">
                     <button type="button" class="password-toggle-button" arialabel="비밀번호 보기">
-                        <img src="passwordDefault.png">
+                        <img src="components/passwordDefault.png">
                     </button>
             </div>
             <div class="form__form-group">
                 <label for="passwordCheck">비밀번호 확인</label><br>
                 <input id="passwordCheck" type="password" name="userPassword" placeholder="비밀번호를 다시 한 번 입력해주세요">
                 <button type="button" class="password-toggle-button" arialabel="비밀번호 보기">
-                    <img src="passwordDefault.png">
+                    <img src="components/passwordDefault.png">
                 </button>
             </div>
             <button type="submit" class="form__signup-button"style="border:0 solid black">회원가입</button>
@@ -43,10 +43,10 @@
             <h3>간편 로그인하기</h3>
             <div class="section__icon-container">
                 <a href="http://www.google.com" target="_blank">
-                    <img src="google-logo.png">
+                    <img src="components/google-logo.png">
                 </a>
                 <a href="http://www.kakaocorp.com/page" target="_blank">
-                    <img src="kakao-logo.png">
+                    <img src="components/kakao-logo.png">
                 </a>
             </div>
         </section>

diff --git a/src/Api.js b/src/Api.js
@@ -0,0 +1,7 @@
+export async function getProduct(page, pageSize) {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/users/me/products?page=${page}&pageSize=${pageSize}`
+  );
+  const data = await response.json();
+  return data;
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,27 @@
+.headTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .item-list {
+    width: 1200px;
+    height: 1206px;
+  }
+  .item-list-seet {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  .item-list-seeter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  .Allproduct-list {
+    display: flex;
+  }