diff --git a/.pnp.cjs b/.pnp.cjs index dc8dcc2..0a15f67 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -42,6 +42,7 @@ const RAW_RUNTIME_STATE = ["@tanstack/eslint-plugin-query", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.35.6"],\ ["@tanstack/react-query", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.40.0"],\ ["@trivago/prettier-plugin-sort-imports", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:4.3.0"],\ + ["@types/node", "npm:20.14.2"],\ ["@types/react", "npm:18.3.3"],\ ["@types/react-dom", "npm:18.3.0"],\ ["@typescript-eslint/eslint-plugin", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:7.12.0"],\ @@ -8541,6 +8542,14 @@ const RAW_RUNTIME_STATE = ["undici-types", "npm:5.26.5"]\ ],\ "linkType": "HARD"\ + }],\ + ["npm:20.14.2", {\ + "packageLocation": "../../.yarn/berry/cache/@types-node-npm-20.14.2-fa12d1e34b-10c0.zip/node_modules/@types/node/",\ + "packageDependencies": [\ + ["@types/node", "npm:20.14.2"],\ + ["undici-types", "npm:5.26.5"]\ + ],\ + "linkType": "HARD"\ }]\ ]],\ ["@types/normalize-package-data", [\ @@ -16616,6 +16625,7 @@ const RAW_RUNTIME_STATE = ["@tanstack/eslint-plugin-query", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.35.6"],\ ["@tanstack/react-query", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.40.0"],\ ["@trivago/prettier-plugin-sort-imports", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:4.3.0"],\ + ["@types/node", "npm:20.14.2"],\ ["@types/react", "npm:18.3.3"],\ ["@types/react-dom", "npm:18.3.0"],\ ["@typescript-eslint/eslint-plugin", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:7.12.0"],\ @@ -18347,13 +18357,52 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ + ["virtual:2c30557d8ca5e7c67e7558d45bc44bef6c7a622b34a97fa8102f3235f92769c87777d34ed37059c12d8f3a21841ea06cf4badc5dc796697b0f765c17db6e24e5#npm:5.2.12", {\ + "packageLocation": "./.yarn/__virtual__/vite-virtual-6e342dcef5/3/.yarn/berry/cache/vite-npm-5.2.12-2eaf45dfa7-10c0.zip/node_modules/vite/",\ + "packageDependencies": [\ + ["vite", "virtual:2c30557d8ca5e7c67e7558d45bc44bef6c7a622b34a97fa8102f3235f92769c87777d34ed37059c12d8f3a21841ea06cf4badc5dc796697b0f765c17db6e24e5#npm:5.2.12"],\ + ["@types/less", null],\ + ["@types/lightningcss", null],\ + ["@types/node", null],\ + ["@types/sass", null],\ + ["@types/stylus", null],\ + ["@types/sugarss", null],\ + ["@types/terser", null],\ + ["esbuild", "npm:0.20.2"],\ + ["fsevents", "patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1"],\ + ["less", null],\ + ["lightningcss", null],\ + ["postcss", "npm:8.4.38"],\ + ["rollup", "npm:4.18.0"],\ + ["sass", null],\ + ["stylus", null],\ + ["sugarss", null],\ + ["terser", null]\ + ],\ + "packagePeers": [\ + "@types/less",\ + "@types/lightningcss",\ + "@types/node",\ + "@types/sass",\ + "@types/stylus",\ + "@types/sugarss",\ + "@types/terser",\ + "less",\ + "lightningcss",\ + "sass",\ + "stylus",\ + "sugarss",\ + "terser"\ + ],\ + "linkType": "HARD"\ + }],\ ["virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.2.12", {\ "packageLocation": "./.yarn/__virtual__/vite-virtual-77c227262b/3/.yarn/berry/cache/vite-npm-5.2.12-2eaf45dfa7-10c0.zip/node_modules/vite/",\ "packageDependencies": [\ ["vite", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.2.12"],\ ["@types/less", null],\ ["@types/lightningcss", null],\ - ["@types/node", null],\ + ["@types/node", "npm:20.14.2"],\ ["@types/sass", null],\ ["@types/stylus", null],\ ["@types/sugarss", null],\ @@ -18396,7 +18445,7 @@ const RAW_RUNTIME_STATE = ["debug", "virtual:e778dc10f79fdbbb66a331d5f573103061cb300ceef13038bb3c391f5294dce7b8f4cef344ac47ca986af1724a8068d2f4361769a6416b99ee691025d82bd0fb#npm:4.3.5"],\ ["pathe", "npm:1.1.2"],\ ["picocolors", "npm:1.0.1"],\ - ["vite", "virtual:cd53664ae0532e07f32846156496c5a76539a9c61abcf6dec5759f1362efe459d347dfa87da66ad122c60acd1af04584e4377980153e36c59c72bb85f8630857#npm:5.2.12"]\ + ["vite", "virtual:2c30557d8ca5e7c67e7558d45bc44bef6c7a622b34a97fa8102f3235f92769c87777d34ed37059c12d8f3a21841ea06cf4badc5dc796697b0f765c17db6e24e5#npm:5.2.12"]\ ],\ "linkType": "HARD"\ }]\ @@ -18417,7 +18466,7 @@ const RAW_RUNTIME_STATE = ["@types/edge-runtime__vm", null],\ ["@types/happy-dom", null],\ ["@types/jsdom", null],\ - ["@types/node", null],\ + ["@types/node", "npm:20.14.2"],\ ["@types/vitest__browser", null],\ ["@types/vitest__ui", null],\ ["@vitest/browser", null],\ diff --git a/package.json b/package.json index 4bd8812..6c70c9b 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@storybook/test": "^8.1.5", "@tanstack/eslint-plugin-query": "^5.35.6", "@trivago/prettier-plugin-sort-imports": "^4.3.0", + "@types/node": "^20.14.2", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", diff --git a/src/App.tsx b/src/App.tsx index 50a5606..a87946a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import './App.css'; -import { Home } from './pages/Home'; +import { Home } from '@/pages'; function App() { return ; diff --git a/src/features/index.ts b/src/features/index.ts index 2a861ad..7741e43 100644 --- a/src/features/index.ts +++ b/src/features/index.ts @@ -3,3 +3,4 @@ */ export * from './Page'; +export * from './sum'; diff --git a/src/main.tsx b/src/main.tsx index 9bb419d..4100a42 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,11 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.tsx'; import './index.css'; +import { GlobalStyles } from '@/shared'; ReactDOM.createRoot(document.getElementById('root')!).render( + , ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 69e2a2b..30295a7 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,5 +1,6 @@ import { Button, Flex } from '@chakra-ui/react'; import styled from '@emotion/styled'; +import { BaseButton } from '@/shared'; export const Home = () => ( <> @@ -19,6 +20,7 @@ export const Home = () => ( icon + AI로 질문을 생성해 보세요 ); diff --git a/src/shared/Page.tsx b/src/shared/Page.tsx deleted file mode 100644 index 1b158ac..0000000 --- a/src/shared/Page.tsx +++ /dev/null @@ -1 +0,0 @@ -export const Page = () => null; diff --git a/src/shared/index.ts b/src/shared/index.ts index 2a861ad..7097f3d 100644 --- a/src/shared/index.ts +++ b/src/shared/index.ts @@ -2,4 +2,5 @@ * @file Automatically generated by barrelsby. */ -export * from './Page'; +export * from './styles/index'; +export * from './ui/index'; diff --git a/src/shared/styles/GlobalStyles.tsx b/src/shared/styles/GlobalStyles.tsx new file mode 100644 index 0000000..b16df34 --- /dev/null +++ b/src/shared/styles/GlobalStyles.tsx @@ -0,0 +1,23 @@ +import { Global, css } from '@emotion/react'; +import { styleToken } from '@/shared/styles'; + +export const GlobalStyles = () => ( + +); diff --git a/src/shared/styles/index.ts b/src/shared/styles/index.ts new file mode 100644 index 0000000..178f78a --- /dev/null +++ b/src/shared/styles/index.ts @@ -0,0 +1,6 @@ +/** + * @file Automatically generated by barrelsby. + */ + +export * from './GlobalStyles'; +export * from './styleToken'; diff --git a/src/shared/styles/styleToken.ts b/src/shared/styles/styleToken.ts new file mode 100644 index 0000000..cedb1a3 --- /dev/null +++ b/src/shared/styles/styleToken.ts @@ -0,0 +1,62 @@ +const colors = { + white: '#fff', + black: '#222', + gray100: '#f7f7f7', + gray200: '#E3E3E3', + gray300: '#C7C7C7', + gray400: '#707070', + gray500: '#262626', + gray600: '#131313', + shadow: 'rgba(0, 0, 0, 0.25)', + background: '#f1f4f8', +} as const; + +const fontSize = { + caption: '12px', + body: '14px', + subtitle: '16px', + title: '18px', + headline: '20px', + display: '24px', +} as const; + +const fontWeight = { + regular: 400, + medium: 500, + bold: 700, +} as const; + +const spacing = { + mt10: '2.5rem', + mt20: '5rem', + mt30: '7.5rem', + mt40: '10rem', + mt50: '12.5rem', + mb10: '2.5rem', +} as const; + +const width = { + w100: '100%', + w75: '75%', + w50: '50%', + w25: '25%', + w15: '15%', +} as const; + +export const zIndex = { + overlay: 1300, + modal: 1400, + popover: 1500, + toast: 1600, + tooltip: 1700, + loading: 1800, +} as const; + +export const styleToken = { + color: colors, + fontSize, + fontWeight, + spacing, + width, + zIndex, +} as const; diff --git a/src/shared/ui/BaseButton.tsx b/src/shared/ui/BaseButton.tsx new file mode 100644 index 0000000..f8d7620 --- /dev/null +++ b/src/shared/ui/BaseButton.tsx @@ -0,0 +1,37 @@ +import { HTMLAttributes } from 'react'; +import { Button } from '@chakra-ui/react'; +import styled from '@emotion/styled'; +import { styleToken } from '@/shared'; + +type ButtonProps = { + type: 'button' | 'submit' | 'reset'; + children: string; + onClick?: () => void; +} & HTMLAttributes; + +export const BaseButton = ({ type, children, onClick }: ButtonProps) => ( + + + +); + +const Container = styled.div` + min-width: 230px; + margin: 20px 0 22px; + border-radius: 10px; + border: 1px solid ${styleToken.color.gray200}; + box-sizing: border-box; +`; diff --git a/src/shared/ui/Input.tsx b/src/shared/ui/Input.tsx new file mode 100644 index 0000000..b27bbc5 --- /dev/null +++ b/src/shared/ui/Input.tsx @@ -0,0 +1 @@ +export const Input = () =>
Input
; diff --git a/src/shared/ui/Typography.tsx b/src/shared/ui/Typography.tsx new file mode 100644 index 0000000..628dcb7 --- /dev/null +++ b/src/shared/ui/Typography.tsx @@ -0,0 +1 @@ +export const Typography = () =>
Typography
; diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts new file mode 100644 index 0000000..bccb2c7 --- /dev/null +++ b/src/shared/ui/index.ts @@ -0,0 +1,7 @@ +/** + * @file Automatically generated by barrelsby. + */ + +export * from './BaseButton'; +export * from './Input'; +export * from './Typography'; diff --git a/tsconfig.json b/tsconfig.json index 8464ccc..c7b3095 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,7 +24,7 @@ "baseUrl": ".", "paths": { "@/*": [ - "./src/*" + "src/*" ] } }, diff --git a/vite.config.ts b/vite.config.ts index de0d38d..2c6ca8e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,5 @@ /// +import path from 'path'; import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; @@ -11,4 +12,9 @@ export default defineConfig({ globals: true, environment: 'jsdom', }, + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, }); diff --git a/yarn.lock b/yarn.lock index 4f6eb64..d6eb2d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4890,6 +4890,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^20.14.2": + version: 20.14.2 + resolution: "@types/node@npm:20.14.2" + dependencies: + undici-types: "npm:~5.26.4" + checksum: 10c0/2d86e5f2227aaa42212e82ea0affe72799111b888ff900916376450b02b09b963ca888b20d9c332d8d2b833ed4781987867a38eaa2e4863fa8439071468b0a6f + languageName: node + linkType: hard + "@types/normalize-package-data@npm:^2.4.0": version: 2.4.4 resolution: "@types/normalize-package-data@npm:2.4.4" @@ -11618,6 +11627,7 @@ __metadata: "@tanstack/eslint-plugin-query": "npm:^5.35.6" "@tanstack/react-query": "npm:^5.40.0" "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0" + "@types/node": "npm:^20.14.2" "@types/react": "npm:^18.2.66" "@types/react-dom": "npm:^18.2.22" "@typescript-eslint/eslint-plugin": "npm:^7.2.0"