chore: conflict 해결

Team-TIFY · Jul 15, 2023 · ee5ae49 · ee5ae49
2 parents ee6ceed + f2ee28e
commit ee5ae49
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 34 deletions.
diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
@@ -101,7 +101,7 @@ const InstText = styled.div <{
   width: 280px;
   height: 20px;
   margin-bottom: 8px;
-  ${theme.typo.Caption_12};
+  ${theme.typo.Caption_12M};
   color: ${theme.palette.gray_200};
 ` 
 
@@ -138,5 +138,5 @@ const TextAreaWrapper = styled.div<{ count: boolean }>`
     height:20px;
     padding: 8px 14px;
     color:${theme.palette.red_500};
-    ${theme.typo.Caption_12};
+    ${theme.typo.Caption_12M};
   `
diff --git a/src/components/atoms/Tag/Tag.stories.ts b/src/components/atoms/Tag/Tag.stories.ts
@@ -0,0 +1,27 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { Tag } from ".";
+
+const meta = {
+    title: 'Atom/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const main: Story = {
+    args: {
+        children: "여름쿨톤",
+        variant: "main",
+        color: "purple"
+    }
+}
+
+export const dark: Story = {
+    args: {
+        children: "웨이크메이크",
+        variant: "dark",
+        color: "purple"
+    }
+}
diff --git a/src/components/atoms/Tag/index.tsx b/src/components/atoms/Tag/index.tsx
@@ -0,0 +1,55 @@
+import styled from "@emotion/styled";
+import { theme } from '@styles/theme';
+
+type TagVariant = 'main' | 'dark';
+type ColorVariant = 'purple' | 'pink' | 'teal' | 'aqua';
+
+const TAG_BG_COLOR_TYPE = {
+  main: {
+    purple: `${theme.palette.purple_100}`,
+    pink: `${theme.palette.pink_100}`,
+    teal: `${theme.palette.teal_100}`,
+    aqua: `${theme.palette.aqua_100}`,
+  },
+  dark: {
+    purple: `${theme.palette.purple_500}`,
+    pink: `${theme.palette.pink_500}`,
+    teal: `${theme.palette.teal_500}`,
+    aqua: `${theme.palette.aqua_500}`,
+  }
+}
+
+const TAG_TEXT_COLOR_TYPE = {
+  main: `${theme.palette.gray_800}`,
+  dark: `${theme.palette.white}`,
+}
+
+const TAG_PADDING_TYPE = {
+  main: '6px 8px',
+  dark: '6px 10px',
+}
+
+interface TagProps {
+  variant: TagVariant;
+  color: ColorVariant;
+  children: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+export const Tag = ({ variant, color, children }: TagProps) => {
+  return (
+    <Wrapper variant={variant} color={color}>
+      {children}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div<{ variant: TagVariant, color: ColorVariant }>`
+  ${theme.typo.Caption_12M};
+  background-color: ${({ variant, color }) => `${TAG_BG_COLOR_TYPE[variant][color]}`};
+  color: ${({ variant }) => `${TAG_TEXT_COLOR_TYPE[variant]}`};
+  padding: ${({ variant}) => `${TAG_PADDING_TYPE[variant]}`};
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+`;
diff --git a/src/styles/theme/palette.ts b/src/styles/theme/palette.ts
@@ -1,31 +1,37 @@
 export const palette = {
-  gray_100: '#E4E4E5',
-  gray_200: '#C3C3C6',
-  gray_300: '#9E9EA4',
-  gray_400: '#7F7E87',
-  gray_500: '#63626D',
-  gray_600: '#4E4D59',
-  gray_700: '#3D3C47',
-  gray_800: '#2D2C35',
-  gray_900: '#202027',
-  purple_100: '#F1E5FF',
-  purple_200: '#E3CCFF',
-  purple_300: '#D2B2FF',
-  purple_400: '#A875FF',
-  purple_500: '#7D40FF',
-  purple_600: '#671ADB',
-  purple_700: '#432499',
-  purple_800: '#2E2159',
-  purple_900: '#4A148C',
-  pink_300: '#FD9BCF',
-  lemon_300: '#FFFFB9',
-  red_100: '#FFE5E7',
-  red_300: '#FEAFB4',
-  red_500: '#F04461',
-  red_700: '#BC1B36',
-  dim_100: 'rgba(32, 32, 39, 0.9)',
-  dim_500: 'rgba(32, 32, 39, 0.5)',
-  dim_800: 'rgba(32, 32, 39, 0.2)',
-  background: '#17171C',
-  white: '#FFFFFF',
-} as const;
+    gray_100: '#E4E4E5',
+    gray_200: '#C3C3C6',
+    gray_300: '#9E9EA4',
+    gray_400: '#7F7E87',
+    gray_500: '#63626D',
+    gray_600: '#4E4D59',
+    gray_700: '#3D3C47',
+    gray_800: '#2D2C35',
+    gray_900: '#202027',
+    purple_100: '#F1E5FF',
+    purple_200: '#E3CCFF',
+    purple_300: '#D2B2FF',
+    purple_400: '#A875FF',
+    purple_500: '#7D40FF',
+    purple_600: '#671ADB',
+    purple_700: '#432499',
+    purple_800: '#2E2159',
+    pink_100: '#FEE6F2',
+    pink_300: '#FD9BCF',
+    pink_500: '#F74AA6',
+    lemon_300: '#FFFFB9',
+    red_100: '#FFE5E7',
+    red_300: '#FEAFB4',
+    red_500: '#F04461',
+    red_700: '#BC1B36',
+    dim_100: 'rgba(32, 32, 39, 0.9)',
+    dim_500:'rgba(32, 32, 39, 0.5)',
+    dim_800: 'rgba(32, 32, 39, 0.2)',
+    teal_100: '#DAF9FB',
+    teal_500: '#18D0DC',
+    aqua_100: '#DBEDFF',
+    aqua_500: '#4EA3F8',
+    background: '#17171C',
+    white: '#FFFFFF',
+  } as const;
+
diff --git a/src/styles/theme/typo.ts b/src/styles/theme/typo.ts
@@ -48,11 +48,11 @@ export const typo = {
         font-weight: 400;
         letter-spacing: -1.1%;
     `,
-    Caption_12: css`
+    Caption_12M: css`
         font-family: 'SpoqaHanSansNeo';
         font-size: ${calcRem(12)};
         line-height: 20px;
-        font-weight: 400;
+        font-weight: 500;
         letter-spacing: -1.1%;
     `,
     Caption_10: css`