From e1a96cd770fc74b59fededa1d98ae8f9993546ee Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 23 Sep 2024 21:10:04 +0900 Subject: [PATCH 1/7] feat: add Flex component --- package-lock.json | 1 + package.json | 1 + src/components/common/Flex/index.tsx | 46 ++++++++++++++++++++++++++++ 3 files changed, 48 insertions(+) create mode 100644 src/components/common/Flex/index.tsx diff --git a/package-lock.json b/package-lock.json index 410442f..329bffd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.56.2", + "csstype": "^3.1.3", "react": "^18.3.1", "react-dom": "^18.3.1", "zustand": "^4.5.5" diff --git a/package.json b/package.json index bc6f6bf..93597fa 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.56.2", + "csstype": "^3.1.3", "react": "^18.3.1", "react-dom": "^18.3.1", "zustand": "^4.5.5" diff --git a/src/components/common/Flex/index.tsx b/src/components/common/Flex/index.tsx new file mode 100644 index 0000000..72e33bf --- /dev/null +++ b/src/components/common/Flex/index.tsx @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; +import type * as CSS from 'csstype'; +import { HTMLAttributes } from 'react'; + +interface FlexProps { + direction?: 'column' | 'row'; + xGap?: string; + yGap?: string; + justifyContent?: CSS.Properties['justifyContent']; + alignItems?: CSS.Properties['alignItems']; +} + +type Props = HTMLAttributes & FlexProps; + +export default function Flex({ + direction = 'row', + xGap, + yGap, + justifyContent = 'start', + alignItems = 'start', + children, + ...rest +}: Props) { + return ( + + {children} + + ); +} + +const Container = styled.div` + width: 100%; + display: flex; + flex-direction: ${(p) => p.direction}; + justify-content: ${(p) => p.justifyContent}; + align-items: ${(p) => p.alignItems}; + column-gap: ${(p) => p.xGap}; + row-gap: ${(p) => p.yGap}; +`; From 63389dbc8350a760c2c8ccd209d2b49508e2ed43 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 23 Sep 2024 21:10:35 +0900 Subject: [PATCH 2/7] feat: add Input component --- src/assets/styles/global/pallets.ts | 6 ++++++ src/components/common/Input/index.tsx | 23 +++++++++++++++++++++++ tsconfig.json | 3 ++- vite.config.ts | 2 +- 4 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 src/assets/styles/global/pallets.ts create mode 100644 src/components/common/Input/index.tsx diff --git a/src/assets/styles/global/pallets.ts b/src/assets/styles/global/pallets.ts new file mode 100644 index 0000000..8686c3a --- /dev/null +++ b/src/assets/styles/global/pallets.ts @@ -0,0 +1,6 @@ +const palettes = { + white: '#fff', + borderGray: '#e4e5e8', +}; + +export default palettes; diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx new file mode 100644 index 0000000..f943827 --- /dev/null +++ b/src/components/common/Input/index.tsx @@ -0,0 +1,23 @@ +import { InputHTMLAttributes } from 'react'; +import styled from '@emotion/styled'; +import Flex from '@components/common/Flex'; +import palettes from '@assets/styles/global/pallets'; + +interface Props extends InputHTMLAttributes { + label?: string; +} + +export default function Input({ label, ...rest }: Props) { + return ( + + {label && } + + + ); +} + +const InputContainer = styled.input` + background-color: ${palettes.white}; + border: 1px solid ${palettes.borderGray}; + border-radius: 5px; +`; diff --git a/tsconfig.json b/tsconfig.json index a6d9dec..0d59e98 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,7 +35,8 @@ "@routes/*": ["src/routes/*"], "@utils/*": ["src/utils/*"], "@types/*": ["src/types/*"] - } + }, + "jsxImportSource": "@emotion/react" }, "include": [ "src", diff --git a/vite.config.ts b/vite.config.ts index 4853ec3..f445b6c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react({ jsxImportSource: '@emotion/react' })], resolve: { alias: [ { find: '@', replacement: resolve(__dirname, 'src') }, From 7b6ab68472b01b41806b9522a897c67836a20359 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 23 Sep 2024 21:31:31 +0900 Subject: [PATCH 3/7] feat: add Card component --- src/components/common/Card/index.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/components/common/Card/index.tsx diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx new file mode 100644 index 0000000..ead7ead --- /dev/null +++ b/src/components/common/Card/index.tsx @@ -0,0 +1,23 @@ +import palettes from '@/assets/styles/global/pallets'; +import styled from '@emotion/styled'; +import { HTMLAttributes, ReactNode } from 'react'; + +interface Props extends HTMLAttributes { + borderRadius?: string; + children: ReactNode; +} + +export default function Card({ borderRadius = '12px', children, ...rest }: Props) { + return ( + + {children} + + ); +} + +const CardContainer = styled.div<{ borderRadius: string }>` + display: inline-block; + border: 1px solid ${palettes.borderGray}; + box-shadow: 0px 12px 32px 0px rgba(24, 25, 28, 0.08); + border-radius: ${({ borderRadius }) => borderRadius}; +`; From e0e1cc4ab9513f90b2da811151cd435f444fe70b Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 23 Sep 2024 21:43:55 +0900 Subject: [PATCH 4/7] docs(storybook): add stories for Card, Flex, Input components --- src/App.tsx | 1 - src/components/common/Card/index.stories.tsx | 24 ++++++++++++ src/components/common/Flex/index.stories.tsx | 38 +++++++++++++++++++ src/components/common/Input/index.stories.tsx | 20 ++++++++++ 4 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 src/components/common/Card/index.stories.tsx create mode 100644 src/components/common/Flex/index.stories.tsx create mode 100644 src/components/common/Input/index.stories.tsx diff --git a/src/App.tsx b/src/App.tsx index 6ed5121..59aa438 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,6 @@ function App() { return ( <> -

hello world!

); } diff --git a/src/components/common/Card/index.stories.tsx b/src/components/common/Card/index.stories.tsx new file mode 100644 index 0000000..5971e06 --- /dev/null +++ b/src/components/common/Card/index.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Card from '.'; + +const meta: Meta = { + title: 'common/Card', + component: Card, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + borderRadius: '12px', + children:

Hello World!

, + }, + render: (args) => ( + +

Hello World!

+ + ), +}; diff --git a/src/components/common/Flex/index.stories.tsx b/src/components/common/Flex/index.stories.tsx new file mode 100644 index 0000000..05005a8 --- /dev/null +++ b/src/components/common/Flex/index.stories.tsx @@ -0,0 +1,38 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Flex from '.'; + +const meta: Meta = { + title: 'common/Flex', + component: Flex, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + direction: 'row', + justifyContent: 'center', + alignItems: 'center', + xGap: '10px', + yGap: '10px', + }, + render: (args) => ( + +
Box 1
+
Box 2
+
Box 3
+ + ), +}; + +const boxStyle = { + width: '100px', + height: '100px', + backgroundColor: 'lightblue', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; diff --git a/src/components/common/Input/index.stories.tsx b/src/components/common/Input/index.stories.tsx new file mode 100644 index 0000000..2ef2831 --- /dev/null +++ b/src/components/common/Input/index.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Input from '.'; + +const meta: Meta = { + title: 'common/Input', + component: Input, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + label: '아이디', + placeholder: '아이디를 입력해주세요.', + }, + render: (args) => , +}; From 0048f14fb74811fdd92da0464d80cb2dcf318887 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 23 Sep 2024 22:09:30 +0900 Subject: [PATCH 5/7] refactor: change gap props in Flex component --- src/components/common/Flex/index.stories.tsx | 6 +++-- src/components/common/Flex/index.tsx | 24 ++++++++------------ src/components/common/Input/index.tsx | 5 ++-- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/components/common/Flex/index.stories.tsx b/src/components/common/Flex/index.stories.tsx index 05005a8..9d89843 100644 --- a/src/components/common/Flex/index.stories.tsx +++ b/src/components/common/Flex/index.stories.tsx @@ -16,8 +16,10 @@ export const Default: Story = { direction: 'row', justifyContent: 'center', alignItems: 'center', - xGap: '10px', - yGap: '10px', + gap: { + x: '10px', + y: '10px', + }, }, render: (args) => ( diff --git a/src/components/common/Flex/index.tsx b/src/components/common/Flex/index.tsx index 72e33bf..bba89d1 100644 --- a/src/components/common/Flex/index.tsx +++ b/src/components/common/Flex/index.tsx @@ -2,10 +2,14 @@ import styled from '@emotion/styled'; import type * as CSS from 'csstype'; import { HTMLAttributes } from 'react'; +type FlexGap = { + x: string; + y: string; +}; + interface FlexProps { direction?: 'column' | 'row'; - xGap?: string; - yGap?: string; + gap?: FlexGap; justifyContent?: CSS.Properties['justifyContent']; alignItems?: CSS.Properties['alignItems']; } @@ -14,22 +18,14 @@ type Props = HTMLAttributes & FlexProps; export default function Flex({ direction = 'row', - xGap, - yGap, + gap, justifyContent = 'start', alignItems = 'start', children, ...rest }: Props) { return ( - + {children} ); @@ -41,6 +37,6 @@ const Container = styled.div` flex-direction: ${(p) => p.direction}; justify-content: ${(p) => p.justifyContent}; align-items: ${(p) => p.alignItems}; - column-gap: ${(p) => p.xGap}; - row-gap: ${(p) => p.yGap}; + column-gap: ${(p) => p.gap?.x}; + row-gap: ${(p) => p.gap?.y}; `; diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx index f943827..91a59e0 100644 --- a/src/components/common/Input/index.tsx +++ b/src/components/common/Input/index.tsx @@ -1,6 +1,5 @@ import { InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; -import Flex from '@components/common/Flex'; import palettes from '@assets/styles/global/pallets'; interface Props extends InputHTMLAttributes { @@ -9,10 +8,10 @@ interface Props extends InputHTMLAttributes { export default function Input({ label, ...rest }: Props) { return ( - + <> {label && } - + ); } From 71c6209e867871b1d70270237c33dac9c351a377 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Mon, 23 Sep 2024 23:19:02 +0900 Subject: [PATCH 6/7] feat: add StyleProvider --- src/App.tsx | 8 +------- src/assets/styles/StyleProvider.tsx | 19 +++++++++++++++++++ src/assets/styles/emotion.d.ts | 8 ++++++++ .../{index.tsx => global/GlobalStyles.tsx} | 0 src/assets/styles/global/palettes.ts | 6 ++++++ src/assets/styles/global/pallets.ts | 6 ------ src/assets/styles/theme.ts | 8 ++++++++ src/components/common/Card/index.tsx | 3 +-- src/components/common/Input/index.tsx | 5 ++--- src/main.tsx | 6 +++--- 10 files changed, 48 insertions(+), 21 deletions(-) create mode 100644 src/assets/styles/StyleProvider.tsx create mode 100644 src/assets/styles/emotion.d.ts rename src/assets/styles/{index.tsx => global/GlobalStyles.tsx} (100%) create mode 100644 src/assets/styles/global/palettes.ts delete mode 100644 src/assets/styles/global/pallets.ts create mode 100644 src/assets/styles/theme.ts diff --git a/src/App.tsx b/src/App.tsx index 59aa438..f85be72 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,5 @@ -import GlobalStyles from './assets/styles'; - function App() { - return ( - <> - - - ); + return

helloWorld!

; } export default App; diff --git a/src/assets/styles/StyleProvider.tsx b/src/assets/styles/StyleProvider.tsx new file mode 100644 index 0000000..c3f4eac --- /dev/null +++ b/src/assets/styles/StyleProvider.tsx @@ -0,0 +1,19 @@ +import { ReactNode } from 'react'; +import { ThemeProvider } from '@emotion/react'; +import GlobalStyles from './global/GlobalStyles'; +import theme from './theme'; + +interface Props { + children: ReactNode; +} + +const StyleProvider = ({ children }: Props) => { + return ( + + + {children} + + ); +}; + +export default StyleProvider; diff --git a/src/assets/styles/emotion.d.ts b/src/assets/styles/emotion.d.ts new file mode 100644 index 0000000..0685ded --- /dev/null +++ b/src/assets/styles/emotion.d.ts @@ -0,0 +1,8 @@ +import '@emotion/react'; +import { PalettesTypes } from './global/palettes'; + +declare module '@emotion/react' { + export interface Theme { + palettes: PalettesTypes; + } +} diff --git a/src/assets/styles/index.tsx b/src/assets/styles/global/GlobalStyles.tsx similarity index 100% rename from src/assets/styles/index.tsx rename to src/assets/styles/global/GlobalStyles.tsx diff --git a/src/assets/styles/global/palettes.ts b/src/assets/styles/global/palettes.ts new file mode 100644 index 0000000..f001c5e --- /dev/null +++ b/src/assets/styles/global/palettes.ts @@ -0,0 +1,6 @@ +export const palettes = { + white: '#fff', + borderGray: '#e4e5e8', +}; + +export type PalettesTypes = typeof palettes; diff --git a/src/assets/styles/global/pallets.ts b/src/assets/styles/global/pallets.ts deleted file mode 100644 index 8686c3a..0000000 --- a/src/assets/styles/global/pallets.ts +++ /dev/null @@ -1,6 +0,0 @@ -const palettes = { - white: '#fff', - borderGray: '#e4e5e8', -}; - -export default palettes; diff --git a/src/assets/styles/theme.ts b/src/assets/styles/theme.ts new file mode 100644 index 0000000..e02dbfa --- /dev/null +++ b/src/assets/styles/theme.ts @@ -0,0 +1,8 @@ +import { Theme } from '@emotion/react'; +import { palettes } from './global/palettes'; + +const theme: Theme = { + palettes, +}; + +export default theme; diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx index ead7ead..0ad9c17 100644 --- a/src/components/common/Card/index.tsx +++ b/src/components/common/Card/index.tsx @@ -1,4 +1,3 @@ -import palettes from '@/assets/styles/global/pallets'; import styled from '@emotion/styled'; import { HTMLAttributes, ReactNode } from 'react'; @@ -17,7 +16,7 @@ export default function Card({ borderRadius = '12px', children, ...rest }: Props const CardContainer = styled.div<{ borderRadius: string }>` display: inline-block; - border: 1px solid ${palettes.borderGray}; + border: 1px solid ${({ theme }) => theme.palettes.white}; box-shadow: 0px 12px 32px 0px rgba(24, 25, 28, 0.08); border-radius: ${({ borderRadius }) => borderRadius}; `; diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx index 91a59e0..c1742ed 100644 --- a/src/components/common/Input/index.tsx +++ b/src/components/common/Input/index.tsx @@ -1,6 +1,5 @@ import { InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; -import palettes from '@assets/styles/global/pallets'; interface Props extends InputHTMLAttributes { label?: string; @@ -16,7 +15,7 @@ export default function Input({ label, ...rest }: Props) { } const InputContainer = styled.input` - background-color: ${palettes.white}; - border: 1px solid ${palettes.borderGray}; + background-color: ${({ theme }) => theme.palettes.white}; + border: 1px solid ${({ theme }) => theme.palettes.borderGray}; border-radius: 5px; `; diff --git a/src/main.tsx b/src/main.tsx index e17d50b..7045851 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ -import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; +import StyleProvider from '@assets/styles/StyleProvider'; createRoot(document.getElementById('root')!).render( - + - , + , ); From 4b9d974d17fdd6a4601ab75c4bdb26bcebdc0125 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Wed, 25 Sep 2024 17:31:54 +0900 Subject: [PATCH 7/7] refactor: move to components to providers --- .husky/pre-commit | 1 - package.json | 9 ++++----- .../providers/GlobalStylesProvider}/GlobalStyles.tsx | 0 .../providers/GlobalStylesProvider/index.provider.tsx} | 8 ++++---- src/components/providers/index.tsx | 6 ++++++ src/main.tsx | 6 +++--- 6 files changed, 17 insertions(+), 13 deletions(-) rename src/{assets/styles/global => components/providers/GlobalStylesProvider}/GlobalStyles.tsx (100%) rename src/{assets/styles/StyleProvider.tsx => components/providers/GlobalStylesProvider/index.provider.tsx} (57%) create mode 100644 src/components/providers/index.tsx diff --git a/.husky/pre-commit b/.husky/pre-commit index 61c8331..2312dc5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,2 +1 @@ npx lint-staged -npx lint-staged diff --git a/package.json b/package.json index 93597fa..b48b6c0 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint --cache 'src/**/*.{ts,tsx}'", + "tsc": "tsc --noEmit", "format": "prettier --write --cache 'src/**/*.{ts,tsx}'", "lint-staged": "lint-staged", "preview": "vite preview", @@ -18,15 +19,14 @@ "lint-staged": { "**/*.{tsx,ts,jsx,js}": [ "eslint --fix --cache", - "prettier --write --cache" - ], - "*.js": "eslint --cache --fix", - "*.{ts,tsx}": "prettier --write" + "prettier --write --cache" + ] }, "dependencies": { "@emotion/babel-plugin": "^11.12.0", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@emotion/css": "^11.13.0", "@tanstack/react-query": "^5.56.2", "csstype": "^3.1.3", "react": "^18.3.1", @@ -35,7 +35,6 @@ }, "devDependencies": { "@chromatic-com/storybook": "^2.0.2", - "@emotion/css": "^11.13.0", "@eslint/js": "^9.9.0", "@storybook/addon-essentials": "^8.3.0", "@storybook/addon-interactions": "^8.3.0", diff --git a/src/assets/styles/global/GlobalStyles.tsx b/src/components/providers/GlobalStylesProvider/GlobalStyles.tsx similarity index 100% rename from src/assets/styles/global/GlobalStyles.tsx rename to src/components/providers/GlobalStylesProvider/GlobalStyles.tsx diff --git a/src/assets/styles/StyleProvider.tsx b/src/components/providers/GlobalStylesProvider/index.provider.tsx similarity index 57% rename from src/assets/styles/StyleProvider.tsx rename to src/components/providers/GlobalStylesProvider/index.provider.tsx index c3f4eac..9422bfe 100644 --- a/src/assets/styles/StyleProvider.tsx +++ b/src/components/providers/GlobalStylesProvider/index.provider.tsx @@ -1,13 +1,13 @@ import { ReactNode } from 'react'; import { ThemeProvider } from '@emotion/react'; -import GlobalStyles from './global/GlobalStyles'; -import theme from './theme'; +import GlobalStyles from './GlobalStyles'; +import theme from '@assets/styles/theme'; interface Props { children: ReactNode; } -const StyleProvider = ({ children }: Props) => { +const GlobalStylesProvider = ({ children }: Props) => { return ( @@ -16,4 +16,4 @@ const StyleProvider = ({ children }: Props) => { ); }; -export default StyleProvider; +export default GlobalStylesProvider; diff --git a/src/components/providers/index.tsx b/src/components/providers/index.tsx new file mode 100644 index 0000000..4b12809 --- /dev/null +++ b/src/components/providers/index.tsx @@ -0,0 +1,6 @@ +import { ReactNode } from 'react'; +import GlobalStylesProvider from './GlobalStylesProvider/index.provider'; + +export default function AppProviders({ children }: { children: ReactNode }) { + return {children}; +} diff --git a/src/main.tsx b/src/main.tsx index 7045851..796f90e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ import { createRoot } from 'react-dom/client'; import App from './App.tsx'; -import StyleProvider from '@assets/styles/StyleProvider'; +import AppProviders from '@components/providers/index.tsx'; createRoot(document.getElementById('root')!).render( - + - , + , );