[Fix/service/#62] QA 2차 반영

apps/service/eslint.config.mjs

@@ -1,8 +1,19 @@
 import baseConfig from '../../eslint.config.mjs';
+import { FlatCompat } from '@eslint/eslintrc';
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
 
 /** @type {import("eslint").FlatConfig[]} */
 export default [
   ...baseConfig,
+  ...compat.extends('next/core-web-vitals'),
   {
     rules: {
       'react/react-in-jsx-scope': 'off', // Next.js에서는 불필요

apps/service/package.json

@@ -28,6 +28,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint-config-next": "^15.2.4",
     "openapi-typescript": "^7.6.1"
   }
 }

apps/service/src/apis/authMiddleware.ts

@@ -1,7 +1,8 @@
 'use client';
-import { getAccessToken, setAccessToken } from '@utils';
 import { Middleware } from 'openapi-fetch';
 
+import { getAccessToken, setAccessToken } from '@utils';
+
 const UNPROTECTED_ROUTES = ['/api/v1/auth/admin/login', '/api/v1/auth/oauth/social-login'];
 
 const reissueToken = async () => {

apps/service/src/apis/client.ts

@@ -1,7 +1,8 @@
-import { paths } from '@schema';
 import createFetchClient from 'openapi-fetch';
 import createClient from 'openapi-react-query';
 
+import { paths } from '@schema';
+
 export const client = createFetchClient<paths>({
   baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL,
 });

apps/service/src/apis/controller/auth/postKakaoLogin.ts

@@ -1,7 +1,6 @@
 'use client';
 
 import { setAccessToken, setName } from '@utils';
-
 import { client } from '@/apis/client';
 
 const postKakaoAccessToken = async (code: string) => {

apps/service/src/apis/controller/commentary/index.ts

@@ -1,3 +1,3 @@
-import getCommentary from './getCommentary';
+import useGetCommentary from './useGetCommentary';
 
-export { getCommentary };
+export { useGetCommentary };

apps/service/src/apis/controller/commentary/getCommentary.ts → apps/service/src/apis/controller/commentary/useGetCommentary.ts

@@ -1,11 +1,11 @@
 import { TanstackQueryClient } from '@apis';
 
-type GetCommentaryProps = {
+type UseGetCommentaryProps = {
   publishId: string;
   problemId: string;
 };
 
-const getCommentary = ({ publishId, problemId }: GetCommentaryProps) => {
+const useGetCommentary = ({ publishId, problemId }: UseGetCommentaryProps) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/commentary',
@@ -24,4 +24,4 @@ const getCommentary = ({ publishId, problemId }: GetCommentaryProps) => {
   );
 };
 
-export default getCommentary;
+export default useGetCommentary;

apps/service/src/apis/controller/home/index.ts

@@ -1,3 +1,3 @@
-import getHomeFeed from './getHomeFeed';
+import useGetHomeFeed from './useGetHomeFeed';
 
-export { getHomeFeed };
+export { useGetHomeFeed };

apps/service/src/apis/controller/home/getHomeFeed.ts → apps/service/src/apis/controller/home/useGetHomeFeed.ts

@@ -1,6 +1,6 @@
 import { TanstackQueryClient } from '@apis';
 
-const getHomeFeed = () => {
+const useGetHomeFeed = () => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/home-feed',
@@ -12,4 +12,4 @@ const getHomeFeed = () => {
   );
 };
 
-export default getHomeFeed;
+export default useGetHomeFeed;

apps/service/src/apis/controller/problem/index.ts

@@ -1,15 +1,15 @@
-import getProblemAll from './getProblemAll';
-import getProblemById from './getProblemById';
-import getProblemsByPublishId from './getProblemsByPublishId';
-import getProblemThumbnail from './getProblemThumbnail';
-import getChildProblemById from './getChildProblemById';
-import getChildData from './getChildData';
+import useGetProblemAll from './useGetProblemAll';
+import useGetProblemById from './useGetProblemById';
+import useGetProblemsByPublishId from './useGetProblemsByPublishId';
+import useGetProblemThumbnail from './useGetProblemThumbnail';
+import useGetChildProblemById from './useGetChildProblemById';
+import useGetChildData from './useGetChildData';
 
 export {
-  getProblemAll,
-  getProblemById,
-  getProblemsByPublishId,
-  getProblemThumbnail,
-  getChildProblemById,
-  getChildData,
+  useGetProblemAll,
+  useGetProblemById,
+  useGetProblemsByPublishId,
+  useGetProblemThumbnail,
+  useGetChildProblemById,
+  useGetChildData,
 };

apps/service/src/apis/controller/problem/getChildData.ts → apps/service/src/apis/controller/problem/useGetChildData.ts

@@ -1,6 +1,6 @@
-import { TanstackQueryClient } from '@/apis/client';
+import { TanstackQueryClient } from '@apis';
 
-const getChildData = (publishId: string, problemId: string) => {
+const useGetChildData = (publishId: string, problemId: string) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/problem/child/{publishId}/{problemId}',
@@ -19,4 +19,4 @@ const getChildData = (publishId: string, problemId: string) => {
   );
 };
 
-export default getChildData;
+export default useGetChildData;

apps/service/src/apis/controller/problem/getChildProblemById.ts → apps/service/src/apis/controller/problem/useGetChildProblemById.ts

@@ -1,6 +1,6 @@
-import { TanstackQueryClient } from '@/apis/client';
+import { TanstackQueryClient } from '@apis';
 
-const getChildProblemById = (publishId: string, problemId: string, childProblemId: string) => {
+const useGetChildProblemById = (publishId: string, problemId: string, childProblemId: string) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/problem/{publishId}/{problemId}/{childProblemId}',
@@ -20,4 +20,4 @@ const getChildProblemById = (publishId: string, problemId: string, childProblemI
   );
 };
 
-export default getChildProblemById;
+export default useGetChildProblemById;

apps/service/src/apis/controller/problem/getProblemAll.ts → apps/service/src/apis/controller/problem/useGetProblemAll.ts

@@ -1,11 +1,11 @@
 import { TanstackQueryClient } from '@apis';
 
-type GetProblemAllProps = {
+type useGetProblemAllProps = {
   year: number;
   month: number;
 };
 
-const getProblemAll = ({ year, month }: GetProblemAllProps) => {
+const useGetProblemAll = ({ year, month }: useGetProblemAllProps) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/problem/all/{year}/{month}',
@@ -24,4 +24,4 @@ const getProblemAll = ({ year, month }: GetProblemAllProps) => {
   );
 };
 
-export default getProblemAll;
+export default useGetProblemAll;

apps/service/src/apis/controller/problem/getProblemById.ts → apps/service/src/apis/controller/problem/useGetProblemById.ts

@@ -1,6 +1,6 @@
 import { TanstackQueryClient } from '@apis';
 
-const getProblemById = (publishId: string, problemId: string) => {
+const useGetProblemById = (publishId: string, problemId: string) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/problem/{publishId}/{problemId}',
@@ -19,4 +19,4 @@ const getProblemById = (publishId: string, problemId: string) => {
   );
 };
 
-export default getProblemById;
+export default useGetProblemById;

apps/service/src/apis/controller/problem/getProblemThumbnail.ts → apps/service/src/apis/controller/problem/useGetProblemThumbnail.ts

@@ -1,6 +1,6 @@
 import { TanstackQueryClient } from '@apis';
 
-const getProblemThumbnail = (publishId: string, problemId: string) => {
+const useGetProblemThumbnail = (publishId: string, problemId: string) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/problem/thumbnail/{publishId}/{problemId}',
@@ -19,4 +19,4 @@ const getProblemThumbnail = (publishId: string, problemId: string) => {
   );
 };
 
-export default getProblemThumbnail;
+export default useGetProblemThumbnail;

apps/service/src/apis/controller/problem/getProblemsByPublishId.ts → apps/service/src/apis/controller/problem/useGetProblemsByPublishId.ts

@@ -1,6 +1,6 @@
 import { TanstackQueryClient } from '@apis';
 
-const getProblemsByPublishId = (publishId: string) => {
+const useGetProblemsByPublishId = (publishId: string) => {
   return TanstackQueryClient.useQuery(
     'get',
     '/api/v1/client/problem/{publishId}',
@@ -18,4 +18,4 @@ const getProblemsByPublishId = (publishId: string) => {
   );
 };
 
-export default getProblemsByPublishId;
+export default useGetProblemsByPublishId;

apps/service/src/app/(home)/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 import { useRouter } from 'next/navigation';
+import dayjs from 'dayjs';
+
 import { Button } from '@components';
 import { IcCalendar } from '@svg';
-import { getHomeFeed } from '@apis';
-import dayjs from 'dayjs';
+import { useGetHomeFeed } from '@apis';
 import { DailyProgress } from '@types';
 import { useTrackEvent } from '@hooks';
-
 import {
   GuideButton,
   HomeHeader,
@@ -18,7 +18,7 @@ import {
 const Page = () => {
   const router = useRouter();
   const { trackEvent } = useTrackEvent();
-  const { data } = getHomeFeed();
+  const { data } = useGetHomeFeed();
   const homeFeedData = data?.data;
 
   const dailyProgresses = homeFeedData?.dailyProgresses;

apps/service/src/app/@modal/(.)comming-soon-modal/page.tsx

@@ -1,15 +1,16 @@
 'use client';
-import { BaseModalTemplate, RouteModal } from '@components';
 import { useRouter } from 'next/navigation';
 
-const page = () => {
+import { BaseModalTemplate, RouteModal } from '@components';
+
+const Page = () => {
   const router = useRouter();
 
   return (
     <RouteModal>
       <BaseModalTemplate>
         <BaseModalTemplate.Content>
-          <BaseModalTemplate.Text text={`현재 준비중인 기능입니다!`} />
+          <BaseModalTemplate.Text text={`현재 준비중인 기능이에요`} />
         </BaseModalTemplate.Content>
         <BaseModalTemplate.ButtonSection>
           <BaseModalTemplate.Button variant='blue' onClick={() => router.back()}>
@@ -21,4 +22,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;

apps/service/src/app/@modal/(.)image-modal/page.tsx

@@ -1,9 +1,10 @@
 'use client';
-import { RouteModal } from '@components';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 
-const page = () => {
+import { RouteModal } from '@components';
+
+const Page = () => {
   const searchParams = useSearchParams();
   const imageUrl = searchParams.get('imageUrl');
 
@@ -22,4 +23,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;

apps/service/src/app/@modal/(.)login-modal/page.tsx

@@ -1,8 +1,9 @@
 'use client';
-import { RouteModal, TwoButtonModalTemplate } from '@components';
 import { useRouter } from 'next/navigation';
 
-const page = () => {
+import { RouteModal, TwoButtonModalTemplate } from '@components';
+
+const Page = () => {
   const router = useRouter();
 
   return (
@@ -22,4 +23,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;

apps/service/src/app/api/auth/callback/kakao/page.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { postKakaoLogin } from '@apis';
 import { useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 
+import { postKakaoLogin } from '@apis';
+
 const Page = () => {
   const searchParams = useSearchParams();
   const code = searchParams.get('code');
@@ -12,7 +13,7 @@ const Page = () => {
     if (code) {
       postKakaoLogin(code);
     }
-  }, []);
+  }, [code]);
 
   return <></>;
 };

apps/service/src/app/component/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { useState } from 'react';
+
 import {
   Button,
   SmallButton,
@@ -14,7 +15,6 @@ import {
   StatusIcon,
 } from '@components';
 import { IcSolve } from '@svg';
-
 import { GuideButton } from '@/components/home';
 import { TabMenu } from '@/components/report';
 

apps/service/src/app/layout.tsx

@@ -13,6 +13,9 @@ const isDevelopment =
   process.env.NEXT_PUBLIC_VERCEL_ENV === 'development';
 
 export const metadata: Metadata = {
+  metadataBase: isDevelopment
+    ? new URL('http://www.dev.math-pointer.com')
+    : new URL('https://math-pointer.com'),
   title: '포인터',
   description: '포인터',
   robots: isDevelopment

apps/service/src/app/login/page.tsx

@@ -1,9 +1,9 @@
 'use client';
-import { useTrackEvent } from '@hooks';
-import { getAccessToken } from '@utils';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
+import { useTrackEvent } from '@hooks';
+import { getAccessToken } from '@utils';
 import { LogoLogin } from '@/assets/svg/logo';
 import { KakaoButton } from '@/components/login';
 
@@ -24,11 +24,11 @@ const Page = () => {
     if (accessToken) {
       router.replace('/');
     }
-  }, []);
+  }, [router]);
 
   return (
-    <div className='mx-auto flex h-[100dvh] w-[33.5rem] flex-col pb-[2rem]'>
-      <div className='flex flex-col items-center py-[9.6rem]'>
+    <div className='mx-auto flex h-[100dvh] w-[33.5rem] flex-col justify-center gap-[6.4rem]'>
+      <div className='mt-[6.4rem] flex flex-col items-center'>
         <p className='font-medium-16 text-center text-black'>
           손해설부터 처방까지
           <br />
@@ -37,7 +37,7 @@ const Page = () => {
         <LogoLogin width={250} height={57} className='mt-[2.4rem]' />
         <h1 className='text-main font-bold-24 mt-[1.6rem]'>포인터</h1>
       </div>
-      <div className='mt-auto flex flex-col items-center gap-[1.6rem]'>
+      <div className='flex flex-col items-center gap-[1.6rem]'>
         <p className='font-medium-12 text-lightgray500'>포인터는 태블릿의 스플릿뷰를 권장해요</p>
         <KakaoButton onClick={handleLoginClick} />
         {/* <AppleButton /> */}

apps/service/src/app/my-page/page.tsx

@@ -1,5 +1,4 @@
 import { Header } from '@components';
-
 import { NameCard, SettingList } from '@/components/my-page';
 
 const Page = () => {