@tripie-pyotato/design-system 0.2.21 → 0.2.23

package/dist/provider/TripieProvider.cjs

@@ -1 +1 @@
-"use strict";var O=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var p=(e,t)=>c(e,"name",{value:t,configurable:!0});var x=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},n=(e,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of _(t))!s.call(e,a)&&a!==o&&c(e,a,{get:()=>t[a],enumerable:!(l=m(t,a))||l.enumerable});return e};var R=(e,t,o)=>(o=e!=null?O(C(e)):{},n(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),I=e=>n(c({},"__esModule",{value:!0}),e);var N={};x(N,{default:()=>A});module.exports=I(N);var r=R(require("react"),1);var E=R(require("next/head"),1);var d="dbzzletpw",v=p((e=d)=>`https://res.cloudinary.com/${e}/image/upload/`,"CLOUDINARY_URL");function A({links:e,children:t}){return r.default.createElement(r.default.Fragment,null,r.default.createElement(E.default,null,r.default.createElement("link",{rel:"preload",as:"image",href:v()}),e==null?void 0:e.map(o=>r.default.createElement("link",{key:o,rel:"preload",as:"image",href:o}))),t)}p(A,"TripieThemeProvider");
+"use strict";var i=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(e,r)=>o(e,"name",{value:r,configurable:!0});var x=(e,r)=>{for(var t in r)o(e,t,{get:r[t],enumerable:!0})},c=(e,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let m of h(r))!g.call(e,m)&&m!==t&&o(e,m,{get:()=>r[m],enumerable:!(l=u(r,m))||l.enumerable});return e};var n=(e,r,t)=>(t=e!=null?i(E(e)):{},c(r||!e||!e.__esModule?o(t,"default",{value:e,enumerable:!0}):t,e)),y=e=>c(o({},"__esModule",{value:!0}),e);var T={};x(T,{default:()=>f});module.exports=y(T);var a=n(require("react"),1);var d=n(require("next/head"),1);function f({links:e,children:r}){return a.default.createElement(a.default.Fragment,null,a.default.createElement(d.default,null,a.default.createElement("link",{rel:"preload",as:"image",href:"https://res.cloudinary.com/"}),e==null?void 0:e.map(t=>a.default.createElement("link",{key:t,rel:"preload",as:"image",href:t}))),r)}p(f,"TripieThemeProvider");

package/dist/provider/TripieProvider.js

@@ -1 +1 @@
-var p=Object.defineProperty;var o=(e,r)=>p(e,"name",{value:r,configurable:!0});import t from"react";import n from"next/head";var l="dbzzletpw",c=o((e=l)=>`https://res.cloudinary.com/${e}/image/upload/`,"CLOUDINARY_URL");function R({links:e,children:r}){return t.createElement(t.Fragment,null,t.createElement(n,null,t.createElement("link",{rel:"preload",as:"image",href:c()}),e==null?void 0:e.map(a=>t.createElement("link",{key:a,rel:"preload",as:"image",href:a}))),r)}o(R,"TripieThemeProvider");export{R as default};
+var o=Object.defineProperty;var m=(r,t)=>o(r,"name",{value:t,configurable:!0});import e from"react";import l from"next/head";function p({links:r,children:t}){return e.createElement(e.Fragment,null,e.createElement(l,null,e.createElement("link",{rel:"preload",as:"image",href:"https://res.cloudinary.com/"}),r==null?void 0:r.map(a=>e.createElement("link",{key:a,rel:"preload",as:"image",href:a}))),t)}m(p,"TripieThemeProvider");export{p as default};

package/dist/provider/index.cjs

@@ -1 +1 @@
-"use strict";var A=Object.create;var p=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var c=(e,t)=>p(e,"name",{value:t,configurable:!0});var i=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},v=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!d.call(e,a)&&a!==r&&p(e,a,{get:()=>t[a],enumerable:!(n=O(t,a))||n.enumerable});return e};var R=(e,t,r)=>(r=e!=null?A(_(e)):{},v(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),s=e=>v(p({},"__esModule",{value:!0}),e);var I={};i(I,{TripieProvider:()=>l});module.exports=s(I);var o=R(require("react"),1);var m=R(require("next/head"),1);var C="dbzzletpw",E=c((e=C)=>`https://res.cloudinary.com/${e}/image/upload/`,"CLOUDINARY_URL");function l({links:e,children:t}){return o.default.createElement(o.default.Fragment,null,o.default.createElement(m.default,null,o.default.createElement("link",{rel:"preload",as:"image",href:E()}),e==null?void 0:e.map(r=>o.default.createElement("link",{key:r,rel:"preload",as:"image",href:r}))),t)}c(l,"TripieThemeProvider");0&&(module.exports={TripieProvider});
+"use strict";var n=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var f=(e,r)=>m(e,"name",{value:r,configurable:!0});var g=(e,r)=>{for(var t in r)m(e,t,{get:r[t],enumerable:!0})},i=(e,r,t,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of h(r))!E.call(e,o)&&o!==t&&m(e,o,{get:()=>r[o],enumerable:!(p=u(r,o))||p.enumerable});return e};var c=(e,r,t)=>(t=e!=null?n(x(e)):{},i(r||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),T=e=>i(m({},"__esModule",{value:!0}),e);var v={};g(v,{TripieProvider:()=>l});module.exports=T(v);var a=c(require("react"),1);var d=c(require("next/head"),1);function l({links:e,children:r}){return a.default.createElement(a.default.Fragment,null,a.default.createElement(d.default,null,a.default.createElement("link",{rel:"preload",as:"image",href:"https://res.cloudinary.com/"}),e==null?void 0:e.map(t=>a.default.createElement("link",{key:t,rel:"preload",as:"image",href:t}))),r)}f(l,"TripieThemeProvider");0&&(module.exports={TripieProvider});

package/dist/provider/index.js

@@ -1 +1 @@
-var l=Object.defineProperty;var r=(t,o)=>l(t,"name",{value:o,configurable:!0});import e from"react";import v from"next/head";var n="dbzzletpw",p=r((t=n)=>`https://res.cloudinary.com/${t}/image/upload/`,"CLOUDINARY_URL");function c({links:t,children:o}){return e.createElement(e.Fragment,null,e.createElement(v,null,e.createElement("link",{rel:"preload",as:"image",href:p()}),t==null?void 0:t.map(a=>e.createElement("link",{key:a,rel:"preload",as:"image",href:a}))),o)}r(c,"TripieThemeProvider");export{c as TripieProvider};
+var l=Object.defineProperty;var o=(r,t)=>l(r,"name",{value:t,configurable:!0});import e from"react";import p from"next/head";function m({links:r,children:t}){return e.createElement(e.Fragment,null,e.createElement(p,null,e.createElement("link",{rel:"preload",as:"image",href:"https://res.cloudinary.com/"}),r==null?void 0:r.map(a=>e.createElement("link",{key:a,rel:"preload",as:"image",href:a}))),t)}o(m,"TripieThemeProvider");export{m as TripieProvider};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripie-pyotato/design-system",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "description": "트리피에 사용되는 디자인 시스템",
   "main": "index.js",
   "type": "module",
@@ -122,6 +122,14 @@
         "default": "./dist/global.css"
       }
     },
+    "./font": {
+      "require": {
+        "default": "./dist/font.css"
+      },
+      "import": {
+        "default": "./dist/font.css"
+      }
+    },
     "./styles": {
       "import": "./dist/index.css",
       "require": "./dist/index.css",
@@ -307,14 +315,14 @@
         "default": "./dist/@components/data-display/Image/Image.client.js"
       }
     },
-    "./@components/TextFill": {
+    "./@components/TextFillAnimation": {
       "require": {
-        "types": "./dist/@components/data-display/TextFill/index.d.cts",
-        "default": "./dist/@components/data-display/TextFill/TextFillAnimation.client.cjs"
+        "types": "./dist/@components/data-display/TextFillAnimation/index.d.cts",
+        "default": "./dist/@components/data-display/TextFillAnimation/TextFillAnimation.client.cjs"
       },
       "import": {
-        "types": "./dist/@components/data-display/TextFill/index.d.ts",
-        "default": "./dist/@components/data-display/TextFill/TextFillAnimation.client.js"
+        "types": "./dist/@components/data-display/TextFillAnimation/index.d.ts",
+        "default": "./dist/@components/data-display/TextFillAnimation/TextFillAnimation.client.js"
       }
     },
     "./@components/TextUnderlineAnimation": {
@@ -427,14 +435,14 @@
         "default": "./dist/@components/inputs/TripieButton/Animated/AnimatedButton.client.js"
       }
     },
-    "./@components/UnStyledButton": {
+    "./@components/UnstyledButton": {
       "require": {
-        "types": "./dist/@components/inputs/TripieButton/UnStyled/index.d.cts",
-        "default": "./dist/@components/inputs/TripieButton/UnStyled/UnStyledButton.client.cjs"
+        "types": "./dist/@components/inputs/TripieButton/Unstyled/index.d.cts",
+        "default": "./dist/@components/inputs/TripieButton/Unstyled/UnstyledButton.client.cjs"
       },
       "import": {
-        "types": "./dist/@components/inputs/TripieButton/UnStyled/index.d.ts",
-        "default": "./dist/@components/inputs/TripieButton/UnStyled/UnStyledButton.client.js"
+        "types": "./dist/@components/inputs/TripieButton/Unstyled/index.d.ts",
+        "default": "./dist/@components/inputs/TripieButton/Unstyled/UnstyledButton.client.js"
       }
     },
     "./@components/NavigationButton": {

package/scripts/copy-scss.js

@@ -0,0 +1,7 @@
+/** 스타일시트가 dist 폴더에 import되지 않음*/
+import fg from 'fast-glob';
+import fs from 'fs/promises';
+
+const files = await fg('src/*.scss');
+console.log('files', files);
+await Promise.all(files.map(file => fs.copyFile(file, file.replace(/^src/, 'dist'))));

package/scripts/inject-css.js

@@ -1,42 +1,15 @@
-// import fg from 'fast-glob';
-// import fs from 'fs/promises';
-// import path from 'path';
-
-// const jsFiles = await fg(['dist/@components/**/*.{js,cjs}', 'dist/@core/**/*.{js,cjs}']);
-
-// for (const jsFile of jsFiles) {
-//   const dir = path.dirname(jsFile);
-
-//   const cssFile = `index.css`;
-//   const cssPath = path.join(dir, cssFile);
-
-//   try {
-//     await fs.access(cssPath); // throws if not exists
-//   } catch {
-//     continue; // skip if css doesn't exist
-//   }
-
-//   const code = await fs.readFile(jsFile, 'utf8');
-
-//   const importStmt = jsFile.endsWith('.cjs') ? `require('./${cssFile}');` : `import './${cssFile}';`;
-
-//   if (!code.includes(importStmt)) {
-//     await fs.writeFile(jsFile, `${importStmt}\n${code}`);
-//     console.log(`[✅] Injected ${cssPath} into ${jsFile}`);
-//   }
-// }
-
+/** 스타일시트가 dist 폴더에 import되지 않음*/
 import fg from 'fast-glob';
 import fs from 'fs/promises';
 import path from 'path';
 
-// const jsFiles = await fg(['dist/@components/**/*.{js,cjs}', 'dist/@core/**/*.{js,cjs}']);
-const jsFiles = await fg(['dist/@components/**/index.{js,cjs}', 'dist/@core/**/index.{js,cjs}']);
+const jsFiles = await fg(['dist/@components/**/*.{js,cjs}', 'dist/@core/**/*.{js,cjs}']);
 
 for (const jsFile of jsFiles) {
   const dir = path.dirname(jsFile);
 
-  const cssFile = `index.css`;
+  const cssFile = jsFile.replace(jsFile.endsWith('.cjs') ? '.cjs' : '.js', '.css').replace(dir, '');
+
   const cssPath = path.join(dir, cssFile);
 
   try {
@@ -47,10 +20,10 @@ for (const jsFile of jsFiles) {
 
   const code = await fs.readFile(jsFile, 'utf8');
 
-  const importStmt = jsFile.endsWith('.cjs') ? `require('./${cssFile}');` : `import './${cssFile}';`;
+  const importStmt = jsFile.endsWith('.cjs') ? `require('.${cssFile}');` : `import '.${cssFile}';`;
 
   if (!code.includes(importStmt)) {
-    await fs.writeFile(jsFile, `${importStmt}\n${code}`);
-    console.log(`[✅] Injected ${cssPath} into ${jsFile}`);
+    await fs.writeFile(jsFile, `${importStmt}${code}`);
+    console.log(`[🍀] Injected ${cssFile} into ${jsFile}`);
   }
 }

package/scripts/inject-use-client.js

@@ -1,19 +1,13 @@
 import fg from 'fast-glob';
 import fs from 'fs/promises';
 
-const jsFiles = await fg([
-  'dist/@components/**/!(*chunk*|index).@(js|cjs)',
-  // 'dist/@core/**/!(*chunk*|index).@(js|cjs)',
-]);
+const jsFiles = await fg(['dist/@components/**/!(*chunk*|index).@(js|cjs)']);
 
 for (const jsFile of jsFiles) {
-  // const dir = path.dirname(jsFile);
   const code = await fs.readFile(jsFile, 'utf8');
 
   if (code.includes('use client')) {
-    const newCode = `"use client";\n${code.replaceAll("'use client';", '').replaceAll('"use client";', '')}`;
-
-    // const newCode = `${code.replaceAll("'use client';", '').replaceAll('"use client";', '')}`;
+    const newCode = `"use client";${code.replaceAll("'use client';", '').replaceAll('"use client";', '')}`;
     await fs.writeFile(jsFile, newCode);
     console.log(`[✅] Injected "use client" into ${jsFile}`);
   }

package/src/@components/data-display/AnimatedText/animated-text.module.scss

@@ -1,9 +1,8 @@
-@use '../../../base/' as *;
 @use '../../../variables/tripie-theme' as *;
 @use '../../../functions/color' as *;
 @use '../../../functions/typography' as *;
-@use '../../../generator/' as *;
 @use '../../../mixins/text' as *;
+@use '../../../mixins/z-index' as *;
 
 @use 'sass:map';
 
@@ -20,7 +19,7 @@
 }
 
 .flick {
-  z-index: z(mask);
+  @include z-index(mask);
   font-size: inherit;
   color: inherit;
 }

package/src/@components/data-display/Carousel/Carousel.client.tsx

@@ -3,9 +3,8 @@ import { classNames, useInView } from '../../../wrappers';
 
 import { ReactElement, ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 
-import UnStyledButton from '../../inputs/TripieButton/UnStyled/UnStyledButton.client';
-
 import TripieContainer, { TripieContainerProps } from '@core/layout/TripieContainer';
+import UnstyledButton from '../../inputs/TripieButton/Unstyled/UnstyledButton.client';
 import Icon from '../TripieIcon/Icon.client';
 import Style from './carousel.module.scss';
 const cx = classNames.bind(Style);
@@ -47,9 +46,9 @@ const Carousel = ({
   return (
     <TripieContainer margin="none" className={cx('carousel')}>
       {items.length > 1 && focusedIndex != 0 ? (
-        <UnStyledButton name="previous" onclick={() => handleScrollButton('prev')}>
+        <UnstyledButton name="previous" onclick={() => handleScrollButton('prev')}>
           <Icon.Scroll className={cx('scroll-icon', 'next-icon')} next={false} />
-        </UnStyledButton>
+        </UnstyledButton>
       ) : null}
       <TripieContainer margin="none" className={cx('flex-items', 'carousel-inner')}>
         <TripieContainer
@@ -74,9 +73,9 @@ const Carousel = ({
         </TripieContainer>
       </TripieContainer>
       {items.length > 1 && focusedIndex != items.length - 1 ? (
-        <UnStyledButton name="next" onclick={() => handleScrollButton('next')}>
+        <UnstyledButton name="next" onclick={() => handleScrollButton('next')}>
           <Icon.Scroll className={cx('scroll-icon', 'prev-icon')} />
-        </UnStyledButton>
+        </UnstyledButton>
       ) : null}
     </TripieContainer>
   );

package/src/@components/data-display/TextUnderlineAnimation/TextUnderlineAnimation.client.tsx

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 import { classNames, Motion, MotionProps } from '../../../wrappers';
 
 import Divider from '@components/data-display/Divider';
-import Style from './text-underline.module.scss';
+import Style from './text-underline-animation.module.scss';
 import { TEXT_UNDERLINE_VARIANTS } from './variants';
 
 const cx = classNames.bind(Style);

package/src/@components/data-display/index.ts

@@ -8,10 +8,10 @@ export * from './Divider';
 export { default as Divider } from './Divider';
 export * from './Image';
 export { default as BlurImageOnLoad } from './Image';
-export * from './TextFill/TextFillAnimation.client';
-export { default as TextFillAnimation } from './TextFill/TextFillAnimation.client';
+export * from './TextFillAnimation/TextFillAnimation.client';
+export { default as TextFillAnimation } from './TextFillAnimation/TextFillAnimation.client';
 export * from './TextUnderlineAnimation';
-export { default as TextUnderLineAnimation } from './TextUnderlineAnimation';
+export { default as TextUnderLineAnimation } from './TextUnderlineAnimation/TextUnderlineAnimation.client';
 export * from './Tooltip';
 export { default as Tooltip } from './Tooltip';
 export * from './TripieIcon';

package/src/@components/feedback/Toast/Background/ToastBackground.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { classNames } from '../../../../wrappers';
+
+import TripieContainer from '@core/layout/TripieContainer';
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+import { ToastProps } from '../Toast.client';
+import Style from './toast-background.module.scss';
+
+const cx = classNames.bind(Style);
+
+const ToastBackGround = ({
+  className,
+  toggleOpen,
+  isOpen,
+  autoHideDuration = Infinity, // in milliseconds
+}: Omit<ToastProps, 'toggleOpen'> & { toggleOpen: Dispatch<SetStateAction<boolean>> }) => {
+  // autoHideDuration를 설정하면 해당 시간 경과 후 사라지도록 디폴트로는 닫기 버튼을 누르기 전까지는 사라지지 않는다.
+  useEffect(() => {
+    if (typeof autoHideDuration === 'number' && isFinite(autoHideDuration)) {
+      const timer = setTimeout(() => toggleOpen(false), autoHideDuration * 1_000);
+      return () => clearTimeout(timer);
+    }
+  }, [autoHideDuration]);
+
+  const clickAway = () => {
+    if (autoHideDuration === Infinity && isOpen) {
+      toggleOpen(false);
+    }
+  };
+
+  return (
+    <TripieContainer
+      onClick={clickAway}
+      margin="none"
+      padding="none"
+      className={cx('background', className)}
+      zIndex="default"
+    />
+  );
+};
+
+export default ToastBackGround;

package/src/@components/feedback/Toast/Background/toast-background.module.scss

@@ -0,0 +1,7 @@
+@use '../../../../mixins/backdrop' as *;
+
+.background {
+  @include backdrop;
+  width: 100vw;
+  height: 100vh;
+}

package/src/@components/feedback/Toast/Toast.client.tsx

@@ -1,19 +1,17 @@
 'use client';
 // https://mui.com/joy-ui/react-snackbar/ 참고
-import { classNames, Motion, MotionProps } from '../../../wrappers';
+import { MotionProps } from '../../../wrappers';
 
-import TripieContainer, { TripieContainerProps } from '@core/layout/TripieContainer';
+import { TripieContainerProps } from '@core/layout/TripieContainer';
 import { useCycle } from '@hooks';
-import { useEffect, useMemo, useRef } from 'react';
-import { COLORS } from 'shared';
-import Style from './toast.module.scss';
+import { useMemo } from 'react';
 
+import ToastBackGround from './Background/ToastBackground';
 import ToastButton from './Button/ToastButton.client';
+import ToastBody from './ToastBody';
 import ToastWithControl from './ToastWithControl.client';
 import ToastWithPromise from './ToastWithPromise.client';
-import { toastMotion, toastPosition } from './variants';
-
-const cx = classNames.bind(Style);
+import ToastWrap from './Wrap/ToastWrap';
 
 export type ToastPosition = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right';
 export type ToastBtnPosition = ToastPosition | 'left-center' | 'right-center';
@@ -39,36 +37,16 @@ export type ToastProps = Readonly<
 >;
 
 const Toast = ({
-  full = false,
   interactable = false,
   position = 'bottom-right',
   children,
-  className,
-  visualDuration = 0.5,
   withCloseButton = true,
-  withBorder = true,
-  toastColor = COLORS[50],
   btnPosition,
   autoHideDuration = Infinity, // in milliseconds
   ...args
 }: ToastProps) => {
-  const toastRef = useRef<HTMLDivElement>(null);
   const [isOpen, toggleOpen] = useCycle([true, false]);
 
-  // autoHideDuration를 설정하면 해당 시간 경과 후 사라지도록 디폴트로는 닫기 버튼을 누르기 전까지는 사라지지 않는다.
-  useEffect(() => {
-    if (typeof autoHideDuration === 'number' && isFinite(autoHideDuration)) {
-      const timer = setTimeout(() => toggleOpen(1), autoHideDuration * 1_000);
-      return () => clearTimeout(timer);
-    }
-  }, [autoHideDuration]);
-
-  const clickAway = () => {
-    if (autoHideDuration === Infinity && isOpen) {
-      toggleOpen(1);
-    }
-  };
-
   const defaultBtnPosition = useMemo(() => {
     if (btnPosition == null) {
       switch (position) {
@@ -92,47 +70,17 @@ const Toast = ({
   return (
     <>
       {!interactable && isOpen ? (
-        <TripieContainer
-          onClick={clickAway}
-          margin="none"
-          padding="none"
-          className={cx('background')}
-          zIndex="default"
-        />
+        <ToastBackGround isOpen={isOpen} toggleOpen={toggleOpen} autoHideDuration={autoHideDuration} />
       ) : null}
-      <Motion.Div
-        className={cx(`with${withBorder ? '' : '-no'}-border`, 'toast-body', className)}
-        initial={'initial'}
-        animate={isOpen ? 'animate' : 'initial'}
-        variants={toastMotion[position]}
-        transition={{ type: 'spring', visualDuration }}
-        style={{
-          ...(position === 'bottom-center' || position == 'top-center' ? { left: '50%', translateX: '-50%' } : null),
-          width: full ? '100%' : 'fit-content',
-          position: 'fixed',
-          backgroundColor: toastColor,
-          color: 'inherit',
-          ...toastPosition[position],
-        }}
-      >
+      <ToastWrap {...args} isOpen={isOpen} toggleOpen={toggleOpen}>
         {withCloseButton && (defaultBtnPosition.startsWith('top') || defaultBtnPosition === 'right-center') ? (
           <ToastButton position={defaultBtnPosition} toggleOpen={toggleOpen} isOpen={isOpen} />
         ) : null}
-        <TripieContainer
-          tabIndex={0}
-          ref={toastRef}
-          margin={'l'}
-          {...args}
-          alignItems="center"
-          justifyContent="center"
-          zIndex="notification"
-        >
-          {children}
-        </TripieContainer>
+        <ToastBody>{children}</ToastBody>
         {withCloseButton && (defaultBtnPosition.startsWith('bottom') || defaultBtnPosition === 'left-center') ? (
           <ToastButton position={defaultBtnPosition} toggleOpen={toggleOpen} isOpen={isOpen} />
         ) : null}
-      </Motion.Div>
+      </ToastWrap>
     </>
   );
 };

package/src/@components/feedback/Toast/ToastBody.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import TripieContainer, { TripieContainerProps } from '@core/layout/TripieContainer';
+import { useRef } from 'react';
+
+const ToastBody = ({
+  children,
+  withBorder = true,
+  alignItems = 'center',
+  justifyContent = 'center',
+  zIndex = 'notification',
+  margin = 'l',
+  ...args
+}: TripieContainerProps) => {
+  const toastRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <TripieContainer
+      tabIndex={0}
+      ref={toastRef}
+      margin={margin}
+      alignItems={alignItems}
+      justifyContent={justifyContent}
+      zIndex={zIndex}
+      {...args}
+    >
+      {children}
+    </TripieContainer>
+  );
+};
+
+export default ToastBody;

package/src/@components/feedback/Toast/ToastWithControl.client.tsx

@@ -1,89 +1,32 @@
 'use client';
 
-import { classNames, Motion } from '../../../wrappers';
-
-import TripieContainer from '@core/layout/TripieContainer';
-import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { COLORS } from 'shared';
+import ToastBackGround from './Background/ToastBackground';
 import { ToastProps } from './Toast.client';
-import Style from './toast.module.scss';
-import { toastMotion, toastPosition } from './variants';
-
-const cx = classNames.bind(Style);
-
-export type ToastPosition = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right';
-export type ToastBtnPosition = ToastPosition | 'left-center' | 'right-center';
+import ToastBody from './ToastBody';
+import ToastWrap from './Wrap/ToastWrap';
 
 const ToastWithControl = ({
-  full = false,
-  position = 'bottom-right',
   children,
-  className,
-  visualDuration = 0.5,
-  withBorder = true,
   toastColor = COLORS['50'],
-  btnPosition,
   isOpen,
   animate,
   toggleOpen,
   autoHideDuration = Infinity, // in milliseconds
   ...args
 }: Omit<ToastProps, 'toggleOpen'> & { toggleOpen: Dispatch<SetStateAction<boolean>> }) => {
-  const toastRef = useRef<HTMLDivElement>(null);
-
-  // autoHideDuration를 설정하면 해당 시간 경과 후 사라지도록 디폴트로는 닫기 버튼을 누르기 전까지는 사라지지 않는다.
-  useEffect(() => {
-    if (typeof autoHideDuration === 'number' && isFinite(autoHideDuration)) {
-      const timer = setTimeout(() => toggleOpen(false), autoHideDuration * 1_000);
-      return () => clearTimeout(timer);
-    }
-  }, [autoHideDuration]);
-
-  const clickAway = () => {
-    console.log('clicked?', isOpen);
-    if (autoHideDuration === Infinity && isOpen) {
-      toggleOpen(false);
-    }
-  };
-
   return (
     <>
-      {isOpen ? (
-        <TripieContainer
-          onClick={clickAway}
-          margin="none"
-          padding="none"
-          className={cx('background')}
-          zIndex="default"
-        />
-      ) : null}
-      <Motion.Div
-        className={cx(`with${withBorder ? '' : '-no'}-border`, 'toast-body', className)}
-        initial={'initial'}
+      {isOpen ? <ToastBackGround isOpen={isOpen} toggleOpen={toggleOpen} autoHideDuration={autoHideDuration} /> : null}
+      <ToastWrap
+        {...args}
+        toastColor={toastColor}
         animate={animate}
-        variants={toastMotion[position]}
-        transition={{ type: 'spring', visualDuration }}
-        style={{
-          ...(position === 'bottom-center' || position == 'top-center' ? { left: '50%', translateX: '-50%' } : null),
-          width: full ? '100%' : 'fit-content',
-          position: 'fixed',
-          backgroundColor: toastColor,
-          color: toastColor === COLORS['50'] || toastColor === COLORS['0'] ? COLORS['500'] : 'inherit',
-          ...toastPosition[position],
-        }}
+        style={{ color: toastColor === COLORS['50'] || toastColor === COLORS['0'] ? COLORS['500'] : 'inherit' }}
       >
-        <TripieContainer
-          tabIndex={0}
-          ref={toastRef}
-          margin={'l'}
-          {...args}
-          alignItems="center"
-          justifyContent="center"
-          zIndex="notification"
-        >
-          {children}
-        </TripieContainer>
-      </Motion.Div>
+        <ToastBody>{children}</ToastBody>
+      </ToastWrap>
     </>
   );
 };

package/src/@components/feedback/Toast/ToastWithPromise.client.tsx

@@ -1,25 +1,7 @@
 'use client';
 
-import { TripieContainerProps } from '@core/layout/TripieContainer';
 import { useEffect, useState } from 'react';
-import Toast from './Toast.client';
-
-export type ToastPosition = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right';
-export type ToastBtnPosition = ToastPosition | 'left-center' | 'right-center';
-
-export type ToastProps = Readonly<
-  {
-    position?: ToastPosition;
-    full?: boolean;
-    visualDuration?: number;
-    toastColor?: string;
-    withCloseButton?: boolean;
-    btnPosition?: ToastBtnPosition;
-    isOpen?: boolean;
-    autoHideDuration?: number;
-    toggleOpen?: (index?: number) => void;
-  } & Partial<TripieContainerProps>
->;
+import Toast, { ToastProps } from './Toast.client';
 
 export type ToastWithPromiseProps = Readonly<
   {

package/src/@components/feedback/Toast/Wrap/ToastWrap.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { classNames, Motion } from '../../../../wrappers';
+
+import { COLORS } from 'shared';
+import { ToastProps } from '../Toast.client';
+import Style from './toast-wrap.module.scss';
+import { toastMotion, toastPosition } from './variants';
+
+const cx = classNames.bind(Style);
+
+const ToastWrap = ({
+  full = false,
+  position = 'bottom-right',
+  children,
+  className,
+  visualDuration = 0.5,
+  withBorder = true,
+  toastColor = COLORS[50],
+  isOpen,
+  style,
+  animate,
+}: ToastProps) => {
+  return (
+    <Motion.Div
+      className={cx(`with${withBorder ? '' : '-no'}-border`, 'toast-body', className)}
+      initial={'initial'}
+      animate={animate == null ? (isOpen ? 'animate' : 'initial') : animate}
+      variants={toastMotion[position]}
+      transition={{ type: 'spring', visualDuration }}
+      style={{
+        ...(position === 'bottom-center' || position == 'top-center' ? { left: '50%', translateX: '-50%' } : null),
+        width: full ? '100%' : 'fit-content',
+        position: 'fixed',
+        backgroundColor: toastColor,
+        color: 'inherit',
+        ...toastPosition[position],
+        ...style,
+      }}
+    >
+      {children}
+    </Motion.Div>
+  );
+};
+
+export default ToastWrap;