함수형 프로그래밍 소개팅에 오신걸 환영합니다.
+}
+
+export default DashboardPage
diff --git a/playground/apps/home/src/pages/entrance/index.tsx b/playground/apps/home/src/pages/entrance/index.tsx
new file mode 100644
index 0000000..0aeee18
--- /dev/null
+++ b/playground/apps/home/src/pages/entrance/index.tsx
@@ -0,0 +1,26 @@
+import viteLogo from '/vite.svg'
+import { useNavigate } from 'react-router-dom'
+
+const EntrancePage = () => {
+ const navigate = useNavigate()
+ const goDashboardPage = () => navigate('/home/dashboard')
+
+ return (
+ <>
+
+
+ 
+
+
+ 홈
+ +함수형 자바스크립트 프로그래밍 스터디의 멤버들을 소개해드릴까요?
++ + + ) +} + +export default EntrancePage diff --git a/playground/apps/home/src/pages/index.ts b/playground/apps/home/src/pages/index.ts new file mode 100644 index 0000000..d604612 --- /dev/null +++ b/playground/apps/home/src/pages/index.ts @@ -0,0 +1,2 @@ +export { default as EntrancePage } from './entrance' +export { default as DashboardPage } from './dashboard' diff --git a/playground/apps/home/src/router/index.tsx b/playground/apps/home/src/router/index.tsx new file mode 100644 index 0000000..32e2e4d --- /dev/null +++ b/playground/apps/home/src/router/index.tsx @@ -0,0 +1,14 @@ +import { Routes, Route } from 'react-router-dom' +import { EntrancePage, DashboardPage } from '@/pages' + +function Router() { + return ( +
+
+ )
+}
+
+export default DashboardPage
diff --git a/playground/apps/members/src/pages/entrance/index.tsx b/playground/apps/members/src/pages/entrance/index.tsx
new file mode 100644
index 0000000..144a0be
--- /dev/null
+++ b/playground/apps/members/src/pages/entrance/index.tsx
@@ -0,0 +1,23 @@
+import viteLogo from '/vite.svg'
+import { useNavigate } from 'react-router-dom'
+
+const EntrancePage = () => {
+ const navigate = useNavigate()
+ const goDashboardPage = () => navigate('/members/dashboard')
+
+ return (
+ <>
+ -
+
- 안녕하세요 저는 holim0! +
- 안녕하세요 저는 wo-o29! +
- 안녕하세요 저는 wontory! +
- 안녕하세요 저는 onlyoon! +
- 안녕하세요 저는 createhb21! +
+
+
+
+
+ 함수형 자바스크립트 프로그래밍 스터디의 멤버들을 소개할게요!
+ + + ) +} + +export default EntrancePage diff --git a/playground/apps/members/src/pages/index.ts b/playground/apps/members/src/pages/index.ts new file mode 100644 index 0000000..d604612 --- /dev/null +++ b/playground/apps/members/src/pages/index.ts @@ -0,0 +1,2 @@ +export { default as EntrancePage } from './entrance' +export { default as DashboardPage } from './dashboard' diff --git a/playground/apps/members/src/router/index.tsx b/playground/apps/members/src/router/index.tsx new file mode 100644 index 0000000..32e2e4d --- /dev/null +++ b/playground/apps/members/src/router/index.tsx @@ -0,0 +1,14 @@ +import { Routes, Route } from 'react-router-dom' +import { EntrancePage, DashboardPage } from '@/pages' + +function Router() { + return ( +함산기 - 함수형 프로그래밍을 활용해서 계산기를 만들었어요.
+}
+
+export default DashboardPage
diff --git a/playground/apps/projects/src/pages/entrance/index.tsx b/playground/apps/projects/src/pages/entrance/index.tsx
new file mode 100644
index 0000000..8c57251
--- /dev/null
+++ b/playground/apps/projects/src/pages/entrance/index.tsx
@@ -0,0 +1,35 @@
+import { useReducer } from 'react'
+import Cookies from 'js-cookie'
+
+import viteLogo from '/vite.svg'
+import { useNavigate } from 'react-router-dom'
+
+const EntrancePage = () => {
+ const [showCookie, toggleCookie] = useReducer((show) => !show, false)
+
+ const getCookieString = () => Cookies.get('hi') ?? '안녕하세요'
+
+ const navigate = useNavigate()
+ const goDashboardPage = () => navigate('/projects/dashboard')
+
+ return (
+ <>
+
+
+
+
+
+ 다음과 같은 프로젝트를 만들고 있어요
+ + {showCookie &&{getCookieString()}
} ++ + + ) +} + +export default EntrancePage diff --git a/playground/apps/projects/src/pages/index.ts b/playground/apps/projects/src/pages/index.ts new file mode 100644 index 0000000..d604612 --- /dev/null +++ b/playground/apps/projects/src/pages/index.ts @@ -0,0 +1,2 @@ +export { default as EntrancePage } from './entrance' +export { default as DashboardPage } from './dashboard' diff --git a/playground/apps/projects/src/router/index.tsx b/playground/apps/projects/src/router/index.tsx new file mode 100644 index 0000000..32e2e4d --- /dev/null +++ b/playground/apps/projects/src/router/index.tsx @@ -0,0 +1,14 @@ +import { Routes, Route } from 'react-router-dom' +import { EntrancePage, DashboardPage } from '@/pages' + +function Router() { + return ( +
Vite + React
-
-
-
-
- Edit src/App.tsx and save to test HMR
-
- Click on the Vite and React logos to learn more -
- - ) -} - -export default App diff --git a/playground/src/index.css b/playground/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/playground/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/playground/tsconfig.json b/playground/tsconfig.json deleted file mode 100644 index 1ffef60..0000000 --- a/playground/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "files": [], - "references": [ - { "path": "./tsconfig.app.json" }, - { "path": "./tsconfig.node.json" } - ] -} diff --git a/playground/vite.config.ts b/playground/vite.config.ts deleted file mode 100644 index 2328e17..0000000 --- a/playground/vite.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' - -// https://vite.dev/config/ -export default defineConfig({ - plugins: [react()], -}) diff --git a/playground/web/.gitignore b/playground/web/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/playground/web/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/playground/web/README.md b/playground/web/README.md new file mode 100644 index 0000000..780c92d --- /dev/null +++ b/playground/web/README.md @@ -0,0 +1,50 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js +export default tseslint.config({ + languageOptions: { + // other options... + parserOptions: { + project: ["./tsconfig.node.json", "./tsconfig.app.json"], + tsconfigRootDir: import.meta.dirname, + }, + }, +}); +``` + +- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` +- Optionally add `...tseslint.configs.stylisticTypeChecked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: + +```js +// eslint.config.js +import react from "eslint-plugin-react"; + +export default tseslint.config({ + // Set the react version + settings: { react: { version: "18.3" } }, + plugins: { + // Add the react plugin + react, + }, + rules: { + // other rules... + // Enable its recommended rules + ...react.configs.recommended.rules, + ...react.configs["jsx-runtime"].rules, + }, +}); +``` diff --git a/playground/web/eslint.config.js b/playground/web/eslint.config.js new file mode 100644 index 0000000..0bbf074 --- /dev/null +++ b/playground/web/eslint.config.js @@ -0,0 +1,28 @@ +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import tseslint from "typescript-eslint"; + +export default tseslint.config( + { ignores: ["dist"] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ["**/*.{ts,tsx}"], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + "react-hooks": reactHooks, + "react-refresh": reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + "react-refresh/only-export-components": [ + "warn", + { allowConstantExport: true }, + ], + }, + } +); diff --git a/playground/web/index.html b/playground/web/index.html new file mode 100644 index 0000000..e0d1c84 --- /dev/null +++ b/playground/web/index.html @@ -0,0 +1,13 @@ + + + + + + +
+
+ )
+}
+
+export default LandingContent
diff --git a/playground/web/src/router/index.tsx b/playground/web/src/router/index.tsx
new file mode 100644
index 0000000..5ad7080
--- /dev/null
+++ b/playground/web/src/router/index.tsx
@@ -0,0 +1,11 @@
+import { useRoutes } from 'react-router-dom'
+
+import { publicRoutes } from './routes/public'
+
+function Router() {
+ const routes = useRoutes([publicRoutes])
+
+ return routes
+}
+
+export default Router
diff --git a/playground/web/src/router/routes/public.tsx b/playground/web/src/router/routes/public.tsx
new file mode 100644
index 0000000..3699e90
--- /dev/null
+++ b/playground/web/src/router/routes/public.tsx
@@ -0,0 +1,39 @@
+import { type RouteObject, Navigate } from 'react-router-dom'
+
+import HomeRoutes from 'home/HomeRoutes'
+import ProjectsRoutes from 'projects/ProjectsRoutes'
+import MembersRoutes from 'members/MembersRoutes'
+
+import LandingContent from '@/pages'
+import { LayoutComponent } from '@/components'
+import { PATH } from '@/data/path'
+
+export const publicRoutes: RouteObject = {
+ element: