[Feature/BAR-150] 참고하는 메인 필터, 서브 필터 UI 개발 (#56)

* feat: 아이콘 반영

* feat: button이 호버되었을 때 svg의 fill 활성화 global 설정

* feat: Button 컴포넌트 확장

* feat: 아이콘의 기본 색상 props로 전달

* feat: 참고하는 탭 작성

* feat: 기본 모델 작성

* feat: FilterHeader 작성

* feat: FilterButton 작성

* feat: 버튼 호버시 아이콘의 색상 변경

* fix: pointerEvents 위치 변경

* refactor: api 하위 폴더 index 파일로 변경

* refactor: query hook 형식 변경

* [Feature/BAR-153] 폴더 만들기 기능 추가 (#57)

* feat: 필요 api 작성

* feat: 에러 아이콘 추가

* feat: 불필요 모달 타입 제거

* feat: button, dialog 컴포넌트 확장

* fix: dialog z-index 수정

* feat: 새폴더만들기 모달 작성

* feat: dialog 연동

* feat: Dropdown 컴포넌트 반영

* feat: 템플릿에 대한 api 연동

* feat: 리뷰 반영

* feat: 템플릿 저장 기능 추가

* feat: mutate 처리 추가

* feat: 수정 사항 반영

pages/profile/index.tsx

@@ -73,7 +73,7 @@ const ProfilePage = () => {
               style={{ position: 'relative' }}
               onBlur={() => setIsHover(false)}
             >
-              <img
+              <Image
                 src={profileImg}
                 alt="업로드 된 프로필 이미지"
                 width={96}

pages/redirect/[authType]/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-import { getToken } from '@api/auth/auth';
+import { getToken } from '@api/auth';
 import { type OAuthType } from '@api/auth/types';
 import { ROUTES } from '@constants/routes';
 import { saveToken } from '@utils/token';

src/api/http.ts

@@ -5,7 +5,7 @@ import Cookies from 'js-cookie';
 import { ROUTES } from '@constants/routes';
 import { saveToken } from '@utils/token';
 
-import { getRenewToken } from './auth/auth';
+import { getRenewToken } from './auth';
 
 const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_SERVER_URL,

src/api/memoFolder/index.ts

@@ -0,0 +1,8 @@
+import { http } from '@api/http';
+
+import { type Folder } from './types';
+
+export const getMemoFolders = () => http.get<Folder[]>('/memo-folders');
+
+export const postMemoFolders = (folderName: string) =>
+  http.post('/memo-folders', { folderName });

src/api/memoFolder/types/index.ts

@@ -0,0 +1,4 @@
+export interface Folder {
+  id: number;
+  name: string;
+}

src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 import clsx from 'clsx';
 
@@ -12,14 +12,14 @@ const Button = ({
   className,
   size,
   state,
-  onClick,
   type = 'button',
+  ...props
 }: ButtonProps) => {
   return (
     <button
+      {...props}
       className={clsx(styles.button({ state, size }), className)}
       type={type}
-      onClick={onClick}
     >
       {children}
     </button>

src/components/Dropdown/components/DropdownItem.tsx

@@ -16,8 +16,8 @@ const DropdownItem = ({
   const { size } = useDropdownContext();
 
   return (
-    <li>
-      <Button {...props} className={clsx(styles.menuItem({ size }), className)}>
+    <li className={className}>
+      <Button {...props} className={clsx(styles.menuItem({ size }))}>
         {children}
       </Button>
     </li>

src/components/Icon/index.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type CSSProperties } from '@vanilla-extract/css';
 
 import { iconFactory, type Icons } from '../../constants/icon';
 
@@ -12,6 +13,7 @@ interface IconProps {
   height?: number;
   postfix?: ReactNode;
   onHover?: VoidFunction;
+  style?: CSSProperties;
 }
 
 const Icon = ({
@@ -24,6 +26,7 @@ const Icon = ({
   height = 24,
   postfix,
   onHover,
+  style,
 }: IconProps) => {
   const SvgIcon = iconFactory[icon];
   if (!wrapperClassName && !postfix)
@@ -33,6 +36,7 @@ const Icon = ({
         color={color}
         width={width}
         height={height}
+        style={style}
       />
     );
 

src/components/Layout/MainPageTab.tsx

@@ -40,7 +40,7 @@ const MainPageTab = ({
         </Tabs.List>
       </div>
 
-      <section>
+      <section className={styles.tabWrapper}>
         <Tabs.Content value="끄적이는">{write}</Tabs.Content>
         <Tabs.Content value="참고하는">{refer}</Tabs.Content>
       </section>

src/components/Layout/components/ProfileButton.tsx

@@ -36,11 +36,17 @@ const ProfileButton = () => {
           <Icon icon="profileDialog" width={40} height={40} />
           <span className={styles.profileName}>{data?.nickname}님</span>
         </Dropdown.Title>
-        <Dropdown.Item onClick={() => {}}>
+        <Dropdown.Item
+          onClick={() => router.push('/profile')}
+          className={styles.profileButton}
+        >
           <Icon icon="setting" width={20} height={20} />
           <span className={styles.buttonText}>계정 설정</span>
         </Dropdown.Item>
-        <Dropdown.Item onClick={handleLogoutClick}>
+        <Dropdown.Item
+          onClick={handleLogoutClick}
+          className={styles.profileButton}
+        >
           <Icon icon="logout" width={20} height={20} />
           <span className={styles.buttonText}>로그아웃</span>
         </Dropdown.Item>