비로그인시 로그인 모달 나오게 처리

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]

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;

src/components/LoginModal/index.ts

@@ -0,0 +1,2 @@
+import LoginModal from './LoginModal'
+export default LoginModal

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} />
   </>;
 };
 

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>
   );
 };