From 3626c2f37944e63456402235bf2c35399b4348f5 Mon Sep 17 00:00:00 2001
From: choisungwook <kgg1959@naver.com>
Date: Sat, 18 Jun 2022 19:13:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(project):=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EA=B8=B0=EB=8A=A5=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20#14?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 긴급작업
* 소스 typescript 변경
* refactor 해야함
---
 src/components/modules/ModuleCoreHeader.tsx | 55 +++++++++++++++++++--
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/components/modules/ModuleCoreHeader.tsx b/src/components/modules/ModuleCoreHeader.tsx
index ce6e617..9f4d373 100644
--- a/src/components/modules/ModuleCoreHeader.tsx
+++ b/src/components/modules/ModuleCoreHeader.tsx
@@ -1,15 +1,18 @@
-import React, { FC } from 'react';
-import { MenuOutlined, CaretDownOutlined } from '@ant-design/icons';
+import React, { FC, useState } from 'react';
+import { MenuOutlined, CaretDownOutlined, FolderAddOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
+import axios from 'axios';
+import { Modal, Row, Col, Input, Button } from 'antd';
 import { coreHeaderProperty } from 'types/modules';
 import AtomProfile from 'components/atoms/AtomProfile';
-
 import AtomHeader from 'components/atoms/AtomHeader';
 import AtomH2 from 'components/atoms/AtomH2';
 import AtomH4 from 'components/atoms/AtomH4';
 import AtomSpan from 'components/atoms/AtomSpan';
 import AtomDiv from 'components/atoms/AtomDiv';
 
+const { Search } = Input;
+
 const CoreHeaderStyled = styled.div`
   .ant-layout-header {
     padding: 0 25px;
@@ -35,6 +38,33 @@ const CoreHeaderStyled = styled.div`
   }
 `;
 const ModuleCoreHeader: FC<coreHeaderProperty> = ({ onClickTitle, onClickProject }) => {
+const [isOpen, setIsOpen] = useState(false);
+const [name, setName] = useState('');
+const [description, setDescription] = useState('');
+const callApi =  async () => {
+
+ const response = await axios.post('http://dev-backend.choilab.xyz/api/v1/project/', 
+ {
+   name,description
+ },
+ {
+   headers: {
+      'Content-type': 'application/json',
+      'Accept': 'application/json'
+   }
+  }
+ ) 
+   .then((response) => {console.log(response.data); })
+   .catch((response) => {console.log('Error!') });
+
+}
+const handleSubmit = () => {
+  setIsOpen(false);
+  console.log(name);
+  console.log(description);
+  callApi();
+}
+
   return (
     <CoreHeaderStyled>
       <AtomHeader>
@@ -46,12 +76,29 @@ const ModuleCoreHeader: FC<coreHeaderProperty> = ({ onClickTitle, onClickProject
         </AtomH2>
         <AtomH4 onClick={onClickProject}>
           <CaretDownOutlined></CaretDownOutlined>
-          <AtomSpan className="projectLabel">프로젝트 선택</AtomSpan>
+          <AtomSpan className="projectLabel" onClick={() => console.log('프로젝트 선택')}>프로젝트 선택</AtomSpan>
+        </AtomH4>
+        <AtomH4 onClick={onClickProject}>
+          <AtomSpan className="projectLabel" onClick={() => setIsOpen(true)}>프로젝트 생성</AtomSpan>
         </AtomH4>
         <AtomDiv className="projectProfile">
           <AtomProfile />
         </AtomDiv>
       </AtomHeader>
+      <Modal onCancel={() => setIsOpen(false)} title="프로젝트 선택" visible={isOpen} footer={[
+        <>
+           <Button htmlType='submit' onClick={()=>handleSubmit()} >
+           생성
+         </Button>
+        </>
+      ]} >
+        <Row>
+              <Col span={4}>프로젝트 이름</Col>
+              <Col span={20}><Input onChange={(e)=>setName(e.target.value)} value={name}></Input></Col>
+              <Col span={4}>설명</Col>
+              <Col span={20}><Input.TextArea onChange={(e)=>setDescription(e.target.value)} value={description}></Input.TextArea></Col>
+        </Row>
+      </Modal>
     </CoreHeaderStyled>
   );
 };