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 = ({ 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 ( @@ -46,12 +76,29 @@ const ModuleCoreHeader: FC = ({ onClickTitle, onClickProject - 프로젝트 선택 + console.log('프로젝트 선택')}>프로젝트 선택 + + + setIsOpen(true)}>프로젝트 생성 + setIsOpen(false)} title="프로젝트 선택" visible={isOpen} footer={[ + <> + + + ]} > + + 프로젝트 이름 + setName(e.target.value)} value={name}> + 설명 + setDescription(e.target.value)} value={description}> + + ); };