From 7d2cd3e4ff3c025a6d8bf9cba99efdbbbd8206bd Mon Sep 17 00:00:00 2001
From: YerangPark <smsms_@naver.com>
Date: Wed, 11 Sep 2024 22:16:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?Navbar=20=EB=B0=8F=20=EC=B4=88=EA=B8=B0=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/page.tsx                    |  5 +++
 src/components/atoms/Button.tsx               |  4 +--
 src/components/molecules/DefaultButton.tsx    |  2 +-
 src/components/molecules/RoundButton.tsx      |  2 +-
 src/components/molecules/SubmitButton.tsx     |  2 +-
 .../molecules/UserButtonWithMenu.tsx          | 19 ++++++++++++
 src/components/organisms/DashboardContent.tsx | 13 ++++++++
 src/components/organisms/DashboardNavBar.tsx  | 21 +++++++++++++
 .../organisms/EmptyDashboardContents.tsx      | 31 +++++++++++++++++++
 src/components/organisms/LoginModal.tsx       |  2 +-
 src/components/organisms/SignupModal.tsx      | 12 ++++---
 src/components/templates/DashboardPage.tsx    | 16 ++++++++++
 src/types/data.ts                             |  3 ++
 src/types/style.ts                            |  3 +-
 14 files changed, 123 insertions(+), 12 deletions(-)
 create mode 100644 src/app/dashboard/page.tsx
 create mode 100644 src/components/molecules/UserButtonWithMenu.tsx
 create mode 100644 src/components/organisms/DashboardContent.tsx
 create mode 100644 src/components/organisms/DashboardNavBar.tsx
 create mode 100644 src/components/organisms/EmptyDashboardContents.tsx
 create mode 100644 src/types/data.ts

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..9b9850f
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,5 @@
+import DashboardPage from '@/components/templates/DashboardPage'
+
+export default function Page() {
+  return <DashboardPage />
+}
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 532255b..3f14d16 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button as ChakraButton } from '@chakra-ui/react'
 import { ButtonProps } from '@/types/style'
 
-const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false, bg, color, _hover, ...props}) => {
+const Button: React.FC<ButtonProps> = ({ children, onClick, disabled = false, bg, color, _hover, ...props}) => {
   return (
     <ChakraButton
     onClick={onClick}
@@ -11,7 +11,7 @@ const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false, bg, c
     color={color}
     _hover={_hover}
     {...props}>
-      {label}
+      {children}
     </ChakraButton>
   )
 }
diff --git a/src/components/molecules/DefaultButton.tsx b/src/components/molecules/DefaultButton.tsx
index a54b5f2..2c092cb 100644
--- a/src/components/molecules/DefaultButton.tsx
+++ b/src/components/molecules/DefaultButton.tsx
@@ -25,7 +25,7 @@ const DefaultButton: React.FC<DefaultButtonProps> = ({ label, onClick, theme, mr
   return (
     <div>
       <Button
-        label={label}
+        children={label}
         onClick={onClick}
         bg={themeOption.bg}
         color={themeOption.color}
diff --git a/src/components/molecules/RoundButton.tsx b/src/components/molecules/RoundButton.tsx
index 31c53b0..2e64da9 100644
--- a/src/components/molecules/RoundButton.tsx
+++ b/src/components/molecules/RoundButton.tsx
@@ -17,7 +17,7 @@ const RoundButton: React.FC<DefaultButtonProps> = ({ label, onClick, color, size
   return (
     <div>
       <Button
-        label={label}
+        children={label}
         onClick={onClick}
         color="white"
         bg={color}
diff --git a/src/components/molecules/SubmitButton.tsx b/src/components/molecules/SubmitButton.tsx
index f918ce8..6855243 100644
--- a/src/components/molecules/SubmitButton.tsx
+++ b/src/components/molecules/SubmitButton.tsx
@@ -8,7 +8,7 @@ interface SubmitButtonProps {
 const SubmitButton: React.FC<SubmitButtonProps> = ({ onSubmit }) => {
   return (
     <Button
-      label="Submit"
+      children="submit"
       onClick={onSubmit}
       bg="brand.primary1"
       color="white"
diff --git a/src/components/molecules/UserButtonWithMenu.tsx b/src/components/molecules/UserButtonWithMenu.tsx
new file mode 100644
index 0000000..ecc7916
--- /dev/null
+++ b/src/components/molecules/UserButtonWithMenu.tsx
@@ -0,0 +1,19 @@
+import { Button, Icon, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react'
+import React from 'react'
+import { FaUser } from 'react-icons/fa'
+
+const UserButtonWithMenu: React.FC = () => {
+  return (
+    <Menu>
+      <MenuButton as={Button} bg="white" border="1px solid" borderColor="gray.200">
+        <Icon as={FaUser} />
+      </MenuButton>
+      <MenuList>
+        <MenuItem>로그아웃</MenuItem>
+        <MenuItem>개인정보 수정</MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}
+
+export default UserButtonWithMenu
\ No newline at end of file
diff --git a/src/components/organisms/DashboardContent.tsx b/src/components/organisms/DashboardContent.tsx
new file mode 100644
index 0000000..ddf248d
--- /dev/null
+++ b/src/components/organisms/DashboardContent.tsx
@@ -0,0 +1,13 @@
+import { DashboardProps } from '@/types/data'
+import React from 'react'
+
+const DashboardContent: React.FC<DashboardProps> = ({ data }) => {
+  // 대시보드 카드 형식으로 보여줘야 함.
+  return (
+    <>
+      
+    </>
+  )
+}
+
+export default DashboardContent
\ No newline at end of file
diff --git a/src/components/organisms/DashboardNavBar.tsx b/src/components/organisms/DashboardNavBar.tsx
new file mode 100644
index 0000000..2c996b9
--- /dev/null
+++ b/src/components/organisms/DashboardNavBar.tsx
@@ -0,0 +1,21 @@
+// src/components/organisms/Navbar.tsx
+'use client'
+
+import React from 'react'
+import { Box, Flex, Icon, Spacer } from '@chakra-ui/react'
+import Logo from '@/components/atoms/Logo'
+import UserButtonWithMenu from '../molecules/UserButtonWithMenu'
+
+const DashboardNavBar: React.FC = () => {
+  return (
+    <Box bg="white" px={4}>
+      <Flex alignItems="center" py={4}>
+        <Logo />
+        <Spacer />
+        <UserButtonWithMenu />
+      </Flex>
+    </Box>
+  );
+};
+
+export default DashboardNavBar;
\ No newline at end of file
diff --git a/src/components/organisms/EmptyDashboardContents.tsx b/src/components/organisms/EmptyDashboardContents.tsx
new file mode 100644
index 0000000..4b54de3
--- /dev/null
+++ b/src/components/organisms/EmptyDashboardContents.tsx
@@ -0,0 +1,31 @@
+'use client'
+import { Box } from '@chakra-ui/react'
+import React from 'react'
+import { Heading } from '../atoms/Text'
+import RoundButton from '../molecules/RoundButton'
+
+const EmptyDashboardContents: React.FC = () => {
+  return (
+    <>
+      <Box
+        textAlign="center"
+        mt={150}
+      >
+        <Box mb={15}>
+          <Heading content="포트폴리오를 생성해주세요." fontSize="4xl" color="brand.text1" />
+        </Box>
+        <RoundButton
+          label="생성하기"
+          color="brand.primary1"
+          px={24}
+          py={6}
+          fontWeight="bold"
+          fontSize="2xl"
+          onClick={()=>console.log('포트폴리오 만드는 페이지로 이동')}
+        />
+      </Box>
+    </>
+  )
+}
+
+export default EmptyDashboardContents
\ No newline at end of file
diff --git a/src/components/organisms/LoginModal.tsx b/src/components/organisms/LoginModal.tsx
index fbbce10..d4454bb 100644
--- a/src/components/organisms/LoginModal.tsx
+++ b/src/components/organisms/LoginModal.tsx
@@ -142,7 +142,7 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, openSignupModa
               </Flex>
             </FormControl>
 
-            <Button color="white" bg="brand.primary1" width="100%" onClick={handleSubmit} label="로그인" />
+            <Button color="white" bg="brand.primary1" width="100%" onClick={handleSubmit} children="로그인" />
             {errorMessage && (
               <Alert
               status="error"
diff --git a/src/components/organisms/SignupModal.tsx b/src/components/organisms/SignupModal.tsx
index f4711fe..b33098a 100644
--- a/src/components/organisms/SignupModal.tsx
+++ b/src/components/organisms/SignupModal.tsx
@@ -91,6 +91,7 @@ const SignupModal: React.FC<SignupModalProps> = ({ isOpen, onClose, openLoginMod
         headers: {
           "Content-Type": "application/json",
         },
+        credentials: 'include',
         body: JSON.stringify({
           username: formData.username,
           name: formData.name,
@@ -125,13 +126,14 @@ const SignupModal: React.FC<SignupModalProps> = ({ isOpen, onClose, openLoginMod
   // 폼 데이터를 초기화하는 함수
   const handleReset = () => {
     setFormData(initialFormData);
-    setErrorMessage(null);  // 에러 메시지 초기화
+    setErrorMessage(null);
   };
 
   // 모달을 닫을 때 폼을 초기화
   const handleClose = () => {
-    handleReset();  // 모달을 닫을 때 초기화
-    onClose();      // 모달 닫기 함수 호출
+    handleReset();
+    setIsSignupSuccess(false);
+    onClose();
   };
 
   return (
@@ -220,7 +222,7 @@ const SignupModal: React.FC<SignupModalProps> = ({ isOpen, onClose, openLoginMod
             </ModalBody>
 
             <ModalFooter>
-              <Button color="white" bg="brand.primary1" width="100%" onClick={handleSubmit} label="회원가입" />
+              <Button color="white" bg="brand.primary1" width="100%" onClick={handleSubmit} children="회원가입" />
             </ModalFooter>
 
             <ModalFooter justifyContent="center">
@@ -249,7 +251,7 @@ const SignupModal: React.FC<SignupModalProps> = ({ isOpen, onClose, openLoginMod
                   handleClose();
                   openLoginModal();
                 }}
-                label="로그인 하러 가기"
+                children="로그인 하러 가기"
                 mt={6}
                 />
             </Box>
diff --git a/src/components/templates/DashboardPage.tsx b/src/components/templates/DashboardPage.tsx
index e69de29..5906d43 100644
--- a/src/components/templates/DashboardPage.tsx
+++ b/src/components/templates/DashboardPage.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import DashboardNavBar from '../organisms/DashboardNavBar'
+import { Heading } from '../atoms/Text'
+import EmptyDashboardContents from '../organisms/EmptyDashboardContents'
+
+const DashboardPage: React.FC = () => {
+  return (
+    <div>
+      <DashboardNavBar />
+      <Heading content="대시보드" fontSize="4xl" color="brand.text1"/>
+      <EmptyDashboardContents />
+    </div>
+  )
+}
+
+export default DashboardPage
diff --git a/src/types/data.ts b/src/types/data.ts
new file mode 100644
index 0000000..c2e240f
--- /dev/null
+++ b/src/types/data.ts
@@ -0,0 +1,3 @@
+export interface DashboardProps {
+  
+}
\ No newline at end of file
diff --git a/src/types/style.ts b/src/types/style.ts
index 4264c20..223f398 100644
--- a/src/types/style.ts
+++ b/src/types/style.ts
@@ -1,7 +1,7 @@
 import { ResponsiveValue, SystemStyleObject } from "@chakra-ui/react"
+import { ReactNode } from "react"
 
 export interface ButtonProps {
-  label: string
   onClick: () => void
   bg: string
   color: string
@@ -16,6 +16,7 @@ export interface ButtonProps {
   mr?: number | string
   width?: string | number
   mt?: number | string;
+  children?: ReactNode | string | undefined
 }
 
 export interface InputProps {