fix: ts-pattern 버전문제로 인한 문제 수정

woowacourse-teams · Jan 22, 2024 · a35ac16 · a35ac16
1 parent 1ff5cc6
commit a35ac16
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 43 deletions.
diff --git a/frontend-monorepo/.pnp.cjs b/frontend-monorepo/.pnp.cjs
diff --git a/frontend-monorepo/package.json b/frontend-monorepo/package.json
@@ -10,7 +10,10 @@
     "build:design-system": "yarn workspace hang-log-design-system publish:npm"
   },
   "dependencies": {
-    "@babel/runtime": "7.14.6"
+    "@babel/runtime": "7.14.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-pattern": "^4"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

diff --git a/frontend-monorepo/packages/hang-log-design-system/package.json b/frontend-monorepo/packages/hang-log-design-system/package.json
@@ -54,8 +54,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "ts-pattern": "^4"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/GeneralCarousel/Dots.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/GeneralCarousel/Dots.tsx
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import type { MouseEvent } from 'react';
-import { match } from 'ts-pattern';
 
 import { Theme } from '@styles/Theme';
 
@@ -15,9 +14,9 @@ const Dots = ({ imageLength, activeNumber, moveImage }: DotsProps) => {
 
   return (
     <div css={dotContainerStyling}>
-      {images.map((_, index) =>
-        match(activeNumber === index)
-          .with(true, () => (
+      {images.map((_, index) => {
+        if (activeNumber === index)
+          return (
             <button
               type="button"
               key={crypto.randomUUID()}
@@ -27,19 +26,19 @@ const Dots = ({ imageLength, activeNumber, moveImage }: DotsProps) => {
                 moveImage(index);
               }}
             />
-          ))
-          .otherwise(() => (
-            <button
-              type="button"
-              key={crypto.randomUUID()}
-              css={dotStyle(false)}
-              onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                e.stopPropagation();
-                moveImage(index);
-              }}
-            />
-          ))
-      )}
+          );
+        return (
+          <button
+            type="button"
+            key={crypto.randomUUID()}
+            css={dotStyle(false)}
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              moveImage(index);
+            }}
+          />
+        );
+      })}
     </div>
   );
 };

diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/Toast/Toast.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/Toast/Toast.tsx
@@ -78,7 +78,7 @@ const Toast = ({
         </div>,
         document.getElementById('toast-container') as Element
       )
-    : createPortal(<></>, document.getElementById('toast-container') as Element);
+    : createPortal(<div />, document.getElementById('toast-container') as Element);
 };
 
 export default Toast;
diff --git a/frontend-monorepo/packages/hang-log-design-system/src/hooks/useStarRatingInput.ts b/frontend-monorepo/packages/hang-log-design-system/src/hooks/useStarRatingInput.ts
@@ -1,5 +1,4 @@
 import { useCallback, useRef, useState } from 'react';
-import { match } from 'ts-pattern';
 
 import { useDebounce } from '@hooks/useDebounce';
 
@@ -21,19 +20,17 @@ export const useStarRatingInput = (initialRate: InitialRateType, onClick?: Calla
     (index: number) => {
       const newRate = ((index + 1) / 2) as InitialRateType;
 
-      match(hookStarRate === newRate)
-        .with(true, () => {
-          setStarRate(0);
-          setPrevStarRate(0);
-          setHookStarRate(0);
-          onClick?.(0);
-        })
-        .with(false, () => {
-          setStarRate(newRate);
-          setHookStarRate(newRate);
-          setPrevStarRate(newRate);
-          onClick?.(newRate);
-        });
+      if (hookStarRate === newRate) {
+        setStarRate(0);
+        setPrevStarRate(0);
+        setHookStarRate(0);
+        onClick?.(0);
+      } else {
+        setStarRate(newRate);
+        setHookStarRate(newRate);
+        setPrevStarRate(newRate);
+        onClick?.(newRate);
+      }
     },
     [hookStarRate, onClick]
   );

diff --git a/frontend-monorepo/packages/hang-log-design-system/src/stories/GeneralCarousel.stories.tsx b/frontend-monorepo/packages/hang-log-design-system/src/stories/GeneralCarousel.stories.tsx
@@ -30,12 +30,12 @@ type Story = StoryObj<typeof Carousel>;
 
 export const Default: Story = {
   render: ({ ...args }) => (
-      <Carousel {...args}>
-        {images.map((url, index) => (
-          <Carousel.Item index={index} key={index}>
-            <img src={url} alt="image" />
-          </Carousel.Item>
-        ))}
-      </Carousel>
-    ),
+    <Carousel {...args}>
+      {images.map((url, index) => (
+        <Carousel.Item index={index} key={index}>
+          <img src={url} alt="image" />
+        </Carousel.Item>
+      ))}
+    </Carousel>
+  ),
 };
diff --git a/frontend-monorepo/packages/hang-log-design-system/webpack.config.js b/frontend-monorepo/packages/hang-log-design-system/webpack.config.js
@@ -42,6 +42,7 @@ module.exports = {
     static: path.resolve(__dirname, 'dist'),
   },
 
+  // eslint-disable-next-line no-dupe-keys
   resolve: {
     extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
     alias: {

diff --git a/frontend-monorepo/yarn.lock b/frontend-monorepo/yarn.lock
@@ -10210,6 +10210,7 @@ __metadata:
     prettier: "npm:2.8.8"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
+    ts-pattern: "npm:^4"
     typescript: "npm:4.9.5"
     webpack: "npm:^5.88.1"
   languageName: unknown