Merge pull request #53 from f-lab-edu/refactoring

carousel 패키지 JIT 패키지로 설정 변경

Author: orbital0m0

apps/watcha_clone_coding/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@lukemorales/query-key-factory": "^1.3.4",
     "@tanstack/react-query": "^5.85.5",
+    "@watcha/carousel": "workspace:*",
     "axios": "^1.11.0",
     "core-js": "^3.45.0",
     "dayjs": "^1.11.18",
@@ -76,9 +77,8 @@
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^4.15.2",
     "webpack-merge": "^6.0.1",
-    "carousel": "workspace:*",
     "@watcha/tsconfig": "workspace:*",
     "@watcha/eslint-config": "workspace:*",
     "@watcha/prettier-config": "workspace:*"
   }
-}
+}

apps/watcha_clone_coding/src/components/AppErrorBoundary.tsx

@@ -44,7 +44,7 @@ class ErrorBoundaryInner extends React.Component<
   }
 }
 
-const AppErrorBoundary = ({ children }: AppErrorBoundaryProps): JSX.Element => {
+const AppErrorBoundary = ({ children }: AppErrorBoundaryProps): React.ReactElement => {
   const { reset } = useQueryErrorResetBoundary();
   return <ErrorBoundaryInner onReset={reset}>{children}</ErrorBoundaryInner>;
 };

apps/watcha_clone_coding/src/components/Button.tsx

@@ -1,11 +1,11 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
 
-type ButtonProps = {
-  children: ReactNode;
+type ButtonProps = React.PropsWithChildren<{
   icon?: ReactNode;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+}> &
+  ButtonHTMLAttributes<HTMLButtonElement>;
 
-const Button = ({ icon, children, ...props }: ButtonProps): JSX.Element => {
+const Button = ({ icon, children, ...props }: ButtonProps): React.ReactElement => {
   return (
     <button type="button" {...props}>
       {icon && <span className="button-icon">{icon}</span>}

apps/watcha_clone_coding/src/components/Header.tsx

@@ -6,7 +6,6 @@ import Watcha from '@/assets/watcha.svg';
 import Button from '@/components/Button';
 import useSearchMovie from '@/hooks/useSearchMovie';
 
-
 const Header = () => {
   const location = useLocation();
   const pathName = location.pathname;

apps/watcha_clone_coding/src/pages/ListPage.tsx

@@ -1,4 +1,4 @@
-import { Carousel } from 'carousel';
+import { Carousel } from '@watcha/carousel';
 import React from 'react';
 
 import AppErrorBoundary from '@/components/AppErrorBoundary';

apps/watcha_clone_coding/src/pages/SearchHomePage.tsx

@@ -1,4 +1,4 @@
-import { Carousel } from 'carousel';
+import { Carousel } from '@watcha/carousel';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -8,8 +8,8 @@ import { SearchHomePageSkeleton } from '@/components/Skeleton';
 import ThemeTab from '@/components/ThemeTab';
 import useSearchMovies from '@/hooks/useSearchMovies';
 import { useSearchListQuery } from '@/queries/search/useSearchListQuery';
-import { Genre } from '@/types/Movie';
 import { buildImageUrl } from '@/utils/transform';
+
 import '@/styles/Search.css';
 
 const TAB_BUTTONS = [
@@ -78,8 +78,8 @@ const SearchHomePageContent = () => {
             <Carousel.LeftButton />
             <Carousel.Track articleWidth={319}>
               <Carousel.Article articleWidth={319} layout="overlay">
-                {(slide) => {
-                  return <GenresCard slide={slide as Genre} layout="overlay" type="genres" />;
+                {(slide: any) => {
+                  return <GenresCard slide={slide} layout="overlay" type="genres" />;
                 }}
               </Carousel.Article>
             </Carousel.Track>

apps/watcha_clone_coding/webpack.common.js

@@ -46,6 +46,18 @@ module.exports = {
       },
     ],
   },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        carousel: {
+          test: /[\\/]packages[\\/]carousel[\\/]/,
+          name: 'carousel',
+          chunks: 'all',
+        },
+      },
+    },
+  },
   plugins: [
     new HtmlWebpackPlugin({
       template: './public/index.html', // 템플릿 파일 경로

package.json

@@ -7,10 +7,10 @@
     "build:production": "pnpm --F \"watcha_clone_coding\" build:production",
     "start": "pnpm --F \"watcha_clone_coding\" start",
     "dev": "pnpm --F \"watcha_clone_coding\" dev",
-    "type-check": "pnpm --F \"watcha_clone_coding\" type-check",
-    "lint": "pnpm --F \"watcha_clone_coding\" lint",
-    "lint:fix": "pnpm --F \"watcha_clone_coding\" lint --fix",
-    "format": "pnpm --F \"watcha_clone_coding\" format",
+    "type-check": "pnpm -r type-check",
+    "lint": "pnpm -r lint",
+    "lint:fix": "pnpm -r lint:fix",
+    "format": "pnpm -r format",
     "format:check": "prettier --check .",
     "prepare": "husky"
   },

packages/carousel/package.json

@@ -1,13 +1,25 @@
 {
-  "name": "carousel",
+  "name": "@watcha/carousel",
   "version": "1.0.0",
-  "type": "module",
   "description": "",
-  "main": "index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
   "scripts": {
+    "build": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "type-check": "tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix"
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write ."
   },
   "keywords": [],
   "author": "",
@@ -30,4 +42,4 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   }
-}
+}

packages/carousel/src/hooks/useCarousel.tsx

@@ -1,13 +1,19 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 
-import { CarouselProps as CarouselSlide } from "../types/Carousel";
-import { Genre } from "../types/Movie";
+import { CarouselProps as CarouselSlide } from '../types/Carousel';
+import { Genre } from '../types/Movie';
 
 type Slide = CarouselSlide | Genre;
 
-const useCarousel = ({ articleWidth, slides }: { articleWidth: number; slides: Slide[] }): {
-  containerRef: React.RefObject<HTMLDivElement>;
-  trackRef: React.RefObject<HTMLDivElement>;
+const useCarousel = ({
+  articleWidth,
+  slides,
+}: {
+  articleWidth: number;
+  slides: Slide[];
+}): {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  trackRef: React.RefObject<HTMLDivElement | null>;
   transitionEnabled: boolean;
   displayIndex: number;
   clonedSlides: Slide[];
@@ -47,8 +53,8 @@ const useCarousel = ({ articleWidth, slides }: { articleWidth: number; slides: S
       calculateVisibleCount();
     };
 
-    window.addEventListener("resize", handleResize);
-    return (): void => window.removeEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize);
+    return (): void => window.removeEventListener('resize', handleResize);
   }, [calculateVisibleCount]);
 
   const clonedSlides = [...slides.slice(-visibleCount), ...slides, ...slides.slice(0, visibleCount)];