feat: rollup 설정 (#50)

* chore: 자잘한 코드 수정

* feat: set rollup config

* fix: storybook autodocs 설명이 안보이는 문제 해결

패키지 루트 대신 컴포넌트를  직접 참조하도록 변경

* chore: Test 컴포넌트 내보내기

* fix: rollup 패키지들 버전 다운그레이드

* feat: "use client" 지시어 유지되도록 설정

* chore: ve 설정 제거

* chore: toast docs 수정

* chore: 큰따옴표 수정

* style: toast style 수정

---------

Co-authored-by: solar3070 <>

apps/docs/src/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from 'ui';
+import Button from 'ui/Button';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';

apps/docs/src/stories/Dialog.stories.tsx

@@ -1,10 +1,13 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import { useContext } from 'react';
-import { Dialog } from 'ui';
-import DialogProvider, { DialogContext } from 'ui/Dialog/DialogProvider';
-import { DialogOptionType } from 'ui/Dialog/types';
-import useDialog from '../../../../packages/ui/Dialog/useDialog';
+import {
+  Dialog,
+  DialogProvider,
+  DialogContext,
+  type DialogOptionType,
+  useDialog,
+} from 'ui/Dialog';
 
 export default {
   title: 'Components/Dialog',

apps/docs/src/stories/Toast.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj, StoryFn } from "@storybook/react";
 import { useToast, ToastProvider, type ToastOptionType } from "ui";
-import { IconArchive } from "../../../../packages/icons/src";
+import { IconCopy } from "../../../../packages/icons/src";
 import ToastComponent from "ui/Toast/Toast";
 
 const meta: Meta = {
@@ -12,10 +12,11 @@ const meta: Meta = {
       control: "radio",
       options: ["success", "alert", "error", "custom"],
       description: "토스트의 아이콘을 지정합니다.",
-      mapping: { custom: <IconArchive /> },
+      mapping: { custom: <IconCopy /> },
       table: {
-        defaultValue: { summary: "success" },
-        type: { summary: "success | alert | error | ReactElement" },
+        type: {
+          summary: "success | alert | error | ReactElement",
+        },
       },
     },
     content: { description: "토스트의 내용을 작성합니다." },
@@ -41,7 +42,7 @@ export default meta;
 export const Component: StoryObj = {
   args: {
     icon: "success",
-    content: "Default Toast",
+    content: "프로젝트가 등록되었어요.",
     action: { name: "보러가기", onClick: () => {} },
     style: {
       root: { position: "static", animation: "none", transform: "none" },
@@ -54,64 +55,98 @@ const ToastSample = ({ option }: { option: ToastOptionType }) => {
   return <button onClick={() => open(option)}>Open Toast</button>;
 };
 
-export const DefaultSuccess: StoryObj = {
-  name: "Default - Success",
+export const Default: StoryObj = {
+  name: "Default",
+  argTypes: { icon: { control: { disable: true } } },
+  render: () => {
+    const option: ToastOptionType = {
+      content: "저는 토스트예요.",
+    };
+    return <ToastSample option={option} />;
+  },
+};
+
+export const SuccessIcon: StoryObj = {
+  name: "Icon - Success ",
   argTypes: { icon: { control: { disable: true } } },
   render: () => {
     const option: ToastOptionType = {
       icon: "success",
-      content: "기본 토스트입니다.",
+      content: "프로젝트가 등록되었어요.",
     };
     return <ToastSample option={option} />;
   },
 };
 
-export const TextOverAlert: StoryObj = {
-  name: "Text Over - Alert",
+export const AlertIcon: StoryObj = {
+  name: "Icon - Alert",
   argTypes: { icon: { control: { disable: true } } },
   render: () => {
     const option: ToastOptionType = {
       icon: "alert",
-      content:
-        "토스트 내용은 두 줄을 초과할 수 없습니다. 토스트 내용은 두 줄을 초과할 수 없습니다. 토스트 내용은 두 줄을 초과할 수 없습니다. ",
+      content: "이메일을 입력해주세요.",
     };
     return <ToastSample option={option} />;
   },
 };
 
-export const ActionButtonError: StoryObj = {
-  name: "Action Button - Error",
+export const ErrorIcon: StoryObj = {
+  name: "Icon - Error",
   argTypes: { icon: { control: { disable: true } } },
   render: () => {
     const option: ToastOptionType = {
       icon: "error",
-      content: "액션 버튼이 있는 토스트입니다.",
-      action: { name: "보러가기", onClick: () => {} },
+      content: "프로젝트 수정에 실패했어요.",
     };
     return <ToastSample option={option} />;
   },
 };
 
-export const ActionButtonCustomIcon: StoryObj = {
-  name: "Action Button - Custom Icon",
+export const CustomIcon: StoryObj = {
+  name: "Icon - Custom",
   argTypes: { icon: { control: { disable: true } } },
   render: () => {
     const option: ToastOptionType = {
-      icon: <IconArchive />,
-      content: "커스텀 아이콘을 사용한 토스트입니다.",
+      icon: <IconCopy />,
+      content: "링크를 복사했어요.",
+    };
+    return <ToastSample option={option} />;
+  },
+};
+
+export const ActionButton: StoryObj = {
+  name: "Action Button",
+  argTypes: { icon: { control: { disable: true } } },
+  render: () => {
+    const option: ToastOptionType = {
+      icon: "success",
+      content: "프로젝트가 등록되었어요.",
       action: { name: "보러가기", onClick: () => {} },
     };
     return <ToastSample option={option} />;
   },
 };
 
+export const TextOver: StoryObj = {
+  name: "Text Over",
+  argTypes: { icon: { control: { disable: true } } },
+  render: () => {
+    const option: ToastOptionType = {
+      icon: "alert",
+      content:
+        "토스트 내용은 두 줄을 초과할 수 없습니다. 토스트 내용은 두 줄을 초과할 수 없습니다. 토스트 내용은 두 줄을 초과할 수 없습니다. ",
+    };
+    return <ToastSample option={option} />;
+  },
+};
+
 export const CloseToast: StoryObj = {
   name: "CloseToast",
   argTypes: { icon: { control: { disable: true } } },
   render: () => {
     const { open, close } = useToast();
     const option: ToastOptionType = {
-      icon: "alert",
+      icon: "success",
       content: "토스트를 원하는 타이밍에 닫을 수 있습니다.",
     };
     return (

apps/web/next.config.js

@@ -1,12 +1,4 @@
-const {
-  createVanillaExtractPlugin
-} = require('@vanilla-extract/next-plugin');
-const withVanillaExtract = createVanillaExtractPlugin();
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
   reactStrictMode: true,
   transpilePackages: ["ui"],
 };
-
-module.exports = withVanillaExtract(nextConfig);

packages/ui/CheckBox/index.tsx

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, forwardRef } from 'react';
-import { IconCheck } from '../../icons/src';
+import IconCheck from '../../icons/src/Icon/Interaction/ic-check';
 import {
   check,
   checkBox,

packages/ui/Dialog/Dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from 'react';
 
 import * as Dialogs from '@radix-ui/react-dialog';

packages/ui/Dialog/DialogProvider.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { createContext, useEffect, useState } from 'react';
 import { DialogComponent } from './DialogComponent';

packages/ui/Toast/Toast.tsx

@@ -3,7 +3,7 @@ import * as Toast from "./parts";
 import { ToastOptionType } from "./types";
 
 function ToastComponent(props: ToastOptionType, ref: React.Ref<HTMLDivElement>) {
-  const { icon = "success", content, action, style } = props;
+  const { icon, content, action, style } = props;
 
   return (
     <Toast.Root ref={ref} style={style?.root} icon={icon}>

packages/ui/Toast/ToastProvider.tsx

@@ -12,7 +12,7 @@ export const ToastContext = createContext({
 function ToastProvider({ children }: Children) {
   const [toastOption, setToastOption] = useState<ToastOptionType | null>(null);
   const timerRef = useRef<NodeJS.Timeout>();
-  const toastRef = useRef<HTMLDivElement>();
+  const toastRef = useRef<HTMLDivElement>(null);
 
   const openToast = (option: ToastOptionType) => {
     if (toastOption) return;

packages/ui/Toast/parts/index.tsx

@@ -12,7 +12,7 @@ const convertToIcon = {
 };
 
 interface RootProps {
-  icon: DefaultIconType | React.ReactElement;
+  icon?: DefaultIconType | React.ReactElement;
   style?: React.CSSProperties;
 }
 
@@ -26,7 +26,7 @@ function Root(props: StrictPropsWithChildren<RootProps>, ref: React.Ref<HTMLDivE
       {DefaultIcon ? (
         <DefaultIcon />
       ) : (
-        <div className={styles.icon}>{icon}</div>
+        icon && <div className={styles.icon}>{icon}</div>
       )}
       {children}
     </div>

packages/ui/Toast/parts/style.css.ts

@@ -16,11 +16,12 @@ export const root = style({
 
   position: "fixed",
   top: "var(--mds-toast-top, 36px)",
-  left: "50%",
+  left: "calc(50% - 16px)",
   transform: "translateX(-50%)",
   transition: "transform .2s linear",
-
+  
   width: "var(--mds-toast-width, 380px)",
+  margin: "0 16px",
   padding: "14px 16px",
   borderRadius: "18px",
   backgroundColor: theme.colors.gray10,

packages/ui/cssVariables.ts

@@ -35,7 +35,7 @@ export const desktopVariables = `:root {
 }`;
 
 export const mobileVariables = `:root {
-  --mds-toast-width: 343px;
+  --mds-toast-width: min(calc(100% - 32px), 343px);
   --mds-toast-top: 16px;
 
   --mds-dialog-container-padding:20px;

packages/ui/index.ts

@@ -7,3 +7,5 @@ export type { DialogOptionType } from "./Dialog";
 export { ToastProvider, useToast } from "./Toast";
 export type { ToastOptionType } from "./Toast";
 
+// test component
+export { default as Test } from "./Test";

packages/ui/package.json

@@ -2,25 +2,32 @@
   "name": "ui",
   "version": "0.0.0",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "scripts": {
-    "build": "tsup index.ts cssVariables.ts --format cjs,esm --dts && yarn build-css-modules",
+    "build": "yarn clean && rollup -c && yarn build-css-modules",
+    "clean": "rm -rf dist desktop-variables.css mobile-variables.css",
     "build-css-modules": "node ./scripts/build-css-modules.js",
     "lint": "eslint .",
     "generate:component": "turbo gen react-component"
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^4.1.0",
     "@turbo/gen": "^1.10.12",
     "@types/node": "^20.5.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/rollup-plugin": "^1.0.1",
     "eslint-config-custom": "*",
     "react": "^18.2.0",
+    "rollup": "^2.70.1",
+    "rollup-plugin-dts": "^4.2.0",
+    "rollup-plugin-esbuild": "^4.8.2",
+    "rollup-plugin-node-externals": "^4.0.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "tsconfig": "*",
-    "tsup": "^8.0.1",
     "typescript": "^4.5.2"
   },
   "dependencies": {

packages/ui/rollup.config.js

@@ -0,0 +1,89 @@
+import json from "@rollup/plugin-json";
+import { vanillaExtractPlugin } from "@vanilla-extract/rollup-plugin";
+import path from "path";
+import dts from "rollup-plugin-dts";
+import esbuild from "rollup-plugin-esbuild";
+import nodeExternals from "rollup-plugin-node-externals";
+import ts from "typescript";
+import preserveDirectives from "rollup-plugin-preserve-directives";
+
+const loadCompilerOptions = (tsconfig) => {
+  if (!tsconfig) return {};
+  const configFile = ts.readConfigFile(tsconfig, ts.sys.readFile);
+  const { options } = ts.parseJsonConfigFileContent(
+    configFile.config,
+    ts.sys,
+    "./"
+  );
+  return options;
+};
+
+const compilerOptions = loadCompilerOptions("tsconfig.json");
+
+const plugins = [
+  vanillaExtractPlugin(),
+  nodeExternals(),
+  esbuild(),
+  json(),
+  preserveDirectives(),
+];
+
+const dirSrc = [
+  ["dist", "cjs"],
+  ["dist/esm", "esm"],
+];
+
+export default [
+  ...dirSrc.map(([dir, format]) => {
+    return {
+      input: ["index.ts", "cssVariables.ts"],
+      plugins,
+      output: {
+        dir,
+        format,
+        preserveModules: true,
+        preserveModulesRoot: ".",
+        entryFileNames({ name }) {
+          return `${name.replace(/\.css$/, ".css.vanilla")}.js`;
+        },
+        assetFileNames({ name }) {
+          return name;
+        },
+        exports: "named",
+      },
+      onwarn(warning, warn) {
+        const errorCode = ["MODULE_LEVEL_DIRECTIVE", "SOURCEMAP_ERROR"];
+        if (!errorCode.includes(warning.code)) {
+          warn(warning);
+        }
+      },
+    };
+  }),
+  // Declaration files
+  {
+    input: ["index.ts", "cssVariables.ts"],
+    plugins: [
+      ...plugins,
+      dts({
+        compilerOptions: {
+          ...compilerOptions,
+          baseUrl: path.resolve(compilerOptions.baseUrl || "."),
+          declaration: true,
+          noEmit: false,
+          emitDeclarationOnly: true,
+          noEmitOnError: true,
+          target: ts.ScriptTarget.ESNext,
+        },
+      }),
+    ],
+    output: [
+      {
+        dir: "dist",
+        format: "esm",
+        preserveModules: true,
+        preserveModulesRoot: ".",
+      },
+    ],
+  },
+];
+