[ 김현화 ] sprint6

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+
+.env

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "lodash": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-helmet": "^6.1.0",

src/api/axios_instance.js

@@ -0,0 +1,9 @@
+//axios instance
+
+import axios from "axios";
+const BASE_URL=import.meta.env.VITE_PRODUCT_BASE_URL;
+const instance=axios.create({
+  baseURL: BASE_URL,
+});
+
+export default instance;

src/api/productApi.jsx

@@ -1,11 +1,21 @@
-import axios from "axios";
+import instance from "./axios_instance";
 
 //베스트 상품
-const BASE_URL = "https://panda-market-api.vercel.app/products?page=";
-export async function getProductBest({ pageSize = 4 }) {
+const BASE_URL = import.meta.env.VITE_PRODUCT_BASE_URL;
+function createParams({ page, pageSize, orderBy }) {
+  return new URLSearchParams({
+    page: page.toString(),
+    pageSize: pageSize.toString(),
+    orderBy: orderBy,
+  });
+}
+
+
+export async function getProductBest({ page, pageSize, orderBy  }) {
   try {
-    const response = await axios.get(
-      `${BASE_URL}1&pageSize=${pageSize}&orderBy=favorite`
+    const params=createParams({page, pageSize,orderBy});
+    const response = await instance.get(   
+      `/products?${params.toString()}`
     );
     return response.data;
   } catch (error) {
@@ -16,8 +26,9 @@ export async function getProductBest({ pageSize = 4 }) {
 //리스트
 export async function getProductList({ page, pageSize, orderBy }) {
   try {
-    const response = await axios.get(
-      `${BASE_URL}${page}&pageSize=${pageSize}&orderBy=${orderBy}`
+     const params=createParams({page, pageSize,orderBy});
+    const response = await instance.get(
+     `/products?${params.toString()}`
     );
     return response.data;
   } catch (error) {

src/assets/css/common.css

@@ -2,7 +2,7 @@
 @import url("../css/reset.css");
 @import url("../css/variable.css");
 body {
-  width: 100%;
+  width: calc(100vw - (100vw - 100%));
   font-family: "Pretendard-Regular";
   font-size: var(--common);
 }
@@ -46,7 +46,8 @@ body {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 1.2rem 2.3rem;
+  padding: 1.3rem 2.229rem;
+  line-height: 1;
   font-size: var(--common);
   font-weight: 600;
   color: var(--white100);
@@ -58,14 +59,48 @@ body {
   -o-border-radius: 9999px;
   white-space: nowrap;
 }
+.button[disabled] {
+  background-color: var(--gray400);
+  cursor: default;
+}
 
 .medium-button {
   height: 4.8rem;
 }
 
+.small-round {
+  border-radius: 1.2rem;
+  -webkit-border-radius: 1.2rem;
+  -moz-border-radius: 1.2rem;
+  -ms-border-radius: 1.2rem;
+  -o-border-radius: 1.2rem;
+}
+
+.sectionTitleWrap {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0 1.2rem;
+  position: relative;
+  z-index: 100;
+  margin-bottom: 1.6rem;
+  width: 100%;
+  min-height: 3.2rem;
+}
+.sectionTitleWrap .sectionTitle {
+  position: absolute;
+  left: 0;
+  font-size: var(--sectionTitle);
+}
+
 @media all and (max-width: 47.9375rem) {
   .inner {
-    padding: 0 2rem;
+    padding: 0 1.5rem;
     width: 100%;
   }
+  .sectionTitleWrap {
+    flex-wrap: wrap;
+    gap: 0.8rem 1.4rem;
+    align-items: flex-start;
+  }
 }/*# sourceMappingURL=common.css.map */

src/assets/css/form.module.css

@@ -0,0 +1,154 @@
+.formWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem 0;
+  padding: 1rem 0;
+  width: 100%;
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem 0;
+  padding-bottom: 0.8rem;
+}
+
+.inputTitle {
+  font-size: var(--medium);
+}
+
+.inputBox {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: fit-content;
+  background-color: var(--gray100);
+  border: 1px solid var(--gray50);
+  border-radius: 1.2rem;
+  -webkit-border-radius: 1.2rem;
+  -moz-border-radius: 1.2rem;
+  -ms-border-radius: 1.2rem;
+  -o-border-radius: 1.2rem;
+}
+.inputBox input:not([type=checkbox]) {
+  padding: 1.6rem 2.4rem 1.4rem;
+  flex: 1 1 0;
+  height: 5.6rem;
+  font-size: var(--common);
+  font-weight: 400;
+  outline: 0 none;
+}
+.inputBox input:not([type=checkbox]).err {
+  border: 1px solid var(--red) !important;
+}
+.inputBox input:not([type=checkbox]).focus {
+  border: 1px solid var(--blue200);
+}
+.inputBox input:not([type=checkbox])::placeholder {
+  font-size: inherit;
+  font-weight: 400;
+  color: var(--gray400);
+}
+.inputBox textarea {
+  padding: 1.6rem 2.4rem 1.4rem;
+  width: 100%;
+  height: 28.2rem;
+  line-height: 1.7;
+  font-size: var(--common);
+  font-weight: 400;
+  outline: 0 none;
+}
+.inputBox textarea::placeholder {
+  font-size: inherit;
+  font-weight: 400;
+  color: var(--gray400);
+}
+
+.imageFileGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.6rem 2.4rem;
+}
+.imageFileGroup .box {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2rem 0;
+  position: relative;
+  width: 28.2rem;
+  height: 28.2rem;
+  font-weight: 400;
+  color: var(--gray400);
+  background-color: var(--gray100);
+  border-radius: 1.6rem;
+  -webkit-border-radius: 1.6rem;
+  -moz-border-radius: 1.6rem;
+  -ms-border-radius: 1.6rem;
+  -o-border-radius: 1.6rem;
+  cursor: pointer;
+}
+.imageFileGroup .box input {
+  display: none;
+  position: absolute;
+}
+.imageFileGroup .errorMessage {
+  width: 100%;
+  font-weight: 400;
+  color: var(--red);
+}
+
+input[type=file] {
+  overflow: hidden;
+  margin: -1px;
+  width: 0;
+  height: 0;
+}
+input[type=file]::file-selector-button {
+  display: none;
+}
+
+.imagePreview img {
+  width: auto;
+  height: 100%;
+  object-fit: cover;
+}
+.imagePreview .deleteButton {
+  z-index: 10;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding: 1rem;
+  font-size: var(--large);
+  color: var(--withe100);
+}
+
+@media all and (max-width: 74.9375rem) {
+  .imageFileGroup {
+    gap: 1.6rem 1rem;
+  }
+  .imageFileGroup .box {
+    width: 16.8rem;
+    height: 16.8rem;
+  }
+  .imagePreview .deleteButton {
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+@media all and (max-width: 47.9375rem) {
+  .imageFileGroup {
+    gap: 1.6rem 1rem;
+  }
+  .imageFileGroup .box {
+    width: calc(50% - 0.5rem);
+    max-width: 16.8rem;
+  }
+}
+.tagWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem 0;
+}/*# sourceMappingURL=form.module.css.map */

src/assets/css/header.module.css

@@ -3,7 +3,7 @@
   position: fixed;
   top: 0;
   padding: 1rem 0 0.9rem;
-  width: 100%;
+  width: 100vw;
   height: 7rem;
   background-color: var(--white100);
   border-bottom: 1px solid var(--line);
@@ -38,11 +38,26 @@
 }
 .nav a {
   display: block;
+  position: relative;
   height: fit-content;
   padding: 1rem 1rem;
 }
-.nav a.active {
-  border-bottom: 2px solid #3692ff;
+.nav a::after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 2px;
+  background-color: #3692ff;
+  content: "";
+}
+.nav a.active::after {
+  width: 100%;
+  transition: width 0.3s 0.1s;
+  -webkit-transition: width 0.3s 0.1s;
+  -moz-transition: width 0.3s 0.1s;
+  -ms-transition: width 0.3s 0.1s;
+  -o-transition: width 0.3s 0.1s;
 }
 
 @media all and (max-width: 47.9375rem) {

src/assets/css/itemsList.module.css

@@ -1,20 +1,3 @@
-.sectionTitleWrap {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0 1.2rem;
-  position: relative;
-  z-index: 100;
-  margin-bottom: 1.6rem;
-  width: 100%;
-  min-height: 3.2rem;
-}
-.sectionTitleWrap .sectionTitle {
-  position: absolute;
-  left: 0;
-  font-size: var(--sectionTitle);
-}
-
 .formWrap {
   width: 40%;
   max-width: 32.5rem;
@@ -40,11 +23,6 @@
 }
 
 @media all and (max-width: 47.9375rem) {
-  .sectionTitleWrap {
-    flex-wrap: wrap;
-    gap: 0.8rem 1.4rem;
-    align-items: flex-start;
-  }
   .formWrap {
     order: 3;
     width: 100%;