prettier, eslint rule 반영 (#1051)

Jaymyong66 · web-flow · commit d08b9a463b2f · 2025-03-04T16:27:00.000+09:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -18,7 +18,14 @@
     "plugin:import/warnings",
     "plugin:import/typescript"
   ],
-  "ignorePatterns": ["dist", "*.config.ts", "*.common.js", "*.prod.js", "*.dev.js", "*.polyfills.js"],
+  "ignorePatterns": [
+    "dist",
+    "*.config.ts",
+    "*.common.js",
+    "*.prod.js",
+    "*.dev.js",
+    "*.polyfills.js"
+  ],
   "parser": "@typescript-eslint/parser",
   "plugins": ["react-refresh", "react", "import", "@typescript-eslint"],
   "settings": {
@@ -64,7 +71,11 @@
     "import/order": [
       "error",
       {
-        "groups": [["builtin", "external"], ["internal"], ["parent", "sibling", "index", "type"]],
+        "groups": [
+          ["builtin", "external"],
+          ["internal"],
+          ["parent", "sibling", "index", "type"]
+        ],
         "warnOnUnassignedImports": true,
         "alphabetize": { "order": "asc" },
         "newlines-between": "always",
@@ -113,7 +124,10 @@
         "tsx": "never"
       }
     ],
-    "react-refresh/only-export-components": ["error", { "allowConstantExport": false }],
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": false }
+    ],
     "react/no-unknown-property": ["error", { "ignore": ["css"] }],
     "import/no-default-export": "error"
   },
diff --git a/.github/workflows/frontend_ci.yml b/.github/workflows/frontend_ci.yml
@@ -32,6 +32,10 @@ jobs:
         run: pnpm run tsc
         working-directory: ${{ env.frontend-directory }}
 
+      - name: 린트 체크 실행
+        run: pnpm run lint
+        working-directory: ${{ env.frontend-directory }}
+
       - name: 테스트 실행
         run: pnpm run test
         working-directory: ${{ env.frontend-directory }}
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,9 @@
     "build:report": "webpack-bundle-analyzer --port 8888 dist/bundle-stats.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint:style": "stylelint '**/style.ts' --fix"
+    "lint:style": "stylelint '**/style.ts' --fix",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix"
   },
   "keywords": [],
   "author": "",
diff --git a/frontend/src/api/categories.ts b/frontend/src/api/categories.ts
@@ -14,9 +14,13 @@ export const getCategoryList = async (memberId: number) => {
 };
 
 export const postCategory = async (newCategory: Omit<Category, 'id'>) => {
-  const response = await apiClient.post(`${END_POINTS.CATEGORIES}`, newCategory);
+  const response = await apiClient.post(
+    `${END_POINTS.CATEGORIES}`,
+    newCategory,
+  );
 
   return await response.json();
 };
 
-export const editCategory = async (body: CategoryEditRequest) => await apiClient.put(`${END_POINTS.CATEGORIES}`, body);
+export const editCategory = async (body: CategoryEditRequest) =>
+  await apiClient.put(`${END_POINTS.CATEGORIES}`, body);
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
@@ -8,7 +8,13 @@ export {
   editTemplate,
   deleteTemplate,
 } from './templates';
-export { postSignup, postLogin, postLogout, getLoginState, checkName } from './authentication';
+export {
+  postSignup,
+  postLogin,
+  postLogout,
+  getLoginState,
+  checkName,
+} from './authentication';
 export { getCategoryList, postCategory, editCategory } from './categories';
 export { getTagList } from './tags';
 export { postLike, deleteLike } from './like';
diff --git a/frontend/src/hooks/category/useCategoryNameValidation.ts b/frontend/src/hooks/category/useCategoryNameValidation.ts
@@ -4,7 +4,10 @@ import type { Category } from '@/types';
 
 const INVALID_NAMES = ['전체보기', '카테고리 없음', ''];
 
-export const useCategoryNameValidation = (categoryList: Category[], editedCategoryList: Category[]) => {
+export const useCategoryNameValidation = (
+  categoryList: Category[],
+  editedCategoryList: Category[],
+) => {
   const [invalidIds, setInvalidIds] = useState<number[]>([]);
 
   useEffect(() => {
@@ -28,7 +31,9 @@ export const useCategoryNameValidation = (categoryList: Category[], editedCatego
     });
 
     editedCategoryList.forEach(({ id, name }) => {
-      const originalName = categoryList.find((category) => category.id === id)?.name;
+      const originalName = categoryList.find(
+        (category) => category.id === id,
+      )?.name;
 
       if (INVALID_NAMES.includes(name)) {
         invalidNames.add(id);
diff --git a/frontend/src/pages/LandingPage/LandingPage.tsx b/frontend/src/pages/LandingPage/LandingPage.tsx
@@ -25,9 +25,18 @@ const LandingPage = () => {
   const { isLogin } = useAuth();
 
   const EXPLAIN = [
-    { title: 'ZAP하게 저장', description: '자주 쓰는 나의 코드를 간편하게 저장하세요' },
-    { title: 'ZAP하게 관리', description: '직관적인 분류 시스템으로 체계적으로 관리하세요' },
-    { title: 'ZAP하게 검색', description: '필요한 나의 코드를 빠르게 찾아 사용하세요' },
+    {
+      title: 'ZAP하게 저장',
+      description: '자주 쓰는 나의 코드를 간편하게 저장하세요',
+    },
+    {
+      title: 'ZAP하게 관리',
+      description: '직관적인 분류 시스템으로 체계적으로 관리하세요',
+    },
+    {
+      title: 'ZAP하게 검색',
+      description: '필요한 나의 코드를 빠르게 찾아 사용하세요',
+    },
   ];
 
   return (
@@ -59,7 +68,9 @@ const LandingPage = () => {
               <CheckCircleIcon width={ICON_SIZE.LARGE} />
               <Text.Large color='black'>{el.title}</Text.Large>
             </Flex>
-            <Text.Medium color={theme.color.light.secondary_600}>{el.description}</Text.Medium>
+            <Text.Medium color={theme.color.light.secondary_600}>
+              {el.description}
+            </Text.Medium>
           </S.Card>
         ))}
       </S.CardSection>
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.style.ts b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.style.ts
@@ -9,7 +9,11 @@ export const EditCategoryItemList = styled.div`
   width: 100%;
 `;
 
-export const EditCategoryItem = styled.div<{ hasError?: boolean; isButton?: boolean; disabled?: boolean }>`
+export const EditCategoryItem = styled.div<{
+  hasError?: boolean;
+  isButton?: boolean;
+  disabled?: boolean;
+}>`
   cursor: move;
 
   display: flex;
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.tsx
@@ -12,7 +12,12 @@ interface CategoryEditModalProps {
   onDeleteCategory: (deletedIds: number[]) => void;
 }
 
-const CategoryEditModal = ({ isOpen, toggleModal, categoryList, onDeleteCategory }: CategoryEditModalProps) => {
+const CategoryEditModal = ({
+  isOpen,
+  toggleModal,
+  categoryList,
+  onDeleteCategory,
+}: CategoryEditModalProps) => {
   const {
     editedCategoryList,
     deleteCategoryIds,
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryItems.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryItems.tsx
@@ -34,17 +34,25 @@ const CategoryItems = ({
   onNameInputChange,
   onNameInputBlur,
 }: CategoryItemsProps) => {
-  const orderedCategoryList = [...editedCategoryList].sort((a, b) => a.ordinal - b.ordinal);
+  const orderedCategoryList = [...editedCategoryList].sort(
+    (a, b) => a.ordinal - b.ordinal,
+  );
 
   const dragItem = useRef<number | null>(null);
   const dragOverItem = useRef<number | null>(null);
 
-  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, position: number) => {
+  const handleDragStart = (
+    e: React.DragEvent<HTMLDivElement>,
+    position: number,
+  ) => {
     dragItem.current = position;
     e.currentTarget.style.opacity = '0.5';
   };
 
-  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>, position: number) => {
+  const handleDragEnter = (
+    e: React.DragEvent<HTMLDivElement>,
+    position: number,
+  ) => {
     dragOverItem.current = position;
     e.currentTarget.style.backgroundColor = theme.color.dark.white;
   };
@@ -57,15 +65,23 @@ const CategoryItems = ({
     e.currentTarget.style.opacity = '1';
     e.currentTarget.style.backgroundColor = '';
 
-    const reorderedCategoryList = getReorderedCategoryList(orderedCategoryList, dragItem.current, dragOverItem.current);
+    const reorderedCategoryList = getReorderedCategoryList(
+      orderedCategoryList,
+      dragItem.current,
+      dragOverItem.current,
+    );
 
     handleOrdinalChange(reorderedCategoryList);
 
     dragItem.current = null;
     dragOverItem.current = null;
   };
 
-  const getReorderedCategoryList = (categoryList: Category[], startIndex: number, endIndex: number) => {
+  const getReorderedCategoryList = (
+    categoryList: Category[],
+    startIndex: number,
+    endIndex: number,
+  ) => {
     const copyListItems = [...categoryList];
     const dragItem = copyListItems[startIndex];
 
@@ -110,7 +126,10 @@ const CategoryItems = ({
           ) : (
             <ExistingCategoryItem
               id={id}
-              name={editedCategoryList.find((category) => category.id === id)?.name ?? name}
+              name={
+                editedCategoryList.find((category) => category.id === id)
+                  ?.name ?? name
+              }
               isEditing={editingCategoryId === id}
               isDeleted={deleteCategoryIds.includes(id)}
               onChange={(e) => onNameInputChange(id, e.target.value)}
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryName.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryName.tsx
@@ -6,7 +6,10 @@ import { theme } from '@/style/theme';
 
 const CategoryName = ({ children }: PropsWithChildren) => (
   <Flex align='center' width='100%' height='2.5rem'>
-    <DragIcon color={theme.color.light.secondary_400} css={{ marginRight: '0.5rem' }} />
+    <DragIcon
+      color={theme.color.light.secondary_400}
+      css={{ marginRight: '0.5rem' }}
+    />
     {children}
   </Flex>
 );
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryNameInput.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryNameInput.tsx
@@ -10,8 +10,17 @@ interface CategoryNameInputProps {
   onKeyDown: (e: React.KeyboardEvent) => void;
 }
 
-const CategoryNameInput = ({ value, onChange, onBlur, onKeyDown }: CategoryNameInputProps) => (
-  <Input size='large' variant='text' style={{ width: '100%', height: '2.375rem' }}>
+const CategoryNameInput = ({
+  value,
+  onChange,
+  onBlur,
+  onKeyDown,
+}: CategoryNameInputProps) => (
+  <Input
+    size='large'
+    variant='text'
+    style={{ width: '100%', height: '2.375rem' }}
+  >
     <Input.TextField
       type='text'
       value={value}
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/ExistingCategoryItem.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/ExistingCategoryItem.tsx
@@ -34,7 +34,10 @@ const ExistingCategoryItem = ({
     {isDeleted ? (
       <>
         <CategoryName>
-          <Text.Medium color={theme.color.light.analogous_primary_400} textDecoration='line-through'>
+          <Text.Medium
+            color={theme.color.light.analogous_primary_400}
+            textDecoration='line-through'
+          >
             {name}
           </Text.Medium>
         </CategoryName>
@@ -44,14 +47,24 @@ const ExistingCategoryItem = ({
       <>
         <CategoryName>
           {isEditing ? (
-            <CategoryNameInput value={name} onChange={onChange} onBlur={onBlur} onKeyDown={onKeyDown} />
+            <CategoryNameInput
+              value={name}
+              onChange={onChange}
+              onBlur={onBlur}
+              onKeyDown={onKeyDown}
+            />
           ) : (
             <Text.Medium color={theme.color.light.secondary_500} weight='bold'>
               {name}
             </Text.Medium>
           )}
         </CategoryName>
-        <IconButtons edit delete onEditClick={() => onEditClick(id)} onDeleteClick={() => onDeleteClick(id)} />
+        <IconButtons
+          edit
+          delete
+          onEditClick={() => onEditClick(id)}
+          onDeleteClick={() => onDeleteClick(id)}
+        />
       </>
     )}
   </>
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/IconButtons.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/IconButtons.tsx
@@ -12,7 +12,14 @@ interface IconButtonsProps {
   delete?: boolean;
 }
 
-const IconButtons = ({ onRestoreClick, onEditClick, onDeleteClick, restore, edit, delete: del }: IconButtonsProps) => (
+const IconButtons = ({
+  onRestoreClick,
+  onEditClick,
+  onDeleteClick,
+  restore,
+  edit,
+  delete: del,
+}: IconButtonsProps) => (
   <S.IconButtonContainer>
     {restore && (
       <S.IconButtonWrapper onClick={onRestoreClick}>
@@ -21,12 +28,20 @@ const IconButtons = ({ onRestoreClick, onEditClick, onDeleteClick, restore, edit
     )}
     {edit && (
       <S.IconButtonWrapper onClick={onEditClick}>
-        <PencilIcon width={ICON_SIZE.MEDIUM_LARGE} height={ICON_SIZE.MEDIUM_LARGE} aria-label='카테고리 이름 변경' />
+        <PencilIcon
+          width={ICON_SIZE.MEDIUM_LARGE}
+          height={ICON_SIZE.MEDIUM_LARGE}
+          aria-label='카테고리 이름 변경'
+        />
       </S.IconButtonWrapper>
     )}
     {del && (
       <S.IconButtonWrapper onClick={onDeleteClick}>
-        <TrashcanIcon width={ICON_SIZE.MEDIUM_LARGE} height={ICON_SIZE.MEDIUM_LARGE} aria-label='카테고리 삭제' />
+        <TrashcanIcon
+          width={ICON_SIZE.MEDIUM_LARGE}
+          height={ICON_SIZE.MEDIUM_LARGE}
+          aria-label='카테고리 삭제'
+        />
       </S.IconButtonWrapper>
     )}
   </S.IconButtonContainer>
diff --git a/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/NewCategoryItem.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/NewCategoryItem.tsx
@@ -29,14 +29,24 @@ const NewCategoryItem = ({
   <>
     <CategoryName>
       {isEditing ? (
-        <CategoryNameInput value={name} onChange={onChange} onBlur={onBlur} onKeyDown={onKeyDown} />
+        <CategoryNameInput
+          value={name}
+          onChange={onChange}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+        />
       ) : (
         <Text.Medium color={theme.color.light.secondary_500} weight='bold'>
           {name}
         </Text.Medium>
       )}
     </CategoryName>
-    <IconButtons edit delete onEditClick={() => onEditClick(id)} onDeleteClick={() => onDeleteClick(id)} />
+    <IconButtons
+      edit
+      delete
+      onEditClick={() => onEditClick(id)}
+      onDeleteClick={() => onDeleteClick(id)}
+    />
   </>
 );
 
diff --git a/frontend/src/pages/MemberTemplatePage/hooks/useCategoryEditModal.ts b/frontend/src/pages/MemberTemplatePage/hooks/useCategoryEditModal.ts
diff --git a/package.json b/package.json
