feat: 프로젝트 페이지 모달 기능 구현

src/components/DefaultButton.tsx

@@ -6,6 +6,7 @@ interface ButtonProps {
   height?: string;
   text?: string;
   fontSize?: string;
+  onClick?: () => void;
 }
 
 const MainButton = styled.button<ButtonProps>`
@@ -21,7 +22,7 @@ const MainButton = styled.button<ButtonProps>`
 
   &:hover {
     background-color: white;
-    color: black;
+    color: #88afe3;
     border: 0.1rem solid #88afe3;
   }
 `;
@@ -31,9 +32,10 @@ const DefaultButton: React.FC<ButtonProps> = ({
   height,
   text,
   fontSize,
+  onClick
 }) => {
   return (
-    <MainButton width={width} height={height} fontSize={fontSize}>
+    <MainButton width={width} height={height} fontSize={fontSize} onClick={onClick}>
       {text}
     </MainButton>
   );

src/pages/Project.tsx

@@ -1,18 +1,32 @@
 import styled from '@emotion/styled'
-import React from 'react'
+import React, { useState } from 'react'
 import DefaultButton from '../components/DefaultButton'
 import ProjectList from '../components/ProjectList'
+import ProjectCreateModal from '../components/ProjectCreateModal'
 
 const Project = () => {
+
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleCreateProject = () => {
+    setIsModalOpen(true)
+    console.log('모달창 열림')
+  }
+
+  const handleModalClose = () => {
+    setIsModalOpen(false)
+  }
+
   return (
     <ProjectWrapper>
       <Title>내 프로젝트</Title>
       <Container>
         <BtnContainer>
-          <DefaultButton text='프로젝트 생성하기' width='9.2rem' height='2.5rem' fontSize='1rem' />
+          <DefaultButton text='프로젝트 생성하기' width='9.2rem' height='2.5rem' fontSize='1rem' onClick={handleCreateProject} />
         </BtnContainer>
         <ProjectList />
       </Container>
+      <ProjectCreateModal isOpen={isModalOpen} onClose={handleModalClose} />
     </ProjectWrapper>
   )
 }

src/pages/Yunn.tsx

@@ -1,35 +1,16 @@
-import { useState } from "react";
 import MarkdownViewer from "../components/MarkdownViewer";
 import ProjectList from "../components/ProjectList";
-import styled from "@emotion/styled";
-import ProjectCreateModal from "../components/ProjectCreateModal";
 
 const Yunn = () => {
   const mdText = '# 안녕하세요'
-
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
-  const handleCreateProject = () => {
-    setIsModalOpen(true)
-    console.log('모달창 열림')
-  }
-
-  const handleModalClose = () => {
-    setIsModalOpen(false)
-  }
+
   return (
     <>
-      <Btn onClick={handleCreateProject}>버튼</Btn>
-      <ProjectCreateModal isOpen={isModalOpen} onClose={handleModalClose} />
       <ProjectList />
       <MarkdownViewer text={mdText} />
     </>
   )
 }
 
 
-const Btn = styled.div`
-
-`
-
 export default Yunn;