Merge pull request #96 from sopt-makers/feat/#95-tag

feat(Tag): Tag 컴포넌트 개발

apps/docs/src/App.tsx

@@ -1,49 +1,81 @@
-import { Test } from '@sopt-makers/ui';
-import './App.css';
-import { useState, ChangeEvent } from 'react';
-import TextField from '../../../packages/ui/Input/TextField';
-import TextArea from '../../../packages/ui/Input/TextArea';
-import SearchField from '../../../packages/ui/Input/SearchField';
+import "./App.css";
+
+import { ChangeEvent, useState } from "react";
+
+import SearchField from "../../../packages/ui/Input/SearchField";
+import { Test } from "@sopt-makers/ui";
+import TextArea from "../../../packages/ui/Input/TextArea";
+import TextField from "../../../packages/ui/Input/TextField";
 
 function App() {
-  const [input, setInput] = useState('');
-  const [textarea, setTextarea] = useState('');
-  const [search, setSearch] = useState('');
+  const [input, setInput] = useState("");
+  const [textarea, setTextarea] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
-  }
+  };
 
   const inputValidation = (input: string) => {
     if (input && input.length > 10) return true;
     return false;
-  }
+  };
 
   const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setTextarea(e.target.value);
-  }
+  };
 
   const textareaValidation = (input: string) => {
     if (input && input.length > 10) return true;
     return false;
-  }
+  };
 
-  const handleTextareaSubmit = () => { console.log(textarea) }
+  const handleTextareaSubmit = () => {
+    console.log(textarea);
+  };
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-  }
+  };
 
-  const handleSearchSubmit = () => { console.log(search) }
+  const handleSearchSubmit = () => {
+    console.log(search);
+  };
 
-  const handleSearchReset = () => { setSearch('') }
+  const handleSearchReset = () => {
+    setSearch("");
+  };
 
   return (
     <>
       <Test text="Test Component" size="big" color="blue" />
-      <TextField<string> placeholder="Placeholder..." required labelText="Label" descriptionText="description" validationFn={inputValidation} value={input} onChange={handleInputChange} />
-      <TextArea placeholder="Placeholder..." required labelText="Label" descriptionText="description" validationFn={textareaValidation} value={textarea} onChange={handleTextareaChange} onSubmit={handleTextareaSubmit} maxLength={300} />
-      <SearchField placeholder="Placeholder..." value={search} onChange={handleSearchChange} onSubmit={handleSearchSubmit} onReset={handleSearchReset} />
+      <TextField<string>
+        placeholder="Placeholder..."
+        required
+        labelText="Label"
+        descriptionText="description"
+        validationFn={inputValidation}
+        value={input}
+        onChange={handleInputChange}
+      />
+      <TextArea
+        placeholder="Placeholder..."
+        required
+        labelText="Label"
+        descriptionText="description"
+        validationFn={textareaValidation}
+        value={textarea}
+        onChange={handleTextareaChange}
+        onSubmit={handleTextareaSubmit}
+        maxLength={300}
+      />
+      <SearchField
+        placeholder="Placeholder..."
+        value={search}
+        onChange={handleSearchChange}
+        onSubmit={handleSearchSubmit}
+        onReset={handleSearchReset}
+      />
     </>
   );
 }

apps/docs/src/index.css

@@ -7,36 +7,41 @@
 }
 
 body {
-  background-color: rgb(0, 0, 0);
+  background-color: #1e1e1e;
 }
 
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Light.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Light.woff2")
+    format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Regular.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Regular.woff2")
+    format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Medium.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Medium.woff2")
+    format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-SemiBold.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-SemiBold.woff2")
+    format("woff2");
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Bold.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Bold.woff2")
+    format("woff2");
   font-weight: 700;
   font-style: normal;
 }

apps/docs/src/stories/Tag.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { type HTMLAttributes } from "react";
+import { Tag } from "@sopt-makers/ui";
+
+interface TagOwnProps extends HTMLAttributes<HTMLSpanElement> {
+  children?: string;
+  size?: "sm" | "md" | "lg";
+  shape?: "rect" | "pill";
+  variant?: "default" | "primary" | "secondary";
+  type?: "solid" | "line";
+}
+
+type TagStoryProps = TagOwnProps & { children: string };
+
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+} as Meta<TagStoryProps>;
+
+// 기본 태그 스토리
+export const Default: StoryObj<TagStoryProps> = {
+  args: {
+    children: "Default Tag",
+    size: "sm",
+    shape: "rect",
+    variant: "default",
+    type: "solid",
+  },
+};
+
+// 커스텀 버튼 스토리
+export const Another: StoryObj<TagStoryProps> = {
+  args: {
+    children: "Another Tag",
+    size: "md",
+    shape: "pill",
+    variant: "primary",
+    type: "line",
+  },
+};

packages/ui/Tag/Tag.tsx

@@ -0,0 +1,27 @@
+import * as S from "./style.css";
+import createTagStyle from "./utils";
+
+interface TagProps {
+  children?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+  shape?: "rect" | "pill";
+  variant?: "default" | "primary" | "secondary";
+  type?: "solid" | "line";
+}
+
+function Tag({
+  children,
+  size = "sm",
+  shape = "rect",
+  variant = "default",
+  type = "solid",
+}: TagProps) {
+  const style = createTagStyle(type, variant, shape, size);
+  return (
+    <div className={`${S.root} ${style}`}>
+      {children}
+    </div>
+  );
+}
+
+export default Tag;

packages/ui/Tag/constants.ts

@@ -0,0 +1,48 @@
+import theme from "../theme.css";
+import type {
+  TagBgColorTheme,
+  TagShapeTheme,
+  TagSizeTheme,
+  TagVariantTheme,
+} from "./types";
+
+export const bgColors: Record<TagBgColorTheme, string> = {
+  "default-solid": theme.colors.gray700,
+  "primary-solid": theme.colors.orangeAlpha200,
+  "secondary-solid": theme.colors.blueAlpha200,
+  "default-line": "unset",
+  "primary-line": "unset",
+  "secondary-line": "unset",
+};
+
+export const borders: Record<TagBgColorTheme, string> = {
+  "default-solid": "none",
+  "primary-solid": "none",
+  "secondary-solid": "none",
+  "default-line": `0 0 0 1px ${theme.colors.gray300} inset`,
+  "primary-line": `0 0 0 1px ${theme.colors.orange700} inset`,
+  "secondary-line": `0 0 0 1px ${theme.colors.blue700} inset`,
+};
+
+export const textColors: Record<TagVariantTheme, string> = {
+  default: theme.colors.gray10,
+  primary: theme.colors.secondary,
+  secondary: theme.colors.success,
+};
+
+export const borderRadiuses: Record<TagShapeTheme, string> = {
+  rect: "4px",
+  pill: "100px",
+};
+
+export const paddings: Record<TagSizeTheme, string> = {
+  sm: "3px 6px",
+  md: "3px 7px",
+  lg: "3px 8px",
+};
+
+export const fonts = {
+  sm: theme.fontsObject.LABEL_5_11_SB,
+  md: theme.fontsObject.LABEL_3_14_SB,
+  lg: theme.fontsObject.LABEL_2_16_SB,
+};

packages/ui/Tag/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Tag";

packages/ui/Tag/style.css.ts

@@ -0,0 +1,31 @@
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+import { style } from "@vanilla-extract/css";
+import {
+  bgColors,
+  borderRadiuses,
+  borders,
+  fonts,
+  paddings,
+  textColors,
+} from "./constants";
+
+export const root = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "fit-content",
+  height: "fit-content",
+});
+
+const sprinkleProperties = defineProperties({
+  properties: {
+    backgroundColor: bgColors,
+    boxShadow: borders,
+    color: textColors,
+    borderRadius: borderRadiuses,
+    padding: paddings,
+    fontStyle: fonts,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);

packages/ui/Tag/types.ts

@@ -0,0 +1,9 @@
+export type TagSizeTheme = "sm" | "md" | "lg";
+
+export type TagShapeTheme = "rect" | "pill";
+
+export type TagVariantTheme = "default" | "primary" | "secondary";
+
+export type TagTypeTheme = "solid" | "line";
+
+export type TagBgColorTheme = `${TagVariantTheme}-${TagTypeTheme}`;

packages/ui/Tag/utils.ts

@@ -0,0 +1,24 @@
+import type {
+  TagShapeTheme,
+  TagSizeTheme,
+  TagTypeTheme,
+  TagVariantTheme,
+} from "./types";
+import { sprinkles } from "./style.css";
+
+function createTagStyle(
+  typeTheme: TagTypeTheme,
+  variantTheme: TagVariantTheme,
+  shapeTheme: TagShapeTheme,
+  sizeTheme: TagSizeTheme
+) {
+  return sprinkles({
+    backgroundColor: `${variantTheme}-${typeTheme}`,
+    boxShadow: `${variantTheme}-${typeTheme}`,
+    color: variantTheme,
+    borderRadius: shapeTheme,
+    padding: sizeTheme,
+    fontStyle: sizeTheme,
+  });
+}
+export default createTagStyle;

packages/ui/index.ts

@@ -8,6 +8,7 @@ export type { DialogOptionType } from './Dialog';
 export { ToastProvider, useToast, Toast } from './Toast';
 export type { ToastOptionType } from './Toast';
 export { TextField, TextArea, SearchField } from './Input';
+export { default as Tag } from "./Tag";
 export { default as Chip } from './Chip';
 
 // test component