Refactor: type import, unused import 제거 eslint 설정 등 리팩토링 (#152)

* chore: onSuccess 제거

* refactor: 불필요한 h-full 제거

* chore: onSuccess 제거

* fix: sentry 설정을 instrumentation에서 수행

ref : getsentry/sentry-javascript#12044

* feat: GTM 추가

ref : https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries

* refactor: 불필요한 속성 및 컴포넌트 제거

* docs: 주석으로 코드에 대한 설명 추가

* refactor: InitSentryUserInfo 컴포넌트 이동

* feat: eslint-plugin-unused-imports 설치 및 세팅

* refactor: 네이밍 앞에 -Memo-` prefix로 통일

* refactor: Header를 주로 사용하는 측인 layout/[lng]에 위치

* refactor: 불필요한 파일 제거

* refactor: 불필요한 함수 래퍼 제거 및 변수명 수정

* refactor: handleRequestAppend 함수 분리

* refactor: `groupKey` 기본값 설정

* refactor: 불필요한 단언문(!) 제거

* chore: sentry의 silent옵션 제거

* refactor: `ExtensionDialog` 이동

* fix: 확장 프로그램이 설치된 경우에만 가이드 실행

* refactor: ExtensionInstallCheckDialog 분리

* feat: ExtensionInstallCheckDialog 동적 import

* refactor: 기명 함수로 수정

* chore: placeholder 시간 최소화

* refactor: 변수명, 함수명을 직관적으로 수정

* refactor: queries와 mutations 분리

* feat: 공통 훅을 shared폴더로 묶기

* refactor: 순서 변경

* refactor: 불필요한 훅 제거

* refactor: `useKeyboardBind`를 isMetaKey도 받을 수 있도록 확장

* fix: 메타키 이슈 해결

* chore: type import

* refactor: 사용하지 않는 타입 제거

* refactor: 컨벤션에 맞는 폴더로 이동

* refactor: 폴더 구조 컨벤션에 맞게 수정

* refactor: 불필요한 컴포넌트 depth 제거

* refactor: Header를 공통 컴포넌트로 이동

* refactor: container에서 section 네이밍으로 통일

* refactor: 컴포넌트 파일을 재 역할에 맞는 폴더로 이동

* refactor: server.ts와 client.ts에 `util`을 앞에 붙여주기

* refactor: 불필요한 import 및 컴포넌트 제거

* chore: type imports eslint rules 추가

* style: type import eslint 적용

* chore: web의 eslintl 제거

* fix: eslint-import-resolver-typescript로 eslint typescript resolve

ref : import-js/eslint-plugin-import#2969 (comment)

* fix: fix the lint

* fix: 잘못된 import경로 수정

Author: guesung

.eslintrc

@@ -21,26 +21,34 @@
     "sourceType": "module",
   },
   "plugins": [
+    "unused-imports",
     "prettier",
     "simple-import-sort",
     "react",
     "@typescript-eslint",
     "react-hooks",
     "import",
     "jsx-a11y",
-    "turbo",
   ],
   "settings": {
     "react": {
       "version": "detect",
     },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json",
+      },
+    },
   },
   "rules": {
+    "@typescript-eslint/consistent-type-imports": "error",
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
     "react/prop-types": "off",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
+    "unused-imports/no-unused-imports": "error",
   },
   "globals": {
     "chrome": "readonly",

package.json

@@ -85,12 +85,14 @@
     "eslint": "8.57.0",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.1.5",
     "lint-staged": "^15.2.7",
     "overlay-kit": "^1.4.1",

packages/shared/src/hooks/common/index.ts

@@ -0,0 +1,7 @@
+export { default as useDidMount } from './useDidMount';
+export { default as useError } from './useError';
+export { default as useFetch } from './useFetch';
+export { default as useKeyboardBind } from './useKeyboardBind';
+export { default as useThrottle } from './useThrottle';
+export { default as useUserPreferDarkMode } from './useUserPreferDarkMode';
+export { default as useDebounce } from './useDebounce';

packages/shared/src/hooks/useDebounce.ts renamed to packages/shared/src/hooks/common/useDebounce.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+type KeyboardEventKey = 'Backspace' | 'Escape' | 's';
+
+interface UseKeyboardBindProps {
+  key: KeyboardEventKey;
+  callback: () => void;
+  isMetaKey?: boolean;
+}
+
+export default function useKeyboardBind({ key, callback, isMetaKey = false }: UseKeyboardBindProps) {
+  useEffect(
+    function keyboardBind() {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        const metaKey = isMetaKey ? event.metaKey : true;
+        if (metaKey && event.key === key) {
+          event.preventDefault();
+
+          callback();
+        }
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    },
+    [key, callback],
+  );
+}

packages/shared/src/hooks/useDidMount.ts renamed to packages/shared/src/hooks/common/useDidMount.ts

@@ -1,10 +1,3 @@
 export * from './supabase';
-
-export { default as useDidMount } from './useDidMount';
-export { default as useError } from './useError';
-export { default as useFetch } from './useFetch';
-export { default as useKeyboardBind } from './useKeyboardBind';
-export { default as useThrottle } from './useThrottle';
-export { default as useUserPreferDarkMode } from './useUserPreferDarkMode';
-export { default as useDebounce } from './useDebounce';
-export { useRAF } from './useRAF';
+export * from './common';
+export * from './extension';

packages/shared/src/hooks/useError.ts renamed to packages/shared/src/hooks/common/useError.ts

@@ -1,14 +1,2 @@
-export { default as useCategoryDeleteMutation } from './useCategoryDeleteMutation';
-export { default as useCategoryPatchMutation } from './useCategoryPatchMutation';
-export { default as useCategoryPostMutation } from './useCategoryPostMutation';
-export { default as useCategoryQuery } from './useCategoryQuery';
-export { default as useCategoryUpsertMutation } from './useCategoryUpsertMutation';
-export { default as useDeleteMemosMutation } from './useDeleteMemosMutation';
-export { default as useMemoPatchMutation } from './useMemoPatchMutation';
-export { default as useMemoPostMutation } from './useMemoPostMutation';
-export { default as useMemoQuery } from './useMemoQuery';
-export { default as useMemosQuery } from './useMemosQuery';
-export { default as useMemosUpsertMutation } from './useMemosUpsertMutation';
-export { default as useSupabaseUser } from './useSupabaseUser';
-export { default as useSignoutMutation } from './useSignoutMutation';
-export { default as useFeedbackMutation } from './useFeedbackMutation';
+export * from './queries';
+export * from './mutations';

packages/shared/src/hooks/useFetch.ts renamed to packages/shared/src/hooks/common/useFetch.ts

@@ -0,0 +1,10 @@
+export { default as useCategoryDeleteMutation } from './useCategoryDeleteMutation';
+export { default as useCategoryPatchMutation } from './useCategoryPatchMutation';
+export { default as useCategoryPostMutation } from './useCategoryPostMutation';
+export { default as useCategoryUpsertMutation } from './useCategoryUpsertMutation';
+export { default as useDeleteMemosMutation } from './useDeleteMemosMutation';
+export { default as useMemoPatchMutation } from './useMemoPatchMutation';
+export { default as useMemoPostMutation } from './useMemoPostMutation';
+export { default as useMemosUpsertMutation } from './useMemosUpsertMutation';
+export { default as useSignoutMutation } from './useSignoutMutation';
+export { default as useFeedbackMutation } from './useFeedbackMutation';

packages/shared/src/hooks/common/useKeyboardBind.ts

@@ -2,7 +2,7 @@ import { QUERY_KEY } from '@src/constants';
 import { CategoryService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 export default function useCategoryDeleteMutation() {
   const queryClient = useQueryClient();

packages/shared/src/hooks/useThrottle.ts renamed to packages/shared/src/hooks/common/useThrottle.ts

@@ -2,7 +2,7 @@ import { QUERY_KEY } from '@src/constants';
 import { CategoryService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 export default function useCategoryPatchMutation() {
   const queryClient = useQueryClient();

packages/shared/src/hooks/useUserPreferDarkMode.ts renamed to packages/shared/src/hooks/common/useUserPreferDarkMode.ts

@@ -2,7 +2,7 @@ import { QUERY_KEY } from '@src/constants';
 import { CategoryService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 export default function useCategoryPostMutation() {
   const queryClient = useQueryClient();

packages/shared/src/hooks/index.ts

@@ -2,7 +2,7 @@ import { QUERY_KEY } from '@src/constants';
 import { CategoryService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 export default function useCategoryUpsertMutation() {
   const queryClient = useQueryClient();

packages/shared/src/hooks/supabase/index.ts

@@ -3,7 +3,7 @@ import { MemoSupabaseResponse } from '@src/types';
 import { MemoService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 export default function useDeleteMemosMutation() {
   const queryClient = useQueryClient();

packages/shared/src/hooks/supabase/mutations/index.ts

@@ -1,7 +1,6 @@
 import { FeedbackService } from '@src/utils';
 import { useMutation } from '@tanstack/react-query';
-
-import useSupabaseFeedbackClientQuery from './useSupabaseFeedbackClientQuery';
+import { useSupabaseFeedbackClientQuery } from '../queries';
 
 export default function useFeedbackMutation() {
   const { data: supabaseClient } = useSupabaseFeedbackClientQuery();

packages/shared/src/hooks/supabase/useCategoryDeleteMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useCategoryDeleteMutation.ts

@@ -3,7 +3,7 @@ import { MemoRow, MemoSupabaseResponse, MemoTable } from '@src/types';
 import { MemoService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 type MutationVariables = {
   id: MemoRow['id'];

packages/shared/src/hooks/supabase/useCategoryPatchMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useCategoryPatchMutation.ts

@@ -3,7 +3,7 @@ import type { MemoSupabaseResponse, MemoTable } from '@src/types';
 import { MemoService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 type MutationError = Error;
 

packages/shared/src/hooks/supabase/useCategoryPostMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useCategoryPostMutation.ts

@@ -3,7 +3,7 @@ import { MemoRow, MemoSupabaseResponse, MemoTable } from '@src/types';
 import { MemoService } from '@src/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 
 type MutationVariables = MemoTable['Insert'][];
 type MutationData = Awaited<ReturnType<MemoService['upsertMemos']>>;

packages/shared/src/hooks/supabase/useCategoryUpsertMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useCategoryUpsertMutation.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import useSupabaseClientQuery from './useSupabaseClientQuery';
+import { useSupabaseClientQuery } from '../queries';
 import { AuthService } from '@src/utils/Supabase';
 
 export default function useSignoutMutation() {

packages/shared/src/hooks/supabase/useDeleteMemosMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useDeleteMemosMutation.ts

@@ -0,0 +1,6 @@
+export { default as useMemosQuery } from './useMemosQuery';
+export { default as useMemoQuery } from './useMemoQuery';
+export { default as useCategoryQuery } from './useCategoryQuery';
+export { default as useSupabaseUserQuery } from './useSupabaseUserQuery';
+export { default as useSupabaseClientQuery } from './useSupabaseClientQuery';
+export { default as useSupabaseFeedbackClientQuery } from './useSupabaseFeedbackClientQuery';

packages/shared/src/hooks/supabase/useFeedbackMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useFeedbackMutation.ts

@@ -5,7 +5,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 import useSupabaseClientQuery from './useSupabaseClientQuery';
 
-export default function useSupabaseUser() {
+export default function useSupabaseUserQuery() {
   const { data: supabaseClient } = useSupabaseClientQuery();
 
   const query = useSuspenseQuery<UserResponse, Error>({

packages/shared/src/hooks/supabase/useMemoPatchMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useMemoPatchMutation.ts

@@ -1,6 +1,5 @@
 import { StorageKeyType } from '@src/modules/chrome-storage';
-
-import { I18n } from '../../utils/extension/module/I18n';
+import { I18n } from '@src/utils/extension';
 
 export default class ChromeSyncStorage {
   static async get<T>(key: StorageKeyType): Promise<T> {

packages/shared/src/hooks/supabase/useMemoPostMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useMemoPostMutation.ts

@@ -192,7 +192,6 @@ export default class ExtensionBridge {
     try {
       chrome.runtime.sendMessage(EXTENSION.id, { type: BRIDGE_MESSAGE_TYPES.GET_EXTENSION_MANIFEST }, callbackFn);
     } catch (error) {
-      console.log('여기서 에러가 발생했습니다.');
       throw new ExtensionError('Failed to request extension manifest', ExtensionErrorCode.RUNTIME_ERROR, error);
     }
   }

packages/shared/src/hooks/supabase/useMemosUpsertMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useMemosUpsertMutation.ts

@@ -1,3 +1,3 @@
-export * from './constant';
 export { default as ExtensionBridge } from './ExtensionBridge';
+export * from './constant';
 export * from './type';

packages/shared/src/hooks/supabase/useSignoutMutation.ts renamed to packages/shared/src/hooks/supabase/mutations/useSignoutMutation.ts

@@ -1,4 +1,4 @@
-export * from './constant';
 export { default as LocalStorage } from './LocalStorage';
+export * from './constant';
 export * from './type';
 export * from './util';

packages/shared/src/hooks/supabase/queries/index.ts

@@ -20,5 +20,4 @@ export default withSentryConfig(nextConfig, {
   org: 'guesung',
   project: 'web-memo',
   authToken: CONFIG.sentryAuthToken,
-  silent: process.env.NODE_ENV === 'production',
 });

packages/shared/src/hooks/supabase/useCategoryQuery.ts renamed to packages/shared/src/hooks/supabase/queries/useCategoryQuery.ts

@@ -8,7 +8,8 @@
     "analyze": "ANALYZE=true next build",
     "start": "next start",
     "type-check": "tsc --noEmit",
-    "tsc-watch": "tsc-watch"
+    "tsc-watch": "tsc-watch",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
     "@egjs/react-infinitegrid": "^4.12.0",
@@ -31,7 +32,6 @@
     "accept-language": "^3.0.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "eslint": "9.9.1",
     "eslint-config-next": "14.2.7",
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^8.0.0",

packages/shared/src/hooks/supabase/useMemoQuery.ts renamed to packages/shared/src/hooks/supabase/queries/useMemoQuery.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { URL } from '@extension/shared/constants';
+import { checkLocalStorageTrue, setLocalStorageTrue } from '@extension/shared/modules/local-storage';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@src/components/ui';
+import { useGetExtensionManifest } from '@src/hooks';
+import type { LanguageType } from '@src/modules/i18n';
+import useTranslation from '@src/modules/i18n/util.client';
+import { useEffect, useState } from 'react';
+
+interface ExtensionInstallCheckDialogProps extends LanguageType {}
+export default function ExtensionInstallCheckDialog({ lng }: ExtensionInstallCheckDialogProps) {
+  const [open, setOpen] = useState(false);
+  const manifest = useGetExtensionManifest();
+
+  const { t } = useTranslation(lng);
+
+  const closeDialog = () => {
+    setOpen(false);
+  };
+
+  const handleOkClick = () => {
+    window.open(URL.chromeStore, '_blank', 'noopener,noreferrer');
+    closeDialog();
+  };
+
+  const handleCancelClick = () => {
+    setLocalStorageTrue('install');
+  };
+
+  useEffect(() => {
+    const isInstalled = typeof manifest === 'object';
+
+    if (!isInstalled && !checkLocalStorageTrue('install')) setOpen(true);
+  }, [manifest]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent onClose={closeDialog}>
+        <DialogHeader>
+          <DialogTitle>{t('dialogInstall.title')}</DialogTitle>
+          <DialogDescription>{t('dialogInstall.description')}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button onClick={handleCancelClick} variant="secondary">
+            {t('dialogInstall.cancel')}
+          </Button>
+          <Button onClick={handleOkClick}>{t('dialogInstall.ok')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}