@elicecontents/content-ui 1.0.6 → 1.0.7

package/cjs/components/audio/Audio.d.ts

@@ -0,0 +1,5 @@
+export interface EliceAudioPlayerProps {
+    src: string;
+}
+declare const EliceAudioPlayer: ({ src }: EliceAudioPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceAudioPlayer;

package/cjs/components/audio/Audio.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var Pause = require('./Pause.js');
+var Play = require('./Play.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var PlayerButton = /*#__PURE__*/_styled__default.default("button", {
+  target: "e90no0w0"
+})("production" === "production" ? {
+  name: "thmcur",
+  styles: "display:flex;background-color:transparent!important;border:none"
+} : {
+  name: "thmcur",
+  styles: "display:flex;background-color:transparent!important;border:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var EliceAudioPlayer = function EliceAudioPlayer(_ref) {
+  var src = _ref.src;
+  var audioRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    progress = _useState4[0],
+    setProgress = _useState4[1];
+  var togglePlay = function togglePlay() {
+    var audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play();
+    }
+  };
+  React.useEffect(function () {
+    var audio = audioRef.current;
+    if (!audio) return;
+    var handlePlay = function handlePlay() {
+      return setIsPlaying(true);
+    };
+    var handlePause = function handlePause() {
+      return setIsPlaying(false);
+    };
+    var handleTimeUpdate = function handleTimeUpdate() {
+      var percent = audio.currentTime / audio.duration * 100;
+      setProgress(percent);
+    };
+    audio.addEventListener('play', handlePlay);
+    audio.addEventListener('pause', handlePause);
+    audio.addEventListener('timeupdate', handleTimeUpdate);
+    return function () {
+      audio.removeEventListener('play', handlePlay);
+      audio.removeEventListener('pause', handlePause);
+      audio.removeEventListener('timeupdate', handleTimeUpdate);
+    };
+  }, []);
+  return jsxRuntime.jsxs(material.Stack, {
+    spacing: 1,
+    alignItems: "center",
+    direction: "row",
+    children: [jsxRuntime.jsx("audio", {
+      ref: audioRef,
+      src: src,
+      preload: "auto"
+    }), jsxRuntime.jsx(PlayerButton, {
+      onClick: togglePlay,
+      children: isPlaying ? jsxRuntime.jsx(Pause.default, {}) : jsxRuntime.jsx(Play.default, {})
+    }), jsxRuntime.jsx(material.LinearProgress, {
+      variant: "determinate",
+      value: progress,
+      sx: {
+        width: '200px'
+      }
+    })]
+  });
+};
+
+exports.default = EliceAudioPlayer;

package/cjs/components/audio/Pause.d.ts

@@ -0,0 +1,5 @@
+declare const PauseIcon: ({ width, height }: {
+    width?: number | undefined;
+    height?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PauseIcon;

package/cjs/components/audio/Pause.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var IconWrapper = /*#__PURE__*/_styled__default.default("button", {
+  target: "e1qsg1m10"
+})("production" === "production" ? {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}"
+} : {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var PauseIcon = function PauseIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 40 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height;
+  var theme = material.useTheme();
+  return jsxRuntime.jsx(IconWrapper, {
+    pressColor: theme.palette.secondary.main,
+    children: jsxRuntime.jsxs("svg", {
+      width: width,
+      height: height,
+      viewBox: "0 0 54 54",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [jsxRuntime.jsx("g", {
+        filter: "url(#filter0_i_593_3904)",
+        children: jsxRuntime.jsx("rect", {
+          width: "54",
+          height: "54",
+          rx: "16",
+          fill: theme.palette.primary.main
+        })
+      }), jsxRuntime.jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M20 17.75H22C23.2426 17.75 24.25 18.7574 24.25 20V34C24.25 35.2426 23.2426 36.25 22 36.25H20C18.7574 36.25 17.75 35.2426 17.75 34V20C17.75 18.7574 18.7574 17.75 20 17.75ZM16 20C16 17.7909 17.7909 16 20 16H22C24.2091 16 26 17.7909 26 20V34C26 36.2091 24.2091 38 22 38H20C17.7909 38 16 36.2091 16 34V20ZM32 17.75H34C35.2426 17.75 36.25 18.7574 36.25 20V34C36.25 35.2427 35.2426 36.25 34 36.25H32C30.7573 36.25 29.75 35.2427 29.75 34V20C29.75 18.7574 30.7573 17.75 32 17.75ZM28 20C28 17.7909 29.7908 16 32 16H34C36.2091 16 38 17.7909 38 20V34C38 36.2092 36.2091 38 34 38H32C29.7908 38 28 36.2092 28 34V20Z",
+        fill: "white"
+      }), jsxRuntime.jsx("defs", {
+        children: jsxRuntime.jsxs("filter", {
+          id: "filter0_i_593_3904",
+          x: "0",
+          y: "0",
+          width: "55",
+          height: "55",
+          filterUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "sRGB",
+          children: [jsxRuntime.jsx("feFlood", {
+            floodOpacity: "0",
+            result: "BackgroundImageFix"
+          }), jsxRuntime.jsx("feBlend", {
+            mode: "normal",
+            "in": "SourceGraphic",
+            in2: "BackgroundImageFix",
+            result: "shape"
+          }), jsxRuntime.jsx("feColorMatrix", {
+            "in": "SourceAlpha",
+            type: "matrix",
+            values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+            result: "hardAlpha"
+          }), jsxRuntime.jsx("feOffset", {
+            dx: "1",
+            dy: "1"
+          }), jsxRuntime.jsx("feGaussianBlur", {
+            stdDeviation: "3.3"
+          }), jsxRuntime.jsx("feComposite", {
+            in2: "hardAlpha",
+            operator: "arithmetic",
+            k2: "-1",
+            k3: "1"
+          }), jsxRuntime.jsx("feColorMatrix", {
+            type: "matrix",
+            values: "0 0 0 0 0.912047 0 0 0 0 0.912047 0 0 0 0 0.940267 0 0 0 1 0"
+          }), jsxRuntime.jsx("feBlend", {
+            mode: "normal",
+            in2: "shape",
+            result: "effect1_innerShadow_593_3904"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+exports.default = PauseIcon;

package/cjs/components/audio/Play.d.ts

@@ -0,0 +1,5 @@
+declare const PlayIcon: ({ width, height }: {
+    width?: number | undefined;
+    height?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PlayIcon;

package/cjs/components/audio/Play.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var IconWrapper = /*#__PURE__*/_styled__default.default("button", {
+  target: "e15psp4j0"
+})("production" === "production" ? {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}"
+} : {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var PlayIcon = function PlayIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 40 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height;
+  var theme = material.useTheme();
+  return jsxRuntime.jsx(IconWrapper, {
+    pressColor: theme.palette.secondary.main,
+    children: jsxRuntime.jsxs("svg", {
+      width: width,
+      height: height,
+      viewBox: "0 0 54 54",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [jsxRuntime.jsx("g", {
+        filter: "url(#filter0_i_274_7284)",
+        children: jsxRuntime.jsx("rect", {
+          width: "54",
+          height: "54",
+          rx: "16",
+          fill: theme.palette.primary.main
+        })
+      }), jsxRuntime.jsx("path", {
+        d: "M37.1161 29.0649C37.5038 28.8516 37.8228 28.5325 38.0361 28.1448C38.6571 27.0157 38.2452 25.5969 37.1161 24.9759L20.9578 16.0888C20.6133 15.8993 20.2265 15.8 19.8333 15.8C18.5447 15.8 17.5 16.8447 17.5 18.1333V35.9074C17.5 36.3006 17.5994 36.6874 17.7888 37.0319C18.4099 38.161 19.8287 38.5729 20.9578 37.9519L37.1161 29.0649ZM19.5417 17.6317L36.5963 27.0133L19.5417 36.3942V17.6317Z",
+        fill: "white"
+      }), jsxRuntime.jsx("defs", {
+        children: jsxRuntime.jsxs("filter", {
+          id: "filter0_i_274_7284",
+          x: "0",
+          y: "0",
+          width: "55",
+          height: "55",
+          filterUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "sRGB",
+          children: [jsxRuntime.jsx("feFlood", {
+            floodOpacity: "0",
+            result: "BackgroundImageFix"
+          }), jsxRuntime.jsx("feBlend", {
+            mode: "normal",
+            "in": "SourceGraphic",
+            in2: "BackgroundImageFix",
+            result: "shape"
+          }), jsxRuntime.jsx("feColorMatrix", {
+            "in": "SourceAlpha",
+            type: "matrix",
+            values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+            result: "hardAlpha"
+          }), jsxRuntime.jsx("feOffset", {
+            dx: "1",
+            dy: "1"
+          }), jsxRuntime.jsx("feGaussianBlur", {
+            stdDeviation: "3.3"
+          }), jsxRuntime.jsx("feComposite", {
+            in2: "hardAlpha",
+            operator: "arithmetic",
+            k2: "-1",
+            k3: "1"
+          }), jsxRuntime.jsx("feColorMatrix", {
+            type: "matrix",
+            values: "0 0 0 0 0.912047 0 0 0 0 0.912047 0 0 0 0 0.940267 0 0 0 1 0"
+          }), jsxRuntime.jsx("feBlend", {
+            mode: "normal",
+            in2: "shape",
+            result: "effect1_innerShadow_274_7284"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+exports.default = PlayIcon;

package/cjs/components/audio/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceAudioPlayer } from './Audio';
+export type { EliceAudioPlayerProps } from './Audio';

package/cjs/components/audio/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var Audio = require('./Audio.js');
+
+
+
+exports.EliceAudioPlayer = Audio.default;

package/cjs/components/base-input/BaseInput.d.ts

@@ -1,12 +1,14 @@
 import React from "react";
+export type BaseInputType = "normal" | "area";
 export interface BaseInputProps {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
     children?: React.ReactNode;
-    isDisabled: boolean;
+    isDisabled?: boolean;
+    inputType: BaseInputType;
 }
-declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, inputType, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
     LeftElement: ({ children }: {
         children?: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;

package/cjs/components/base-input/BaseInput.js

@@ -13,14 +13,17 @@ var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var BaseInputContainer = /*#__PURE__*/_styled__default.default("div", {
   target: "e8c2rcu3"
-})("production" === "production" ? {
-  name: "phlljc",
-  styles: "display:flex;align-items:center;gap:8px;width:100%"
-} : {
-  name: "phlljc",
-  styles: "display:flex;align-items:center;gap:8px;width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})("display:flex;align-items:center;gap:8px;width:100%;border:", function (_ref) {
+  var type = _ref.type,
+    borderColor = _ref.borderColor;
+  return type !== "normal" ? "1px solid ".concat(borderColor) : "none";
+}, ";border-radius:", function (_ref2) {
+  var type = _ref2.type;
+  return type !== "normal" ? "1.5rem" : "none";
+}, ";padding:", function (_ref3) {
+  var type = _ref3.type;
+  return type !== "normal" ? "1.375rem 1.5rem" : "none";
+}, ";");
 var BaseInputContent = /*#__PURE__*/_styled__default.default("div", {
   target: "e8c2rcu2"
 })("production" === "production" ? {
@@ -43,21 +46,25 @@ var InputText = /*#__PURE__*/_styled__default.default("input", {
 });
 var UnderLineDivider = /*#__PURE__*/_styled__default.default("div", {
   target: "e8c2rcu0"
-})("width:100%;height:2px;background-color:", function (_ref) {
-  var theme = _ref.theme;
+})("width:100%;height:2px;background-color:", function (_ref4) {
+  var theme = _ref4.theme;
   return theme.palette.primary.main;
 }, ";");
 // ✅ 합성 컴포넌트 패턴 적용
-var BaseInput = Object.assign(function (_ref2) {
-  var value = _ref2.value,
-    onChange = _ref2.onChange,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? "Enter text..." : _ref2$placeholder,
-    children = _ref2.children,
-    _ref2$isDisabled = _ref2.isDisabled,
-    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
+var BaseInput = Object.assign(function (_ref5) {
+  var value = _ref5.value,
+    onChange = _ref5.onChange,
+    _ref5$placeholder = _ref5.placeholder,
+    placeholder = _ref5$placeholder === void 0 ? "Enter text..." : _ref5$placeholder,
+    children = _ref5.children,
+    _ref5$isDisabled = _ref5.isDisabled,
+    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
+    _ref5$inputType = _ref5.inputType,
+    inputType = _ref5$inputType === void 0 ? "normal" : _ref5$inputType;
   var theme = material.useTheme();
   return jsxRuntime.jsxs(BaseInputContainer, {
+    type: inputType,
+    borderColor: theme.palette.secondary.main,
     children: [children && jsxRuntime.jsx("div", {
       children: children
     }), " ", jsxRuntime.jsxs(BaseInputContent, {
@@ -72,8 +79,8 @@ var BaseInput = Object.assign(function (_ref2) {
     })]
   });
 }, {
-  LeftElement: function LeftElement(_ref3) {
-    var children = _ref3.children;
+  LeftElement: function LeftElement(_ref6) {
+    var children = _ref6.children;
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: children
     });

package/cjs/components/index.d.ts

@@ -20,3 +20,6 @@ export * from './subtitle-button';
 export * from './base-input';
 export * from './Modal';
 export * from './recorder-chat';
+export * from './video';
+export * from './recorder';
+export * from './audio';

package/cjs/components/index.js

@@ -20,6 +20,9 @@ var SubtitleButton = require('./subtitle-button/SubtitleButton.js');
 var BaseInput = require('./base-input/BaseInput.js');
 var Modal = require('./Modal/Modal.js');
 var RecorderChat = require('./recorder-chat/RecorderChat.js');
+var VideoPlayer = require('./video/VideoPlayer.js');
+var Recorder = require('./recorder/Recorder.js');
+var Audio = require('./audio/Audio.js');
 
 
 
@@ -43,3 +46,6 @@ exports.EliceSubButton = SubtitleButton.default;
 exports.BaseInput = BaseInput.default;
 exports.EliceModal = Modal.default;
 exports.EliceRecorderChat = RecorderChat.default;
+exports.EliceVideoPlayer = VideoPlayer.default;
+exports.EliceRecorder = Recorder.default;
+exports.EliceAudioPlayer = Audio.default;

package/cjs/components/recorder/Recorder.d.ts

@@ -0,0 +1,6 @@
+export interface EliceRecorderProps {
+    onAudioReady: (file: File) => void;
+    onTransform?: () => void;
+}
+declare const EliceRecorder: ({ onAudioReady, onTransform }: EliceRecorderProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceRecorder;

package/cjs/components/recorder/Recorder.js

@@ -0,0 +1,218 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+require('tslib');
+var Recording = require('../../icons/Recording.js');
+var ReadyRecord = require('../../icons/ReadyRecord.js');
+var Button = require('../button/Button.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var EliceRecorder = function EliceRecorder(_ref) {
+  var onAudioReady = _ref.onAudioReady,
+    onTransform = _ref.onTransform;
+  var theme = material.useTheme();
+  var _useState = React.useState("ready"),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    recordingStep = _useState2[0],
+    setRecordingStep = _useState2[1];
+  var mediaRecorderRef = React.useRef(null);
+  var audioChunks = React.useRef([]);
+  var streamRef = React.useRef(null);
+  var audioContextRef = React.useRef(null);
+  var analyserRef = React.useRef(null);
+  var sourceRef = React.useRef(null);
+  var startRecording = /*#__PURE__*/function () {
+    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
+      var audioStream;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            _context2.next = 3;
+            return navigator.mediaDevices.getUserMedia({
+              audio: true
+            });
+          case 3:
+            audioStream = _context2.sent;
+            streamRef.current = audioStream;
+            audioChunks.current = [];
+            mediaRecorderRef.current = new MediaRecorder(audioStream);
+            mediaRecorderRef.current.ondataavailable = function (event) {
+              if (event.data.size > 0) {
+                audioChunks.current.push(event.data);
+              }
+            };
+            mediaRecorderRef.current.onstop = /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+              var audioBlob, file;
+              return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    audioBlob = new Blob(audioChunks.current, {
+                      type: "audio/wav"
+                    });
+                    file = new File([audioBlob], "recording-".concat(Date.now(), ".wav"), {
+                      type: "audio/wav"
+                    });
+                    onAudioReady(file);
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            // ✅ 음성 분석용 AudioContext 연결
+            audioContextRef.current = new AudioContext();
+            analyserRef.current = audioContextRef.current.createAnalyser();
+            sourceRef.current = audioContextRef.current.createMediaStreamSource(audioStream);
+            sourceRef.current.connect(analyserRef.current);
+            mediaRecorderRef.current.start();
+            setRecordingStep("recording");
+            _context2.next = 20;
+            break;
+          case 17:
+            _context2.prev = 17;
+            _context2.t0 = _context2["catch"](0);
+            console.error("🎤 마이크 권한을 허용해주세요.", _context2.t0);
+          case 20:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 17]]);
+    }));
+    return function startRecording() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var stopRecording = function stopRecording() {
+    var _a, _b, _c;
+    (_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+    (_b = streamRef.current) === null || _b === void 0 ? void 0 : _b.getTracks().forEach(function (track) {
+      return track.stop();
+    });
+    (_c = audioContextRef.current) === null || _c === void 0 ? void 0 : _c.close();
+    audioContextRef.current = null;
+    setRecordingStep("waiting");
+  };
+  return jsxRuntime.jsxs(material.Stack, {
+    direction: "column",
+    minHeight: "70px",
+    bgcolor: theme.palette.grey[50],
+    padding: "12px 9px",
+    borderRadius: "18px",
+    alignItems: "center",
+    justifyContent: "center",
+    children: [jsxRuntime.jsx(SoundWaveVisualizer, {
+      analyser: analyserRef.current
+    }), jsxRuntime.jsxs(StyledRecorderContent, {
+      direction: "row",
+      children: [jsxRuntime.jsxs(StyledRecorderButton, {
+        step: recordingStep,
+        onClick: recordingStep === "ready" ? startRecording : stopRecording,
+        children: [recordingStep === "ready" || recordingStep === "waiting" ? jsxRuntime.jsx(ReadyRecord.default, {}) : jsxRuntime.jsx(Recording.default, {}), jsxRuntime.jsx(material.Typography, {
+          variant: "buttoninput",
+          children: recordingStep === "ready" ? "녹음 시작" : recordingStep === "recording" ? "녹음 중지" : "다시 녹음"
+        })]
+      }), jsxRuntime.jsx(Button.default, {
+        disabled: recordingStep !== "waiting",
+        variant: recordingStep === "waiting" ? "outlined" : "contained",
+        onClick: onTransform,
+        children: "\uBCC0\uD658"
+      })]
+    })]
+  });
+};
+var SoundWaveVisualizer = function SoundWaveVisualizer(_ref4) {
+  var analyser = _ref4.analyser;
+  var theme = material.useTheme();
+  var TOTAL_BARS = 17;
+  var _useState3 = React.useState(0),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    filledBars = _useState4[0],
+    setFilledBars = _useState4[1];
+  React.useEffect(function () {
+    if (!analyser) return;
+    analyser.fftSize = 128; // ✅ FFT 크기 줄여 반응속도 개선
+    var dataArray = new Uint8Array(analyser.frequencyBinCount);
+    var prevVolume = 0;
+    var _updateVolume = function updateVolume() {
+      analyser.getByteFrequencyData(dataArray);
+      var averageVolume = dataArray.reduce(function (acc, val) {
+        return acc + val;
+      }, 0) / dataArray.length;
+      // ✅ 더 높은 민감도 설정 (3배 증폭)
+      var scaledVolume = Math.min(averageVolume * 3, 255);
+      // ✅ 더 높은 가중치를 현재 값에 적용 (빠르게 반응)
+      var smoothedVolume = prevVolume * 0.5 + scaledVolume * 0.5;
+      prevVolume = smoothedVolume;
+      // ✅ TOTAL_BARS에 맞게 변환
+      var newFilledBars = Math.floor(smoothedVolume / 255 * TOTAL_BARS);
+      setFilledBars(function (prev) {
+        return Math.round(prev * 0.6 + newFilledBars * 0.4);
+      }); // ✅ 더 빠르게 반응
+      requestAnimationFrame(_updateVolume);
+    };
+    _updateVolume();
+    return function () {
+      return setFilledBars(0);
+    };
+  }, [analyser]);
+  return jsxRuntime.jsx(material.Stack, {
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    bgcolor: "transparent",
+    children: jsxRuntime.jsx(material.Box, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      p: "6px 36px 7.5px 31px",
+      width: "100%",
+      gap: "11px",
+      bgcolor: theme.palette.grey[50],
+      children: Array(TOTAL_BARS).fill(0).map(function (_, idx) {
+        return jsxRuntime.jsx(WaveBar, {
+          isFilled: idx < filledBars,
+          theme: theme
+        }, idx);
+      })
+    })
+  });
+};
+var WaveBar = /*#__PURE__*/_styled__default.default(material.Box, {
+  target: "el6xa1g2"
+})("width:11px;height:34px;border-radius:11px;background-color:", function (_ref5) {
+  var isFilled = _ref5.isFilled,
+    theme = _ref5.theme;
+  return isFilled ? theme.palette.primary.main : theme.palette.grey[200];
+}, ";transition:background-color 0.1s ease-in-out;");
+var StyledRecorderButton = /*#__PURE__*/_styled__default.default(material.Button, {
+  target: "el6xa1g1"
+})("display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px;color:", function (_ref6) {
+  var step = _ref6.step;
+  return step === "ready" || step === "waiting" ? "#fff" : "#FF5D58";
+}, ";background:", function (_ref7) {
+  var step = _ref7.step;
+  return step === "ready" || step === "waiting" ? "#FF5D58" : "#FBE0E0";
+}, ";");
+var StyledRecorderContent = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "el6xa1g0"
+})("production" === "production" ? {
+  name: "o9fzdr",
+  styles: "width:100%;display:flex;justify-content:center;align-items:center;gap:16px"
+} : {
+  name: "o9fzdr",
+  styles: "width:100%;display:flex;justify-content:center;align-items:center;gap:16px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+exports.default = EliceRecorder;

package/cjs/components/recorder/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceRecorder } from './Recorder';
+export type { EliceRecorderProps } from './Recorder';