[#3] design tokens & Common Components

.gitignore

@@ -33,3 +33,10 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

src/components/common/Button/Button.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    label: '완료',
+    width: 358,
+    height: 56,
+  },
+};

src/components/common/Button/Button.styles.ts

@@ -0,0 +1,19 @@
+import { COLORS } from '../../../styles/constants/colors';
+import styled from '@emotion/styled';
+
+// 가독성을 위해 스타일 파일은 별도로 둡니다.
+
+interface ButtonProps {
+  width?: number;
+  height?: number;
+}
+
+export const Button = styled.div<ButtonProps>`
+  width: ${(props) => (props.width ? `${props.width}px` : '358px')};
+  height: ${(props) => (props.height ? `${props.height}px` : '56px')};
+  line-height: ${(props) => (props.height ? `${props.height}px` : '56px')};
+  border-radius: 12px;
+  text-align: center;
+  color: ${COLORS.grayscale.white};
+  background-color: ${COLORS.SSU.primary};
+`;

src/components/common/Button/Button.tsx

@@ -0,0 +1,16 @@
+import * as styles from './Button.styles';
+
+interface ButtonProps {
+  label?: string;
+  width?: number;
+  height?: number;
+  onClick?: () => void;
+}
+
+const Button = ({ label, width, height, onClick }: ButtonProps) => (
+  <styles.Button width={width} height={height} onClick={onClick}>
+    {label}
+  </styles.Button>
+);
+
+export default Button;

src/components/common/Button/index.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;

src/components/common/Category/Category.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Category from './Category';
+
+const meta: Meta<typeof Category> = {
+  title: 'Category',
+  component: Category,
+};
+
+export default meta;
+type Story = StoryObj<typeof Category>;
+
+export const BgColor: Story = {
+  args: {
+    label: '전체',
+    BgColor: true,
+  },
+};

src/components/common/Category/Category.styles.ts

@@ -0,0 +1,26 @@
+import { COLORS } from '../../../styles/constants/colors';
+import styled from '@emotion/styled';
+import { TEXT_STYLES } from '../../../styles/constants/textStyles';
+
+// 가독성을 위해 스타일 파일은 별도로 둡니다.
+
+interface CategoryProps {
+  /** 상태값 종류, true->채워진 배경 | false->흰 배경 */
+  BgColor: boolean;
+}
+
+export const Category = styled.div<CategoryProps>`
+  height: 35px;
+  padding: 0 15px;
+  line-height: 35px;
+  border-radius: 20px;
+  text-align: center;
+  display: inline-block;
+  color: ${(props) =>
+    props.BgColor ? COLORS.grayscale.white : COLORS.SSU.primary};
+  background-color: ${(props) =>
+    props.BgColor ? COLORS.SSU.primary : COLORS.grayscale.white};
+  border: 1px solid
+    ${(props) => (props.BgColor ? COLORS.SSU.primary : COLORS.SSU.primary)};
+  ${TEXT_STYLES.CapM14};
+`;

src/components/common/Category/Category.tsx

@@ -0,0 +1,12 @@
+import * as styles from './Category.styles';
+
+interface CategoryProps {
+  label?: string;
+  BgColor: boolean;
+}
+
+const Category = ({ label, BgColor }: CategoryProps) => (
+  <styles.Category BgColor={BgColor}>{label}</styles.Category>
+);
+
+export default Category;

src/components/common/Category/index.ts

@@ -0,0 +1,3 @@
+import Category from './Category';
+
+export default Category;

src/components/common/Status/Status.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Status from './Status';
+
+const meta: Meta<typeof Status> = {
+  title: 'Status',
+  component: Status,
+};
+
+export default meta;
+type Story = StoryObj<typeof Status>;
+
+export const isIncomplete: Story = {
+  args: {
+    label: '미완료',
+    status: 0,
+  },
+};
+
+export const isComplete: Story = {
+  args: {
+    label: '완료',
+    status: 1,
+  },
+};
+
+export const isTimeout: Story = {
+  args: {
+    label: '시간 초과',
+    status: 2,
+  },
+};

src/components/common/Status/Status.styles.ts

@@ -0,0 +1,31 @@
+import { COLORS } from '../../../styles/constants/colors';
+import styled from '@emotion/styled';
+import { TEXT_STYLES } from '../../../styles/constants/textStyles';
+
+// 가독성을 위해 스타일 파일은 별도로 둡니다.
+
+interface StatusProps {
+  /** 상태값 종류, 0->미완료 | 1->완료 | 2->시간초과. */
+  status: number;
+}
+
+export const Status = styled.div<StatusProps>`
+  height: 20px;
+  padding: 0 10px;
+  line-height: 20px;
+  border-radius: 12px;
+  text-align: center;
+  display: inline-block;
+  color: ${COLORS.grayscale.white};
+  background-color: ${(props) => {
+    switch (props.status) {
+      case 0:
+        return COLORS.SSU.error;
+      case 1:
+        return COLORS.SSU.primary;
+      case 2:
+        return COLORS.grayscale.Gray1;
+    }
+  }};
+  ${TEXT_STYLES.CapM12};
+`;

src/components/common/Status/Status.tsx

@@ -0,0 +1,15 @@
+import * as styles from './Status.styles';
+
+interface StatusProps {
+  label?: string;
+  status: number;
+  onClick?: () => void;
+}
+
+const Status = ({ label, status, onClick }: StatusProps) => (
+  <styles.Status status={status} onClick={onClick}>
+    {label}
+  </styles.Status>
+);
+
+export default Status;

src/components/common/Status/index.ts

@@ -0,0 +1,3 @@
+import Status from './Status';
+
+export default Status;

src/components/common/Test/Test.tsx

@@ -1,3 +1,4 @@
+import Button from '../Button';
 import * as styles from './Test.style';
 
 interface TestProps {

src/styles/constants/colors.ts

@@ -0,0 +1,18 @@
+export const COLORS = {
+  SSU: {
+    primary: '#5ebeeb',
+    secondary: '#e7f5fc',
+    error: '#f36262',
+    accept: '#7AC364',
+    yellow: '#FFD057',
+  },
+  grayscale: {
+    white: '#FFFFFF',
+    Gray1: '#6E6E6E',
+    Gray2: '#BDBDBD',
+    Gray3: '#D9D9D9',
+    Gray4: '#EEEEEE',
+    Gray5: '#F9F9F9',
+    Black: '#313131',
+  },
+};

src/styles/constants/textStyles.ts

@@ -0,0 +1,79 @@
+export const TEXT_STYLES = {
+  //Nav M 10
+  NavM10: {
+    fontSize: 10,
+    fontWeight: 500,
+    letterSpacing: -0.11,
+    fontFamily: 'Pretendard',
+  },
+  //Caption R 12
+  CapR12: {
+    fontSize: 12,
+    fontWeight: 400,
+    letterSpacing: -0.132,
+    fontFamily: 'Pretendard',
+  },
+  //Caption M 12
+  CapM12: {
+    fontSize: 12,
+    fontWeight: 500,
+    letterSpacing: -0.132,
+    fontFamily: 'Pretendard',
+  },
+  //Caption R 14
+  CapR14: {
+    fontSize: 14,
+    fontWeight: 400,
+    letterSpacing: -0.154,
+    fontFamily: 'Pretendard',
+  },
+  //Caption M 14
+  CapM14: {
+    fontSize: 14,
+    fontWeight: 500,
+    letterSpacing: -0.154,
+    fontFamily: 'Pretendard',
+  },
+  //Body R 16
+  BodyR16: {
+    fontSize: 16,
+    fontWeight: 400,
+    letterSpacing: -0.176,
+    fontFamily: 'Pretendard',
+  },
+  //Body M 16
+  BodyM16: {
+    fontSize: 16,
+    fontWeight: 500,
+    letterSpacing: -0.176,
+    fontFamily: 'Pretendard',
+  },
+  //Head M 20
+  HeadM20: {
+    fontSize: 14,
+    fontWeight: 400,
+    letterSpacing: -0.154,
+    fontFamily: 'Pretendard',
+  },
+  //Head SM 20
+  HeadSM20: {
+    fontSize: 20,
+    fontWeight: 600,
+    letterSpacing: -0.22,
+    fontFamily: 'Pretendard',
+  },
+  //Button M 18
+  BtnM18: {
+    fontSize: 18,
+    fontWeight: 500,
+    letterSpacing: -0.198,
+    fontFamily: 'Pretendard',
+  },
+  //Button SB 18
+  BtnSB18: {
+    fontSize: 18,
+    fontWeight: 600,
+    letterSpacing: -0.198,
+    fontFamily: 'Pretendard',
+  },
+};