design: Modify New Product UI #19

dgd03146 · Jul 18, 2023 · fa4c1f0 · fa4c1f0
1 parent fb0d71d
commit fa4c1f0
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 62 deletions.
diff --git a/components/common/button/index.tsx b/components/common/button/index.tsx
@@ -4,11 +4,16 @@ import {} from 'twin.macro';
 type TProps = {
   text: string;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled: boolean;
 };
 
-const Button = ({ text, onClick }: TProps) => {
+const Button = ({ text, onClick, disabled }: TProps) => {
   return (
-    <button tw="bg-primary2 py-2 px-4 text-primary7 rounded-md hover:brightness-110" onClick={onClick}>
+    <button
+      tw="bg-primary2 py-2 px-4 text-primary7 rounded-md hover:brightness-110"
+      onClick={onClick}
+      disabled={disabled}
+    >
       {text}
     </button>
   );

diff --git a/components/layouts/footer.tsx b/components/layouts/footer.tsx
@@ -4,7 +4,7 @@ import tw from 'twin.macro';
 const Footer = () => {
   // FIXME: 맵으로 묶어서 정렬하기, 공통 컴포넌트 분리
   return (
-    <div tw="py-20 bg-primary1 px-[60px]">
+    <div tw="py-16 bg-primary1 px-[60px]">
       <div tw="flex justify-center gap-x-40 mx-auto text-primary3">
         <div>
           <h3 tw="font-Cinzel font-semibold mb-2">OWNUS</h3>

diff --git a/components/products/categories.tsx b/components/products/categories.tsx
@@ -1,10 +1,10 @@
-import { ProductsFilter } from 'constants/constant';
+import { PRODUCTS_FILTER } from 'constants/constant';
 import {} from 'twin.macro';
 
 const Categories = () => {
   return (
     <ul tw="flex justify-center mb-12 gap-x-8 px-[50px] text-[13px] text-primary3 font-semibold text-opacity-60">
-      {ProductsFilter.map((it) => (
+      {PRODUCTS_FILTER.map((it) => (
         <li className="group" tw="relative cursor-pointer" key={it.title}>
           <p>{it.title}</p>
           <div tw="absolute w-full h-0.5 bg-primary4 scale-x-0 group-hover:scale-x-90 transition-transform duration-500" />

diff --git a/constants/constant.ts b/constants/constant.ts
@@ -1,15 +1,14 @@
-export const Pages = [
-  // { href: '/about', title: 'ABOUT US' },
-  { href: '/products', title: 'SHOP' },
-  // { href: '/contacts', title: 'COMMUNITY' },
-  // { href: '/contacts', title: 'CONTACTS' },
+export const PRODUCTS_FILTER = [
+  { id: 1, title: 'Bouquet' },
+  { id: 2, title: 'Flower Basket' },
+  { id: 3, title: 'Flower Box' },
+  { id: 4, title: 'Vase Arragement' },
+  { id: 5, title: 'Plants' },
 ];
 
-export const ProductsFilter = [
-  { title: 'New' },
-  { title: 'Bouquet' },
-  { title: 'Flower Basket' },
-  { title: 'Flower Box' },
-  { title: 'Vase Arragement' },
-  { title: 'Plants' },
-];
+export const DEFAULT_PRODUCT = {
+  title: '',
+  category: '',
+  price: '',
+  description: '',
+};
diff --git a/pages/products/index.tsx b/pages/products/index.tsx
@@ -45,7 +45,7 @@ const Products = () => {
           {MockProducts.map(({ product_id, p_name, p_price, thunbnail_url }) => (
             <li tw="px-[50px] mb-[50px]" key={product_id}>
               <Link href={`/products/${product_id}`}>
-                <div css={imageWrapper}>
+                <div css={ImageWrapper}>
                   <Image
                     src={thunbnail_url}
                     alt="product"
@@ -71,7 +71,7 @@ const Products = () => {
 
 export default Products;
 
-const imageWrapper = css`
+const ImageWrapper = css`
   ${tw`relative w-full mobile:h-[350px] tablet:h-[466px] overflow-hidden`}
 
   img {

diff --git a/pages/products/new.tsx b/pages/products/new.tsx
@@ -5,21 +5,20 @@ import Image from 'next/image';
 import React, { ChangeEvent, FormEvent, useState } from 'react';
 import { TProduct } from 'types/products';
 import { uploadImage } from 'utils/uploader';
-import {} from 'twin.macro';
+import tw, { styled } from 'twin.macro';
+import { DEFAULT_PRODUCT, PRODUCTS_FILTER } from 'constants/constant';
+import defaultImage from '/public/images/background6.jpg';
 
 const NewProduct = () => {
-  const [product, setProduct] = useState<TProduct>({
-    title: '',
-    category: '',
-    price: '',
-    description: '',
-    options: '',
-  });
+  const [product, setProduct] = useState<TProduct>(DEFAULT_PRODUCT);
   const [file, setFile] = useState<File>();
+  const [isUploading, setIsUploading] = useState(false);
+  const [success, setSuccess] = useState<string | null>(null);
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value, files } = e.target;
-    if (name === 'file') {
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    if (e.target instanceof HTMLInputElement && name === 'file') {
+      const { files } = e.target;
       files && setFile(files[0]);
       return;
     }
@@ -30,17 +29,42 @@ const NewProduct = () => {
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    setIsUploading(true);
+
     if (file) {
-      uploadImage(file).then((url) => {
-        addNewProduct(product, url);
-      });
+      uploadImage(file) //
+        .then((url) => {
+          addNewProduct(product, url).then(() => {
+            setSuccess('Registered');
+
+            setTimeout(() => {
+              setSuccess(null);
+            }, 4000);
+          });
+          setProduct(DEFAULT_PRODUCT);
+        })
+        .finally(() => setIsUploading(false));
     }
   };
 
   return (
     <section>
-      {file && <Image src={URL.createObjectURL(file)} alt="local file" width={500} height={500} />}
-      <form onSubmit={handleSubmit} tw="flex flex-col mx-auto justify-center max-w-[500px] gap-y-8">
+      {success && (
+        <div tw="relative">
+          <p tw="py-4 px-4 font-bold bg-primary2 text-primary7 w-fit rounded-lg mb-2 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[100%]">
+            🌷 {success}
+          </p>
+        </div>
+      )}
+
+      <Image
+        tw="mx-auto mb-4 min-h-[300px] min-w-[300px] rounded-md"
+        src={file ? URL.createObjectURL(file) : defaultImage}
+        alt="local file"
+        width={300}
+        height={300}
+      />
+      <Form onSubmit={handleSubmit} tw="flex flex-col mx-auto justify-center max-w-[500px] w-auto gap-y-8">
         <input type="file" accept="image/*" name="file" required onChange={handleChange} lang="en" />
         <input
           type="text"
@@ -50,6 +74,13 @@ const NewProduct = () => {
           required
           onChange={handleChange}
         />
+        <select name="category" onChange={handleChange} value={product.category} required>
+          {PRODUCTS_FILTER.map(({ id, title }) => (
+            <option key={id} value={title}>
+              {title}
+            </option>
+          ))}
+        </select>
         <input
           type="text"
           name="price"
@@ -58,14 +89,6 @@ const NewProduct = () => {
           required
           onChange={handleChange}
         />
-        <input
-          type="text"
-          name="category"
-          value={product.category ?? ''}
-          placeholder="Category"
-          required
-          onChange={handleChange}
-        />
         <input
           type="text"
           name="description"
@@ -74,21 +97,17 @@ const NewProduct = () => {
           required
           onChange={handleChange}
         />
-        <select>
-          <option />
-        </select>
-        <input
-          type="text"
-          name="options"
-          value={product.options ?? ''}
-          placeholder="Options (,)"
-          required
-          onChange={handleChange}
-        />
-        <Button text={'Create Product'} />
-      </form>
+        <Button text={isUploading ? 'Uploading...' : 'Register Product'} disabled={isUploading} />
+      </Form>
     </section>
   );
 };
 
 export default withAuth(NewProduct, true);
+
+const Form = styled.form`
+  input,
+  select {
+    ${tw`py-2 px-4 border-[1px] border-solid border-primary2 rounded-md`}
+  }
+`;
diff --git a/pages/products/styles.ts b/pages/products/styles.ts
@@ -1,5 +1,4 @@
-import styled from '@emotion/styled';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 
 export const ImageWrapper = styled.div`
   ${tw`relative w-full mobile:h-[500px] tablet:h-[600px] overflow-hidden cursor-pointer`}

diff --git a/services/firebase.ts b/services/firebase.ts
@@ -52,11 +52,10 @@ export async function adminUser(user: User) {
 
 export async function addNewProduct(product: TProduct, image: string) {
   const id = uuid();
-  set(ref(database, `products/${id}`), {
+  return set(ref(database, `products/${id}`), {
     ...product,
     id,
     price: parseInt(product.price),
     image,
-    options: product.options?.split(','),
   });
 }
diff --git a/types/products.ts b/types/products.ts
@@ -3,7 +3,6 @@ export type TProduct = {
   category: string;
   price: string;
   description: string;
-  options: string;
 };
 
 export type TProducts = {