[Fix] ui 패키지 컴포넌트 사용 시 모든 컴포넌트가 암묵적으로 import 되는 현상

apps/web/package.json

@@ -13,18 +13,19 @@
   "dependencies": {
     "@repo/theme": "workspace:^",
     "@repo/ui": "workspace:^",
+    "@vanilla-extract/css": "^1.17.0",
     "next": "14.2.21",
     "overlay-kit": "^1.4.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.54.2",
-    "@vanilla-extract/css": "^1.17.0"
+    "react-hook-form": "^7.54.2"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/theme": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@repo/ui": "workspace:*",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.11.24",
     "@types/react": "18.3.0",
     "@types/react-dom": "18.3.1",

apps/web/src/app/page.tsx

@@ -1,20 +1,18 @@
 'use client';
 
 import { useForm } from 'react-hook-form';
-import {
-  Icon,
-  Toast,
-  Text,
-  Button,
-  Badge,
-  Checkbox,
-  Label,
-  Breadcrumb,
-  TextField,
-  RadioCards,
-  Skeleton,
-  Modal,
-} from '@repo/ui';
+import { Icon } from '@repo/ui/Icon';
+import { Toast } from '@repo/ui/Toast';
+import { Text } from '@repo/ui/Text';
+import { Button } from '@repo/ui/Button';
+import { Badge } from '@repo/ui/Badge';
+import { Checkbox } from '@repo/ui/Checkbox';
+import { Label } from '@repo/ui/Label';
+import { Breadcrumb } from '@repo/ui/Breadcrumb';
+import { TextField } from '@repo/ui/TextField';
+import { RadioCards } from '@repo/ui/RadioCards';
+import { Skeleton } from '@repo/ui/Skeleton';
+import { Modal } from '@repo/ui/Modal';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { overlay } from 'overlay-kit';

packages/ui/esbuild.config.mjs

@@ -2,12 +2,9 @@ import esbuild from 'esbuild';
 import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
 import svgr from 'esbuild-plugin-svgr';
 import { preserveDirectivesPlugin } from 'esbuild-plugin-preserve-directives';
-import path from 'path';
-
-const outdir = path.join(process.cwd(), 'dist');
 
 const buildOptions = {
-  entryPoints: ['src/index.ts'],
+  entryPoints: ['./src/index.ts'],
   bundle: true,
   platform: 'node',
   plugins: [
@@ -21,8 +18,10 @@ const buildOptions = {
   ],
   loader: { '.css': 'file' },
   allowOverwrite: true,
-  outdir,
   external: ['react', 'react-dom'],
+  minify: true,
+  treeShaking: true,
+  outdir: 'dist',
 };
 
 esbuild

packages/ui/package.json

@@ -10,38 +10,102 @@
       "import": "./dist/index.js"
     },
     "./LottieAnimation": "./dist/components/LottieAnimation/LottieAnimation.js",
-    "./provider": "./dist/provider/index.js",
-    "./hooks": "./dist/hooks/index.js",
     "./Spinner": "./dist/components/Spinner/Spinner.js",
-    "./styles": "./dist/index.css"
+    "./provider": {
+      "types": "./dist/provider/index.d.ts",
+      "import": "./dist/provider/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./styles": {
+      "import": "./dist/index.css"
+    },
+    "./IconButton": {
+      "types": "./dist/components/IconButton/index.d.ts",
+      "import": "./dist/components/IconButton/index.js"
+    },
+    "./Spacing": {
+      "types": "./dist/components/Spacing/index.d.ts",
+      "import": "./dist/components/Spacing/index.js"
+    },
+    "./Icon": {
+      "types": "./dist/components/Icon/index.d.ts",
+      "import": "./dist/components/Icon/index.js"
+    },
+    "./Toast": {
+      "types": "./dist/components/Toast/index.d.ts",
+      "import": "./dist/components/Toast/index.js"
+    },
+    "./Text": {
+      "types": "./dist/components/Text/index.d.ts",
+      "import": "./dist/components/Text/index.js"
+    },
+    "./Button": {
+      "types": "./dist/components/Button/index.d.ts",
+      "import": "./dist/components/Button/index.js"
+    },
+    "./Badge": {
+      "types": "./dist/components/Badge/index.d.ts",
+      "import": "./dist/components/Badge/index.js"
+    },
+    "./Checkbox": {
+      "types": "./dist/components/Checkbox/index.d.ts",
+      "import": "./dist/components/Checkbox/index.js"
+    },
+    "./Label": {
+      "types": "./dist/components/Label/index.d.ts",
+      "import": "./dist/components/Label/index.js"
+    },
+    "./Breadcrumb": {
+      "types": "./dist/components/Breadcrumb/index.d.ts",
+      "import": "./dist/components/Breadcrumb/index.js"
+    },
+    "./TextField": {
+      "types": "./dist/components/TextField/index.d.ts",
+      "import": "./dist/components/TextField/index.js"
+    },
+    "./RadioCards": {
+      "types": "./dist/components/RadioCards/index.d.ts",
+      "import": "./dist/components/RadioCards/index.js"
+    },
+    "./Modal": {
+      "types": "./dist/components/Modal/index.d.ts",
+      "import": "./dist/components/Modal/index.js"
+    },
+    "./Skeleton": {
+      "types": "./dist/components/Skeleton/index.d.ts",
+      "import": "./dist/components/Skeleton/index.js"
+    }
   },
   "scripts": {
     "build": "tsc && node esbuild.config.mjs",
     "dev": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs --watch",
     "lint": "eslint . --max-warnings 0",
-    "build:icons": "esbuild src/scripts/generate-icon-map.ts --bundle --platform=node --outdir=dist/scripts",
-    "generate:icons": "pnpm run build:icons && node dist/scripts/generate-icon-map.js",
+    "generate:icons": "tsx src/scripts/convert-svg-to-react.mts && tsx src/scripts/generate-icon-map.mts && prettier --write ./src/components/Icon/*",
     "build:lotties": "esbuild src/scripts/generate-lottie-map.mts --bundle --platform=node --outdir=dist/scripts",
     "generate:lotties": "pnpm run build:lotties && node dist/scripts/generate-lottie-map.js"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.1",
     "@repo/theme": "workspace:^",
     "@types/react-dom": "18.3.1",
-    "motion": "^11.17.0",
-    "react": "^18",
     "@vanilla-extract/css": "^1.17.0",
-    "@vanilla-extract/recipes": "^0.5.5"
+    "@vanilla-extract/recipes": "^0.5.5",
+    "motion": "^11.17.0",
+    "react": "^18"
   },
   "devDependencies": {
     "@repo/theme": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
     "esbuild": "^0.21.0",
+    "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-preserve-directives": "^0.0.11",
     "esbuild-plugin-svgr": "^3.1.0",
-    "ts-node": "^10.9.2"
+    "tsx": "^4.19.2"
   },
   "peerDependencies": {
     "react": "^18",

packages/ui/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,6 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, ReactNode, ComponentPropsWithoutRef } from 'react';
-import { Text } from '@/components';
+import { Text } from '../Text';
 import { breadcrumbItemStyle } from './Breadcrumb.css';
 
 export type BreadcrumbItemProps = {

packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, ComponentPropsWithoutRef, ReactNode } from 'react';
-import { Icon } from '@/components';
+import { Icon } from '../Icon';
 import { breadcrumbSeparatorStyle } from './Breadcrumb.css';
 
 export type BreadcrumbSeparatorProps = {

packages/ui/src/components/Breadcrumb/index.ts

@@ -0,0 +1,6 @@
+export { Breadcrumb } from './Breadcrumb';
+export type {
+  BreadcrumbProps,
+  BreadcrumbItemProps,
+  BreadcrumbSeparatorProps,
+} from './Breadcrumb';

packages/ui/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonSize, ButtonVariant, ButtonProps } from './Button';

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'motion/react';
-import { Text, Icon } from '@/components';
+import { Text, Icon } from '../../components';
 import * as styles from './Checkbox.css';
 import {
   ChangeEvent,
@@ -8,7 +8,7 @@ import {
   useState,
   KeyboardEvent,
 } from 'react';
-import { usePress } from '@/hooks/usePress';
+import { usePress } from '../../hooks';
 
 export type CheckboxProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,

packages/ui/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

packages/ui/src/components/Icon/assets.ts

@@ -1,31 +1,30 @@
-import IconArrowBottom from '@/assets/icons/IconArrowBottom.svg';
-import IconArrowFillBottom from '@/assets/icons/IconArrowFillBottom.svg';
-import IconArrowFillTop from '@/assets/icons/IconArrowFillTop.svg';
-import IconArrowLeft from '@/assets/icons/IconArrowLeft.svg';
-import IconArrowRight from '@/assets/icons/IconArrowRight.svg';
-import IconArrowTop from '@/assets/icons/IconArrowTop.svg';
-import IconCalendar from '@/assets/icons/IconCalendar.svg';
-import IconChat from '@/assets/icons/IconChat.svg';
-import IconCheck from '@/assets/icons/IconCheck.svg';
-import IconCheckCalendar from '@/assets/icons/IconCheckCalendar.svg';
-import IconCheckbox from '@/assets/icons/IconCheckbox.svg';
-import IconDocument from '@/assets/icons/IconDocument.svg';
-import IconLineThree from '@/assets/icons/IconLineThree.svg';
-import IconNotice from '@/assets/icons/IconNotice.svg';
-import IconPencil from '@/assets/icons/IconPencil.svg';
-import IconPicture from '@/assets/icons/IconPicture.svg';
-import IconPlus from '@/assets/icons/IconPlus.svg';
-import IconPlusPicture from '@/assets/icons/IconPlusPicture.svg';
-import IconSend from '@/assets/icons/IconSend.svg';
-import IconShopping from '@/assets/icons/IconShopping.svg';
-import IconSmile from '@/assets/icons/IconSmile.svg';
-import IconStack from '@/assets/icons/IconStack.svg';
-import IconStar from '@/assets/icons/IconStar.svg';
-import IconTwinkle from '@/assets/icons/IconTwinkle.svg';
-import IconUnSelectedCheckbox from '@/assets/icons/IconUnSelectedCheckbox.svg';
-import IconX from '@/assets/icons/IconX.svg';
-import IconXCircle from '@/assets/icons/IconXCircle.svg';
-import _IconX from '@/assets/icons/_IconX.svg';
+import IconArrowBottom from './assets/IconArrowBottom';
+import IconArrowFillBottom from './assets/IconArrowFillBottom';
+import IconArrowFillTop from './assets/IconArrowFillTop';
+import IconArrowLeft from './assets/IconArrowLeft';
+import IconArrowRight from './assets/IconArrowRight';
+import IconArrowTop from './assets/IconArrowTop';
+import IconCalendar from './assets/IconCalendar';
+import IconChat from './assets/IconChat';
+import IconCheck from './assets/IconCheck';
+import IconCheckCalendar from './assets/IconCheckCalendar';
+import IconCheckbox from './assets/IconCheckbox';
+import IconDocument from './assets/IconDocument';
+import IconLineThree from './assets/IconLineThree';
+import IconNotice from './assets/IconNotice';
+import IconPencil from './assets/IconPencil';
+import IconPicture from './assets/IconPicture';
+import IconPlus from './assets/IconPlus';
+import IconPlusPicture from './assets/IconPlusPicture';
+import IconSend from './assets/IconSend';
+import IconShopping from './assets/IconShopping';
+import IconSmile from './assets/IconSmile';
+import IconStack from './assets/IconStack';
+import IconStar from './assets/IconStar';
+import IconTwinkle from './assets/IconTwinkle';
+import IconUnSelectedCheckbox from './assets/IconUnSelectedCheckbox';
+import IconX from './assets/IconX';
+import IconXCircle from './assets/IconXCircle';
 
 export const icons = {
   arrowBottom: IconArrowBottom,
@@ -55,5 +54,4 @@ export const icons = {
   unSelectedCheckbox: IconUnSelectedCheckbox,
   x: IconX,
   xCircle: IconXCircle,
-  iconX: _IconX,
 };

packages/ui/src/components/Icon/assets/IconArrowBottom.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowBottomProps extends React.SVGProps<SVGSVGElement> {}
+
+const IconArrowBottom = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.8986 8.63847C3.8986 8.29347 4.0336 7.94847 4.2886 7.67847C4.5416 7.42658 4.88408 7.28516 5.2411 7.28516C5.59811 7.28516 5.9406 7.42658 6.1936 7.67847L11.9986 13.4835L17.7886 7.67847C18.0416 7.42658 18.3841 7.28516 18.7411 7.28516C19.0981 7.28516 19.4406 7.42658 19.6936 7.67847C19.9455 7.93147 20.0869 8.27395 20.0869 8.63097C20.0869 8.98799 19.9455 9.33047 19.6936 9.58347L12.9436 16.3335C12.6906 16.5854 12.3481 16.7268 11.9911 16.7268C11.6341 16.7268 11.2916 16.5854 11.0386 16.3335L4.2886 9.58347C4.0336 9.32847 3.8986 8.98347 3.8986 8.63847Z"
+      fill="#A3ADBD"
+    />
+  </svg>
+);
+
+export default IconArrowBottom;

packages/ui/src/components/Icon/assets/IconArrowFillBottom.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowFillBottomProps extends React.SVGProps<SVGSVGElement> {}
+
+const IconArrowFillBottom = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.348 14.6432C9.95633 15.2699 9.04367 15.2699 8.652 14.6432L2.95625 5.53C2.53997 4.86395 3.01881 4 3.80425 4L15.1958 4C15.9812 4 16.46 4.86395 16.0438 5.53L10.348 14.6432Z"
+      fill="#5A6471"
+    />
+  </svg>
+);
+
+export default IconArrowFillBottom;

packages/ui/src/components/Icon/assets/IconArrowFillTop.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowFillTopProps extends React.SVGProps<SVGSVGElement> {}
+
+const IconArrowFillTop = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8.652 5.3568C9.04367 4.73013 9.95633 4.73013 10.348 5.3568L16.0437 14.47C16.46 15.136 15.9812 16 15.1958 16H3.80425C3.01881 16 2.53997 15.136 2.95625 14.47L8.652 5.3568Z"
+      fill="#5A6471"
+    />
+  </svg>
+);
+
+export default IconArrowFillTop;