Merge pull request #69 from ISTTP/develop

Fix: lazy loading 관련 에러 해결

apps/client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, lazy } from 'react';
+import React, { useEffect, lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import './App.css';
 import { requestPermission } from '#firebase';
@@ -46,17 +46,21 @@ const App = () => {
     requestPermission();
   }, []);
   return (
-    <Routes>
-      <Route path="/" element={<Login />} />
-      <Route path="/signup" element={<SignUp />} />
-      <Route path="/mypage" element={<MyPage />} />
-      <Route path="/auth/kakao" element={<KakaoLogin />} />
-      <Route path="/auth/google" element={<GoogleLogin />} />
-      <Route path="/cake/:ownerId" element={<Cake />} />
-      <Route path="/cake/create/:ownerId" element={<CreateCake />} />
-      <Route path="/letter/choose/:ownerId" element={<ChooseCandle />} />
-      <Route path="/letter/create/:ownerId" element={<CreateLetter />} />
-    </Routes>
+    <Suspense fallback={<div>Loading...</div>}>
+      <Routes>
+
+        <Route path="/" element={<Login />} />
+        <Route path="/signup" element={<SignUp />} />
+        <Route path="/mypage" element={<MyPage />} />
+        <Route path="/auth/kakao" element={<KakaoLogin />} />
+        <Route path="/auth/google" element={<GoogleLogin />} />
+        <Route path="/cake/:ownerId" element={<Cake />} />
+        <Route path="/cake/create/:ownerId" element={<CreateCake />} />
+        <Route path="/letter/choose/:ownerId" element={<ChooseCandle />} />
+        <Route path="/letter/create/:ownerId" element={<CreateLetter />} />
+
+      </Routes>
+    </Suspense>
   );
 };
 

apps/client/src/assets/icons/KakaoLogoIcon.tsx

@@ -4,7 +4,7 @@ import type { SVGProps } from 'react';
 
 const KakaoLogoIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 256 256"><path fill="#FFE812" d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z" /><path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z" /><path fill="#FFE812" d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z" /></svg>
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#FFE812" d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z" /><path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z" /><path fill="#FFE812" d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z" /></svg>
   )
 };
 

apps/client/src/components/__tests__/Button.test.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import Button from "../Button";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Button from '#components/common/Button.tsx';
 
 test('카카오 버튼 렌더링', () => {
   render(
     <Button
       type="kakao"
       label="Kakao로 시작하기"
-      onClick={() => console.log("카카오")}
+      onClick={() => console.log('카카오')}
     />,
   );
   const buttonElement = screen.getByText(/Kakao로 시작하기/i);
@@ -20,7 +20,7 @@ test('구글 버튼 렌더링', () => {
     <Button
       type="google"
       label="Google로 시작하기"
-      onClick={() => console.log("구글")}
+      onClick={() => console.log('구글')}
     />,
   );
   const buttonElement = screen.getByText(/Google로 시작하기/i);

apps/client/src/components/cake/CakeInfo.tsx

@@ -11,7 +11,7 @@ import {
   getCakeNoDataRes,
 } from '@isttp/schemas/all';
 import Pagenation from '#components/cake/Pagenation.tsx';
-import RenderCake from '#components/RenderCake.tsx';
+import RenderCake from '#components/cake/RenderCake.tsx';
 import ReadLetter from '#components/letter/ReadLetter.tsx';
 
 interface CakeInfoProps {

apps/client/src/components/GridInfo.tsx → apps/client/src/components/cake/GridInfo.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, CSSProperties, useRef } from 'react';
 import axiosInstance from '#apis/axios.ts';
 import { useParams } from 'react-router-dom';
-import * as G from '#components/GridStyle.tsx';
+import * as G from '#components/cake/GridStyle.tsx';
 import { FixedSizeGrid as Grid } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
-import ReadLetter from './letter/ReadLetter';
-import YearDropdown from './YearDropDown';
+import ReadLetter from '../letter/ReadLetter';
+import YearDropdown from '../common/YearDropDown';
 import {
   getCakeDataRes,
   getCakeLettersRes,

apps/client/src/components/cake/MyCake.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Toggle from '#components/Toggle.tsx';
-import GridInfo from '#components/GridInfo.tsx';
+import Toggle from '#components/common/Toggle.tsx';
+import GridInfo from '#components/cake/GridInfo.tsx';
 import CakeInfo from '#components/cake/CakeInfo.tsx';
-import Button from '#components/Button.tsx';
+import Button from '#components/common/Button.tsx';
 import ShareUrlModal from '#components/modal/ShareUrlModal.tsx';
 import CakeHeader from '#components/cake/CakeHeader.tsx';
-import InnerWrapper from '#components/InnerWrapper.tsx';
+import InnerWrapper from '#components/layout/InnerWrapper.tsx';
 import { CakeUserTypeResponse } from '@isttp/types/all';
 
 type MyCakeProps = {

apps/client/src/components/cake/SharedCake.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import axiosInstance from '#apis/axios.ts';
 import CakeInfo from '#components/cake/CakeInfo.tsx';
-import Button from '#components/Button.tsx';
+import Button from '#components/common/Button.tsx';
 import Modal from '#components/modal/Modal.tsx';
 import LoginModal from '#components/modal/LoginModal.tsx';
 import CakeHeader from '#components/cake/CakeHeader.tsx';
 import { user } from '@isttp/schemas/all';
 import { CakeUserTypeResponse } from '@isttp/types/all';
 import { AxiosError } from 'axios';
-import InnerWrapper from '#components/InnerWrapper.tsx';
+import InnerWrapper from '#components/layout/InnerWrapper.tsx';
 
 interface MyCakeProps {
   ownerId: string;

apps/client/src/components/modal/LoginModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Modal from '#components/modal/Modal.tsx';
-import Button from '#components/Button.tsx';
+import Button from '#components/common/Button.tsx';
 
 const LoginModal = ({
   open,

apps/client/src/components/modal/ShareUrlModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import Modal from '#components/modal/Modal.tsx';
-import Button from '#components/Button.tsx';
+import Button from '#components/common/Button.tsx';
 
 import { KakaoLogoIcon, FacebookLogoIcon, LinkIcon } from '#icons';
 

apps/client/src/pages/Cake.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Wrapper from '#components/Wrapper.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
 import axiosInstance from '#apis/axios.ts';
 import MyCake from '#components/cake/MyCake.tsx';
 import SharedCake from '#components/cake/SharedCake.tsx';
-import Loading from '#components/Loading.tsx';
+import Loading from '#components/common/Loading.tsx';
 import { AxiosError } from 'axios';
 import { getCakeRes, getUserMeRes } from '@isttp/schemas/all';
 import { useParams } from 'react-router-dom';

apps/client/src/pages/ChooseCandle.tsx

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import axiosInstance from '#apis/axios.ts';
 import styled from 'styled-components';
-import Wrapper from '#components/Wrapper.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
 import LoginModal from '#components/modal/LoginModal.tsx';
 import { AxiosError } from 'axios';
 import { CandleType, CandleResponseType, user } from '@isttp/schemas/all';
 import Modal from '#components/modal/Modal.tsx';
-import Button from '#components/Button.tsx';
+import Button from '#components/common/Button.tsx';
 
 const CandleContainer = styled.div`
   display: grid;

apps/client/src/pages/CreateCake.tsx

@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { AxiosError } from 'axios';
 import axiosInstance from '#apis/axios.ts';
-import Button from '#components/Button.tsx';
-import Wrapper from '#components/Wrapper.tsx';
-import RenderCake from '#components/RenderCake.tsx';
-import ColorSelector from '#components/ColorSelector.tsx';
+import Button from '#components/common/Button.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import RenderCake from '#components/cake/RenderCake.tsx';
+import ColorSelector from '#components/cake/ColorSelector.tsx';
 
 import { CakeColorType } from '@isttp/types/all';
 

apps/client/src/pages/CreateLetter.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import Wrapper from '#components/Wrapper.tsx';
-import Button from '#components/Button.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import Button from '#components/common/Button.tsx';
 import axiosInstance from '#apis/axios.ts';
 import { AxiosError } from 'axios';
 import {
@@ -10,7 +10,7 @@ import {
   LetterResponseType,
 } from '@isttp/schemas/all';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import InnerWrapper from '#components/InnerWrapper.tsx';
+import InnerWrapper from '#components/layout/InnerWrapper.tsx';
 
 async function fetchUserInfo() {
   try {

apps/client/src/pages/GoogleLogin.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axiosInstance from '#apis/axios.ts';
-import Wrapper from '#components/Wrapper.tsx';
-import Loading from '#components/Loading.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import Loading from '#components/common/Loading.tsx';
 
 type ResponseType = {
   success: boolean;

apps/client/src/pages/KakaoLogin.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axiosInstance from '#apis/axios.ts';
-import Wrapper from '#components/Wrapper.tsx';
-import Loading from '#components/Loading.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import Loading from '#components/common/Loading.tsx';
 
 type ResponseType = {
   success: boolean;

apps/client/src/pages/Login.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Link } from 'react-router-dom';
-import Wrapper from '#components/Wrapper.tsx';
-import Button from '#components/Button.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import Button from '#components/common/Button.tsx';
 import axiosInstance from '#apis/axios.ts';
 import { AxiosError } from 'axios';
 

apps/client/src/pages/MyPage.tsx

@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { user } from '@isttp/schemas/all';
 import { HomeIcon, MessengerIcon } from '#icons';
 import axiosInstance from '#apis/axios.ts';
-import Wrapper from '#components/Wrapper.tsx';
-import InnerWrapper from '#components/InnerWrapper.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import InnerWrapper from '#components/layout/InnerWrapper.tsx';
 import * as S from '#styles/MyPageStyle.ts';
 
 const MyPage = () => {

apps/client/src/pages/SignUp.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
-import Wrapper from '#components/Wrapper.tsx';
-import Button from '#components/Button.tsx';
+import Wrapper from '#components/layout/Wrapper.tsx';
+import Button from '#components/common/Button.tsx';
 import axiosInstance from '#apis/axios.ts';
 import { AxiosError } from 'axios';
 import { getFcmToken } from '#firebase';

apps/client/src/test/example.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import Button from '#components/Button.tsx';
+import Button from '#components/common/Button.tsx';
 
 test('카카오 버튼 렌더링', () => {
   render(

package.json

@@ -6,7 +6,6 @@
     "build": "turbo run build",
     "clean": "turbo run clean",
     "dev": "turbo run dev",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint": "turbo run lint",
     "test": "turbo run test",
     "test:e2e": "turbo run test:e2e",

packages/eslint-config/base.js

@@ -2,7 +2,11 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended",
+    //"plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:@typescript-eslint/strict-type-checked",
+    "plugin:sonarjs/recommended-legacy"
   ],
   parser: "@typescript-eslint/parser",
   rules: {

packages/eslint-config/package.json

@@ -19,6 +19,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-sonarjs": "1.0.4-alpha.2",
     "typescript": "^5.5.2"
   }
 }