From 5f02a17ce0f9146c3d44a99329e4321f21eaf1b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=A1=E1=86=BC=E1=84=83=E1=85=A9=E1=86=BC?=
 =?UTF-8?q?=E1=84=92=E1=85=A9?= <gongdongho12@gmail.com>
Date: Sat, 18 Jul 2020 10:19:55 +0900
Subject: [PATCH] =?UTF-8?q?add=20form=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |   1 +
 src/components/AddForm/AddForm.tsx     | 222 +++++++++++++++++++++++++
 src/components/AddForm/index.ts        |   2 +
 src/containers/Add/Add.tsx             |  11 ++
 src/containers/Add/index.ts            |   2 +
 src/containers/CardView/CardViewV2.tsx |   9 +-
 src/meta/routerMeta.ts                 |   1 +
 7 files changed, 242 insertions(+), 6 deletions(-)
 create mode 100644 src/components/AddForm/AddForm.tsx
 create mode 100644 src/components/AddForm/index.ts
 create mode 100644 src/containers/Add/Add.tsx
 create mode 100644 src/containers/Add/index.ts

diff --git a/package.json b/package.json
index 33db203..b32d0b0 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "less": "^3.12.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-images-upload": "^1.2.8",
     "react-infinite-scroll-component": "^5.0.5",
     "react-intl": "^5.0.2",
     "react-morefinity": "^1.0.4",
diff --git a/src/components/AddForm/AddForm.tsx b/src/components/AddForm/AddForm.tsx
new file mode 100644
index 0000000..a0f7339
--- /dev/null
+++ b/src/components/AddForm/AddForm.tsx
@@ -0,0 +1,222 @@
+import React, { useState, FunctionComponent } from "react";
+import {
+  Form,
+  Input,
+  Tooltip,
+  Cascader,
+  Select,
+  Row,
+  Col,
+  Checkbox,
+  Button,
+  AutoComplete,
+} from "antd";
+import { QuestionCircleOutlined, CloseOutlined } from "@ant-design/icons";
+
+import ImageUploader from 'react-images-upload';
+import FlexCenter from "components/FlexCenter";
+
+const { Option } = Select;
+// const AutoCompleteOption = AutoComplete.Option;
+
+const residences = [
+  {
+    value: "zhejiang",
+    label: "Zhejiang",
+    children: [
+      {
+        value: "hangzhou",
+        label: "Hangzhou",
+        children: [
+          {
+            value: "xihu",
+            label: "West Lake",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: "jiangsu",
+    label: "Jiangsu",
+    children: [
+      {
+        value: "nanjing",
+        label: "Nanjing",
+        children: [
+          {
+            value: "zhonghuamen",
+            label: "Zhong Hua Men",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+const AddForm: FunctionComponent<any> = () => {
+  const [form] = Form.useForm();
+  const [picture, setPicture] = useState<any>([])
+
+  const onFinish = (values: any) => {
+    console.log("Received values of form: ", values);
+  };
+
+  const prefixSelector = (
+    <Form.Item name="prefix" noStyle>
+      <Select style={{ width: 70 }}>
+        <Option value="86">+86</Option>
+        <Option value="87">+87</Option>
+      </Select>
+    </Form.Item>
+  );
+
+  const onDrop = (picture: any) => {
+    console.log('picture', picture)
+    setPicture(picture)
+  }
+
+  const [autoCompleteResult, setAutoCompleteResult] = useState<any[]>([]);
+
+  return (
+    <Form
+      {...formItemLayout}
+      form={form}
+      name="register"
+      onFinish={onFinish}
+      initialValues={{
+        residence: ["zhejiang", "hangzhou", "xihu"],
+        prefix: "86",
+      }}
+      scrollToFirstError
+    >
+      <Form.Item
+        name="productName"
+        label="상품이름"
+        rules={[
+          {
+            required: true,
+            message: "Please input product name!",
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        name="productType"
+        label="상품타입"
+        hasFeedback
+        rules={[{ required: true, message: '상품타입을 입력해주세요!' }]}
+      >
+        <Select placeholder="상품타입">
+          <Option value="china">China</Option>
+          <Option value="usa">U.S.A</Option>
+          <Option value="usa2">U.S.A1</Option>
+          <Option value="usa1">U.S.A2</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="productImage"
+        label={"상품이미지"}
+        // rules={[
+        //   {
+        //     required: false,
+        //     message: "Please 업로드 상품 이미지",
+        //     whitespace: true,
+        //   },
+        // ]}
+      >
+        {picture.length > 0 ? (
+          <FlexCenter>
+            <span>{picture[0].name}</span>
+            <Button type="primary" onClick={() => { onDrop([]) }} icon={<CloseOutlined />} size={'small'} />
+          </FlexCenter>
+        ) : (
+          <ImageUploader
+            withIcon={true}
+            buttonText='Choose images'
+            onChange={onDrop}
+            imgExtension={['.jpg', '.gif', '.png', '.gif']}
+            maxFileSize={5242880}
+          />
+        )}
+      </Form.Item>
+      <Form.Item
+        name="planMoney"
+        label="목표금액 (원)"
+        rules={[
+          {
+            required: true,
+            message: "공동구매 목표금액을 입력하세요!",
+          },
+        ]}
+      >
+        <Input type='number' />
+      </Form.Item>
+      <Form.Item
+        name="minMoney"
+        label="최소 판매 단위"
+        rules={[
+          {
+            required: true,
+            message: "최소 판매 단위를 입력하세요!",
+          },
+        ]}
+      >
+        <Input placeholder="2000개 1묶음" />
+      </Form.Item>
+      <Form.Item
+        name="minMoney"
+        label="단위당 금액 (원)"
+        rules={[
+          {
+            required: true,
+            message: "단위당 금액을 입력하세요!",
+          },
+        ]}
+      >
+        <Input type='number' />
+      </Form.Item>
+      
+      <Form.Item name={'detail'} label="상품에 대한 설명"
+        rules={[
+          {
+            required: true
+          }
+        ]}>
+        <Input.TextArea />
+      </Form.Item>
+
+      <Form.Item {...{ wrapperCol: { span: 24 }}}>
+        <Button style={{ width: '100%' }} type="primary" htmlType="submit">
+          추가
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default AddForm;
diff --git a/src/components/AddForm/index.ts b/src/components/AddForm/index.ts
new file mode 100644
index 0000000..d985ed7
--- /dev/null
+++ b/src/components/AddForm/index.ts
@@ -0,0 +1,2 @@
+import AddForm from './AddForm'
+export default AddForm
\ No newline at end of file
diff --git a/src/containers/Add/Add.tsx b/src/containers/Add/Add.tsx
new file mode 100644
index 0000000..863e352
--- /dev/null
+++ b/src/containers/Add/Add.tsx
@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from 'react';
+import AddForm from 'components/AddForm';
+
+interface ILoginProps {
+}
+
+const Add: FunctionComponent<ILoginProps> = (props) => {
+  return <AddForm />;
+};
+
+export default Add;
diff --git a/src/containers/Add/index.ts b/src/containers/Add/index.ts
new file mode 100644
index 0000000..a55688b
--- /dev/null
+++ b/src/containers/Add/index.ts
@@ -0,0 +1,2 @@
+import Add from './Add'
+export default Add
\ No newline at end of file
diff --git a/src/containers/CardView/CardViewV2.tsx b/src/containers/CardView/CardViewV2.tsx
index 30dec60..7134593 100644
--- a/src/containers/CardView/CardViewV2.tsx
+++ b/src/containers/CardView/CardViewV2.tsx
@@ -8,11 +8,11 @@ import FlexCenter from "components/FlexCenter";
 interface ICardViewProps {}
 
 const breakPoint = {
-  xs: 24,
+  xs: 12,
   sm: 12,
   md: 12,
   lg: 6,
-  xl: 4,
+  xl: 6,
 };
 
 const CardView: FunctionComponent<ICardViewProps> = (props) => {
@@ -45,11 +45,8 @@ const CardView: FunctionComponent<ICardViewProps> = (props) => {
     }
   }, [items, setItems, loading, setLoading]);
 
-  console.log('loading', loading)
-  console.log('items.length', items.length)
-
   return (
-    <FlexCenter style={{ maxWidth: '1440px' }}>
+    <FlexCenter style={{ maxWidth: '1080px' }}>
       <InfiniteScroll
         scrollableTarget={'list'}
         dataLength={items.length} //This is important field to render the next data
diff --git a/src/meta/routerMeta.ts b/src/meta/routerMeta.ts
index cc3e5ab..91c4abc 100644
--- a/src/meta/routerMeta.ts
+++ b/src/meta/routerMeta.ts
@@ -7,6 +7,7 @@ const routerMeta: RouterMetaType = {
   About: '/about',
   Login: '/login',
   Register: '/register',
+  Add: '/add',
   CardView: '/cardview'
 }