dependency: Add eslint:recommend extends for eslint

.eslintrc.json

@@ -1,17 +1,26 @@
 {
   "extends": [
     "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
     "plugin:import/typescript",
     "plugin:storybook/recommended"
   ],
+  "parser": "@typescript-eslint/parser",
   "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
+    },
     "import/resolver": {
       "typescript": true,
       "node": true
     }
   },
   "rules": {
-    "import/no-unused-modules": "error",
     "import/order": [
       "error",
       {

package.json

@@ -47,7 +47,8 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7",
     "eslint": "^8",
     "eslint-config-next": "14.0.2",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -65,14 +66,15 @@
     "stylelint-order": "^6.0.4",
     "supports-color": "^9.4.0",
     "typescript": "5.3.2",
+    "typescript-eslint": "^7.15.0",
     "webpack": "^5.89.0"
   },
   "packageManager": "[email protected]",
   "lint-staged": {
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "stylelint --fix",
-      "prettier --write"
+    "*.{js,jsx,ts,tsx}": [
+      "yarn eslint --fix",
+      "yarn stylelint --fix",
+      "yarn prettier --write"
     ]
   }
-}
+}

src/app/signup-guard.tsx

@@ -37,7 +37,7 @@ export const SignupGuard = () => {
   const popupComponent = useMemo(() => {
     switch (step) {
       case SignUpStep.TERMS_AGREEMENT:
-        return <SignUpTermsPopup onSuccess={() => setNextStep()} />;
+        return <SignUpTermsPopup />;
       case SignUpStep.PROFILE_CREATION:
         return <SignUpProfileCreationPopup onSuccess={() => setNextStep()} />;
       case SignUpStep.POSITION_SELECTION:

src/components/atoms/Icons.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import Image from 'next/image';
+import { SVGProps } from 'react';
+import Image, { StaticImageData } from 'next/image';
 
 import {
   AccountIcon,
@@ -95,7 +95,7 @@ export type IconName =
   | 'velog';
 
 interface Icon {
-  SVGR: any;
+  SVGR: React.FC<React.SVGProps<SVGElement>> | StaticImageData;
   color?: string;
   style?: React.CSSProperties;
 }
@@ -281,7 +281,7 @@ const icons: Record<IconName, Icon> = {
   },
 };
 
-interface IconsProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IconsProps extends SVGProps<SVGElement> {
   icon: IconName;
   useCSSColor?: boolean;
 

src/components/atoms/Label.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { HTMLAttributes } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -18,7 +18,7 @@ const LabelText = styled(Txt)`
   white-space: nowrap;
 `;
 
-interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+interface LabelProps extends HTMLAttributes<HTMLDivElement> {
   text: string;
   position?: 'top' | 'left';
   gap?: React.CSSProperties['gap'];

src/components/atoms/Loading.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import { FitLogo } from '.';
 
-export const Loading = forwardRef<HTMLDivElement>(({}, ref) => {
+export const Loading = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <Container ref={ref}>
       <Spinner>

src/components/atoms/MouseDetector.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface MouseDetectorProps extends React.HTMLAttributes<HTMLDivElement> {
   onClickOutside?: () => void;

src/components/atoms/MyPage/PortfolioTicket.tsx

@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import styled from '@emotion/styled';
 
 import { useTempAuthStore } from '#/stores/tempAuth';
-import { User } from '#/types';
 import { IconName, Icons } from '#atoms/Icons';
 import { Txt } from '#atoms/Text';
 

src/components/atoms/SocialLoginButton.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import Link from 'next/link';
 
 import { css } from '@emotion/react';

src/components/atoms/Text.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes } from 'react';
+import { CSSProperties } from 'react';
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';

src/components/molecules/ChatToolbox.tsx

@@ -63,7 +63,8 @@ export const ChatToolbox = ({ projectId, matchingId }: ChatToolboxProps) => {
         ))}
       </ImageContainer>
       <Form
-        action={() => {
+        onSubmit={(e) => {
+          e.preventDefault();
           if (imageUrls.length > 0) {
             imageUrls.map((url) => emitImage(url));
             setImageUrls([]);

src/components/molecules/MyPage/TechSelectBlock.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { usePositionsQuery } from '#/hooks/use-positions';
-import { useTempAuthStore } from '#/stores/tempAuth';
 import { Position, Skill } from '#/types';
 import { Txt } from '#atoms/Text';
 import { PositionBadge } from './PositionBadge';

src/components/molecules/PositionCard.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { HTMLAttributes } from 'react';
 import Image from 'next/image';
 
 import styled from '@emotion/styled';
 
 import { Txt } from '#/components/atoms';
 import { media } from '#/utilities';
 
-interface PositionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface PositionCardProps extends HTMLAttributes<HTMLDivElement> {
   name: string;
   imageUrl: string;
   selected: boolean;

src/components/molecules/TeamRecommend/TechSelect.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 
 import styled from '@emotion/styled';
 

src/components/organisms/MatchingInfo/MatchingSequenceSwiper.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import styled from '@emotion/styled';
 

src/components/organisms/MatchingRegister.tsx

@@ -2,8 +2,6 @@
 
 import styled from '@emotion/styled';
 
-import _ from 'lodash';
-
 import { MatchingButtons } from '#/components/molecules/MatchingButtons';
 import { useMeQuery } from '#/hooks/use-user';
 import { UserDetails } from './UserDetails';

src/components/organisms/MyPage/ActivityEdit.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -41,7 +41,7 @@ export const ActivityEdit = () => {
   );
 
   const handleUpdateTempUser = useCallback(
-    (key: string, value: any) => {
+    (key: string, value: unknown) => {
       if (tempUser !== null) setTempUser({ ...tempUser, [key]: value });
     },
     [tempUser, setTempUser]

src/components/organisms/MyPage/MemberInfoEdit.tsx

@@ -72,8 +72,8 @@ export const MemberInfoEdit = () => {
   const setTempUser = useTempAuthStore((state) => state.setTempUser);
 
   const handleUpdateTempUser = useCallback(
-    (key: string, value: any, maxLength?: number) => {
-      if (maxLength && value.length > maxLength) {
+    (key: string, value: string | boolean, maxLength?: number) => {
+      if (maxLength && (value as string).length > maxLength) {
         alert('최대 글자수를 초과하였습니다.');
         return;
       }

src/components/organisms/MyPage/PortfolioInformation.tsx

@@ -35,23 +35,6 @@ const PortfolioContent = styled.div`
   display: flex;
   gap: 18px;
 `;
-const ClipBlock = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-
-  width: 92px;
-  height: 98px;
-  padding: 0 10px;
-
-  text-align: center;
-  word-break: keep-all;
-
-  border: 1px solid #e0e0e0;
-  border-radius: 5px;
-`;
 const PortfolioList = styled.div`
   display: flex;
   flex-direction: column;

src/components/organisms/ProjectChatRoom.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import styled from '@emotion/styled';
 
 import { Icons } from '#/components/atoms';

src/components/organisms/SignUpTermsPopup.tsx

@@ -11,11 +11,7 @@ import { policies } from '#/entities';
 import { usePolicyAgreesMutation, usePolicyAgreesQuery } from '#/hooks/use-policy-agrees';
 import { PolicyAgreement, PolicyType } from '#/types';
 
-interface SignUpTermsPopupProps {
-  onSuccess: () => void;
-}
-
-export const SignUpTermsPopup: React.FC<SignUpTermsPopupProps> = ({ onSuccess }) => {
+export const SignUpTermsPopup = () => {
   const [policyAgrees, setPolicyAgrees] = useState<Record<PolicyType, PolicyAgreement>>(
     Object.values(policies).reduce(
       (acc, { type }) => ({ ...acc, [type]: { type, version: '', isAgreed: false } }),

src/components/organisms/TeamRecommend/RecommendFilterBlock.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback } from 'react';
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -37,6 +37,8 @@ const DibsFilter = styled.div`
   border-bottom: 2px solid #eee;
 `;
 const DibsBlock = styled(Txt)<{ selected: boolean }>`
+  cursor: pointer;
+
   position: relative;
   bottom: -2px;
 
@@ -46,7 +48,6 @@ const DibsBlock = styled(Txt)<{ selected: boolean }>`
 
   border-bottom: 2px solid transparent;
 
-  cursor: pointer;
   ${({ selected }) =>
     selected &&
     css`

src/components/organisms/sign-up/ProfileDetailsSubmission.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { Input, Label, Txt } from '#/components/atoms';
 import { CareerSelect } from '#/components/molecules/CareerSelect';
 import { Me, UserBackgroundStatus } from '#/types';
-import { isUserStudent, isUserWorker, media } from '#/utilities';
+import { isUserStudent, isUserWorker } from '#/utilities';
 
 const Container = styled.div`
   display: flex;

src/entities/policy.ts

@@ -175,7 +175,7 @@ export const policies: Record<PolicyType, Policy> = {
       },
       {
         article: '4. 처리하는 개인정보의 항목 작성',
-        clause: `‘핏’은 다음의 개인정보 항목을 처리하고 있습니다.\n\n<‘핏’에서 수집하는 개인정보 항목>\n'핏’ 회원 가입 및 고객 문의 시, 제공 동의를 해주시는 개인정보 수집 항목입니다. \n\n  ㅁ 서비스 사용 시(회원)\n • 필수항목 : 이름, 닉네임, 이메일, 학력/경력, 프로젝트 관련 개인 정보\n • 선택항목 : 전화번호, 포트폴리오\n • 수집목적 : 핏 서비스 사용, 회원관리 및 마케팅 이용\n • 보유기간 : 회원 탈퇴 또는 동의 철회 시 지체없이 파기\n\n  ㅁ 고객 문의 시(비회원)\n • 필수항목 : 문의종류, 이름, 휴대폰번호, 이메일, 문의사항\n • 수집목적 : 고객문의 및 상담요청에 대한 회신, 상담을 위한 서비스 이용기록 조회\n • 보유기간 : 문의 접수 후 2년 간 보관 (단, 관계 법령이 정한 시점까지 보존)\n\n<카카오 개인정보 제3자 제공 동의>\n아래는 ‘핏’ 회원 가입 시(카카오 계정을 통한 간편 가입시) 제공 동의를 해주시는 자동 수집 항목입니다.\n • 필수항목 : 프로필 정보(닉네임/프로필 사진)\n • 수집목적 : 핏 서비스 사용, 회원관리 및 마케팅 이용\n • 보유기간 : 회원 탈퇴, 카카오 탈퇴 또는 동의 철회 시 지체없이 파기\n\n<구글 개인정보 제3자 제공 동의>\n아래는 ‘핏’ 회원 가입 시(구글 계정을 통한 간편 가입시) 제공 동의를 해주시는 자동 수집 항목입니다.\n • 필수항목 : 구글 이메일, 구글에 등록된 개인정보(공개로 설정한 개인정보 포함)\n • 수집목적 : 핏\n서비스 사용, 회원관리 및 마케팅 이용\n • 보유기간 : 회원 탈퇴, 구글 탈퇴 또는 동의 철회 시 지체없이 파기\n\n‘핏’은 만 14세 미만 아동의 개인정보를 보호하기 위하여 회원가입은 만14세 이상만 가능하도록 함으로써 아동의 개인정보를 수집하지 않습니다.`,
+        clause: `‘핏’은 다음의 개인정보 항목을 처리하고 있습니다.\n\n<‘핏’에서 수집하는 개인정보 항목>\n'핏’ 회원 가입 및 고객 문의 시, 제공 동의를 해주시는 개인정보 수집 항목입니다. \n\n  ㅁ 서비스 사용 시(회원)\n • 필수항목 : 이름, 닉네임, 이메일, 학력/경력, 프로젝트 관련 개인 정보\n • 선택항목 : 전화번호, 포트폴리오\n • 수집목적 : 핏 서비스 사용, 회원관리 및 마케팅 이용\n • 보유기간 : 회원 탈퇴 또는 동의 철회 시 지체없이 파기\n\n  ㅁ 고객 문의 시(비회원)\n • 필수항목 : 문의종류, 이름, 휴대폰번호, 이메일, 문의사항\n • 수집목적 : 고객문의 및 상담요청에 대한 회신, 상담을 위한 서비스 이용기록 조회\n • 보유기간 : 문의 접수 후 2년 간 보관 (단, 관계 법령이 정한 시점까지 보존)\n\n<카카오 개인정보 제3자 제공 동의>\n아래는 ‘핏’ 회원 가입 시(카카오 계정을 통한 간편 가입시) 제공 동의를 해주시는 자동 수집 항목입니다.\n • 필수항목 : 프로필 정보(닉네임/프로필 사진)\n • 수집목적 : 핏 서비스 사용, 회원관리 및 마케팅 이용\n • 보유기간 : 회원 탈퇴, 카카오 탈퇴 또는 동의 철회 시 지체없이 파기\n\n<구글 개인정보 제3자 제공 동의>\n아래는 ‘핏’ 회원 가입 시(구글 계정을 통한 간편 가입시) 제공 동의를 해주시는 자동 수집 항목입니다.\n • 필수항목 : 구글 이메일, 구글에 등록된 개인정보(공개로 설정한 개인정보 포함)\n • 수집목적 : 핏\n서비스 사용, 회원관리 및 마케팅 이용\n • 보유기간 : 회원 탈퇴, 구글 탈퇴 또는 동의 철회 시 지체없이 파기\n\n'핏’은 만 14세 미만 아동의 개인정보를 보호하기 위하여 회원가입은 만14세 이상만 가능하도록 함으로써 아동의 개인정보를 수집하지 않습니다.`,
       },
       {
         article: '5. 개인정보의 파기',

src/hooks/use-matching.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
 
@@ -32,7 +33,11 @@ export function useMatchingQuery() {
           createdAt: json.createdAt,
         } as Matching;
       } catch (error) {
-        if (ApiError.isApiError(error) && error.code === ApiError.MATCHING_NOT_FOUND_CODE) {
+        if (
+          _.isObject(error) &&
+          ApiError.isApiError(error) &&
+          error.code === ApiError.MATCHING_NOT_FOUND_CODE
+        ) {
           return { id: null, status: MatchingStatus.REGISTER };
         }
         throw error;

src/hooks/use-presigned-url.ts

@@ -1,6 +1,6 @@
 import useSWRMutation from 'swr/mutation';
 
-import type { PresignedUrl, FileDomain } from '#/types';
+import type { PresignedUrl } from '#/types';
 import { fitFetcher } from '#/utilities';
 
 const PRESIGNED_URL_QUERY_KEY = '/v1/file/pre-signed-url';

src/types/api-error.ts

@@ -12,10 +12,15 @@ export class ApiError {
     this.message = message;
   }
 
-  static isApiError(error: any): error is ApiError {
+  static isApiError(error: object): error is ApiError {
     if (!error) {
       return false;
     }
-    return typeof error.code === 'string' && typeof error.message === 'string';
+    return (
+      'code' in error &&
+      typeof error.code === 'string' &&
+      'message' in error &&
+      typeof error.message === 'string'
+    );
   }
 }

src/types/matching.ts

@@ -23,7 +23,7 @@ export interface Matching {
 }
 
 export interface MatchingRoom {
-  id: number;
+  id: NonNullable<Matching['id']>;
 
   hostId: User['id'];
   chatId: number;

src/utilities/index.ts

@@ -1,7 +1,13 @@
-export { checkSignUpStep } from './check-sign-up-step';
-export { fitFetch, fitFetcher } from './fetch';
-export { isTextMessage, isImageMessage, isNoticeMessage } from './message';
-export { getTokens, setTokens } from './session';
-export { getStorageUrl } from './storage';
+export * from './alarm-replace-text';
+export * from './check-sign-up-step';
+export * from './fetch';
+export * from './icon';
+export * from './matching';
+export * from './message';
+export * from './policy';
+export * from './session';
+export * from './socket';
+export * from './storage';
 export * from './styles';
-export { isBackgroundStatus, isUserStudent, isUserWorker, getBackgroundStatusText } from './user';
+export * from './transient-styled';
+export * from './user';