[FE] refactor: categories, writings 분리 (#236)

* refactor: `categories`, 'writings' 분리

* refactor: `categories` 데이터가 없을 때 카테고리 헤더는 보이게 수정

* refactor: `useCategoryWritings` -> `useWritings`

* feat: `CategoryItem` 구현

* refactor: CategorySection 관심사 분리

* chore: isValidCategoryName 파일 경로 수정

* chore: merge

frontend/src/components/Category/Header/Header.tsx

@@ -0,0 +1,89 @@
+import { KeyboardEventHandler } from 'react';
+import { styled } from 'styled-components';
+import useCategoryInput from '../useCategoryInput';
+import { useCategoryMutation } from '../useCategoryMutation';
+import { isValidCategoryName } from '../isValidCategoryName';
+import Input from 'components/@common/Input/Input';
+import { PlusCircleIcon } from 'assets/icons';
+
+const Header = () => {
+  const {
+    inputRef,
+    escapeInput: escapeAddCategory,
+    isInputOpen,
+    openInput,
+    resetInput,
+    isError,
+    setIsError,
+  } = useCategoryInput('');
+  const { addCategory } = useCategoryMutation();
+
+  const requestAddCategory: KeyboardEventHandler<HTMLInputElement> = async (e) => {
+    if (e.key !== 'Enter') return;
+
+    const categoryName = e.currentTarget.value.trim();
+
+    if (!isValidCategoryName(categoryName)) {
+      setIsError(true);
+      return;
+    }
+
+    resetInput();
+    addCategory({ categoryName: categoryName });
+  };
+
+  return (
+    <S.Header>
+      <S.Title>카테고리</S.Title>
+      {isInputOpen ? (
+        <Input
+          type='text'
+          variant='underlined'
+          size='small'
+          placeholder='Add category ...'
+          ref={inputRef}
+          isError={isError}
+          onBlur={resetInput}
+          onKeyDown={escapeAddCategory}
+          onKeyUp={requestAddCategory}
+        />
+      ) : (
+        <S.Button onClick={openInput} aria-label='카테고리 추가 입력 창 열기'>
+          <PlusCircleIcon width={12} height={12} />
+        </S.Button>
+      )}
+    </S.Header>
+  );
+};
+
+export default Header;
+
+const S = {
+  Header: styled.header`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 2.8rem;
+    font-size: 1.2rem;
+    font-weight: 400;
+    padding-right: 0.8rem;
+  `,
+
+  Title: styled.h1`
+    color: ${({ theme }) => theme.color.gray8};
+    cursor: default;
+  `,
+
+  Button: styled.button`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2.4rem;
+    border-radius: 8px;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray5};
+    }
+  `,
+};

frontend/src/components/Category/Item/Item.tsx

@@ -0,0 +1,34 @@
+import Accordion from 'components/@common/Accordion/Accordion';
+import { useState } from 'react';
+import Category from '../Category/Category';
+import WritingList from '../WritingList/WritingList';
+
+type Props = {
+  categoryId: number;
+  categoryName: string;
+  isDefaultCategory: boolean;
+};
+
+const Item = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Accordion.Item key={categoryId}>
+      <Accordion.Title
+        onIconClick={() => setIsOpen((prev) => !prev)}
+        aria-label={`${categoryName} 카테고리 왼쪽 사이드바에서 열기`}
+      >
+        <Category
+          categoryId={categoryId}
+          categoryName={categoryName}
+          isDefaultCategory={isDefaultCategory}
+        />
+      </Accordion.Title>
+      <Accordion.Panel>
+        <WritingList categoryId={categoryId} isOpen={isOpen} />
+      </Accordion.Panel>
+    </Accordion.Item>
+  );
+};
+
+export default Item;

frontend/src/components/Category/List/List.tsx

@@ -0,0 +1,28 @@
+import Accordion from 'components/@common/Accordion/Accordion';
+import { useCategories } from './useCategories';
+import Item from '../Item/Item';
+
+const List = () => {
+  const { categories } = useCategories();
+
+  return (
+    <>
+      {categories ? (
+        <Accordion>
+          {categories.map((category, index) => {
+            return (
+              <Item
+                key={category.id}
+                categoryId={category.id}
+                categoryName={category.categoryName}
+                isDefaultCategory={Boolean(index === 0)}
+              />
+            );
+          })}
+        </Accordion>
+      ) : null}
+    </>
+  );
+};
+
+export default List;

frontend/src/components/Category/List/useCategories.ts

@@ -0,0 +1,8 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCategories } from 'apis/category';
+
+export const useCategories = () => {
+  const { data } = useQuery(['categories'], getCategories);
+
+  return { categories: data ? data.categories : null };
+};

frontend/src/components/Category/CategorySection/CategorySection.stories.tsx → frontend/src/components/Category/Section/Section.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import CategorySection from './CategorySection';
+import Section from './Section';
 
-const meta: Meta<typeof CategorySection> = {
-  title: 'CategorySection',
-  component: CategorySection,
+const meta: Meta<typeof Section> = {
+  title: 'Section',
+  component: Section,
 };
 
 export default meta;