[박상석] Sprint6 (#240)

* reset * fix: 머지 후 브랜치 삭제 github action 수정 * env: workflows 폴더로 이동 * sprint1 * sprint1 * sprint1 * sprint2 commit * sprint2 commit * sprint2 commit * sprint2 commit * 스프린트 미션 3 작업 완료 첫 커밋 * form 버튼 타입 수정 * sprint3 merge * commit * sprint3 작업 완료 커밋 * sprint3 merge * sprint3 작업 커밋 * sprint4 작업 완료 첫 커밋 * 파일 정리 커밋 * package.json homepage 속성 추가 * package.json 원복 * 최신순, 좋아요순 주석처리 * a태그 Link 태그로 수정 * 사용하지 않는 함수 삭제 * build 오류 코드 삭제 * 좋아요순, 최신순 선택 정렬 기능 * Netlify 404 오류 파일 업로드 * a태그 Link 수정 * 1.전체상품 10개만 표시 2.렌더링 시 로딩중 문구 추가 * class className으로 변경 * 충돌파일 삭제 후 재생성 * sprint6 작업 완성본 첫 커밋 * conflict 해결 중 삭제 파일 복원 후 재커밋 --------- Co-authored-by: hanseulhee <[email protected]> Co-authored-by: withyj-codeit <[email protected]> Co-authored-by: parksangseok <>
codeit-bootcamp-frontend · Dec 6, 2024 · 12b7dff · 12b7dff
1 parent a954cd3
commit 12b7dff
Show file tree

Hide file tree

Showing 19 changed files with 18,131 additions and 112 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "1-weekly-mission",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/add_btn_icon.png b/public/images/add_btn_icon.png
diff --git a/public/images/del_btn_icon.png b/public/images/del_btn_icon.png
diff --git a/public/index.html b/public/index.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="ko">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>판다마켓</title>
 </head>
+
 <body>
-
+  <div id="root"></div>
 </body>
+
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/asset/css/style.css b/src/asset/css/style.css
@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 :root {
-
+  --gray04: #F3F4F6;
   --gray03: #4b5563;
   --gray02: #1f2937;
   --gray01: #9ca3af;
@@ -11,6 +11,14 @@
   --red: #f74747
 }
 
+/* 에러메세지 */
+.errorText {
+  margin: 22px 0 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--red);
+}
+
 /* 공통-가운데영역 */
 .container {
   max-width: 1120px;
@@ -607,6 +615,10 @@ p.title {
 }
 
 /* 서브-상품페이지 */
+#sub.subProductReg {
+  background-color: var(--white01);
+}
+
 #sub {
   padding: 24px 0 58px;
   background-color: #fcfcfc;
@@ -619,6 +631,14 @@ p.title {
   line-height: 1.6;
 }
 
+#sub h4 {
+  margin: 10px 0 16px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--gray02);
+  line-height: 1.4;
+}
+
 #sub .cardList.bestCardBox li {
   width: 23.59%;
 }
@@ -716,15 +736,15 @@ p.title {
   background-size: cover;
 }
 
-#sub .itemsBox .productBox {
+#sub .productListBox .productBox {
   margin-bottom: 49px;
 }
 
-#sub .itemsBox .productBox .product {
+#sub .productListBox .productBox .product {
   position: relative;
 }
 
-#sub .itemsBox .productBox:last-child {
+#sub .productListBox .productBox:last-child {
   margin-bottom: 0;
 }
 
@@ -882,4 +902,28 @@ p.title {
   text-align: center;
 }
 
-.loadingText{margin: 150px 0 0; text-align: center; font-size: 26px; color: var(--blue);}
+.loadingText {
+  margin: 150px 0 0;
+  text-align: center;
+  font-size: 26px;
+  color: var(--blue);
+}
+
+/* 상품등록 */
+.productRegWrap .productRegBox{position: relative;}
+.productRegWrap .LayoutBox{display: flex; gap: 0 24px;}
+.productRegWrap .productUploadeImg{position: relative; width: 282px; height: 282px; border-radius: 12px; overflow: hidden;}
+.productRegWrap .productUploadeImg img{display: block; width: 100%;}
+.productRegWrap .productUploadeImg .delBtn{position: absolute; top:12px; right:12px; width: 20px; height: 24px; background: url(/public/images/del_btn_icon.png)no-repeat center; background-size: cover;}
+
+/* 폼 */
+.formBox{margin: 0 0 32px;}
+.formBox .inputFileBox label{display: flex; align-items: center; justify-content: center; width: 282px; height: 282px; background-color: var(--gray04); border-radius: 12px; cursor: pointer;}
+.formBox .inputFileBox label span{position: relative; display: flex; flex-direction: column; align-items: center; gap: 15px 0;  color: var(--gray01); line-height: 1;}
+.formBox .inputFileBox label span::before{content: ''; width: 48px; height: 48px; background: url(/public/images/add_btn_icon.png)no-repeat center; background-size: cover;} 
+.formBox .inputTextBox input{padding: 20px 20px 20px 24px; width: 100%; border-radius: 12px; background-color: var(--gray04); font-size: 16px;}
+.formBox .inputTextBox input::placeholder{color: var(--gray01); font-size: 16px;}
+.formBox .textAreaBox textarea{padding: 20px 20px 20px 24px; width: 100%; height: 282px; border: 0; background-color: var(--gray04); font-family: 'pretendard', sans-serif; font-size: 16px; border-radius: 12px;}
+.formBox .textAreaBox textarea::placeholder{color: var(--gray01);}
+.productRegBox .addBtn{position: absolute; top:0; right:0; display: block; width: 74px; height: 42px; line-height: 42px; text-align: center; background-color: var(--blue); border-radius: 8px; color: #fff; color: var(--gray04); font-size: 16px;}
+.productRegBox .addBtn:disabled{background-color: var(--gray01); cursor: auto;}
diff --git a/src/components/page/Home.jsx b/src/components/page/Home.jsx
@@ -5,11 +5,9 @@ import Header from "../section/Header";
 export default function Home() {
   return (
     <div className="App">
-
       <Header />
       <Main />
       <Footer />
-
     </div>
   )
 }
diff --git a/src/components/page/ProductList.jsx b/src/components/page/ProductList.jsx
@@ -17,7 +17,7 @@ export default function ProductList() {
 
   useEffect(() => {
 
-    const allItem = async function () {
+    async function allItem() {
       try {
         let allItems = [];
         const totalPages = Math.ceil(175 / 10);
@@ -35,7 +35,7 @@ export default function ProductList() {
 
     };
 
-    const BestItem = async function () {
+    async function BestItem() {
       try {
         let allItems = [];
         const totalPages = Math.ceil(175 / 10);
@@ -68,7 +68,7 @@ export default function ProductList() {
     setFilterItem(filter);
   }, [productSearch, item]);
 
-  const sortItems = function (items) {
+  function sortItems(items) {
     if (!Array.isArray(items)) return [];
     if (sortOrder === 'latest') {
 
@@ -82,16 +82,16 @@ export default function ProductList() {
     return items;
   }
 
-  const getProductData = function (e) {
+  function getProductData(e) {
     setProductSearch(e.target.value);
   };
 
-  const toggleSelect = function (e) {
+  function toggleSelect(e) {
     e.preventDefault();
     setSelectView(!selectView);
   };
 
-  const handelSortChange = function (e, order) {
+  function handelSortChange(e, order) {
     e.preventDefault();
     setSortOrder(order);
     setSelectView(false);
@@ -102,7 +102,7 @@ export default function ProductList() {
       <Header />
       <main id="sub">
         <div className="contentBox">
-          <div className="itemsBox">
+          <div className="productListBox">
 
 
             {loading ? (