feat: [LINKER-95] 디자인 시스템 최신화 (#41)

package.json

@@ -20,6 +20,7 @@
     "dev": "yarn workspace web dev",
     "dev:mock": "yarn workspace web dev:mock",
     "build": "yarn workspace web build && yarn workspace web export",
+    "typecheck": "yarn workspace web typecheck",
     "lint": "yarn workspace web lint",
     "test": "yarn workspace web test",
     "postinstall": "husky install",

packages/lds/src/Calendar/Calendar.tsx

@@ -3,13 +3,13 @@
 import clsx from 'clsx';
 import { differenceInDays, differenceInWeeks, format, startOfMonth } from 'date-fns';
 import { motion } from 'framer-motion';
-import Image from 'next/image';
 import { forwardRef, useState } from 'react';
 import { Calendar as ReactCalendar, CalendarProps } from 'react-calendar';
 import { LooseValue, Value } from 'react-calendar/dist/cjs/shared/types';
 import 'react-calendar/dist/Calendar.css';
 
 import { calendar, dot, container, buttonWrapper } from './Calendar.css';
+import { Icon } from '../Icon';
 
 interface Props extends Omit<CalendarProps, 'value' | 'onChange'> {
   value?: LooseValue;
@@ -33,7 +33,7 @@ const Calendar = forwardRef<HTMLDivElement, Props>((props, ref) => {
     >
       {withModeChange && (
         <button className={buttonWrapper} onClick={() => setIsWeekMode((prev) => !prev)}>
-          <Image src="https://static.im-linker.com/calendar.png" alt="" width={24} height={24} />
+          <Icon name="calendar" size={24} />
         </button>
       )}
       <ReactCalendar
@@ -47,12 +47,8 @@ const Calendar = forwardRef<HTMLDivElement, Props>((props, ref) => {
         showNeighboringMonth={false}
         next2Label={null}
         prev2Label={null}
-        nextLabel={
-          <Image src="https://static.im-linker.com/right-arrow.png" alt="" width={18} height={18} />
-        }
-        prevLabel={
-          <Image src="https://static.im-linker.com/left-arrow.png" alt="" width={18} height={18} />
-        }
+        nextLabel={<Icon name="next" size={24} />}
+        prevLabel={<Icon name="back" size={24} />}
         calendarType="gregory"
         className={clsx(calendar, className)}
         maxDate={isWeekMode ? endOfWeek(value as Date) : undefined}

packages/lds/src/Icon/Icon.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+
+export const storybookContainer = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+});
+
+export const iconWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  margin: '0 10px',
+});

packages/lds/src/Icon/Icon.stories.tsx

@@ -0,0 +1,141 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Icon from './Icon';
+import { iconWrapper, storybookContainer } from './Icon.css';
+import { Txt } from '../Txt';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Icon',
+  component: Icon,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Template: Story = {
+  render: () => {
+    return (
+      <>
+        <Txt typography="h3">mono</Txt>
+        <div className={storybookContainer}>
+          <div className={iconWrapper}>
+            <Icon name="back" />
+            <Txt typography="p1">back</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="calendar" />
+            <Txt typography="p1">calendar</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="calender-gray" />
+            <Txt typography="p1">calendar-gray</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="close" />
+            <Txt typography="p1">close</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="down" />
+            <Txt typography="p1">down</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="list" />
+            <Txt typography="p1">list</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="more" />
+            <Txt typography="p1">more</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="more-gray" />
+            <Txt typography="p1">more-gray</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="next" />
+            <Txt typography="p1">next</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="next-gray" />
+            <Txt typography="p1">next-gray</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="plus" />
+            <Txt typography="p1">plus</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="reset" />
+            <Txt typography="p1">reset</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="reset-gray" />
+            <Txt typography="p1">reset-gray</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="search" />
+            <Txt typography="p1">search</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="setting" />
+            <Txt typography="p1">setting</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="share" />
+            <Txt typography="p1">share</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="time" />
+            <Txt typography="p1">time</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="time-gray" />
+            <Txt typography="p1">time-gray</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="user" />
+            <Txt typography="p1">user</Txt>
+          </div>
+        </div>
+
+        <br />
+
+        <Txt typography="h3">fill</Txt>
+        <div className={storybookContainer}>
+          <div className={iconWrapper}>
+            <Icon name="arrow-fill" />
+            <Txt typography="p1">arrow-fill</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="kakao" />
+            <Txt typography="p1">kakao</Txt>
+          </div>
+
+          <div className={iconWrapper}>
+            <Icon name="pencil-fill" />
+            <Txt typography="p1">pencil-fill</Txt>
+          </div>
+        </div>
+      </>
+    );
+  },
+};

packages/lds/src/Icon/Icon.tsx

@@ -0,0 +1,22 @@
+import Image, { ImageProps } from 'next/image';
+
+const bucket = 'https://static.im-linker.com';
+
+interface Props extends Omit<ImageProps, 'src' | 'alt' | 'width' | 'height'> {
+  name: string;
+  size?: number;
+}
+
+const Icon = ({ name, size = 32, className, ...props }: Props) => {
+  return (
+    <Image
+      src={`${bucket}/icons/${name}.svg`}
+      alt={`${name} icon`}
+      width={size}
+      height={size}
+      {...props}
+    />
+  );
+};
+
+export default Icon;

packages/lds/src/Icon/index.ts

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

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

@@ -11,5 +11,5 @@ export const listContent = style({
   height: '100%',
   padding: '1.6rem 2rem',
   borderRadius: '0.8rem',
-  backgroundColor: `${colors.gray000}`,
+  background: `${colors.gray000}`,
 });

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import List from './List';
+import { Icon } from '../Icon';
 import { Spacing } from '../Spacing';
 import { Txt } from '../Txt';
 
@@ -24,12 +25,7 @@ export const Template: Story = {
             description="다가오는 일정을 확인하고 대화 주제를 확인해보세요."
             rightAddon={
               <button type="button">
-                <img
-                  src="https://static.im-linker.com/right-arrow-mono.png"
-                  alt=""
-                  width={28}
-                  height={28}
-                />
+                <Icon name="arrow" />
               </button>
             }
           />
@@ -48,12 +44,7 @@ export const Template: Story = {
             title="커피챗 진행"
             rightAddon={
               <button type="button">
-                <img
-                  src="https://static.im-linker.com/dots-vertical.svg"
-                  alt=""
-                  width={28}
-                  height={28}
-                />
+                <Icon name="arrow" />
               </button>
             }
           />

packages/lds/src/List/ListRow.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import clsx from 'clsx';
-import Image from 'next/image';
 
 import { listRowContainer } from './ListRow.css';
+import { Icon } from '../Icon';
 
 interface Props {
   content: React.ReactNode;
@@ -19,12 +19,7 @@ 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-mono.png"
-            alt=""
-            width={28}
-            height={28}
-          />
+          <Icon name="arrow" />
         </button>
       )}
     </li>

packages/lds/src/SearchInput/SearchInput.tsx

@@ -2,12 +2,12 @@
 
 import { typography } from '@linker/styles';
 import clsx from 'clsx';
-import Image from 'next/image';
 import { HTMLAttributes, useEffect, useRef } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { useDebounce } from 'use-debounce';
 
 import { searchInputContainer, searchInput } from './SearchInput.css';
+import { Icon } from '../Icon';
 
 interface Props extends HTMLAttributes<HTMLInputElement> {
   children?: React.ReactNode;
@@ -32,12 +32,7 @@ const SearchInput = ({ children, className, placeholder, setQuery, query }: Prop
 
   return (
     <nav className={searchInputContainer}>
-      <Image
-        src="https://static.im-linker.com/search.svg"
-        width={24}
-        height={24}
-        alt={'검색아이콘'}
-      />
+      <Icon name="search" size={24} />
 
       <Controller
         control={control}

packages/lds/src/index.ts

@@ -4,6 +4,7 @@ export * from './Carousel';
 export * from './Chip';
 export * from './Dialog';
 export * from './HorizonScroller';
+export * from './Icon';
 export * from './Layout';
 export * from './List';
 export * from './Modal';

packages/styles/src/colors.css.ts

@@ -1,13 +1,55 @@
 import { createTheme, createThemeContract } from '@vanilla-extract/css';
 
-export const baseColors = {
+const primary = {
+  blue050: '#F0F6FF',
+  blue100: '#BCD6FF',
+  blue200: '#9CC3FF',
+  blue300: '#6FA7FF',
+  blue400: '#5396FF',
+  blue500: '#287CFF',
+  blue600: '#2471E8',
+  blue700: '#1C58B5',
+  blue800: '#16448C',
+  blue900: '#11346B',
+};
+
+const secondary = {
+  green: '#58DB67',
+  lightBlue: '#111CDF2',
+  purple: '#CE7AF0',
+  magenta: '#FF70B0',
+  orange: '#FF875C',
+};
+
+const semantic = {
+  red050: '#ffeeee',
+  red100: '#ffcbcb',
+  red200: '#ffb2b2',
+  red300: '#ff8e8e',
+  red400: '#ff7979',
+  red500: '#ff5757',
+  red600: '#e84f4f',
+  red700: '#b53e3e',
+  red800: '#8c3030',
+  red900: '#6b2525',
+};
+
+const gradation = {
+  gradationBlue: 'linear-gradient(to right, #713EFF, #0989FF)',
+  gradationMagenta: 'linear-gradient(to right, #FB7A93, #FF586C);',
+};
+
+const baseColors = {
   white: '#ffffff',
   black: '#000000',
   background: '#f1f3f5',
-  primary: '#287cff',
+  ...primary,
+  ...secondary,
+  ...semantic,
+  ...gradation,
 };
 
-export const colorVariants = createThemeContract({
+const colorVariants = createThemeContract({
   colors: {
     ...baseColors,
     gray000: null,