From 99f9bf5942e6c3c5780c339fa8e7bb0af6519f79 Mon Sep 17 00:00:00 2001 From: Useong Lee Date: Thu, 11 Jan 2024 23:38:21 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20[LINKER-41]=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=BB=AC=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20+=20Layout=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#26)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .pnp.cjs | 10 +-- packages/lds/.storybook/preview.js | 19 ++++++ packages/lds/package.json | 1 + packages/lds/src/Carousel/Carousel.css.ts | 5 +- .../lds/src/Carousel/Carousel.stories.tsx | 28 ++++----- packages/lds/src/Layout/Layout.css.ts | 8 +++ packages/lds/src/Layout/Layout.tsx | 7 +++ packages/lds/src/Layout/index.tsx | 1 + packages/lds/src/List/List.css.ts | 3 +- packages/lds/src/List/List.stories.tsx | 2 +- packages/lds/src/List/ListHeader.tsx | 2 +- packages/lds/src/List/ListRow.css.ts | 3 +- packages/lds/src/List/ListRow.tsx | 7 ++- packages/lds/src/Tabs/Tabs.css.ts | 5 +- packages/lds/src/Txt/README.md | 2 +- packages/lds/src/index.ts | 1 + packages/styles/src/colors.css.ts | 61 +++++++++++-------- services/web/src/app/friend/layout.css.ts | 8 --- services/web/src/app/friend/layout.tsx | 11 ++-- services/web/src/app/my/contact/Contact.tsx | 5 +- .../my/contact/ContactItem/ContactItem.tsx | 8 +-- services/web/src/app/my/layout.css.ts | 7 --- services/web/src/app/my/layout.tsx | 7 +-- .../Header/components/Logo/Logo.css.ts | 3 +- .../components/MyProfile/MyProfile.css.ts | 5 +- yarn.lock | 1 + 26 files changed, 129 insertions(+), 91 deletions(-) create mode 100644 packages/lds/src/Layout/Layout.css.ts create mode 100644 packages/lds/src/Layout/Layout.tsx create mode 100644 packages/lds/src/Layout/index.tsx delete mode 100644 services/web/src/app/friend/layout.css.ts delete mode 100644 services/web/src/app/my/layout.css.ts diff --git a/.pnp.cjs b/.pnp.cjs index da6fa15a..155f6ad9 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -5563,6 +5563,7 @@ const RAW_RUNTIME_STATE = ["@vanilla-extract/webpack-plugin", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:2.3.1"],\ ["clsx", "npm:2.0.0"],\ ["next", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:14.0.3"],\ + ["next-themes", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:0.2.1"],\ ["prop-types", "npm:15.8.1"],\ ["react", "npm:18.2.0"],\ ["react-dom", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:18.2.0"],\ @@ -5613,6 +5614,7 @@ const RAW_RUNTIME_STATE = ["@vanilla-extract/webpack-plugin", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:2.3.1"],\ ["clsx", "npm:2.0.0"],\ ["next", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:14.0.3"],\ + ["next-themes", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:0.2.1"],\ ["prop-types", "npm:15.8.1"],\ ["react", "npm:18.2.0"],\ ["react-dom", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:18.2.0"],\ @@ -18844,10 +18846,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:86a11252c3a83e280d4a43eba68289f27b7ec3ffb28a07d37b4097892f0c6280128fe5b3d807680769185755c4a9e2dc5c359999a9ba43c49b1376102c121f1b#npm:0.2.1", {\ - "packageLocation": "./.yarn/__virtual__/next-themes-virtual-488549ca78/0/cache/next-themes-npm-0.2.1-16a440cf6e-6c955c114b.zip/node_modules/next-themes/",\ + ["virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:0.2.1", {\ + "packageLocation": "./.yarn/__virtual__/next-themes-virtual-6f13035671/0/cache/next-themes-npm-0.2.1-16a440cf6e-6c955c114b.zip/node_modules/next-themes/",\ "packageDependencies": [\ - ["next-themes", "virtual:86a11252c3a83e280d4a43eba68289f27b7ec3ffb28a07d37b4097892f0c6280128fe5b3d807680769185755c4a9e2dc5c359999a9ba43c49b1376102c121f1b#npm:0.2.1"],\ + ["next-themes", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:0.2.1"],\ ["@types/next", null],\ ["@types/react", "npm:18.2.39"],\ ["@types/react-dom", "npm:18.2.17"],\ @@ -23771,7 +23773,7 @@ const RAW_RUNTIME_STATE = ["msw", "virtual:86a11252c3a83e280d4a43eba68289f27b7ec3ffb28a07d37b4097892f0c6280128fe5b3d807680769185755c4a9e2dc5c359999a9ba43c49b1376102c121f1b#npm:2.0.9"],\ ["next", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:14.0.3"],\ ["next-router-mock", "virtual:86a11252c3a83e280d4a43eba68289f27b7ec3ffb28a07d37b4097892f0c6280128fe5b3d807680769185755c4a9e2dc5c359999a9ba43c49b1376102c121f1b#npm:0.9.10"],\ - ["next-themes", "virtual:86a11252c3a83e280d4a43eba68289f27b7ec3ffb28a07d37b4097892f0c6280128fe5b3d807680769185755c4a9e2dc5c359999a9ba43c49b1376102c121f1b#npm:0.2.1"],\ + ["next-themes", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:0.2.1"],\ ["react", "npm:18.2.0"],\ ["react-dom", "virtual:04c194a44ee7458e41f60147720d46732f96e84b26cc7f1376c7ff0bacbed626f55744a032f847435727741db57d78fb1dc48b8ff52aa5a67ffcebf21b905c8b#npm:18.2.0"],\ ["ts-node", "virtual:5150ddf72639c78026dd42fb70c98db909b5b4705d92e6f4c006404aac57f9ed11b6f4301fb318563ae47c142354f07129b31abbd0e3a58319a40761e044e693#npm:10.9.1"],\ diff --git a/packages/lds/.storybook/preview.js b/packages/lds/.storybook/preview.js index ed5e099e..f9a666e9 100644 --- a/packages/lds/.storybook/preview.js +++ b/packages/lds/.storybook/preview.js @@ -1,4 +1,23 @@ /** @type { import('@storybook/react').Preview } */ +import { lightThemeVars, darkThemeVars } from '@linker/styles'; +import { ThemeProvider } from 'next-themes'; + +export const decorators = [ + (Story) => ( + <> + + + + + ), +]; + const preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/packages/lds/package.json b/packages/lds/package.json index fc38f6a5..29fbd0c5 100644 --- a/packages/lds/package.json +++ b/packages/lds/package.json @@ -40,6 +40,7 @@ "@linker/styles": "workspace:^", "clsx": "2.0.0", "next": "^14.0.3", + "next-themes": "^0.2.1", "use-debounce": "^10.0.0" }, "peerDependencies": { diff --git a/packages/lds/src/Carousel/Carousel.css.ts b/packages/lds/src/Carousel/Carousel.css.ts index dbe5e7f2..f7007a20 100644 --- a/packages/lds/src/Carousel/Carousel.css.ts +++ b/packages/lds/src/Carousel/Carousel.css.ts @@ -1,3 +1,4 @@ +import { colors } from '@linker/styles'; import { style } from '@vanilla-extract/css'; export const carouselContainer = style({ @@ -42,11 +43,11 @@ export const dot = style({ width: '6px', height: '6px', borderRadius: '50%', - backgroundColor: '#b9babc', + backgroundColor: `${colors.gray400}`, selectors: { [`&.${activeStyle}`]: { - backgroundColor: '#050a11', + backgroundColor: `${colors.gray950}`, }, }, }); diff --git a/packages/lds/src/Carousel/Carousel.stories.tsx b/packages/lds/src/Carousel/Carousel.stories.tsx index d4cb7e2f..132e06d8 100644 --- a/packages/lds/src/Carousel/Carousel.stories.tsx +++ b/packages/lds/src/Carousel/Carousel.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; import Carousel from './Carousel'; -import { wrapper, box } from './Carousel.stories.css' -import SwiperItem from './CarouselItem'; +import { wrapper, box } from './Carousel.stories.css'; +import CarouselItem from './CarouselItem'; const meta: Meta = { - title: 'Swiper', + title: 'Carousel', component: Carousel, tags: ['autodocs'], }; @@ -18,23 +18,23 @@ export const Template: Story = { render: () => { const handleSwipe = (index: number) => { // eslint-disable-next-line no-console - console.log('index', index) - } + console.log('index', index); + }; return (
- +
1
- - + +
2
- - + +
3
- + -
- ) - } + + ); + }, }; diff --git a/packages/lds/src/Layout/Layout.css.ts b/packages/lds/src/Layout/Layout.css.ts new file mode 100644 index 00000000..7cfaa803 --- /dev/null +++ b/packages/lds/src/Layout/Layout.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + maxWidth: '72rem', + minWidth: '36rem', + height: '100%', + margin: '0 auto', +}); diff --git a/packages/lds/src/Layout/Layout.tsx b/packages/lds/src/Layout/Layout.tsx new file mode 100644 index 00000000..cf45772f --- /dev/null +++ b/packages/lds/src/Layout/Layout.tsx @@ -0,0 +1,7 @@ +import { container } from './Layout.css'; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return
{children}
; +}; + +export default Layout; diff --git a/packages/lds/src/Layout/index.tsx b/packages/lds/src/Layout/index.tsx new file mode 100644 index 00000000..6c48faec --- /dev/null +++ b/packages/lds/src/Layout/index.tsx @@ -0,0 +1 @@ +export { default as Layout } from './Layout'; diff --git a/packages/lds/src/List/List.css.ts b/packages/lds/src/List/List.css.ts index c316cf3e..b6589329 100644 --- a/packages/lds/src/List/List.css.ts +++ b/packages/lds/src/List/List.css.ts @@ -1,3 +1,4 @@ +import { colors } from '@linker/styles'; import { style } from '@vanilla-extract/css'; export const listContainer = style({ @@ -10,5 +11,5 @@ export const listContent = style({ height: '100%', padding: '1.6rem 2rem', borderRadius: '0.8rem', - backgroundColor: '#fff', + backgroundColor: `${colors.gray000}`, }); diff --git a/packages/lds/src/List/List.stories.tsx b/packages/lds/src/List/List.stories.tsx index 561d247b..a367698a 100644 --- a/packages/lds/src/List/List.stories.tsx +++ b/packages/lds/src/List/List.stories.tsx @@ -25,7 +25,7 @@ export const Template: Story = { rightAddon={ )} diff --git a/packages/lds/src/Tabs/Tabs.css.ts b/packages/lds/src/Tabs/Tabs.css.ts index bb74b410..bc5f5909 100644 --- a/packages/lds/src/Tabs/Tabs.css.ts +++ b/packages/lds/src/Tabs/Tabs.css.ts @@ -1,3 +1,4 @@ +import { colors } from '@linker/styles'; import { style } from '@vanilla-extract/css'; export const tabs = style({ @@ -30,7 +31,7 @@ export const link = style({ }); export const activeLink = style({ - color: '#ffffff', + color: `${colors.gray000}`, }); export const bottomLine = style({ @@ -43,6 +44,6 @@ export const bottomLine = style({ export const activeLine = style({ position: 'absolute', height: '100%', - backgroundColor: '#ffffff', + backgroundColor: `${colors.gray000}`, transition: 'left 0.1s ease-out', }); diff --git a/packages/lds/src/Txt/README.md b/packages/lds/src/Txt/README.md index e1da6c77..bb06a018 100644 --- a/packages/lds/src/Txt/README.md +++ b/packages/lds/src/Txt/README.md @@ -6,7 +6,7 @@ import { colors } from '@linker/styles'; const Page = () => { return ( - + 안녕하세요 ); diff --git a/packages/lds/src/index.ts b/packages/lds/src/index.ts index f7c83ac3..4e4ac185 100644 --- a/packages/lds/src/index.ts +++ b/packages/lds/src/index.ts @@ -1,4 +1,5 @@ export * from './Button'; +export * from './Layout'; export * from './List'; export * from './Spacing'; export * from './Tabs'; diff --git a/packages/styles/src/colors.css.ts b/packages/styles/src/colors.css.ts index 93e5fa62..24a432fa 100644 --- a/packages/styles/src/colors.css.ts +++ b/packages/styles/src/colors.css.ts @@ -3,20 +3,23 @@ import { createTheme, createThemeContract } from '@vanilla-extract/css'; export const baseColors = { background: '#f1f3f5', + primary: '#287cff', }; export const colorVariants = createThemeContract({ colors: { ...baseColors, - grey005: null, - grey010: null, - grey020: null, - grey030: null, - grey040: null, - grey050: null, - grey060: null, - grey070: null, - grey080: null, + gray000: null, + gray100: null, + gray200: null, + gray300: null, + gray400: null, + gray500: null, + gray600: null, + gray700: null, + gray800: null, + gray900: null, + gray950: null, }, }); @@ -25,29 +28,33 @@ export const { colors } = colorVariants; export const lightThemeVars = createTheme(colorVariants, { colors: { ...baseColors, - grey005: '#fefefe', - grey010: '#fdfdfd', - grey020: '#f7f8f9', - grey030: '#e9ebee', - grey040: '#c5c8ce', - grey050: '#646f7c', - grey060: '#374553', - grey070: '#28323c', - grey080: '#161d24', + gray000: '#ffffff', + gray100: '#f4f8f9', + gray200: '#eff1f4', + gray300: '#e2e5e8', + gray400: '#c1c3c6', + gray500: '#a1a5a7', + gray600: '#797b7e', + gray700: '#656769', + gray800: '#46484a', + gray900: '#242628', + gray950: '#242424', }, }); export const darkThemeVars = createTheme(colorVariants, { colors: { ...baseColors, - grey005: '#171b1c', - grey010: '#1e2427', - grey020: '#2e363a', - grey030: '#41474c', - grey040: '#5a6166', - grey050: '#999fa4', - grey060: '#c5c8c3', - grey070: '#f7f8f9', - grey080: '#fdfdfd', + gray000: '#000000', + gray100: '#f4f8f9', + gray200: '#eff1f4', + gray300: '#e2e5e8', + gray400: '#c1c3c6', + gray500: '#a1a5a7', + gray600: '#797b7e', + gray700: '#656769', + gray800: '#46484a', + gray900: '#242628', + gray950: '#242424', }, }); diff --git a/services/web/src/app/friend/layout.css.ts b/services/web/src/app/friend/layout.css.ts deleted file mode 100644 index 0255ed4d..00000000 --- a/services/web/src/app/friend/layout.css.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const section = style({ - maxWidth: '720px', - padding: '0 16px', - margin: '0 auto', - boxSizing: 'content-box', -}); diff --git a/services/web/src/app/friend/layout.tsx b/services/web/src/app/friend/layout.tsx index b7bed733..ee0edc3d 100644 --- a/services/web/src/app/friend/layout.tsx +++ b/services/web/src/app/friend/layout.tsx @@ -1,16 +1,13 @@ import { FriendHeader } from '@features/Header'; - -import { section } from './layout.css' +import { Layout } from '@linker/lds'; function FriendLayout({ children }: { children: React.ReactNode }) { return ( <> -
- {children} -
+ {children} - ) + ); } -export default FriendLayout +export default FriendLayout; diff --git a/services/web/src/app/my/contact/Contact.tsx b/services/web/src/app/my/contact/Contact.tsx index 00bd1346..e85ae131 100644 --- a/services/web/src/app/my/contact/Contact.tsx +++ b/services/web/src/app/my/contact/Contact.tsx @@ -1,3 +1,4 @@ +/* eslint-disable arrow-parens */ import { Txt } from '@linker/lds'; import { colors } from '@linker/styles'; import { clsx } from 'clsx'; @@ -10,10 +11,10 @@ function Contact() { return (
- + 전체 - + {contentMockdata.length}
diff --git a/services/web/src/app/my/contact/ContactItem/ContactItem.tsx b/services/web/src/app/my/contact/ContactItem/ContactItem.tsx index cdb2cc35..de46930a 100644 --- a/services/web/src/app/my/contact/ContactItem/ContactItem.tsx +++ b/services/web/src/app/my/contact/ContactItem/ContactItem.tsx @@ -20,17 +20,17 @@ function ContactItem({ name, career, company, profileImgUrl }: ContactItemProps) return (
- + {name}
- + {career} - + . - + {company}
diff --git a/services/web/src/app/my/layout.css.ts b/services/web/src/app/my/layout.css.ts deleted file mode 100644 index cf4f24e0..00000000 --- a/services/web/src/app/my/layout.css.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const section = style({ - maxWidth: '720px', - margin: '0 auto', - boxSizing: 'content-box', -}); diff --git a/services/web/src/app/my/layout.tsx b/services/web/src/app/my/layout.tsx index d063015a..71c507f5 100644 --- a/services/web/src/app/my/layout.tsx +++ b/services/web/src/app/my/layout.tsx @@ -1,14 +1,11 @@ import { MyHeader } from '@features/Header'; - -import { section } from './layout.css' +import { Layout } from '@linker/lds'; function MyLayout({ children }: { children: React.ReactNode }) { return ( <> -
- {children} -
+ {children} ); } diff --git a/services/web/src/features/Header/components/Logo/Logo.css.ts b/services/web/src/features/Header/components/Logo/Logo.css.ts index a3337135..7694c238 100644 --- a/services/web/src/features/Header/components/Logo/Logo.css.ts +++ b/services/web/src/features/Header/components/Logo/Logo.css.ts @@ -1,3 +1,4 @@ +import { colors } from '@linker/styles'; import { style } from '@vanilla-extract/css'; export const wrapper = style({ @@ -12,5 +13,5 @@ export const logo = style({ fontWeight: 'bold', lineHeight: '2.4rem', fontStyle: 'italic', - color: '#ffffff', + color: `${colors.gray000}`, }); diff --git a/services/web/src/features/Header/components/MyProfile/MyProfile.css.ts b/services/web/src/features/Header/components/MyProfile/MyProfile.css.ts index e9958de6..f21489e5 100644 --- a/services/web/src/features/Header/components/MyProfile/MyProfile.css.ts +++ b/services/web/src/features/Header/components/MyProfile/MyProfile.css.ts @@ -1,3 +1,4 @@ +import { colors } from '@linker/styles'; import { style } from '@vanilla-extract/css'; export const minimizeStyle = style({}); @@ -22,7 +23,7 @@ export const profileImageWrapper = style({ width: '7.2rem', height: '7.2rem', boxSizing: 'content-box', - border: '2px solid #FFFFFF', + border: `2px solid ${colors.gray000}`, borderRadius: '42%', selectors: { @@ -42,7 +43,7 @@ export const profileImage = style({ export const profileInfo = style({ marginLeft: '2.2rem', - color: '#ffffff', + color: `${colors.gray000}`, }); export const name = style({ diff --git a/yarn.lock b/yarn.lock index e4ffe3e1..c43ee16a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2648,6 +2648,7 @@ __metadata: "@vanilla-extract/webpack-plugin": "npm:^2.3.1" clsx: "npm:2.0.0" next: "npm:^14.0.3" + next-themes: "npm:^0.2.1" prop-types: "npm:^15.8.1" react: "npm:^18.2.0" react-dom: "npm:^18.2.0"