@elicecontents/content-ui 1.0.16 → 1.0.17-rc.0

package/cjs/components/AI-feedback/AIFeedback.js

@@ -20,16 +20,16 @@ var EliceAIFeedback = function EliceAIFeedback(_a) {
   }, rest, {
     isControl: true,
     triggerAction: "click",
-    children: jsxRuntime.jsxs(material.Stack, {
+    children: jsxRuntime.jsx(material.Stack, {
       position: "relative",
       width: "fit-content",
       height: "fit-content",
       maxWidth: "100%",
       maxHeight: "100%",
-      children: [CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsxRuntime.jsx("img", {
+      children: CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsxRuntime.jsx("img", {
         src: AIAvatar.default,
         alt: "AI Avatar"
-      }), " "]
+      })
     })
   }));
 };

package/cjs/components/layout/Layout.d.ts

@@ -20,9 +20,10 @@ declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, b
     }) => import("react/jsx-runtime").JSX.Element;
     HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
     HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    ContentContainer: ({ children, sx }: {
+    ContentContainer: ({ children, sx, scrollbarPostion }: {
         children: React.ReactNode;
         sx?: SxProps<Theme> | undefined;
+        scrollbarPostion?: number | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     Subtitle: ({ children, alignment, justifyContent, sx }: {
         children: React.ReactNode;

package/cjs/components/layout/Layout.js

@@ -74,7 +74,9 @@ var EliceLayout = Object.assign(function (_ref) {
   HeaderSubTitle: LayoutHeaderSubTitle.default,
   ContentContainer: function ContentContainer(_ref3) {
     var children = _ref3.children,
-      sx = _ref3.sx;
+      sx = _ref3.sx,
+      _ref3$scrollbarPostio = _ref3.scrollbarPostion,
+      scrollbarPostion = _ref3$scrollbarPostio === void 0 ? 10 : _ref3$scrollbarPostio;
     var theme = material.useTheme();
     var contentRef = React__default.default.useRef(null);
     var context = React__default.default.useContext(EliceLayoutContext);
@@ -88,42 +90,92 @@ var EliceLayout = Object.assign(function (_ref) {
       _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
       hasScroll = _React$useState4[0],
       setHasScroll = _React$useState4[1];
+    var scrollTopRef = React__default.default.useRef(0);
+    var scrollBarRef = React__default.default.useRef(null);
     React__default.default.useEffect(function () {
-      if (!enableScrollTracking) return; // ✅ opt-in일 때만 동작
+      if (!enableScrollTracking) return;
+      var element = contentRef.current;
+      if (!element) return;
       var handleScroll = function handleScroll() {
-        if (contentRef.current) {
-          var scrollTop = contentRef.current.scrollTop;
-          setIsScrollActive(scrollTop > 10);
-        }
+        setIsScrollActive(element.scrollTop > 10);
       };
-      var checkScroll = function checkScroll() {
-        if (contentRef.current) {
-          var _contentRef$current = contentRef.current,
-            scrollHeight = _contentRef$current.scrollHeight,
-            clientHeight = _contentRef$current.clientHeight;
-          setHasScroll(scrollHeight > clientHeight);
+      element.addEventListener('scroll', handleScroll);
+      return function () {
+        element.removeEventListener('scroll', handleScroll);
+      };
+    }, [enableScrollTracking, setIsScrollActive]);
+    // ✅ 2. 스크롤 위치 계산용 useEffect (커스텀 스크롤바용)
+    React__default.default.useEffect(function () {
+      var el = contentRef.current;
+      if (!el) return;
+      var updateScrollBar = function updateScrollBar() {
+        var scrollTop = el.scrollTop,
+          scrollHeight = el.scrollHeight,
+          clientHeight = el.clientHeight;
+        // 상태로 관리하지 않고 직접 반영
+        scrollTopRef.current = scrollTop;
+        var thumbHeight = clientHeight / scrollHeight * clientHeight;
+        var top = scrollTop / scrollHeight * clientHeight;
+        if (scrollBarRef.current) {
+          scrollBarRef.current.style.height = "".concat(thumbHeight, "px");
+          scrollBarRef.current.style.top = "".concat(top, "px");
         }
+        setHasScroll(scrollHeight > clientHeight);
       };
-      var element = contentRef.current;
-      if (element) {
-        element.addEventListener('scroll', handleScroll);
-        checkScroll();
-      }
-      return function () {
-        if (element) {
-          element.removeEventListener('scroll', handleScroll);
+      el.addEventListener('scroll', updateScrollBar);
+      requestAnimationFrame(function () {
+        if (el.scrollHeight > el.clientHeight) {
+          el.scrollTop = 1; // 👉 살짝 움직여줌
+          el.scrollTop = 0; // 👉 바로 다시 원위치
+          updateScrollBar(); // 👉 thumb도 즉시 업데이트
         }
+      });
+      return function () {
+        return el.removeEventListener('scroll', updateScrollBar);
       };
-    }, [contentRef, enableScrollTracking]);
-    return jsxRuntime.jsxs(_ContentContainer, {
-      ref: contentRef,
-      theme: theme,
-      sx: sx,
-      children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
-        children: jsxRuntime.jsx(ScrollMoreIcon.default, {
-          size: 32,
-          color: "white",
-          bgOpacity: 0.5
+    }, []);
+    return jsxRuntime.jsxs(material.Stack, {
+      sx: {
+        position: 'relative',
+        height: '100%'
+      },
+      children: [jsxRuntime.jsxs(_ContentContainer, {
+        ref: contentRef,
+        theme: theme,
+        flex: 1,
+        sx: Object.assign(Object.assign({}, sx), {
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          }
+        }),
+        children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
+          children: jsxRuntime.jsx(ScrollMoreIcon.default, {
+            size: 32,
+            color: "white",
+            bgOpacity: 0.5
+          })
+        })]
+      }), hasScroll && jsxRuntime.jsx("div", {
+        style: {
+          position: 'absolute',
+          top: 0,
+          right: "".concat(-1 * scrollbarPostion, "px"),
+          width: '8px',
+          height: '100%',
+          backgroundColor: '#eee',
+          borderRadius: '4px'
+        },
+        children: jsxRuntime.jsx("div", {
+          ref: scrollBarRef,
+          style: {
+            width: '100%',
+            backgroundColor: theme.palette.primary.main,
+            borderRadius: '4px',
+            position: 'absolute',
+            transition: 'top 0.01s linear'
+          }
         })
       })]
     });
@@ -229,7 +281,7 @@ var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;margin-right:12px;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref16) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref16) {
   var theme = _ref16.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref17) {

package/cjs/components/sound-visualizer/SoundVisualizer.js

@@ -62,8 +62,7 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
     position: "relative",
     children: [(variant === 'circle' || variant === 'both') && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(PulseCircle, {
-        pulseSize: pulseSize,
-        theme: theme
+        pulseSize: pulseSize
       }), jsxRuntime.jsx(CenterIconWrapper, {
         bgColor: theme.palette.primary.main,
         onClick: onClickRecord,

package/cjs/components/video/VideoPlayer.js

@@ -2,9 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
+var PlayArrowIcon = require('@mui/icons-material/PlayArrow');
+var PauseIcon = require('@mui/icons-material/Pause');
+var VolumeUpIcon = require('@mui/icons-material/VolumeUp');
+var VolumeOffIcon = require('@mui/icons-material/VolumeOff');
+var FullscreenIcon = require('@mui/icons-material/Fullscreen');
+var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
+var SubtitlesIcon = require('@mui/icons-material/Subtitles');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var PlayArrowIcon__default = /*#__PURE__*/_interopDefaultCompat(PlayArrowIcon);
+var PauseIcon__default = /*#__PURE__*/_interopDefaultCompat(PauseIcon);
+var VolumeUpIcon__default = /*#__PURE__*/_interopDefaultCompat(VolumeUpIcon);
+var VolumeOffIcon__default = /*#__PURE__*/_interopDefaultCompat(VolumeOffIcon);
+var FullscreenIcon__default = /*#__PURE__*/_interopDefaultCompat(FullscreenIcon);
+var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultCompat(FullscreenExitIcon);
+var SubtitlesIcon__default = /*#__PURE__*/_interopDefaultCompat(SubtitlesIcon);
 
 var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
   var source = _ref.source,
@@ -21,38 +39,135 @@ var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
     videoKey = _ref.videoKey;
   var videoRef = React.useRef(null);
   var lastTime = React.useRef(videoKey ? Number(localStorage.getItem(videoKey)) || 0 : 0);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    isFullscreen = _useState4[0],
+    setIsFullscreen = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    currentTime = _useState6[0],
+    setCurrentTime = _useState6[1];
+  var _useState7 = React.useState(0),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    duration = _useState8[0],
+    setDuration = _useState8[1];
+  var _useState9 = React.useState(1),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    volume = _useState10[0],
+    setVolume = _useState10[1];
+  var _useState11 = React.useState(1),
+    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+    speed = _useState12[0],
+    setSpeed = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+    isMuted = _useState14[0],
+    setIsMuted = _useState14[1];
   React.useEffect(function () {
     var video = videoRef.current;
     if (!video) return;
     video.currentTime = lastTime.current;
     var handlePlay = function handlePlay() {
-      return onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+      setIsPlaying(true);
+      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
     };
     var handlePause = function handlePause() {
-      return onPause === null || onPause === void 0 ? void 0 : onPause();
+      setIsPlaying(false);
+      onPause === null || onPause === void 0 ? void 0 : onPause();
     };
     var handleEnded = function handleEnded() {
-      return onEnded === null || onEnded === void 0 ? void 0 : onEnded();
+      setIsPlaying(false);
+      onEnded === null || onEnded === void 0 ? void 0 : onEnded();
     };
     var handleTimeUpdate = function handleTimeUpdate() {
       var seconds = video.currentTime;
+      setCurrentTime(seconds);
       onProgress === null || onProgress === void 0 ? void 0 : onProgress(seconds);
       if (videoKey) {
         localStorage.setItem(videoKey, seconds.toString());
       }
     };
+    var handleLoadedMetadata = function handleLoadedMetadata() {
+      setDuration(video.duration);
+    };
     video.addEventListener('play', handlePlay);
     video.addEventListener('pause', handlePause);
     video.addEventListener('ended', handleEnded);
     video.addEventListener('timeupdate', handleTimeUpdate);
+    video.addEventListener('loadedmetadata', handleLoadedMetadata);
     return function () {
       video.removeEventListener('play', handlePlay);
       video.removeEventListener('pause', handlePause);
       video.removeEventListener('ended', handleEnded);
       video.removeEventListener('timeupdate', handleTimeUpdate);
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
     };
   }, [videoKey, onPlay, onPause, onEnded, onProgress]);
-  return jsxRuntime.jsx(material.Stack, {
+  var handlePlayPause = function handlePlayPause() {
+    var video = videoRef.current;
+    if (video) {
+      if (isPlaying) {
+        video.pause();
+      } else {
+        video.play();
+      }
+    }
+  };
+  var handleVolumeChange = function handleVolumeChange(event, newValue) {
+    var volume = newValue;
+    setVolume(volume);
+    var video = videoRef.current;
+    if (video) {
+      video.volume = volume;
+    }
+  };
+  var handleSpeedChange = function handleSpeedChange(event) {
+    var speed = event.target.value;
+    setSpeed(speed);
+    var video = videoRef.current;
+    if (video) {
+      video.playbackRate = speed;
+    }
+  };
+  var toggleMute = function toggleMute() {
+    setIsMuted(function (prev) {
+      var video = videoRef.current;
+      if (video) {
+        video.muted = !prev;
+        return !prev;
+      }
+      return prev;
+    });
+  };
+  var toggleFullscreen = function toggleFullscreen() {
+    var _a;
+    var videoContainer = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (videoContainer) {
+      if (isFullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
+      } else {
+        if (videoContainer.requestFullscreen) {
+          videoContainer.requestFullscreen();
+        }
+      }
+      setIsFullscreen(!isFullscreen);
+    }
+  };
+  var handleSeek = function handleSeek(event, newValue) {
+    var newTime = newValue;
+    var video = videoRef.current;
+    if (video) {
+      video.currentTime = newTime;
+      setCurrentTime(newTime);
+    }
+  };
+  return jsxRuntime.jsxs(material.Stack, {
     width: "100%",
     height: height,
     borderRadius: "1rem",
@@ -62,13 +177,13 @@ var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
       video: {
         width: '100%',
         height: '100%',
-        borderRadius: '1rem',
+        borderTopRadius: '1rem',
         objectFit: 'cover'
       }
     }, sx),
-    children: jsxRuntime.jsxs("video", {
+    children: [jsxRuntime.jsxs("video", {
       ref: videoRef,
-      controls: true,
+      controls: false,
       autoPlay: autoPlay,
       width: "100%",
       crossOrigin: "anonymous",
@@ -83,7 +198,74 @@ var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
           label: track.label
         }, i);
       }), "Your browser does not support the video tag."]
-    })
+    }), jsxRuntime.jsxs(material.Box, {
+      sx: {
+        backgroundColor: 'black',
+        padding: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+      children: [jsxRuntime.jsx(material.IconButton, {
+        onClick: handlePlayPause,
+        color: "primary",
+        children: isPlaying ? jsxRuntime.jsx(PauseIcon__default.default, {}) : jsxRuntime.jsx(PlayArrowIcon__default.default, {})
+      }), jsxRuntime.jsx(material.Typography, {
+        color: "white",
+        children: "".concat(Math.floor(currentTime / 60), ":").concat(Math.floor(currentTime % 60))
+      }), jsxRuntime.jsx(material.Slider, {
+        value: currentTime,
+        max: duration,
+        onChange: handleSeek,
+        sx: {
+          width: '200px',
+          marginX: '10px'
+        }
+      }), jsxRuntime.jsx(material.Typography, {
+        color: "white",
+        children: "".concat(Math.floor(duration / 60), ":").concat(Math.floor(duration % 60))
+      }), jsxRuntime.jsxs("select", {
+        onChange: handleSpeedChange,
+        value: speed,
+        style: {
+          backgroundColor: 'black',
+          color: 'white'
+        },
+        children: [jsxRuntime.jsx("option", {
+          value: 0.5,
+          children: "0.5x"
+        }), jsxRuntime.jsx("option", {
+          value: 1,
+          children: "1x"
+        }), jsxRuntime.jsx("option", {
+          value: 1.5,
+          children: "1.5x"
+        }), jsxRuntime.jsx("option", {
+          value: 2,
+          children: "2x"
+        })]
+      }), jsxRuntime.jsx(material.IconButton, {
+        onClick: toggleMute,
+        color: "primary",
+        children: isMuted || volume === 0 ? jsxRuntime.jsx(VolumeOffIcon__default.default, {}) : jsxRuntime.jsx(VolumeUpIcon__default.default, {})
+      }), jsxRuntime.jsx(material.Slider, {
+        value: isMuted ? 0 : volume,
+        onChange: handleVolumeChange,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        sx: {
+          width: '100px'
+        }
+      }), jsxRuntime.jsx(material.IconButton, {
+        color: "primary",
+        children: jsxRuntime.jsx(SubtitlesIcon__default.default, {})
+      }), jsxRuntime.jsx(material.IconButton, {
+        onClick: toggleFullscreen,
+        color: "primary",
+        children: isFullscreen ? jsxRuntime.jsx(FullscreenExitIcon__default.default, {}) : jsxRuntime.jsx(FullscreenIcon__default.default, {})
+      })]
+    })]
   });
 };
 

package/cjs/theme/createAIDTTheme.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var material = require('@mui/material');
+var gray = require('../tokens/colors/gray.js');
 var common = require('../tokens/colors/common.js');
 var typography = require('../typography/typography.js');
 var _base = require('./_base.js');
@@ -33,7 +34,8 @@ var createAIDTTheme = function createAIDTTheme(_ref) {
       background: {
         "default": themeColors.background
       },
-      common: common.common
+      common: common.common,
+      grey: gray.gray
     },
     breakpoints: breakpoints.AIDTBreakpoints,
     typography: typography.createAIDTTypography(typographyFontFamily)

package/cjs/typography/typography.d.ts

@@ -15,7 +15,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -26,7 +26,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -37,7 +37,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -48,7 +48,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -59,7 +59,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -70,7 +70,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -81,7 +81,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };

package/cjs/typography/typography.js

@@ -49,7 +49,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '22px'
     }),
     subtitle1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
@@ -58,7 +58,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '26px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '22px'
     }),
     subtitle2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
@@ -67,7 +67,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '160%'
     }, "@media (max-width:1200px)", {
       fontSize: '24px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '18px'
     }),
     subtitle3: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
@@ -76,7 +76,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '16px'
     }),
     body1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
@@ -85,7 +85,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '16px'
     }),
     buttoninput: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
@@ -94,7 +94,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '16px'
     }),
     pagination: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
@@ -103,7 +103,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '32px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '24px'
     })
   };

package/es/components/AI-feedback/AIFeedback.js

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { Stack } from '@mui/material';
 import img from '../../assets/AIAvatar.png.js';
 import EliceTooltip from '../tooltip/Tooltip.js';
@@ -16,16 +16,16 @@ var EliceAIFeedback = function EliceAIFeedback(_a) {
   }, rest, {
     isControl: true,
     triggerAction: "click",
-    children: jsxs(Stack, {
+    children: jsx(Stack, {
       position: "relative",
       width: "fit-content",
       height: "fit-content",
       maxWidth: "100%",
       maxHeight: "100%",
-      children: [CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsx("img", {
+      children: CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsx("img", {
         src: img,
         alt: "AI Avatar"
-      }), " "]
+      })
     })
   }));
 };

package/es/components/layout/Layout.d.ts

@@ -20,9 +20,10 @@ declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, b
     }) => import("react/jsx-runtime").JSX.Element;
     HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
     HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    ContentContainer: ({ children, sx }: {
+    ContentContainer: ({ children, sx, scrollbarPostion }: {
         children: React.ReactNode;
         sx?: SxProps<Theme> | undefined;
+        scrollbarPostion?: number | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     Subtitle: ({ children, alignment, justifyContent, sx }: {
         children: React.ReactNode;

package/es/components/layout/Layout.js

@@ -65,7 +65,9 @@ var EliceLayout = Object.assign(function (_ref) {
   HeaderSubTitle: LayoutHeaderSubTitle,
   ContentContainer: function ContentContainer(_ref3) {
     var children = _ref3.children,
-      sx = _ref3.sx;
+      sx = _ref3.sx,
+      _ref3$scrollbarPostio = _ref3.scrollbarPostion,
+      scrollbarPostion = _ref3$scrollbarPostio === void 0 ? 10 : _ref3$scrollbarPostio;
     var theme = useTheme();
     var contentRef = React.useRef(null);
     var context = React.useContext(EliceLayoutContext);
@@ -79,42 +81,92 @@ var EliceLayout = Object.assign(function (_ref) {
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       hasScroll = _React$useState4[0],
       setHasScroll = _React$useState4[1];
+    var scrollTopRef = React.useRef(0);
+    var scrollBarRef = React.useRef(null);
     React.useEffect(function () {
-      if (!enableScrollTracking) return; // ✅ opt-in일 때만 동작
+      if (!enableScrollTracking) return;
+      var element = contentRef.current;
+      if (!element) return;
       var handleScroll = function handleScroll() {
-        if (contentRef.current) {
-          var scrollTop = contentRef.current.scrollTop;
-          setIsScrollActive(scrollTop > 10);
-        }
+        setIsScrollActive(element.scrollTop > 10);
       };
-      var checkScroll = function checkScroll() {
-        if (contentRef.current) {
-          var _contentRef$current = contentRef.current,
-            scrollHeight = _contentRef$current.scrollHeight,
-            clientHeight = _contentRef$current.clientHeight;
-          setHasScroll(scrollHeight > clientHeight);
+      element.addEventListener('scroll', handleScroll);
+      return function () {
+        element.removeEventListener('scroll', handleScroll);
+      };
+    }, [enableScrollTracking, setIsScrollActive]);
+    // ✅ 2. 스크롤 위치 계산용 useEffect (커스텀 스크롤바용)
+    React.useEffect(function () {
+      var el = contentRef.current;
+      if (!el) return;
+      var updateScrollBar = function updateScrollBar() {
+        var scrollTop = el.scrollTop,
+          scrollHeight = el.scrollHeight,
+          clientHeight = el.clientHeight;
+        // 상태로 관리하지 않고 직접 반영
+        scrollTopRef.current = scrollTop;
+        var thumbHeight = clientHeight / scrollHeight * clientHeight;
+        var top = scrollTop / scrollHeight * clientHeight;
+        if (scrollBarRef.current) {
+          scrollBarRef.current.style.height = "".concat(thumbHeight, "px");
+          scrollBarRef.current.style.top = "".concat(top, "px");
         }
+        setHasScroll(scrollHeight > clientHeight);
       };
-      var element = contentRef.current;
-      if (element) {
-        element.addEventListener('scroll', handleScroll);
-        checkScroll();
-      }
-      return function () {
-        if (element) {
-          element.removeEventListener('scroll', handleScroll);
+      el.addEventListener('scroll', updateScrollBar);
+      requestAnimationFrame(function () {
+        if (el.scrollHeight > el.clientHeight) {
+          el.scrollTop = 1; // 👉 살짝 움직여줌
+          el.scrollTop = 0; // 👉 바로 다시 원위치
+          updateScrollBar(); // 👉 thumb도 즉시 업데이트
         }
+      });
+      return function () {
+        return el.removeEventListener('scroll', updateScrollBar);
       };
-    }, [contentRef, enableScrollTracking]);
-    return jsxs(_ContentContainer, {
-      ref: contentRef,
-      theme: theme,
-      sx: sx,
-      children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
-        children: jsx(ScrollMoreIcon, {
-          size: 32,
-          color: "white",
-          bgOpacity: 0.5
+    }, []);
+    return jsxs(Stack, {
+      sx: {
+        position: 'relative',
+        height: '100%'
+      },
+      children: [jsxs(_ContentContainer, {
+        ref: contentRef,
+        theme: theme,
+        flex: 1,
+        sx: Object.assign(Object.assign({}, sx), {
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          }
+        }),
+        children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
+          children: jsx(ScrollMoreIcon, {
+            size: 32,
+            color: "white",
+            bgOpacity: 0.5
+          })
+        })]
+      }), hasScroll && jsx("div", {
+        style: {
+          position: 'absolute',
+          top: 0,
+          right: "".concat(-1 * scrollbarPostion, "px"),
+          width: '8px',
+          height: '100%',
+          backgroundColor: '#eee',
+          borderRadius: '4px'
+        },
+        children: jsx("div", {
+          ref: scrollBarRef,
+          style: {
+            width: '100%',
+            backgroundColor: theme.palette.primary.main,
+            borderRadius: '4px',
+            position: 'absolute',
+            transition: 'top 0.01s linear'
+          }
         })
       })]
     });
@@ -220,7 +272,7 @@ var SubtitleContainer = /*#__PURE__*/_styled(Stack, {
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;margin-right:12px;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref16) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref16) {
   var theme = _ref16.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref17) {

package/es/components/sound-visualizer/SoundVisualizer.js

@@ -54,8 +54,7 @@ var SoundVisualizer = function SoundVisualizer(_ref) {
     position: "relative",
     children: [(variant === 'circle' || variant === 'both') && jsxs(Fragment, {
       children: [jsx(PulseCircle, {
-        pulseSize: pulseSize,
-        theme: theme
+        pulseSize: pulseSize
       }), jsx(CenterIconWrapper, {
         bgColor: theme.palette.primary.main,
         onClick: onClickRecord,

package/es/components/video/VideoPlayer.js

@@ -1,6 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { Stack } from '@mui/material';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { Stack, Box, IconButton, Typography, Slider } from '@mui/material';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PauseIcon from '@mui/icons-material/Pause';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import SubtitlesIcon from '@mui/icons-material/Subtitles';
 
 var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
   var source = _ref.source,
@@ -17,38 +25,135 @@ var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
     videoKey = _ref.videoKey;
   var videoRef = useRef(null);
   var lastTime = useRef(videoKey ? Number(localStorage.getItem(videoKey)) || 0 : 0);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFullscreen = _useState4[0],
+    setIsFullscreen = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentTime = _useState6[0],
+    setCurrentTime = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    duration = _useState8[0],
+    setDuration = _useState8[1];
+  var _useState9 = useState(1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    volume = _useState10[0],
+    setVolume = _useState10[1];
+  var _useState11 = useState(1),
+    _useState12 = _slicedToArray(_useState11, 2),
+    speed = _useState12[0],
+    setSpeed = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isMuted = _useState14[0],
+    setIsMuted = _useState14[1];
   useEffect(function () {
     var video = videoRef.current;
     if (!video) return;
     video.currentTime = lastTime.current;
     var handlePlay = function handlePlay() {
-      return onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+      setIsPlaying(true);
+      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
     };
     var handlePause = function handlePause() {
-      return onPause === null || onPause === void 0 ? void 0 : onPause();
+      setIsPlaying(false);
+      onPause === null || onPause === void 0 ? void 0 : onPause();
     };
     var handleEnded = function handleEnded() {
-      return onEnded === null || onEnded === void 0 ? void 0 : onEnded();
+      setIsPlaying(false);
+      onEnded === null || onEnded === void 0 ? void 0 : onEnded();
     };
     var handleTimeUpdate = function handleTimeUpdate() {
       var seconds = video.currentTime;
+      setCurrentTime(seconds);
       onProgress === null || onProgress === void 0 ? void 0 : onProgress(seconds);
       if (videoKey) {
         localStorage.setItem(videoKey, seconds.toString());
       }
     };
+    var handleLoadedMetadata = function handleLoadedMetadata() {
+      setDuration(video.duration);
+    };
     video.addEventListener('play', handlePlay);
     video.addEventListener('pause', handlePause);
     video.addEventListener('ended', handleEnded);
     video.addEventListener('timeupdate', handleTimeUpdate);
+    video.addEventListener('loadedmetadata', handleLoadedMetadata);
     return function () {
       video.removeEventListener('play', handlePlay);
       video.removeEventListener('pause', handlePause);
       video.removeEventListener('ended', handleEnded);
       video.removeEventListener('timeupdate', handleTimeUpdate);
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
     };
   }, [videoKey, onPlay, onPause, onEnded, onProgress]);
-  return jsx(Stack, {
+  var handlePlayPause = function handlePlayPause() {
+    var video = videoRef.current;
+    if (video) {
+      if (isPlaying) {
+        video.pause();
+      } else {
+        video.play();
+      }
+    }
+  };
+  var handleVolumeChange = function handleVolumeChange(event, newValue) {
+    var volume = newValue;
+    setVolume(volume);
+    var video = videoRef.current;
+    if (video) {
+      video.volume = volume;
+    }
+  };
+  var handleSpeedChange = function handleSpeedChange(event) {
+    var speed = event.target.value;
+    setSpeed(speed);
+    var video = videoRef.current;
+    if (video) {
+      video.playbackRate = speed;
+    }
+  };
+  var toggleMute = function toggleMute() {
+    setIsMuted(function (prev) {
+      var video = videoRef.current;
+      if (video) {
+        video.muted = !prev;
+        return !prev;
+      }
+      return prev;
+    });
+  };
+  var toggleFullscreen = function toggleFullscreen() {
+    var _a;
+    var videoContainer = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (videoContainer) {
+      if (isFullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
+      } else {
+        if (videoContainer.requestFullscreen) {
+          videoContainer.requestFullscreen();
+        }
+      }
+      setIsFullscreen(!isFullscreen);
+    }
+  };
+  var handleSeek = function handleSeek(event, newValue) {
+    var newTime = newValue;
+    var video = videoRef.current;
+    if (video) {
+      video.currentTime = newTime;
+      setCurrentTime(newTime);
+    }
+  };
+  return jsxs(Stack, {
     width: "100%",
     height: height,
     borderRadius: "1rem",
@@ -58,13 +163,13 @@ var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
       video: {
         width: '100%',
         height: '100%',
-        borderRadius: '1rem',
+        borderTopRadius: '1rem',
         objectFit: 'cover'
       }
     }, sx),
-    children: jsxs("video", {
+    children: [jsxs("video", {
       ref: videoRef,
-      controls: true,
+      controls: false,
       autoPlay: autoPlay,
       width: "100%",
       crossOrigin: "anonymous",
@@ -79,7 +184,74 @@ var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
           label: track.label
         }, i);
       }), "Your browser does not support the video tag."]
-    })
+    }), jsxs(Box, {
+      sx: {
+        backgroundColor: 'black',
+        padding: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+      children: [jsx(IconButton, {
+        onClick: handlePlayPause,
+        color: "primary",
+        children: isPlaying ? jsx(PauseIcon, {}) : jsx(PlayArrowIcon, {})
+      }), jsx(Typography, {
+        color: "white",
+        children: "".concat(Math.floor(currentTime / 60), ":").concat(Math.floor(currentTime % 60))
+      }), jsx(Slider, {
+        value: currentTime,
+        max: duration,
+        onChange: handleSeek,
+        sx: {
+          width: '200px',
+          marginX: '10px'
+        }
+      }), jsx(Typography, {
+        color: "white",
+        children: "".concat(Math.floor(duration / 60), ":").concat(Math.floor(duration % 60))
+      }), jsxs("select", {
+        onChange: handleSpeedChange,
+        value: speed,
+        style: {
+          backgroundColor: 'black',
+          color: 'white'
+        },
+        children: [jsx("option", {
+          value: 0.5,
+          children: "0.5x"
+        }), jsx("option", {
+          value: 1,
+          children: "1x"
+        }), jsx("option", {
+          value: 1.5,
+          children: "1.5x"
+        }), jsx("option", {
+          value: 2,
+          children: "2x"
+        })]
+      }), jsx(IconButton, {
+        onClick: toggleMute,
+        color: "primary",
+        children: isMuted || volume === 0 ? jsx(VolumeOffIcon, {}) : jsx(VolumeUpIcon, {})
+      }), jsx(Slider, {
+        value: isMuted ? 0 : volume,
+        onChange: handleVolumeChange,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        sx: {
+          width: '100px'
+        }
+      }), jsx(IconButton, {
+        color: "primary",
+        children: jsx(SubtitlesIcon, {})
+      }), jsx(IconButton, {
+        onClick: toggleFullscreen,
+        color: "primary",
+        children: isFullscreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {})
+      })]
+    })]
   });
 };
 

package/es/theme/createAIDTTheme.js

@@ -4,6 +4,7 @@ import { basePalette } from './_base.js';
 import { getThemeColors } from './AIDTTheme.js';
 import { AIDTBreakpoints } from '../breakpoints/breakpoints.js';
 import { common } from '../tokens/colors/common.js';
+import { gray } from '../tokens/colors/gray.js';
 
 var createAIDTTheme = function createAIDTTheme(_ref) {
   var _ref$paletteMode = _ref.paletteMode,
@@ -31,7 +32,8 @@ var createAIDTTheme = function createAIDTTheme(_ref) {
       background: {
         "default": themeColors.background
       },
-      common: common
+      common: common,
+      grey: gray
     },
     breakpoints: AIDTBreakpoints,
     typography: createAIDTTypography(typographyFontFamily)

package/es/typography/typography.d.ts

@@ -15,7 +15,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -26,7 +26,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -37,7 +37,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -48,7 +48,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -59,7 +59,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -70,7 +70,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };
@@ -81,7 +81,7 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         "@media (max-width:1200px)": {
             fontSize: string;
         };
-        "@media (max-width:512px)": {
+        "@media (max-width:768px)": {
             fontSize: string;
         };
     };

package/es/typography/typography.js

@@ -47,7 +47,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '22px'
     }),
     subtitle1: _defineProperty(_defineProperty({
@@ -56,7 +56,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '26px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '22px'
     }),
     subtitle2: _defineProperty(_defineProperty({
@@ -65,7 +65,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '160%'
     }, "@media (max-width:1200px)", {
       fontSize: '24px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '18px'
     }),
     subtitle3: _defineProperty(_defineProperty({
@@ -74,7 +74,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '16px'
     }),
     body1: _defineProperty(_defineProperty({
@@ -83,7 +83,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '16px'
     }),
     buttoninput: _defineProperty(_defineProperty({
@@ -92,7 +92,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '20px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '16px'
     }),
     pagination: _defineProperty(_defineProperty({
@@ -101,7 +101,7 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       lineHeight: '140%'
     }, "@media (max-width:1200px)", {
       fontSize: '32px'
-    }), "@media (max-width:512px)", {
+    }), "@media (max-width:768px)", {
       fontSize: '24px'
     })
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "1.0.16",
+  "version": "1.0.17-rc.0",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",