Merge pull request #39 from hufs-sports-live/build/eslint

[BUILD] eslint를 통해 코드 포맷팅 및 컨벤션 강제

.eslintrc.json

@@ -1,3 +1,66 @@
 {
-  "extends": "next/core-web-vitals"
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "import",
+    "simple-import-sort",
+    "@typescript-eslint",
+    "prettier",
+    "jsx-a11y"
+  ],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "ignorePatterns": [".next/*"],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    // react
+    "react/prop-types": 0,
+    "react-hooks/rules-of-hooks": "error",
+    // import
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          ["parent", "sibling"],
+          "index"
+        ],
+        "newlines-between": "always",
+        "pathGroups": [
+          {
+            "pattern": "@/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ]
+      }
+    ],
+    // prettier
+    "prettier/prettier": "warn",
+    // rules
+    "no-console": [
+      "error",
+      {
+        "allow": ["error", "warn"]
+      }
+    ]
+  }
 }

.prettierrc

@@ -5,5 +5,6 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "printWidth": 80,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
 }

package.json

@@ -20,9 +20,16 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "autoprefixer": "^10",
     "eslint": "^8",
     "eslint-config-next": "13.5.4",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "postcss": "^8",
     "prettier": "^3.0.3",
     "tailwindcss": "^3",

src/api/admin.ts

@@ -1,7 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+import { AxiosError } from 'axios';
+
 import { GameTeamProps } from '@/types/game';
+
 import { adminInstance } from './instance';
-import { AxiosError, AxiosResponse } from 'axios';
-import * as Sentry from '@sentry/nextjs';
 
 type CreateGameRequest = {
   name: string;

src/api/auth.ts

@@ -1,8 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+import { AxiosError, AxiosResponse } from 'axios';
+
 import { PostLoginRequest, PostLoginResponse } from '@/types/auth';
-import { adminInstance } from './instance';
 import { GameStatusType } from '@/types/game';
-import { AxiosError, AxiosResponse } from 'axios';
-import * as Sentry from '@sentry/nextjs';
+
+import { adminInstance } from './instance';
 
 export const postLogin = async (body: PostLoginRequest) => {
   try {
@@ -29,6 +31,5 @@ export const postGameStatus = async (
   id: number,
   gameStatus: GameStatusType,
 ) => {
-  console.log(id, gameStatus);
   adminInstance.post(`/manage/game/statustype/${id}/`, { gameStatus });
 };

src/api/game.ts

@@ -1,11 +1,13 @@
 import * as Sentry from '@sentry/nextjs';
+import { AxiosError, AxiosResponse } from 'axios';
+
 import {
   AllGamesResponse,
   EachGameResponse,
   GameCommentResponse,
 } from '@/types/game';
+
 import instance from './instance';
-import { AxiosError, AxiosResponse } from 'axios';
 
 export const getAllGames = async () => {
   try {

src/api/team.ts

@@ -1,8 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
 import { AxiosError, AxiosResponse } from 'axios';
-import instance, { adminInstance } from './instance';
+
 import { GameTeamProps } from '@/types/game';
 
-import * as Sentry from '@sentry/nextjs';
+import instance from './instance';
 
 export const getTeams = async () => {
   try {

src/app/admin/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 
+import { notFound, useRouter } from 'next/navigation';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+
 import { createGame } from '@/api/admin';
 import { getTeams } from '@/api/team';
 import Input from '@/components/common/Input/Input';
 import Select from '@/components/common/Select/Select';
 import useDate from '@/hooks/useDate';
 import useValidate from '@/hooks/useValidate';
 import { GameTeamProps } from '@/types/game';
-import { notFound, useRouter } from 'next/navigation';
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 
 export default function Admin() {
   const router = useRouter();
@@ -51,9 +52,6 @@ export default function Admin() {
 
     if (isDateError || isTeamError || isTimeError) return;
 
-    console.log(
-      new Date(`${gameData.date}T${gameData.time}:00Z`).toISOString(),
-    );
     createGame({
       name: gameData.name,
       sportsName: gameData.sportsName,
@@ -140,9 +138,10 @@ export default function Admin() {
         <div className="text-red-400 text-sm">팀을 다시 선택해주세요!</div>
       )}
 
-      <label>
+      <label htmlFor="leagueName">
         경기 이름
         <Input
+          id="leagueName"
           name="name"
           readOnly
           value={gameData.name}
@@ -151,9 +150,10 @@ export default function Admin() {
         />
       </label>
 
-      <label>
+      <label htmlFor="sportsName">
         종목 이름
         <Input
+          id="sportsName"
           name="sportsName"
           readOnly
           value={gameData.sportsName}

src/app/detail/[id]/modify/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 
+import { useParams, useRouter } from 'next/navigation';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+
 import { postGameScore } from '@/api/admin';
 import { getEachGame } from '@/api/game';
 import { Game } from '@/components/common/Game';
 import Input from '@/components/common/Input/Input';
 import Select from '@/components/common/Select/Select';
 import { DetailOfGameResponse } from '@/types/game';
 import { getUtcHours } from '@/utils/utc-times';
-import { useParams, useRouter } from 'next/navigation';
-import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 
 export default function GameModify() {
   const router = useRouter();
@@ -96,9 +97,10 @@ export default function GameModify() {
           <Game.TeamName>{detailOfGame?.secondTeam.name}</Game.TeamName>
         </Game.TeamWrapper>
       </Game>
-      <label className="my-5">
+      <label htmlFor="playerName" className="my-5">
         선수 이름
         <Input
+          id="playerName"
           name="playerName"
           value={gameData.playerName}
           onChange={handleChange}
@@ -122,10 +124,11 @@ export default function GameModify() {
         </option>
       </Select>
 
-      <label>
+      <label htmlFor="scoreTime">
         득점 시간
         <div className="flex justify-center items-center gap-1">
           <Input
+            id="scoreTime"
             type="number"
             name="hour"
             value={gameData.hour}

src/app/detail/[id]/page.tsx

@@ -1,13 +1,14 @@
 'use client';
 
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
 import { getEachGame } from '@/api/game';
 import GameComments from '@/components/detail/GameComments';
 import GameInfo from '@/components/detail/GameInfo';
 import GameTimeline from '@/components/detail/GameTimeline';
 import { EachGameResponse } from '@/types/game';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
 export default function DetailPage({ params }: { params: { id: string } }) {
   const [gameData, setGameData] = useState<EachGameResponse>();

src/app/detail/[id]/status/page.tsx

@@ -1,10 +1,11 @@
 'use client';
 
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
 import { postGameStatus } from '@/api/auth';
 import Select from '@/components/common/Select/Select';
 import { GameStatusType } from '@/types/game';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
 export default function Status() {
   const router = useRouter();

src/app/layout.tsx

@@ -1,8 +1,10 @@
-import Header from '@/components/layout/Header';
 import './globals.css';
+
 import type { Metadata } from 'next';
 import { Noto_Sans_KR } from 'next/font/google';
+
 import Footer from '@/components/layout/Footer';
+import Header from '@/components/layout/Header';
 
 const inter = Noto_Sans_KR({
   subsets: ['latin'],

src/app/login/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { postLogin } from '@/api/auth';
+import { useRouter } from 'next/navigation';
 
-import { notFound, useRouter } from 'next/navigation';
+import { postLogin } from '@/api/auth';
 
 export default function Login() {
   const router = useRouter();

src/app/page.tsx

@@ -1,10 +1,11 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
 import { getAllGames } from '@/api/game';
 import GameWithScore from '@/components/home/GameList/GameWithScore';
 import GameWithTimeStamp from '@/components/home/GameList/GameWithTimeStamp';
 import { AllGamesResponse } from '@/types/game';
-import { useEffect, useState } from 'react';
 
 export default function Home() {
   const [gamesScheduled, setGamesScheduled] = useState<AllGamesResponse[]>([]);

src/components/common/Game/GameMain.tsx

@@ -1,11 +1,10 @@
-import { Children, ReactNode, isValidElement } from 'react';
+import { Children, isValidElement, ReactNode } from 'react';
 
 import GameLabel from './GameLabel';
-import GameTeam from './GameTeam';
-import GameStatus from './GameStatus';
+import GameLive from './GameLive';
 import GameScore from './GameScore';
+import GameTeam from './GameTeam';
 import GameTimer from './GameTimer';
-import GameLive from './GameLive';
 
 interface GameMainProps {
   children?: ReactNode;

src/components/common/Game/index.ts

@@ -1,12 +1,12 @@
 import GameLabel from './GameLabel';
+import GameLive from './GameLive';
 import GameMain from './GameMain';
 import GameScore from './GameScore';
+import GameStatus from './GameStatus';
 import GameTeam from './GameTeam';
 import GameTeamLogo from './GameTeamLogo';
 import GameTeamName from './GameTeamName';
 import GameTimer from './GameTimer';
-import GameStatus from './GameStatus';
-import GameLive from './GameLive';
 
 export const Game = Object.assign(GameMain, {
   Label: GameLabel,

src/components/common/Select/Select.tsx

@@ -1,9 +1,4 @@
-import {
-  DOMAttributes,
-  HTMLAttributes,
-  ReactNode,
-  SelectHTMLAttributes,
-} from 'react';
+import { ReactNode, SelectHTMLAttributes } from 'react';
 
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   children?: ReactNode;

src/components/detail/GameComments.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
 import { getGameComments, postGameComment } from '@/api/game';
 import { GameCommentResponse } from '@/types/game';
-import { useEffect, useState } from 'react';
+
 import { Comment } from './Comment';
 
 export default function GameComments({ gameId }: { gameId: number }) {

src/components/detail/GameInfo.tsx

@@ -1,5 +1,5 @@
-import { EachGameResponse } from '@/types/game';
 import { Game } from '@/components/common/Game';
+import { EachGameResponse } from '@/types/game';
 
 export default function GameInfo({ game }: { game: EachGameResponse }) {
   return (

src/components/detail/GameTimeline.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { EachGameResponse } from '@/types/game';
+
 import { Record } from './Record';
 
 type GameTimelineProps = {

src/components/home/GameList/GameWithScore.tsx

@@ -1,7 +1,8 @@
-import { AllGamesResponse } from '@/types/game';
-import { Game } from '@/components/common/Game';
 import Link from 'next/link';
 
+import { Game } from '@/components/common/Game';
+import { AllGamesResponse } from '@/types/game';
+
 interface GameListProps {
   data: AllGamesResponse[];
 }