[Hotfix/admin] 오류 수정 및 스타일 추가 (#847)

* fix: prop 이름 오류 해결 * style: 스타일 수정 * fix: gitignore 수정 * fix: 인증 로직 복구 * refactor: 주석 제거
woowacourse-teams · Oct 21, 2022 · a8bfa62 · a8bfa62
1 parent f5a3939
commit a8bfa62
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 63 deletions.
diff --git a/admin/.gitignore b/admin/.gitignore
@@ -1,2 +1,2 @@
-node_module
+node_modules
 
diff --git a/admin/src/components/Button.jsx b/admin/src/components/Button.jsx
@@ -2,13 +2,12 @@ import styled from "styled-components";
 
 const ButtonLayout = styled.div`
   width: max-content;
-  margin: 20px;
   padding: 10px;
   background-color: #f6bebe;
   border-radius: 10px;
   border: none;
   box-shadow: 2px 2px 2px gray;
-  color: black;
+  cursor: pointer;
   &:active {
     position: relative;
     top: 2px;
@@ -17,8 +16,8 @@ const ButtonLayout = styled.div`
   }
 `;
 
-const Button = ({ onClick, text }) => {
-  return <ButtonLayout onClick={onClick}>{text}</ButtonLayout>;
+const Button = ({ onClick, children }) => {
+  return <ButtonLayout onClick={onClick}>{children}</ButtonLayout>;
 };
 
 export default Button;
diff --git a/admin/src/components/InsertProduct.jsx b/admin/src/components/InsertProduct.jsx
@@ -1,14 +1,15 @@
 import axios from "axios";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
 import { API_BASE_URL } from "../constants/urls";
 import Button from "./Button";
 import ProductCategorySelect from "./ProductCategorySelect";
 
 const InsertProduct = ({ accessToken }) => {
   const [productName, setProductName] = useState();
   const [productCategory, setProductCategory] = useState("keyboard");
-  const [productImageUrl, setProdcutImageURL] = useState();
+  const [productImageUrl, setProductImageURL] = useState();
   const navigate = useNavigate();
 
   const requestInsertProduct = async () => {
@@ -30,34 +31,60 @@ const InsertProduct = ({ accessToken }) => {
   };
   return (
     <>
-      <div>
-        <label htmlFor="">제품명</label>
-        <input
-          onChange={(e) => {
-            setProductName(e.target.value);
-          }}
-          type="text"
-        />
-      </div>
-      <div>
-        <label htmlFor="">카테고리</label>
-        <ProductCategorySelect
-          categoryInputValue={productCategory}
-          setCategoryInputValue={setProductCategory}
-        />
-      </div>
-      <div>
-        <label htmlFor="">이미지 주소</label>
-        <input
-          onChange={(e) => {
-            setProdcutImageURL(e.target.value);
-          }}
-          type="text"
-        />
-      </div>
-      <Button onClick={requestInsertProduct} text="제출"></Button>
+      <Container>
+        <FieldContainer>
+          <label htmlFor="">제품명</label>
+          <CustomInput
+            onChange={(e) => {
+              setProductName(e.target.value);
+            }}
+            type="text"
+          />
+        </FieldContainer>
+        <FieldContainer>
+          <label htmlFor="">카테고리</label>
+          <ProductCategorySelect
+            categoryInputValue={productCategory}
+            setProductCategory={setProductCategory}
+          />
+        </FieldContainer>
+        <FieldContainer>
+          <label htmlFor="">이미지 주소</label>
+          <CustomInput
+            onChange={(e) => {
+              setProductImageURL(e.target.value);
+            }}
+            type="text"
+          />
+        </FieldContainer>
+        <Button onClick={requestInsertProduct}>제출</Button>
+      </Container>
+      <h1>이미지 프리뷰</h1>
+      <PreviewImage src={productImageUrl} />
     </>
   );
 };
 
 export default InsertProduct;
+
+const Container = styled.section`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  height: 1.5rem;
+`;
+
+const FieldContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  height: 100%;
+`;
+
+const CustomInput = styled.input`
+  height: 100%;
+`;
+
+const PreviewImage = styled.img`
+  border: 1px solid black;
+`;
diff --git a/admin/src/components/Main.jsx b/admin/src/components/Main.jsx
@@ -20,6 +20,7 @@ const Contents = styled.section`
 const Navigator = styled.section`
   display: flex;
   justify-content: center;
+  gap: 1rem;
 `;
 
 const Main = ({ accessToken, setAccessToken }) => {
@@ -53,15 +54,18 @@ const Main = ({ accessToken, setAccessToken }) => {
           onClick={() => {
             navigate("/insertProduct");
           }}
-          text="제품 추가"
-        />
+        >
+          제품 추가
+        </Button>
         <Button
           onClick={() => {
             setAccessToken();
             navigate("/");
           }}
-          text="로그아웃"
-        />
+          text=""
+        >
+          로그아웃
+        </Button>
       </Navigator>
       <SearchBar searchInput={searchInput} setSearchInput={setSearchInput} />
       {products?.map((product) => {
@@ -80,16 +84,18 @@ const Main = ({ accessToken, setAccessToken }) => {
             onClick={() => {
               setPageNumber(pageNumber - 1);
             }}
-            text="이전 페이지"
-          />
+          >
+            이전 페이지
+          </Button>
         )}
         {hasNext === false ? null : (
           <Button
             onClick={() => {
               setPageNumber(pageNumber + 1);
             }}
-            text="다음 페이지"
-          />
+          >
+            다음 페이지
+          </Button>
         )}
       </Navigator>
     </>

diff --git a/admin/src/components/Product.jsx b/admin/src/components/Product.jsx
@@ -1,13 +1,15 @@
 import axios from "axios";
 import { useState } from "react";
+import styled from "styled-components";
 import { API_BASE_URL } from "../constants/urls";
+import Button from "./Button";
 import ProductCategorySelect from "./ProductCategorySelect";
 
 const Product = ({ productData, accessToken, handleRefetch }) => {
   const [editMode, setEditMode] = useState(false);
   const [productName, setProductName] = useState(productData.name);
   const [productCategory, setProductCategory] = useState(productData.category);
-  const [productImageUrl, setProdcutImageURL] = useState(productData.imageUrl);
+  const [productImageUrl, setProductImageURL] = useState(productData.imageUrl);
 
   const requestUpdate = async (id) => {
     try {
@@ -49,31 +51,81 @@ const Product = ({ productData, accessToken, handleRefetch }) => {
   };
 
   const handleProductImageUrlChange = (e) => {
-    setProdcutImageURL(e.target.value);
+    setProductImageURL(e.target.value);
   };
 
-  return editMode ? (
-    <div>
-      <span>{productData.id} </span>
-      <input value={productName} onChange={handleProductNameChange} />
-      <ProductCategorySelect
-        productCategory={productCategory}
-        setProductCategory={setProductCategory}
-      />
-      <input value={productImageUrl} onChange={handleProductImageUrlChange} />
-      <button onClick={() => requestUpdate(productData.id)}>완료</button>
-      <button onClick={() => setEditMode(false)}>취소</button>
-    </div>
-  ) : (
-    <div>
-      <span>{productData.id} </span>
-      <span>{productName} </span>
-      <span>{productCategory} </span>
-      <span>{productImageUrl} </span>
-      <button onClick={onEditButtonClick}>수정</button>
-      <button onClick={onDeleteButtonClick}>삭제</button>
-    </div>
+  return (
+    <ProductContainer>
+      {editMode ? (
+        <>
+          <Column count={1}>{productData.id} </Column>
+          <Column count={3}>
+            <CustomInput
+              value={productName}
+              onChange={handleProductNameChange}
+            />
+          </Column>
+          <Column count={1}>
+            <ProductCategorySelect
+              productCategory={productCategory}
+              setProductCategory={setProductCategory}
+            />
+          </Column>
+          <Column count={3}>
+            <CustomInput
+              value={productImageUrl}
+              onChange={handleProductImageUrlChange}
+            />
+          </Column>
+          <Column count={2}>
+            <Button onClick={() => requestUpdate(productData.id)}>완료</Button>
+            <Button onClick={() => setEditMode(false)}>취소</Button>
+          </Column>
+        </>
+      ) : (
+        <>
+          <Column count={1}>{productData.id}</Column>
+          <Column count={3}>{productName}</Column>
+          <Column count={1}>{productCategory}</Column>
+          <Column count={1}>
+            <ProductImage src={productImageUrl} />
+          </Column>
+          <Column count={2}>
+            <Button onClick={onEditButtonClick}>수정</Button>
+            <Button onClick={onDeleteButtonClick}>삭제</Button>
+          </Column>
+        </>
+      )}
+    </ProductContainer>
   );
 };
 
 export default Product;
+
+const ProductContainer = styled.section`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 70%;
+  margin: 0 auto;
+  border-bottom: 1px solid black;
+  padding: 1rem 0;
+  gap: 1rem;
+`;
+
+const Column = styled.div`
+  display: flex;
+  gap: 1rem;
+  width: ${({ count }) => count * 10}%;
+`;
+
+const CustomInput = styled.input`
+  width: 100%;
+  padding: 0.5rem;
+`;
+
+const ProductImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
diff --git a/admin/src/components/ProductCategorySelect.jsx b/admin/src/components/ProductCategorySelect.jsx
@@ -7,6 +7,7 @@ const ProductCategorySelect = ({ productCategory, setProductCategory }) => {
     <select
       defaultValue={productCategory}
       onChange={handleProductCategoryChange}
+      style={{ height: "100%" }}
     >
       <option value="keyboard">키보드</option>
       <option value="mouse">마우스</option>