feat: 대시보드 Navbar 및 초기 화면 구현

src/app/dashboard/page.tsx

@@ -0,0 +1,5 @@
+import DashboardPage from '@/components/templates/DashboardPage'
+
+export default function Page() {
+  return <DashboardPage />
+}

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

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}

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}

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"

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

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

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;

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

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"

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>

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

src/types/data.ts

@@ -0,0 +1,3 @@
+export interface DashboardProps {
+
+}

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 {