Merge pull request #52 from SOPT-all/feat/work-keywords/#45

[feat/#45] 작품 키워드 칩 컴포넌트 구현

Author: qowjdals23

src/pages/work-keywords/work-keywords.css.ts

@@ -0,0 +1,37 @@
+import { style } from "@vanilla-extract/css";
+import { components } from "@/shared/styles/layer.css";
+
+import { color } from "@/shared/styles/tokens/color.css";
+import { typographyVars } from "@/shared/styles/typography.css";
+
+// 레이아웃
+export const keywordsRoot = style({
+  "@layer": {
+    [components]: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "0.8rem",
+    },
+  },
+});
+
+// 칩 하나
+export const keywordsChip = style({
+  "@layer": {
+    [components]: {
+      ...typographyVars.body3,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "3.6rem",
+      padding: "0.8rem 1.2rem",
+      borderRadius: "1.8rem",
+      border: `0.1rem solid ${color.gray[200]}`,
+      backgroundColor: color.white[100],
+      color: color.gray[100],
+
+      boxSizing: "border-box",
+      userSelect: "none",
+    },
+  },
+});

src/pages/work-keywords/work-keywords.tsx

@@ -0,0 +1,22 @@
+import type { JSX } from "react";
+import * as styles from "./work-keywords.css";
+
+export interface WorkKeyword {
+  id: string;
+  label: string;
+}
+
+export interface WorkKeywordsProps {
+  keywords: WorkKeyword[];
+}
+export function WorkKeywords({ keywords }: WorkKeywordsProps): JSX.Element {
+  return (
+    <ul className={styles.keywordsRoot}>
+      {keywords.map(({ id, label }) => (
+        <li key={id} className={styles.keywordsChip} title={label}>
+          {label}
+        </li>
+      ))}
+    </ul>
+  );
+}