From ed375a56741d7aa8e416040fe9179ad45ebfb45d Mon Sep 17 00:00:00 2001
From: Dongho Gang <gongdongho12@gmail.com>
Date: Sun, 19 Jul 2020 21:09:34 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=8B=9C?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EB=82=98?=
 =?UTF-8?q?=EC=98=A4=EA=B2=8C=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ApplyModal/ApplyModal.tsx      | 23 ++++++++++---------
 src/components/LoginModal/LoginModal.tsx      | 22 ++++++++++++++++++
 src/components/LoginModal/index.ts            |  2 ++
 .../LoginModalButton/LoginModalButton.tsx     | 11 ++-------
 src/containers/About/About.tsx                | 12 +++++++---
 5 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 src/components/LoginModal/LoginModal.tsx
 create mode 100644 src/components/LoginModal/index.ts

diff --git a/src/components/ApplyModal/ApplyModal.tsx b/src/components/ApplyModal/ApplyModal.tsx
index d19c6cd..fce4a2f 100644
--- a/src/components/ApplyModal/ApplyModal.tsx
+++ b/src/components/ApplyModal/ApplyModal.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useState, ChangeEvent, useCallback, useEffect } from 'react';
-import { Modal, Input, Button } from 'antd';
+import { Modal, Input, Button, message } from 'antd';
 import FlexCenter from 'components/FlexCenter';
 import { useParams } from 'react-router-dom';
 import axiosInstance from 'api/AxiosInstance';
@@ -29,19 +29,20 @@ const ApplyModal: FunctionComponent<IApplyModalProps> = (props) => {
   const asyncFunction = useCallback(
     async () => {
       if (count && count > 0) {
+        try {
+          const { data } = await axiosInstance.post(`/sharing/${productId}/apply`, { number: count })
+          Modal.success({
+            content: '성공적으로 참여했습니다.',
+          });
 
-        const { data } = await axiosInstance.post(`/sharing/${productId}/apply`, { number: count })
-        Modal.success({
-          content: '성공적으로 참여했습니다.',
-        });
-
-        if (handleCancel) {
-          handleCancel()
+          if (handleCancel) {
+            handleCancel()
+          }
+        } catch ({ response }) {
+          message.error(response?.data?.detail);
         }
       } else {
-        Modal.error({
-          content: '갯수를 1 이상으로 선택해 주세요.'
-        });
+        message.error('갯수를 1 이상으로 선택해 주세요.');
       }
     },
     [count, handleCancel]
diff --git a/src/components/LoginModal/LoginModal.tsx b/src/components/LoginModal/LoginModal.tsx
new file mode 100644
index 0000000..2a0702e
--- /dev/null
+++ b/src/components/LoginModal/LoginModal.tsx
@@ -0,0 +1,22 @@
+import React, { FunctionComponent } from 'react';
+import { Modal } from 'antd';
+import LoginForm from 'components/LoginForm';
+
+interface ILoginModalProps {
+  visible: boolean,
+  hideModal: Function
+}
+
+const LoginModal: FunctionComponent<ILoginModalProps> = ({ visible, hideModal }) => {
+  return <Modal
+    title="로그인"
+    visible={visible}
+    footer={null}
+    // onOk={handleOk}
+    onCancel={hideModal as any}
+  >
+    <LoginForm handleOk={hideModal} /> 
+  </Modal>;
+};
+
+export default LoginModal;
diff --git a/src/components/LoginModal/index.ts b/src/components/LoginModal/index.ts
new file mode 100644
index 0000000..910801d
--- /dev/null
+++ b/src/components/LoginModal/index.ts
@@ -0,0 +1,2 @@
+import LoginModal from './LoginModal'
+export default LoginModal
\ No newline at end of file
diff --git a/src/components/LoginModalButton/LoginModalButton.tsx b/src/components/LoginModalButton/LoginModalButton.tsx
index f9729e2..6b2bfba 100644
--- a/src/components/LoginModalButton/LoginModalButton.tsx
+++ b/src/components/LoginModalButton/LoginModalButton.tsx
@@ -7,6 +7,7 @@ import accountState from 'state/account';
 import { QuestionCircleOutlined, CloseOutlined } from "@ant-design/icons";
 import FlexCenter from 'components/FlexCenter';
 import axiosInstance from 'api/AxiosInstance';
+import LoginModal from 'components/LoginModal';
 
 
 interface ILoginModalProps {
@@ -61,15 +62,7 @@ const LoginModalButton: FunctionComponent<ILoginModalProps> = (props) => {
         </Button>
       )
     }
-    <Modal
-      title="로그인"
-      visible={visible}
-      footer={null}
-      // onOk={handleOk}
-      onCancel={hideModal}
-    >
-      <LoginForm /> 
-    </Modal>
+    <LoginModal visible={visible} hideModal={hideModal} />
   </>;
 };
 
diff --git a/src/containers/About/About.tsx b/src/containers/About/About.tsx
index 3dd7fd3..e36836e 100644
--- a/src/containers/About/About.tsx
+++ b/src/containers/About/About.tsx
@@ -12,6 +12,8 @@ import { useRecoilValue } from "recoil";
 import { title } from "process";
 import { meta } from "api";
 import locationState from "state/location";
+import accountState from "state/account";
+import LoginModal from "components/LoginModal";
 
 interface IAboutProps {
   // title: string;
@@ -148,7 +150,10 @@ const About: FunctionComponent<IAboutProps> = (props) => {
   
   const assignTagStyle = tagStyle[type]
 
+  const [visibleLogin, setVisibleLogin] = useState<boolean>(false)
+
   const [applyModalVisible, setApplyModalVisible] = useState<boolean>(false)
+  const account = useRecoilValue(accountState);
 
   return (
     <DefaultLayout>
@@ -186,15 +191,16 @@ const About: FunctionComponent<IAboutProps> = (props) => {
         <FlexCenter style={{ width: '100%', padding: '10px', justifyContent: 'flex-start', borderTop: '1px solid #eee' }}>
           {description}
         </FlexCenter>
-        <FlexCenter style={{ width: '100%', padding: '10px' }}>
+        {<FlexCenter style={{ width: '100%', padding: '10px' }}>
           <Button style={{ width: 'auto', backgroundColor: assignTagStyle.backgroundColor, borderColor: assignTagStyle.backgroundColor }} type="primary" htmlType="submit" onClick={
-            () => isgroupbuying ? setApplyModalVisible(true) : openContact()
+            () => account?.id ? (isgroupbuying ? setApplyModalVisible(true) : openContact()) : setVisibleLogin(true)
           }>
             {isgroupbuying ? '공동구매 참여하기' : '연락하기'}
           </Button>
-        </FlexCenter>
+        </FlexCenter>}
       </AboutComponent>
       <ApplyModal visible={applyModalVisible} data={data} handleCancel={() => setApplyModalVisible(false)} />
+      <LoginModal visible={visibleLogin} hideModal={() => setVisibleLogin(false)} />
     </DefaultLayout>
   );
 };