settings : 레이아웃 세팅

- 기본 레이아웃

src/App.tsx

@@ -3,10 +3,10 @@ import { Route, Routes } from 'react-router-dom';
 import NotFound from '@/page/notFound';
 import Home from '@/page/home';
 import koKR from 'antd/locale/ko_KR';
-import Layout from '@/components/Layout';
 import Signup from '@/page/signup';
 import Singin from '@/page/signin';
 import MyAccount from '@/page/myAccount';
+import MyLayout from '@/components/MyLayout';
 
 export default function App() {
   const theme = {
@@ -17,7 +17,7 @@ export default function App() {
   return (
     <ConfigProvider theme={theme} locale={koKR}>
       <Routes>
-        <Route element={<Layout />}>
+        <Route element={<MyLayout />}>
           <Route path="/" element={<Home />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/signin" element={<Singin />} />

src/components/MyHeader.tsx

@@ -0,0 +1,16 @@
+import { NAV_ITEMS } from '@/data/constants';
+import { Space } from 'antd';
+import { Header } from 'antd/es/layout/layout';
+import { Link } from 'react-router-dom';
+
+export default function MyHeader() {
+  return (
+    <Header style={{ backgroundColor: 'palegreen' }}>
+      <Space size="large">
+        {NAV_ITEMS.map((item) => (
+          <Link to={item.href}>{item.label}</Link>
+        ))}
+      </Space>
+    </Header>
+  );
+}

src/components/MyLayout.tsx

@@ -0,0 +1,22 @@
+import { Layout } from 'antd';
+import { Content } from 'antd/es/layout/layout';
+import { Outlet } from 'react-router-dom';
+import MyHeader from './MyHeader';
+
+export default function MyLayout() {
+  return (
+    <Layout style={{ display: 'flex', minHeight: '100vh' }}>
+      <MyHeader />
+      <Content
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Outlet />
+      </Content>
+    </Layout>
+  );
+}

src/data/constants.ts

@@ -0,0 +1,18 @@
+export const NAV_ITEMS = [
+  {
+    label: '홈',
+    href: '/',
+  },
+  {
+    label: '로그인',
+    href: '/signin',
+  },
+  {
+    label: '회원가입',
+    href: '/signup',
+  },
+  {
+    label: '내계정',
+    href: '/myaccount',
+  },
+];

src/page/home/index.tsx

@@ -1,3 +1,15 @@
+import { theme } from 'antd';
+
 export default function Home() {
-  return <div>홈🏠🏠🏠🏠</div>;
+  const {
+    token: { colorPrimary, colorPrimaryBg, colorSuccess },
+  } = theme.useToken();
+
+  return (
+    <div>
+      홈🏠🏠🏠🏠 <span style={{ color: colorPrimary }}>사용하고 싶으색</span>{' '}
+      <span style={{ backgroundColor: colorPrimaryBg }}>원하는 색을</span>{' '}
+      <span style={{ color: colorSuccess }}>theme에서 가져와서 사용</span>
+    </div>
+  );
 }