✨ feat: 라우트 정리 및 lint 에러 정리 #65

.eslintrc.json

@@ -8,21 +8,7 @@
     "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "rules": {
-    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { "argsIgnorePattern": "^_" }
-    ],
     "unused-imports/no-unused-imports": "error",
-    "unused-imports/no-unused-vars": [
-      "warn",
-      {
-        "vars": "all",
-        "varsIgnorePattern": "^_",
-        "args": "after-used",
-        "argsIgnorePattern": "^_"
-      }
-    ],
     "react-hooks/rules-of-hooks": "off",
     "react-hooks/exhaustive-deps": "off",
     "eol-last": ["error", "always"],
@@ -53,11 +39,29 @@
       "rules": {
         "simple-import-sort/imports": "warn",
         "simple-import-sort/exports": "warn",
-        "no-unused-vars": "warn",
-        "@typescript-eslint/no-unused-vars": "warn",
-        "tailwindcss/no-custom-classname": "warn",
+        "tailwindcss/no-custom-classname": [
+          "warn",
+          {
+            "whitelist": ["pagination_fraction"]
+          }
+        ],
         "tailwindcss/no-unnecessary-arbitrary-value": "off",
-        "tailwindcss/enforces-shorthand": "off"
+        "tailwindcss/enforces-shorthand": "off",
+
+        // ? https://velog.io/@sumi-0011/eslint%EC%9D%98-no-unused-vars-%EA%B7%9C%EC%B9%99%EA%B3%BC-typescript%EC%9D%98-interface-%EB%AC%B8%EB%B2%95-%EC%B6%A9%EB%8F%8C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          {
+            "args": "all",
+            "argsIgnorePattern": "^_",
+            "caughtErrors": "all",
+            "caughtErrorsIgnorePattern": "^_",
+            "destructuredArrayIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "ignoreRestSiblings": true
+          }
+        ]
       }
     }
   ],

auth.ts

@@ -8,6 +8,7 @@ import { SocialLoginRequest } from "@/apis/auth/authType";
 import { getMe } from "@/apis/user/me/me";
 import { env } from "@/env";
 import { decodeToken } from "@/lib/jwt";
+import type { UserMeResponse } from "@/apis/user/me/meType";
 
 export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
   providers: [
@@ -147,6 +148,15 @@ declare module "next-auth" {
     iat?: number;
     sub?: string;
   }
+
+  interface User {
+    userId: number;
+    nickname: string;
+    statusMessage: string;
+    profileImage: string;
+    isProfileRegistered: boolean;
+    userTypeId: number;
+  }
 }
 declare module "next-auth/jwt" {
   interface JWT {

src/apis/user/me/me.ts

@@ -4,6 +4,8 @@ import instance, { FiestaFetchOptions } from "@/apis/instance";
 import { FIESTA_ENDPOINTS } from "@/config";
 import { ProfileMeUpdateSchemaType } from "@/validations/ProfileUpdateMeSchema";
 
+import { UserMeResponse } from "./meType";
+
 export const getMe = async (options?: FiestaFetchOptions) => {
   const endpoint = FIESTA_ENDPOINTS.users.me;
   const { data } = await instance.get<UserMeResponse>(endpoint, {

src/apis/user/me/meType.ts

@@ -1,4 +1,4 @@
-type UserMeResponse = {
+export type UserMeResponse = {
   userId: number;
   email: string;
   nickname: string;

src/app/page.tsx → src/app/(route)/(home)/page.tsx

@@ -9,7 +9,7 @@ import {
   FestivalRecommend,
   FestivalThisWeek,
   TopReviews,
-} from "./(home)/_components";
+} from "./_components";
 
 export const metadata: Metadata = {
   title: {

src/app/auth/sign-in/page.tsx → src/app/(route)/auth/sign-in/page.tsx

@@ -29,7 +29,7 @@ const SignIn = () => {
           </h1>
           <Image
             priority
-            className="absolute -right-[20px] bottom-0"
+            className="absolute bottom-0 right-[-20px]"
             width={140}
             height={117}
             src="/images/romantist.png"
@@ -45,15 +45,15 @@ const SignIn = () => {
           />
           <Image
             priority
-            className="absolute -left-[50px] bottom-0 rotate-12"
+            className="absolute bottom-0 left-[-50px] rotate-12"
             width={176}
             height={163}
             src="/images/inspirer.png"
             alt="inspirer"
           />
           <Image
             priority
-            className="absolute -left-[50px] top-[70px] rotate-[24deg]"
+            className="absolute left-[-50px] top-[70px] rotate-[24deg]"
             width={153}
             height={150}
             src="/images/healer.png"

src/app/(home)/festivals/[festivalId]/_components/DetailFestivalTab/Review/_components/TotalReviews/TotalReviewListItem.tsx → src/app/(route)/festivals/[festivalId]/_components/DetailFestivalTab/Review/_components/TotalReviews/TotalReviewListItem.tsx

@@ -12,7 +12,7 @@ import { postReviewReport } from "@/apis/review/reviewReport/reviewReport";
 import { reviewsKeys } from "@/apis/review/reviews/reviewKeys";
 import { Review } from "@/apis/review/reviews/reviewsType";
 import { BasicChip } from "@/components/core/Chip";
-import { DropdownMenu, DropdownOption } from "@/components/core/Dropdown";
+import { DropdownMenu } from "@/components/core/Dropdown";
 import { ProgressCircle } from "@/components/core/Progress";
 import { FestivalRequstDialog } from "@/components/Dialog";
 import Ratings from "@/components/rating/Ratings";
@@ -32,7 +32,7 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
 
   const { mutate: deleteReviewMutate, isPending: isDeleting } = useMutation({
     mutationFn: async (reviewId: number) => await deleteReview(reviewId),
-    onSuccess: (data) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: reviewsKeys.all,
       }),
@@ -52,8 +52,7 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
   const handleDelete = (reviewId: number) => {
     deleteReviewMutate(reviewId);
   };
-
-  const myReviewOptions: Array<DropdownOption> = [
+  const myReviewOptions = [
     {
       label: "수정하기",
       onClick: () =>
@@ -67,7 +66,7 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
     },
   ];
 
-  const othersReviewOptions: Array<DropdownOption> = [
+  const othersReviewOptions = [
     {
       label: "신고하기",
       onClick: () => setIsOpenReportDialog(true),
@@ -78,7 +77,8 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
     return user?.userId === review.user.userId
       ? myReviewOptions
       : othersReviewOptions;
-  }, [review]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.userId, review.user.userId]);
 
   return (
     <div

src/app/(home)/festivals/[festivalId]/_components/DetailFestivalTab/index.tsx → src/app/(route)/festivals/[festivalId]/_components/DetailFestivalTab/index.tsx

@@ -39,13 +39,13 @@ const DetailFestivalTab: FC<Props> = ({ festivals, session }) => {
   };
 
   return (
-    <Tabs.Root className="TabsRoot " defaultValue={TabList[0].name}>
+    <Tabs.Root id="TabsRoot " defaultValue={TabList[0].name}>
       <Tabs.List
         id={"tab"}
         className="flex h-[47px] w-full"
         aria-label="Manage your account"
       >
-        {TabList.map(({ name }, index) => (
+        {TabList.map(({ name }) => (
           <Tabs.Trigger
             key={name}
             className="TabsTrigger w-full border-b-[1px] border-gray-scale-400 text-subtitle-semi text-gray-scale-400"

src/app/(home)/festivals/[festivalId]/review/[reviewId]/view.tsx → src/app/(route)/festivals/[festivalId]/review/[reviewId]/view.tsx

@@ -36,14 +36,14 @@ const ReviewEditView: FC<Props> = ({ keywords, reviewId, festivalId }) => {
   const queryClient = useQueryClient();
   const router = useRouter();
 
-  const { data: review, isLoading } = useQuery({
+  const { data: review } = useQuery({
     queryKey: reviewsKeys.detail(reviewId),
     queryFn: () => getReview(reviewId),
   });
 
   const { mutate: updateReviewMutate } = useMutation({
     mutationFn: (payload: UpdateReviewSchemaType) => updateReview(payload),
-    onSuccess: (data) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: reviewsKeys.all });
       queryClient.invalidateQueries({
         queryKey: topKeywordFestivalKeys.list({ festivalId }),
@@ -70,16 +70,16 @@ const ReviewEditView: FC<Props> = ({ keywords, reviewId, festivalId }) => {
     formState: { isSubmitting },
   } = methods;
 
-  const handleReviewImagesToFile = async (review: Review) => {
-    const files = await reviewEntityToFiles(review.images);
-    setValue("images", files);
-  };
-
   useEffect(() => {
+    const handleReviewImagesToFile = async (review: Review) => {
+      const files = await reviewEntityToFiles(review.images);
+      setValue("images", files);
+    };
+
     if (review) {
       handleReviewImagesToFile(review);
     }
-  }, [review]);
+  }, [review, setValue]);
 
   const onSubmit = async (data: UpdateReviewSchemaType) => {
     try {

src/app/(home)/festivals/new/_components/CreateFestivalFirstStep.tsx → src/app/(route)/festivals/new/_components/CreateFestivalFirstStep.tsx

@@ -30,7 +30,7 @@ const CreateFestivalFirstStep = () => {
       <Controller
         control={control}
         name="images"
-        render={({ field: { onChange, value }, formState: { errors } }) => (
+        render={({ field: { onChange, value } }) => (
           <ImageUploader
             label="대표 이미지"
             value={value}

src/app/mypage/_components/Bookmark/MypageBookmarkSkeleton.tsx → src/app/(route)/mypage/_components/Bookmark/MypageBookmarkSkeleton.tsx

@@ -6,7 +6,7 @@ const MypageBookmarkSkeleton = () => {
         {Array.from({ length: 6 }).map((_, idx) => (
           <div
             key={idx}
-            className="rounded-mg h-[196px] w-[200px] bg-gray-scale-200"
+            className="h-[196px] w-[200px] rounded-md bg-gray-scale-200"
           />
         ))}
       </div>

src/app/mypage/_components/MypageAvatar.tsx → src/app/(route)/mypage/_components/MypageAvatar.tsx

@@ -1,11 +1,11 @@
 import * as Avatar from "@radix-ui/react-avatar";
-import { User } from "next-auth";
-import React, { FC } from "react";
+import type { User } from "next-auth";
+import { FC } from "react";
 
 import { UserTypeImage } from "@/utils";
 
 interface Props {
-  user: (User & UserMeResponse) | null;
+  user: User | null;
 }
 
 const MypageAvatar: FC<Props> = ({ user }) => {
@@ -32,7 +32,7 @@ const MypageAvatar: FC<Props> = ({ user }) => {
           src={UserTypeImage[user?.userTypeId]}
           alt={user?.nickname ?? "피에스타"}
         />
-        <Avatar.Fallback className="AvatarFallback">
+        <Avatar.Fallback id="AvatarFallback">
           <Avatar.Image
             width={76}
             height={76}

src/app/mypage/_components/MypageTab.tsx → src/app/(route)/mypage/_components/MypageTab.tsx

@@ -38,7 +38,7 @@ const MypageTab: FC<Props> = ({ badges }) => {
   return (
     <Tabs.Root className="w-full" defaultValue={TabList[0].name}>
       <Tabs.List id={"tab"} className="mb-[30px] flex h-[47px] w-full">
-        {TabList.map(({ name }, index) => (
+        {TabList.map(({ name }) => (
           <Tabs.Trigger
             key={name}
             className="TabsTrigger w-full border-b-[1px] border-gray-scale-400 text-subtitle-semi text-gray-scale-400"

src/app/mypage/settings/_components/MypageSettingsTab.tsx → src/app/(route)/mypage/settings/_components/MypageSettingsTab.tsx

@@ -62,7 +62,7 @@ const MypageSettingsTab: FC<Props> = ({
         className="mb-[30px] flex h-[47px] w-full"
         aria-label="Manage your account"
       >
-        {TabList.map(({ name }, index) => (
+        {TabList.map(({ name }) => (
           <Tabs.Trigger
             key={name}
             className="TabsTrigger w-full border-b-[1px] border-gray-scale-400 text-subtitle-semi text-gray-scale-400"

src/app/onboarding/_components/onBoardingStep/index.tsx → src/app/(route)/onboarding/_components/onBoardingStep/index.tsx

@@ -53,6 +53,7 @@ const OnBoardingContainer: FC<Props> = ({
 
   useEffect(() => {
     trigger();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onSubmit = async (data: OnboardingModel) => {

src/components/Swiper/RecommendFestival/RecommendFestival.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import RecommendFestivalFallbackUI from "../../../app/(home)/_components/FestivalRecommend/RecommendFestivalFallbackUI";
+import RecommendFestivalFallbackUI from "../../../app/(route)/(home)/_components/FestivalRecommend/RecommendFestivalFallbackUI";
 import RecoomendFestivalList from "./RecommendFestival";
 
 const meta: Meta<typeof RecoomendFestivalList> = {
@@ -17,13 +17,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  render: (args) => (
+  render: (_args) => (
     <div className="h-[300px] w-[400px]">{/* <RecoomendFestivalList /> */}</div>
   ),
 };
 export const NoSession: Story = {
   args: {},
-  render: (args) => (
+  render: () => (
     <div className="h-[300px] w-[400px]">
       <RecommendFestivalFallbackUI />
     </div>

src/components/Swiper/RecommendFestival/RecommendFestival.tsx

@@ -10,7 +10,7 @@ import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import { RecommendFestivalResponse } from "@/apis/festivals/recommendFestival/recommendFestivalType";
-import RecommendFestivalHeader from "@/app/(home)/_components/FestivalRecommend/RecommendFestivalHeader";
+import RecommendFestivalHeader from "@/app/(route)/(home)/_components/FestivalRecommend/RecommendFestivalHeader";
 import { formatToKoreanDate } from "@/lib/dayjs";
 
 interface Props {

src/components/core/Button/BookingButton/BookingButton.stories.tsx

@@ -8,13 +8,7 @@ const meta: Meta<typeof BookingButton> = {
   component: BookingButton,
   parameters: {},
 
-  argTypes: {
-    label: {
-      control: {
-        type: "text",
-      },
-    },
-  },
+  argTypes: {},
 };
 
 export default meta;

src/components/core/Button/BookingButton/BookingButton.tsx

@@ -8,14 +8,13 @@ import BasicButton from "../BasicButton/BasicButton";
 import ScrabButton from "./ScrabButton";
 
 interface Props {
-  label?: string;
   className?: string;
   festival: DetailFestivalResponse;
 }
 
 const BookingButton: FC<Props> = ({
   className,
-  label = "예매하기",
+
   festival,
 }) => {
   const linkInfo = useMemo(() => {

src/components/core/Progress/ProgressBar/ProgressBar.tsx

@@ -15,7 +15,7 @@ const ProgressBar: FC<ProgressBarProps> = ({
 }) => {
   return (
     <div className={className}>
-      {[...Array(totalSteps)].map((v, index) => (
+      {[...Array(totalSteps)].map((_, index) => (
         <ProgressUnit key={index} active={currentStep >= index + 1} />
       ))}
     </div>

src/components/imageUploader/ImageUploader.tsx

@@ -54,6 +54,7 @@ const ImageUploader = ({ onChange, value, label }: Props) => {
     } else {
       setBase64([]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleChange = (

src/hooks/session/useUpdateUserSession.tsx

@@ -1,4 +1,5 @@
 "use client";
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import { useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";

src/hooks/useSwipingContainer.ts

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import { MouseEvent, useCallback, useEffect, useRef } from "react";