템플릿 CRUD 카테고리, 태그 추가

frontend/.gitignore

@@ -4,6 +4,4 @@ node_modules
 
 dist
 
-.env
-.env.development
-.env.production
+.env*

frontend/src/api/category.ts

@@ -0,0 +1,18 @@
+import { CategoryList, CategoryRequest } from '@/types/category';
+import { customFetch } from './customFetch';
+
+const API_URL = process.env.REACT_APP_API_URL;
+
+export const CATEGORY_API_URL = `${API_URL}/categories`;
+
+export const getCategoryList = async (): Promise<CategoryList> =>
+  await customFetch({
+    url: `${CATEGORY_API_URL}`,
+  });
+
+export const postCategory = async (newCategory: CategoryRequest) =>
+  await customFetch({
+    method: 'POST',
+    url: `${CATEGORY_API_URL}`,
+    body: JSON.stringify(newCategory),
+  });

frontend/src/api/index.ts

@@ -1,3 +1,4 @@
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export { TEMPLATE_API_URL, getTemplateList, getTemplate, postTemplate } from './templates';
+export { CATEGORY_API_URL, getCategoryList, postCategory } from './category';

frontend/src/api/queryKeys.ts

@@ -1,6 +1,7 @@
 export const QUERY_KEY = {
   TEMPLATE: 'template',
   TEMPLATE_LIST: 'templateList',
+  CATEGORY: 'category',
   LOGIN_STATE: 'loginState',
   CHECK_EMAIL: 'checkEmail',
   CHECK_USERNAME: 'userName',

frontend/src/api/templates.ts

@@ -15,13 +15,12 @@ export const getTemplate = async (id: number): Promise<Template> =>
     url: `${TEMPLATE_API_URL}/${id}`,
   });
 
-export const postTemplate = async (newTemplate: TemplateUploadRequest): Promise<void> => {
+export const postTemplate = async (newTemplate: TemplateUploadRequest) =>
   await customFetch({
     method: 'POST',
     url: `${TEMPLATE_API_URL}`,
     body: JSON.stringify(newTemplate),
   });
-};
 
 export const editTemplate = async ({ id, template }: { id: number; template: TemplateEditRequest }): Promise<void> => {
   await customFetch({

frontend/src/assets/images/index.ts

@@ -4,4 +4,6 @@ export { default as pencilIcon } from './pencil.png';
 export { default as searchIcon } from './search.png';
 export { default as trashcanIcon } from './trashcan.png';
 export { default as userMenuIcon } from './userMenu_38x38.png';
+export { default as chevron } from './chevron.png';
+export { default as xCircle } from './x_circle.png';
 export { default as passwordEyeIcon } from './passwordEye.png';

frontend/src/components/Button/Button.style.ts

@@ -27,7 +27,7 @@ const sizes = {
   small: css`
     gap: 0.25rem;
     height: 1.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
     font-size: ${theme.font.size.text.xsmall};
   `,
   medium: css`

frontend/src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useDropdown } from '@/hooks/utils/useDropdown';
+import Dropdown from './Dropdown';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Dropdown',
+  component: Dropdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  args: {
+    currentValue: '',
+  },
+
+  render: () => {
+    const options = ['보기1', '보기2', '보기3'];
+    const { isOpen, toggleDropdown, currentValue, handleCurrentValue, dropdownRef } =
+      useDropdown<string>('선택해주세요');
+
+    const props = {
+      isOpen,
+      dropdownRef,
+      toggleDropdown,
+      options,
+      getOptionLabel: (string: string) => string,
+      currentValue,
+      handleCurrentValue,
+    };
+
+    return <Dropdown {...props} />;
+  },
+};

frontend/src/components/Dropdown/Dropdown.style.ts

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+export const DropdownContainer = styled.div`
+  font-size: '0.875rem';
+`;
+
+export const Wrapper = styled.div`
+  width: 10rem;
+  background-color: white;
+  border: 1px solid #788496;
+  border-radius: 8px;
+`;
+
+export const SelectedButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  padding: 0.75rem;
+
+  border-radius: 8px;
+`;
+
+export const OptionList = styled.ul`
+  position: absolute;
+  z-index: 1;
+
+  width: 10rem;
+  margin: 2px 0 0 0;
+
+  background-color: white;
+  border: 1px solid #788496;
+  border-radius: 8px;
+`;
+
+export const Option = styled.li`
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 7px;
+  &:hover {
+    color: ${({ theme }) => theme.color.light.white};
+    background-color: ${({ theme }) => theme.color.light.primary_500};
+  }
+`;

frontend/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,75 @@
+import { chevron } from '@/assets/images';
+import * as S from './Dropdown.style';
+
+interface Props<T> {
+  dropdownRef: React.MutableRefObject<HTMLDivElement | null>;
+  isOpen: boolean;
+  toggleDropdown: () => void;
+  options: T[];
+  getOptionLabel: (option: T) => string;
+  currentValue: T;
+  handleCurrentValue: (value: T) => void;
+  replaceChildrenWhenIsOpen?: React.ReactNode;
+}
+
+const Dropdown = <T,>({
+  dropdownRef,
+  isOpen,
+  toggleDropdown,
+  options,
+  getOptionLabel,
+  currentValue,
+  handleCurrentValue,
+  replaceChildrenWhenIsOpen,
+}: Props<T>) => (
+  <S.DropdownContainer ref={dropdownRef}>
+    <S.Wrapper>
+      {isOpen ? (
+        replaceChildrenWhenIsOpen || (
+          <SelectedButton
+            isOpen={isOpen}
+            toggleDropdown={toggleDropdown}
+            getOptionLabel={getOptionLabel}
+            currentValue={currentValue}
+          />
+        )
+      ) : (
+        <SelectedButton
+          isOpen={isOpen}
+          toggleDropdown={toggleDropdown}
+          getOptionLabel={getOptionLabel}
+          currentValue={currentValue}
+        />
+      )}
+    </S.Wrapper>
+    {isOpen && (
+      <S.OptionList>
+        {options?.map((option, idx) => (
+          <S.Option key={idx} onClick={() => handleCurrentValue(option)}>
+            {getOptionLabel(option)}
+          </S.Option>
+        ))}
+      </S.OptionList>
+    )}
+  </S.DropdownContainer>
+);
+
+export default Dropdown;
+
+type SelectedButtonProps<T> = Pick<Props<T>, 'toggleDropdown' | 'getOptionLabel' | 'currentValue' | 'isOpen'>;
+
+const SelectedButton = <T,>({ toggleDropdown, getOptionLabel, currentValue, isOpen }: SelectedButtonProps<T>) => (
+  <S.SelectedButton onClick={toggleDropdown}>
+    {getOptionLabel(currentValue)}
+    <img
+      src={chevron}
+      width={24}
+      height={24}
+      alt=''
+      css={{
+        transition: 'transform 0.3s ease',
+        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+      }}
+    />
+  </S.SelectedButton>
+);

frontend/src/components/Header/Header.tsx

@@ -6,11 +6,11 @@ import { useCheckLoginState } from '@/hooks/authentication';
 import { theme } from '../../style/theme';
 import * as S from './Header.style';
 
-const Header = () => {
+const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) => {
   useCheckLoginState();
 
   return (
-    <S.HeaderContainer>
+    <S.HeaderContainer ref={headerRef}>
       <S.HeaderContentContainer>
         <Logo />
         <Flex align='center' gap='2rem' flex='1'>

frontend/src/components/Input/Input.style.ts

@@ -35,6 +35,17 @@ const sizes = {
     font-size: 1rem;
     line-height: 100%;
 
+    border-radius: 12px;
+  `,
+  xlarge: css`
+    gap: 0.75rem;
+
+    height: 4rem;
+    padding: 1rem;
+
+    font-size: 2rem;
+    line-height: 100%;
+
     border-radius: 12px;
   `,
 };
@@ -101,9 +112,6 @@ export const TextField = styled.input<TextFieldProps>`
 
   &:focus {
     outline: none;
-    &::placeholder {
-      color: transparent;
-    }
   }
 
   &:disabled {

frontend/src/components/Input/Input.tsx

@@ -11,7 +11,7 @@ import {
 import * as S from './Input.style';
 
 export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
   variant?: 'filled' | 'outlined' | 'text';
   isValid?: boolean;
 }

frontend/src/components/Layout/Layout.tsx

@@ -1,15 +1,28 @@
+import { useEffect, useRef } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { Header } from '@/components';
+import { useHeaderHeight } from '@/hooks/utils/useHeaderHeight';
 import * as S from './Layout.style';
 
-const Layout = () => (
-  <S.LayoutContainer>
-    <Header />
-    <S.Wrapper>
-      <Outlet />
-    </S.Wrapper>
-  </S.LayoutContainer>
-);
+const Layout = () => {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const { setHeaderHeight } = useHeaderHeight();
+
+  useEffect(() => {
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight);
+    }
+  }, [setHeaderHeight]);
+
+  return (
+    <S.LayoutContainer>
+      <Header headerRef={headerRef} />
+      <S.Wrapper>
+        <Outlet />
+      </S.Wrapper>
+    </S.LayoutContainer>
+  );
+};
 
 export default Layout;