🔀 2.0.1 리팩토링 메인 브랜치 반영

.eslintrc.json

@@ -1,3 +1,70 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["node_modules/**", "**/dist/**"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "import"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-console": ["error", { "allow": ["warn", "error", "info"] }],
+    "@typescript-eslint/no-empty-interface": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ]
+      }
+    ],// 일단 style의 경우 {}같은 형식으로 불러오는 hook또는 함수 사이에 있어 import에서 걸림 -> import를 아래쪽으로 내려 해결
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],// 사용하지않는 기능을 불러오는 경우 -> 삭제
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    // 수정해야할 부분들
+    "no-empty": "off",// 대부분 catch라서 off..
+    "react/prop-types": "off",// 아직 파악을 제대로 하지 못 함
+    "prefer-const": "warn", //const로 바꿔도 문제가 없는 let
+    "no-extra-boolean-cast":"warn", // 불필요한 !!사용 필요한 경우 Boolean()으로 바꾸는게 더 좋을 수도 있음
+    "no-constant-condition": "warn",// 항상 결과가 참 또는 거짓임
+    "@typescript-eslint/no-inferrable-types": "warn",//추론 가능 타입
+    "@typescript-eslint/ban-types": "warn"// Object -> NonNullable<object>
+  }
+}

package.json

@@ -10,7 +10,8 @@
     "build:dev": "env-cmd -f .env.development next build",
     "start": "next start",
     "lint": "next lint",
-    "analyze": "ANALYZE=true next build"
+    "analyze": "ANALYZE=true next build",
+    "prettier": "prettier --write **/*.{ts,tsx}"
   },
   "dependencies": {
     "@emotion/css": "^11.10.5",
@@ -25,8 +26,6 @@
     "axios": "^1.2.3",
     "caniuse-lite": "^1.0.30001559",
     "env-cmd": "^10.1.0",
-    "eslint": "8.32.0",
-    "eslint-config-next": "13.1.2",
     "jwt-decode": "^3.1.2",
     "lottie-react": "^2.4.0",
     "msw": "^1.2.1",
@@ -47,6 +46,12 @@
     "workerDirectory": "public"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.3"
+    "@next/bundle-analyzer": "^14.2.3",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "eslint": "8.32.0",
+    "eslint-config-next": "^14.2.6",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.3.3"
   }
 }

src/assets/svg/index.ts

@@ -51,3 +51,4 @@ export { default as NewPageIcon } from './NewPageIcon';
 export { default as TrashcanIcon } from './TrashcanIcon';
 export { default as SettingIcon } from './SettingIcon';
 export { default as CircleDefaultProfile } from './CircleDefaultProfile';
+export { default as BookBenIcon } from './BookBenIcon';

src/components/Common/atoms/Calendar/index.tsx

@@ -1,12 +1,19 @@
-import { XtextIcon } from 'assets/svg';
-import UseToggleTheme from 'hooks/useToggleTheme';
 import Calendar from 'react-calendar';
-import { useRecoilState } from 'recoil';
-import { selectedDate } from 'recoilAtoms/recoilAtomContainer';
+import UseToggleTheme from 'hooks/useToggleTheme';
+import { XtextIcon } from 'assets/svg';
 import * as S from './style';
 
-const CalendarBox = ({ setModal }: { setModal?: (state: boolean) => void }) => {
-  const [date, setDate] = useRecoilState(selectedDate);
+interface CalendarBoxProps {
+  selectedDate?: Date;
+  setSelectedDate?: React.Dispatch<React.SetStateAction<Date>>;
+  setModal?: (state: boolean) => void;
+}
+
+const CalendarBox = ({
+  selectedDate,
+  setSelectedDate,
+  setModal,
+}: CalendarBoxProps) => {
   const [theme] = UseToggleTheme();
 
   return (
@@ -17,10 +24,10 @@ const CalendarBox = ({ setModal }: { setModal?: (state: boolean) => void }) => {
         </S.XIcon>
       )}
       <Calendar
-        value={date}
+        value={selectedDate}
         onChange={(value) => {
           if (!(value instanceof Date)) return;
-          setDate(value);
+          setSelectedDate?.(value);
         }}
         locale="ko"
         formatDay={(_locale, date) =>

src/components/Common/atoms/Items/FilterItem/index.tsx

@@ -1,11 +1,6 @@
 import { SearchFilterProps } from 'types';
 
-const FilterItem = ({
-  name,
-  item,
-  value,
-  onClick,
-}: SearchFilterProps) => {
+const FilterItem = ({ name, item, value, onClick }: SearchFilterProps) => {
   return (
     <>
       <input

src/components/Common/atoms/Wrappers/ModalOverayWrapper/style.ts

@@ -5,30 +5,24 @@ export const ModalOverayWrapper = styled.div`
   visibility: ${(props: ModalStyleProps) =>
     props.isClick ? 'visible' : 'hidden'};
   position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   background: hsla(235, 77%, 10%, 0.45);
 
   @media (max-width: 950px) {
-    background: hsla(235, 77%, 10%, 0.70);
-	}
+    background: hsla(235, 77%, 10%, 0.7);
+  }
 `;
 
 export const ResponseOverayWrapper = styled.div`
   @media (max-width: 950px) {
     visibility: ${(props: ModalStyleProps) =>
       props.isClick ? 'visible' : 'hidden'};
     position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     z-index: 2;
     display: flex;
     justify-content: center;

src/components/Common/molecules/ApplicationItem/index.tsx

@@ -1,15 +1,15 @@
-import * as S from './style';
 import { DefaultProfile, FemaleIcon, MaleIcon, StampIcon } from 'assets/svg';
 import SelfstudyCheck from 'components/SelfStudy/atoms/SelfstudyCheck/SelfstudyCheck';
+import { ProfileImage } from 'components/Home/organisms/Profile/style';
 import { ApplicationItemProps } from 'types';
 import { useRecoilValue } from 'recoil';
 import { selfStudyLookup } from 'recoilAtoms/recoilAtomContainer';
 import { getRole } from 'utils/Libs/getRole';
 import Image from 'next/image';
-import Goldmedal from 'assets/png/GoldMedalIcon.png';
-import Silvermedal from 'assets/png/SilverMedalIcon.png';
+import GoldMedal from 'assets/png/GoldMedalIcon.png';
+import SilverMedal from 'assets/png/SilverMedalIcon.png';
 import BronzeMedal from 'assets/png/BronzeMedalIcon.png';
-import { ProfileImage } from 'components/Home/organisms/Profile/style';
+import * as S from './style';
 
 const ApplicationItem = ({
   id,
@@ -24,36 +24,18 @@ const ApplicationItem = ({
 }: ApplicationItemProps) => {
   const role = getRole();
   const lookUp = useRecoilValue(selfStudyLookup);
-
+  const rankImages = [GoldMedal, SilverMedal, BronzeMedal];
   return (
     <S.ApplicationItemWrapper>
       <S.Number>{rank}</S.Number>
       {listType === 'selfstudy' && (
         <>
           {!lookUp && (
             <S.Medal>
-              {rank === 1 && (
-                <Image
-                  src={Goldmedal}
-                  alt="goldmedal"
-                  priority
-                  width={44}
-                  height={64}
-                />
-              )}
-              {rank === 2 && (
-                <Image
-                  src={Silvermedal}
-                  alt="Silvermedal"
-                  priority
-                  width={44}
-                  height={64}
-                />
-              )}
-              {rank === 3 && (
+              {rank && rank <= 3 && (
                 <Image
-                  src={BronzeMedal}
-                  alt="BronzeMedal"
+                  src={rankImages[rank - 1]}
+                  alt="RankImage"
                   priority
                   width={44}
                   height={64}
@@ -74,7 +56,11 @@ const ApplicationItem = ({
         </>
       )}
       <S.Profile>
-        {profileImage ? <ProfileImage image={profileImage} /> : <DefaultProfile />}
+        {profileImage ? (
+          <ProfileImage image={profileImage} />
+        ) : (
+          <DefaultProfile />
+        )}
       </S.Profile>
       <S.StuInfo>
         <S.Name>

src/components/Common/molecules/NullApplicationItem/index.tsx

@@ -1,23 +1,17 @@
 import * as S from './style';
-import { CapIcon, CupIcon } from 'assets/svg';
-import { NullApplicationItemProps } from 'types';
 
-const NullApplicstionItem = ({ type }: NullApplicationItemProps) => {
+interface Props {
+  message: string;
+  subMessage: string;
+  Icon: () => JSX.Element;
+}
+
+const NullApplicstionItem = ({ Icon, message, subMessage }: Props) => {
   return (
     <S.NullApplicstionWrapper>
-      {type === 'selfstudy' ? (
-        <>
-          <CapIcon />
-          <span>자습 신청한 인원이 없습니다..</span>
-          <p>홈에서 자습 신청을 해보세요!</p>
-        </>
-      ) : (
-        <>
-          <CupIcon />
-          <span>안마의자를 신청한 인원이 없습니다..</span>
-          <p>홈에서 안마의자 신청을 해보세요!</p>
-        </>
-      )}
+      <Icon />
+      <span>{message}</span>
+      <p>{subMessage}</p>
     </S.NullApplicstionWrapper>
   );
 };

src/components/Common/molecules/SearchFilter/index.tsx

@@ -1,26 +1,29 @@
-import { FilterMenuData } from 'assets/data/FilterMenuData';
-import AuthInput from 'components/Common/atoms/Inputs/AuthInput';
-import FilterItem from 'components/Common/atoms/Items/FilterItem';
-import { ResponseOverayWrapper } from 'components/Common/atoms/Wrappers/ModalOverayWrapper/style';
-import { useDidMountEffect } from 'hooks/useDidMountEffect';
 import UseToggleTheme from 'hooks/useToggleTheme';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import AuthInput from 'components/Common/atoms/Inputs/AuthInput';
+import FilterItem from 'components/Common/atoms/Items/FilterItem';
+import { ResponseOverayWrapper } from 'components/Common/atoms/Wrappers/ModalOverayWrapper/style';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { filterModal, selfStudyLookup } from 'recoilAtoms/recoilAtomContainer';
-import { SearchFilterTypeProps, SignupForm } from 'types';
+import { useDidMountEffect } from 'hooks/useDidMountEffect';
+import { SearchFilterTypeProps } from 'types';
+import { FilterMenuData } from 'assets/data/FilterMenuData';
 import { isNotNull } from 'utils/isNotNull';
 import * as S from './style';
 
 const SearchFilter = ({ filterType, onSubmit }: SearchFilterTypeProps) => {
   const [theme] = UseToggleTheme();
   const [filterState, setFilterState] = useState<(string | undefined)[]>(
-    Array.from({ length: 5 }, () => undefined)
+    Array.from({ length: 5 }, () => undefined),
   );
   const [modalState, setModalState] = useRecoilState(filterModal);
   const setLookUp = useSetRecoilState(selfStudyLookup);
-  const { register, setValue, watch, resetField } = useForm<SignupForm>({
-    defaultValues: { name: '' },
+
+  const { register, setValue, watch, resetField } = useForm({
+    defaultValues: {
+      name: '',
+    },
   });
 
   const handelResetClick = () => {
@@ -41,8 +44,8 @@ const SearchFilter = ({ filterType, onSubmit }: SearchFilterTypeProps) => {
     value === '남자'
       ? (value = 'MAN')
       : value === '여자'
-      ? (value = 'WOMAN')
-      : '';
+        ? (value = 'WOMAN')
+        : '';
     const copy = [...filterState];
     copy[idx] = filterState[idx] === value ? undefined : value;
     setFilterState(copy);
@@ -72,17 +75,20 @@ const SearchFilter = ({ filterType, onSubmit }: SearchFilterTypeProps) => {
           />
         </S.SearchBox>
         <S.SelectWrapper>
-          {FilterMenuData.map((i, idx) => (
-            <S.Select key={idx} isShow={i.show.includes(filterType)}>
-              <span>{i.filterTitle}</span>
+          {FilterMenuData.map((filterItem, idx) => (
+            <S.Select
+              key={filterItem.filterTitle}
+              isShow={filterItem.show.includes(filterType)}
+            >
+              <span>{filterItem.filterTitle}</span>
               <S.SelectBox darkmode={theme}>
-                {i.filterList.map((j, ind) => (
+                {filterItem.filterList.map((list) => (
                   <FilterItem
-                    key={ind}
-                    name={i.filterTitle}
-                    item={j}
+                    key={list}
+                    item={list}
+                    name={filterItem.filterTitle}
                     value={filterState[idx]}
-                    onClick={() => filterChange(idx, j)}
+                    onClick={() => filterChange(idx, list)}
                   />
                 ))}
               </S.SelectBox>
@@ -93,7 +99,7 @@ const SearchFilter = ({ filterType, onSubmit }: SearchFilterTypeProps) => {
           onClick={() => setModalState(false)}
           modalState={modalState}
         >
-          <span>닫기</span>
+          닫기
         </S.ApplyBtn>
       </S.FilterWrapper>
       <ResponseOverayWrapper