-
- 
- Flowbite
-
-
-
+
diff --git a/src/components/IsDarkMode.tsx b/src/components/IsDarkMode.tsx
new file mode 100644
index 0000000..e6dc023
--- /dev/null
+++ b/src/components/IsDarkMode.tsx
@@ -0,0 +1,16 @@
+import {useDarkMode} from "~/utils/isDark.ts";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+
+export default function IsDarkMode() {
+ const {isDarkMode, toggle} = useDarkMode()
+ return (
+ <>
+ {
+ isDarkMode ?
:
+
+
+ }
+
+ )
+}
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
new file mode 100644
index 0000000..e808d0f
--- /dev/null
+++ b/src/components/Menu.tsx
@@ -0,0 +1,56 @@
+import {t} from "i18next"
+import {Link, useLocation} from "react-router-dom"
+
+
+interface IProps {
+ item: Item
+}
+interface Item {
+ name: string
+ path: string
+}
+
+const activeLink = (item: Item) => {
+ return (
+
+ {item.name}
+
+ )
+}
+
+const deActiveLink = (item: Item) => {
+ return (
+
+ {item.name}
+
+ )
+}
+const IsActiveLink = (props: IProps) => {
+ const location = useLocation()
+ return location.pathname.includes(props.item.path) ? activeLink(props.item) : deActiveLink(props.item)
+}
+
+const Menu = () => {
+ const items = [
+ {path: '/examples', name: t('examples')},
+ {path: '/todo', name: t('Todo')},
+ {path: '/about', name: t('about')},
+ ]
+ return (
+
+ )
+}
+
+export default Menu
diff --git a/src/error-pages/ErrorPage.tsx b/src/error-pages/ErrorPage.tsx
new file mode 100644
index 0000000..b911bc6
--- /dev/null
+++ b/src/error-pages/ErrorPage.tsx
@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+ const error = useRouteError();
+ console.error(error);
+
+ return (
+
+
Oops!
+
Sorry, an unexpected error has occurred.
+
+ {error.statusText || error.message}
+
+
+ );
+}
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..28aa07d
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,18 @@
+import Header from "@components/Header.tsx";
+import Footer from "@components/Footer.tsx";
+import {Outlet} from "react-router-dom";
+
+export default function App() {
+ return (
+
+ )
+}
diff --git a/src/lang/enEN.js b/src/lang/enEN.js
new file mode 100644
index 0000000..caff6f1
--- /dev/null
+++ b/src/lang/enEN.js
@@ -0,0 +1,4 @@
+export default {
+ examples: 'Examples',
+ about: 'About'
+};
diff --git a/src/lang/koKR.js b/src/lang/koKR.js
new file mode 100644
index 0000000..3f26a50
--- /dev/null
+++ b/src/lang/koKR.js
@@ -0,0 +1,5 @@
+export default {
+ "projectName": 'vite-react-i18n-typescript-template',
+ 'examples': '예제',
+ 'about': 'About',
+};
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..db46c0f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,70 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
import './index.css'
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
+import Main from "./index.tsx"
+import ErrorPage from "./error-pages/ErrorPage.tsx";
+import About from "./pages/About.tsx";
+import Home from './pages/Home.tsx';
+import i18n from "i18next";
+import {initReactI18next} from "react-i18next";
+import koKR from '~/lang/koKR'
+import enEN from '~/lang/enEN'
+import Examples from "~/pages/examples/Examples.tsx";
+import StoreExample from "~/pages/examples/Store.tsx";
+import RouterExample from "~/pages/examples/Router.tsx";
+import '~/utils/isDark.ts'
+import Todo from "~/pages/Todo.tsx";
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element:
,
+ errorElement:
,
+ children: [
+ {
+ path: "",
+ element:
+ },
+ {
+ path: "about",
+ element:
+ },
+ {
+ path: "todo",
+ element:
+ },
+ {
+ path: "examples",
+ element:
,
+ children: [
+ {path: "store-example", element:
},
+ {path: "router-example", element:
}
+ ]
+ }
+ ]
+ },
+])
+
+i18n.use(initReactI18next)
+ .init({
+ resources: {
+ en: {
+ translation: enEN
+ },
+ ko: {
+ translation: koKR
+ }
+ },
+ lng: "ko",
+ fallbackLng: "ko",
+
+ interpolation: {
+ escapeValue: false
+ }
+ });
ReactDOM.createRoot(document.getElementById('root')!).render(
-
-
- ,
+
+
+ ,
)
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..17984c8
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,9 @@
+export default function About() {
+
+ return (
+
+ About
+
+
+ )
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..4aee328
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,7 @@
+export default function home() {
+ return (
+
+ Main
+
+ )
+}
diff --git a/src/pages/Todo.tsx b/src/pages/Todo.tsx
new file mode 100644
index 0000000..708c620
--- /dev/null
+++ b/src/pages/Todo.tsx
@@ -0,0 +1,7 @@
+export default function Todo() {
+ return (
+
+ Todo
+
+ )
+}
diff --git a/src/pages/examples/Examples.tsx b/src/pages/examples/Examples.tsx
new file mode 100644
index 0000000..dccea15
--- /dev/null
+++ b/src/pages/examples/Examples.tsx
@@ -0,0 +1,12 @@
+import {Outlet} from "react-router-dom";
+import ExampleList from "@components/ExampleList.tsx";
+
+export default function Examples() {
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/pages/examples/Router.tsx b/src/pages/examples/Router.tsx
new file mode 100644
index 0000000..c7cad47
--- /dev/null
+++ b/src/pages/examples/Router.tsx
@@ -0,0 +1,5 @@
+export default function RouterExample() {
+ return (
+
RouterExample
+ )
+}
diff --git a/src/pages/examples/Store.tsx b/src/pages/examples/Store.tsx
new file mode 100644
index 0000000..6801334
--- /dev/null
+++ b/src/pages/examples/Store.tsx
@@ -0,0 +1,7 @@
+export default function StoreExample() {
+ return (
+
+ )
+}
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
new file mode 100644
index 0000000..c7f62f6
--- /dev/null
+++ b/src/stores/counter.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+
+type Store = {
+ count: number
+ inc: () => void
+ dec: () => void
+}
+
+const useCounter = create
()((set) => ({
+ count: 50,
+ inc: () => set((state) => ({ count: state.count + 1 })),
+ dec: () => set((state) => ({ count: state.count - 1 })),
+}))
+
+export default useCounter
diff --git a/src/stores/language.ts b/src/stores/language.ts
new file mode 100644
index 0000000..11141be
--- /dev/null
+++ b/src/stores/language.ts
@@ -0,0 +1,13 @@
+import {create} from "zustand";
+
+type Language = {
+ lang: string
+ toggleLang: () => void
+}
+
+const useLanguage = create()((set) => ({
+ lang: 'ko',
+ toggleLang: () => set((state) => ({lang: state.lang === 'ko' ? 'en' : 'ko'}))
+}))
+
+export default useLanguage
diff --git a/src/utils/isDark.ts b/src/utils/isDark.ts
new file mode 100644
index 0000000..18ab061
--- /dev/null
+++ b/src/utils/isDark.ts
@@ -0,0 +1,31 @@
+import {useLocalStorage, useMediaQuery, useUpdateEffect} from 'usehooks-ts'
+
+const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)'
+
+interface UseDarkModeOutput {
+ isDarkMode: boolean
+ toggle: () => void
+ enable: () => void
+ disable: () => void
+}
+
+export function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
+ const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY)
+ const [isDarkMode, setDarkMode] = useLocalStorage(
+ 'usehooks-ts-dark-mode',
+ defaultValue ?? isDarkOS ?? false,
+ )
+ if (localStorage['usehooks-ts-dark-mode'] === 'true' || (!('usehooks-ts-dark-mode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+ useUpdateEffect(() => {
+ setDarkMode(isDarkOS)
+ }, [isDarkOS])
+
+ return {
+ isDarkMode,
+ toggle: () => setDarkMode(prev => !prev),
+ }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d37737f..9ed8e62 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
+ darkMode: 'class',
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fb..632d687 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,14 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+
+ "baseUrl": "src",
+ /* Paths */
+ "paths": {
+ "~/*": ["*"],
+ "@components/*": ["components/*"]
+ }
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
diff --git a/vite.config.ts b/vite.config.ts
index c990ff1..a40ae5e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,18 @@
-import { defineConfig } from 'vite'
+import * as path from 'path'
+import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
+import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
- resolve: {
- alias: []
- }
+ plugins: [
+ react(),
+ tsconfigPaths(),
+ ],
+ resolve: {
+ alias: {
+ '~/': `${path.resolve(__dirname, 'src')}/`,
+ '@components/': `${path.resolve(__dirname, 'src/components')}/`
+ },
+ },
})