feat(ui): Category 컴포넌트 제작

src/assets/icons/SmallRightChevron.tsx

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+
+const SmallRightChevron = ({ stroke = "#E4E4E5", onClick }: { stroke?: string; onClick?: () => void }) => {
+  return (
+    <Wrapper>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
+        <g clip-path="url(#clip0_357_2385)">
+          <path d="M6 12L10 8L6 4" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+          <clipPath id="clip0_357_2385">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  cursor: pointer;
+`;
+
+export default SmallRightChevron;

src/components/atoms/Category/Category.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Category } from ".";
+import { Tag } from "../Tag";
+
+const meta = {
+  title: "Atom/Category",
+  component: Category,
+  tags: ["autodocs"],
+} as Meta<typeof Category>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const category: Story = {
+  args: {
+    categoryName: "카테고리명",
+    children: [
+      <Tag variant={"main"} color={"purple"} children={"여름쿨톤"} />,
+      <Tag variant={"main"} color={"pink"} children={"글로시 립"} />,
+      <Tag variant={"dark"} color={"purple"} children={"페리페라"} />,
+      <Tag variant={"dark"} color={"pink"} children={"페리페라"} />,
+      <Tag variant={"main"} color={"purple"} children={"페리페라"} />,
+      <Tag variant={"dark"} color={"purple"} children={"페리페라"} />,
+    ],
+  },
+};

src/components/atoms/Category/index.tsx

@@ -0,0 +1,71 @@
+import SmallRightChevron from "@assets/icons/SmallRightChevron";
+import styled from "@emotion/styled";
+import { theme } from "@styles/theme";
+
+import { Button } from "../Button";
+import { Text } from "../Text";
+
+type CategoryPropsType = {
+  categoryName: string;
+  children: React.ReactNode[];
+  onPlusButtonClick?: () => void;
+  onShowMorePreferencesClick?: () => void;
+};
+
+export const Category = ({
+  categoryName,
+  children,
+  onPlusButtonClick,
+  onShowMorePreferencesClick,
+}: CategoryPropsType) => {
+  return (
+    <Wrapper>
+      <Heading>
+        <Text children={categoryName} typo={"Headline_16"} color={"white"} as={"div"} />
+        <Button variant={"circle"} children={"+"} onClick={onPlusButtonClick} />
+      </Heading>
+      <TagWrapper>
+        {children.map((child, index) => (
+          <TagItem key={index}>{child}</TagItem>
+        ))}
+      </TagWrapper>
+      <MorePreferencesContainer>
+        <Text children={"취향 더보기"} typo={"Caption_12R"} color={"gray_300"} as={"div"} />
+        <SmallRightChevron stroke={theme.palette.gray_300} onClick={onShowMorePreferencesClick} />
+      </MorePreferencesContainer>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 328px;
+  border-radius: 16px;
+  padding: 16px 18px;
+  background-color: ${theme.palette.gray_800};
+`;
+
+const Heading = styled.div`
+  width: 100%;
+  height: 24px;
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const TagWrapper = styled.div`
+  width: 100%;
+  height: 76px;
+  margin-bottom: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+
+const TagItem = styled.div``;
+
+const MorePreferencesContainer = styled.div`
+  width: 100%;
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+`;

src/styles/theme/typo.ts

@@ -55,6 +55,13 @@ export const typo = {
         font-weight: 500;
         letter-spacing: -0.011em;
     `,
+    Caption_12R: css`
+        font-family: 'SpoqaHanSansNeo';
+        font-size: ${calcRem(12)};
+        line-height: 20px;
+        font-weight: 400;
+        letter-spacing: -1.1%;
+    `,
     Caption_10: css`
         font-family: 'SpoqaHanSansNeo';
         font-size: ${calcRem(10)};