feat: [LINKER-41] 디자인 시스템 컬러 수정 + Layout 컴포넌트 추가 (#26)

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) => (
+    <>
+      <ThemeProvider
+        attribute="class"
+        value={{
+          light: lightThemeVars,
+          dark: darkThemeVars,
+        }}
+      >
+        <Story />
+      </ThemeProvider>
+    </>
+  ),
+];
+
 const preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

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": {

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}`,
     },
   },
 });

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<typeof Carousel> = {
-  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 (
       <div className={wrapper}>
         <Carousel onSwipe={handleSwipe}>
-          <SwiperItem>
+          <CarouselItem>
             <div className={box}>1</div>
-          </SwiperItem>
-          <SwiperItem>
+          </CarouselItem>
+          <CarouselItem>
             <div className={box}>2</div>
-          </SwiperItem>
-          <SwiperItem>
+          </CarouselItem>
+          <CarouselItem>
             <div className={box}>3</div>
-          </SwiperItem>
+          </CarouselItem>
         </Carousel>
-      </div >
-    )
-  }
+      </div>
+    );
+  },
 };

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',
+});

packages/lds/src/Layout/Layout.tsx

@@ -0,0 +1,7 @@
+import { container } from './Layout.css';
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <section className={container}>{children}</section>;
+};
+
+export default Layout;

packages/lds/src/Layout/index.tsx

@@ -0,0 +1 @@
+export { default as Layout } from './Layout';

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}`,
 });

packages/lds/src/List/List.stories.tsx

@@ -25,7 +25,7 @@ export const Template: Story = {
             rightAddon={
               <button type="button">
                 <img
-                  src="https://static.im-linker.com/right-arrow.png"
+                  src="https://static.im-linker.com/right-arrow-mono.png"
                   alt=""
                   width={28}
                   height={28}

packages/lds/src/List/ListHeader.tsx

@@ -25,7 +25,7 @@ const ListHeader = ({ title, description, icon, rightAddon, className }: Props)
         {rightAddon}
       </div>
 
-      <Txt as="p" typography="p3" color={colors.grey050}>
+      <Txt as="p" typography="p3" color={colors.gray950}>
         {description}
       </Txt>
     </div>

packages/lds/src/List/ListRow.css.ts

@@ -1,10 +1,11 @@
+import { colors } from '@linker/styles';
 import { style } from '@vanilla-extract/css';
 
 export const listRowContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  backgroundColor: '#fff',
+  backgroundColor: `${colors.gray000}`,
 
   selectors: {
     '&:hover': {

packages/lds/src/List/ListRow.tsx

@@ -19,7 +19,12 @@ const ListRow = ({ content, withArrow, disabled, className, onClick }: Props) =>
       <div>{content}</div>
       {withArrow && (
         <button type="button" disabled={disabled}>
-          <Image src="https://static.im-linker.com/right-arrow.png" alt="" width={28} height={28} />
+          <Image
+            src="https://static.im-linker.com/right-arrow-mono.png"
+            alt=""
+            width={28}
+            height={28}
+          />
         </button>
       )}
     </li>

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',
 });

packages/lds/src/Txt/README.md

@@ -6,7 +6,7 @@ import { colors } from '@linker/styles';
 
 const Page = () => {
   return (
-    <Txt typography="h2" color={colors.grey050}>
+    <Txt typography="h2" color={colors.gray800}>
       안녕하세요
     </Txt>
   );

packages/lds/src/index.ts

@@ -1,4 +1,5 @@
 export * from './Button';
+export * from './Layout';
 export * from './List';
 export * from './Spacing';
 export * from './Tabs';

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',
   },
 });

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 (
     <>
       <FriendHeader />
-      <section className={section}>
-        {children}
-      </section>
+      <Layout>{children}</Layout>
     </>
-  )
+  );
 }
 
-export default FriendLayout
+export default FriendLayout;

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 (
     <section className={clsx(wrapper)}>
       <article className={clsx(totalCountWrapper)}>
-        <Txt typography="p4" color={colors.grey050}>
+        <Txt typography="p4" color={colors.gray800}>
           전체
         </Txt>
-        <Txt typography="p4" color={colors.grey050}>
+        <Txt typography="p4" color={colors.gray800}>
           {contentMockdata.length}
         </Txt>
       </article>