init: 폴더구조, 절대 경로, 레이아웃 및 전역 스타일링 기본 구조 세팅

src/App.tsx

@@ -1,13 +1,28 @@
-import { useState } from 'react'
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { Navigate } from "react-router-dom";
+import Layout from "@pages/Layout/Layout"
+import Main from "@pages/Main/Main";
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout/>,
+    children: [
+      {
+        path: "/",
+        element : <Main/>
+      },
+
+    ],
+    errorElement: <Navigate to={"/"}/>
+  }
+])
 
-function App() {
-  const [count, setCount] = useState(0)
 
+function App() {
   return (
     <>
-
-
+      <RouterProvider router={router}/>
     </>
   )
 }

src/apis/apis.ts

@@ -0,0 +1 @@
+//예시

src/constants/mainConstant.ts

@@ -0,0 +1 @@
+//예시

src/hooks/useExample.ts

@@ -0,0 +1 @@
+//예시 파일

src/main.tsx

@@ -1,9 +1,15 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
+import GlobalStyle from '@styles/GlobalStyle.ts'
+import { ThemeProvider } from '@emotion/react'
+import theme from '@styles/theme.ts'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <GlobalStyle/>
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )

src/pages/Layout/Layout.styled.ts

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+//레이아웃 스타일 정의 예시
+export const LayoutWrapper = styled.div`
+`;

src/pages/Layout/Layout.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import * as S from "./Layout.styled"
+
+const Layout = () => {
+  return (
+    <S.LayoutWrapper>
+
+    </S.LayoutWrapper>
+  )
+}
+
+export default Layout

src/pages/Main/Main.styled.ts

@@ -0,0 +1,4 @@
+import styled from "@emotion/styled";
+
+export const MainWrapper = styled.div`
+`;

src/pages/Main/Main.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import * as S from "./Main.styled"
+
+const Main = () => {
+  return (
+    <S.MainWrapper>
+
+    </S.MainWrapper>
+  )
+}
+
+export default Main

src/styles/GlobalStyle.tsx

@@ -0,0 +1,9 @@
+import { Global,css } from "@emotion/react";
+
+export const globalStyle = css`
+  //여기에 전역 상태 정의!
+`
+
+const GlobalStyle = () => <Global styles={globalStyle}/>
+
+export default GlobalStyle;

src/styles/emotion.d.ts

@@ -0,0 +1,10 @@
+import "@emotion/react";
+import { ColorType, FontType } from "./theme";
+
+declare module "@emotion/react" {
+  export interface Theme {
+    colors: ColorType,
+    fonts: FontType
+  }
+}
+

src/styles/theme.ts

@@ -0,0 +1,18 @@
+const colors = {
+  //여기에 색 정의 
+
+};
+
+const fonts = {
+  //여기에 폰트 정의
+};
+
+const theme  = {
+  colors,
+  fonts,
+};
+
+export default theme;
+
+export type ColorType = typeof theme.colors;
+export type FontType = typeof theme.fonts;

tsconfig.app.json

@@ -20,7 +20,19 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "@assets/*": ["src/assets/*"],
+      "@pages/*": ["src/pages/*"],
+      "@components/*": ["src/components/*"],
+      "@styles/*": ["src/styles/*"],
+      "@constants/*": ["src/constants/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@utils/*": ["src/utils/*"],
+      "@apis/*": ["src/apis/*"],
+    },
   },
+
   "include": ["src"]
 }