@elicecontents/content-ui 1.0.0 → 1.0.1-layoutupdate.0

package/cjs/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 export interface LayoutFooterPagingProps {
     currentPage: number;
     totalPage: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+    allowPrev?: boolean;
+    allowNext?: boolean;
 }
 declare const LayoutFooterPaging: React.FC<LayoutFooterPagingProps>;
 export default LayoutFooterPaging;

package/cjs/components/layout/Footer/LayoutFooterPaging.js

@@ -5,12 +5,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
+var useAIDTMediaQuery = require('../../../hooks/useAIDTMediaQuery.js');
+var PaginationButton = require('../../pagination-button/PaginationButton.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 FooterContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "ecog5a42"
+})("production" === "production" ? {
+  name: "vw5qh8",
+  styles: "display:flex;align-items:center;justify-content:center;gap:12px"
+} : {
+  name: "vw5qh8",
+  styles: "display:flex;align-items:center;justify-content:center;gap:12px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FooterPagination = /*#__PURE__*/_styled__default.default(material.Typography, {
   target: "ecog5a41"
 })("production" === "production" ? {
@@ -29,17 +41,35 @@ var StyledCurrentPage = /*#__PURE__*/_styled__default.default("span", {
 }, ";");
 var LayoutFooterPaging = function LayoutFooterPaging(_ref2) {
   var currentPage = _ref2.currentPage,
-    totalPage = _ref2.totalPage;
+    totalPage = _ref2.totalPage,
+    onPrev = _ref2.onPrev,
+    onNext = _ref2.onNext,
+    _ref2$allowPrev = _ref2.allowPrev,
+    allowPrev = _ref2$allowPrev === void 0 ? true : _ref2$allowPrev,
+    _ref2$allowNext = _ref2.allowNext,
+    allowNext = _ref2$allowNext === void 0 ? true : _ref2$allowNext;
   var theme = material.useTheme();
-  return jsxRuntime.jsxs(FooterPagination, {
-    variant: "pagination",
-    sx: {
-      color: "#D8D8E2"
-    },
-    children: [jsxRuntime.jsx(StyledCurrentPage, {
-      fontColor: theme.palette.primary.main,
-      children: currentPage
-    }), " ", "/ ", totalPage]
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+  return jsxRuntime.jsxs(FooterContainer, {
+    children: [isMiniTablet && jsxRuntime.jsx(PaginationButton.default, {
+      left: true,
+      onClick: onPrev,
+      disabled: !allowPrev
+    }), jsxRuntime.jsxs(FooterPagination, {
+      variant: "pagination",
+      sx: {
+        color: "#D8D8E2"
+      },
+      children: [jsxRuntime.jsx(StyledCurrentPage, {
+        fontColor: theme.palette.primary.main,
+        children: currentPage
+      }), " ", "/ ", totalPage]
+    }), isMiniTablet && jsxRuntime.jsx(PaginationButton.default, {
+      right: true,
+      onClick: onNext,
+      disabled: !allowNext
+    })]
   });
 };
 

package/cjs/components/layout/Header/LayoutHeaderTitle.js

@@ -16,24 +16,29 @@ var StyledTitle = /*#__PURE__*/_styled__default.default(material.Stack, {
 })("flex-shrink:0;width:fit-content;background-color:", function (_ref) {
   var bgColor = _ref.bgColor;
   return bgColor;
-}, ";position:relative;top:auto;box-sizing:border-box;padding-top:17px;border-radius:0 0 26px 26px;");
+}, ";position:relative;top:auto;height:68px;box-sizing:border-box;padding-top:17px;border-radius:0 0 26px 26px;");
 var Title = /*#__PURE__*/_styled__default.default(material.Typography, {
   target: "e1to23d40"
 })("production" === "production" ? {
-  name: "v13ytb",
-  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff"
+  name: "kefn72",
+  styles: "border-top:1px dashed #fff;height:35px;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff"
 } : {
-  name: "v13ytb",
-  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff",
+  name: "kefn72",
+  styles: "border-top:1px dashed #fff;height:35px;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
   var children = _ref2.children,
     titleComponent = _ref2.titleComponent;
   var theme = material.useTheme();
+  if (titleComponent) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: titleComponent
+    });
+  }
   return jsxRuntime.jsx(StyledTitle, {
     bgColor: theme.palette.secondary.main,
-    children: titleComponent ? titleComponent : typeof children === "string" ? jsxRuntime.jsx(Title, {
+    children: typeof children === "string" ? jsxRuntime.jsx(Title, {
       variant: "h1",
       children: children
     }) : children

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

@@ -7,23 +7,22 @@ export interface EliceLayoutProps {
     allowNext?: boolean;
 }
 declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
-    HeaderContainer: ({ children, height }: {
+    HeaderContainer: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     HeaderTitle: ({ children, titleComponent }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
     HeaderSubTitle: ({ children }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    Subtitle: ({ children, height }: {
+    Subtitle: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, height }: {
+    ContentContainer: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    FooterContainer: ({ children, height }: {
+    Content: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterContainer: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
     FooterSubmit: React.FC<{}>;

package/cjs/components/layout/Layout.js

@@ -2,112 +2,196 @@
 
 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 useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
+var ScrollMoreIcon = require('../../icons/ScrollMoreIcon.js');
 var LayoutPagination = require('./layout-pagination/LayoutPagination.js');
-var LayoutHeaderSubTitle = require('./Header/LayoutHeaderSubTitle.js');
-var LayoutHeaderTitle = require('./Header/LayoutHeaderTitle.js');
 var LayoutFooterPaging = require('./Footer/LayoutFooterPaging.js');
 var LayoutFooterSubmit = require('./Footer/LayoutFooterSubmit.js');
+var LayoutHeaderSubTitle = require('./Header/LayoutHeaderSubTitle.js');
+var LayoutHeaderTitle = require('./Header/LayoutHeaderTitle.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+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 EliceLayoutContext = React__default.default.createContext(undefined);
 var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i4"
-})("width:100%;height:100%;background:#fff;padding:", function (_ref) {
+  target: "efnp08i6"
+})("width:100%;height:calc(100vh - 112px);display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
-}, ";box-sizing:border-box;position:relative;");
+}, ";box-sizing:border-box;position:relative;overflow-y:none;");
 var _HeaderContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i3"
-})("height:", function (_ref2) {
-  var height = _ref2.height;
-  return height || "74px";
-}, ";width:100%;background:#fff;justify-content:space-between;flex-direction:row;align-items:center;");
+  target: "efnp08i5"
+})("production" === "production" ? {
+  name: "14ia2gs",
+  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+} : {
+  name: "14ia2gs",
+  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "efnp08i4"
+})("production" === "production" ? {
+  name: "1mz0nio",
+  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
+} : {
+  name: "1mz0nio",
+  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "efnp08i3"
+})("height:80px;width:100%;padding:20px 40px;display:flex;background-color:", function (_ref2) {
+  var isSticky = _ref2.isSticky;
+  return isSticky ? "#fff" : "none";
+}, ";position:", function (_ref3) {
+  var isSticky = _ref3.isSticky;
+  return isSticky ? "sticky" : "none";
+}, ";top:", function (_ref4) {
+  var isSticky = _ref4.isSticky;
+  return isSticky ? "0" : "auto";
+}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref5) {
+  var isSticky = _ref5.isSticky;
+  return isSticky ? "0 2px 5px rgba(0, 0, 0, 0.1)" : "none";
+}, ";");
+var _ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i2"
-})("height:", function (_ref3) {
-  var height = _ref3.height;
-  return height || "80px";
-}, ";width:100%;padding:20px 40px;background-color:#f7f7f7;margin-top:18px;margin-bottom:14px;display:flex;align-items:center;");
-var ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette.grey[300];
+}, ";border-radius:4px;}");
+var ScrollMoreButton = /*#__PURE__*/_styled__default.default(material.Button, {
   target: "efnp08i1"
-})("height:", function (_ref4) {
-  var height = _ref4.height;
-  return height || "100%";
-}, ";width:100%;background-color:#fff;");
-var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+})("production" === "production" ? {
+  name: "qkrk8u",
+  styles: "position:absolute;bottom:20px;right:46px;border-radius:50%;min-width:36px;height:36px;padding:0;z-index:20"
+} : {
+  name: "qkrk8u",
+  styles: "position:absolute;bottom:20px;right:46px;border-radius:50%;min-width:36px;height:36px;padding:0;z-index:20",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var _Content = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i0"
-})("height:", function (_ref5) {
-  var height = _ref5.height;
-  return height || "92px";
-}, ";width:100%;background:#fff;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row;");
-var EliceLayout = Object.assign(function (_ref6) {
-  var children = _ref6.children,
-    onPrev = _ref6.onPrev,
-    onNext = _ref6.onNext,
-    allowPrev = _ref6.allowPrev,
-    allowNext = _ref6.allowNext;
-  var theme = material.useTheme();
+})("production" === "production" ? {
+  name: "e7007z",
+  styles: "flex:1;width:100%;max-height:610px;min-height:0"
+} : {
+  name: "e7007z",
+  styles: "flex:1;width:100%;max-height:610px;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var EliceLayout = Object.assign(function (_ref8) {
+  var children = _ref8.children,
+    onPrev = _ref8.onPrev,
+    onNext = _ref8.onNext,
+    allowPrev = _ref8.allowPrev,
+    allowNext = _ref8.allowNext;
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
-  return jsxRuntime.jsxs(MainContainer, {
-    bgColor: theme.palette.background["default"],
-    isMiniTablet: isMiniTablet,
-    children: [jsxRuntime.jsx(LayoutPagination.default, {
-      onPrev: onPrev,
-      onNext: onNext,
-      allowPrev: allowPrev,
-      allowNext: allowNext
-    }), children]
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isScrollActive = _React$useState2[0],
+    setIsScrollActive = _React$useState2[1];
+  return jsxRuntime.jsx(EliceLayoutContext.Provider, {
+    value: {
+      isScrollActive: isScrollActive,
+      setIsScrollActive: setIsScrollActive
+    },
+    children: jsxRuntime.jsxs(MainContainer, {
+      isMiniTablet: isMiniTablet,
+      children: [!isTablet && jsxRuntime.jsx(LayoutPagination.default, {
+        onPrev: onPrev,
+        onNext: onNext,
+        allowPrev: allowPrev,
+        allowNext: allowNext
+      }), children]
+    })
   });
 }, {
-  // ✅ 헤더 height 조절 가능
-  HeaderContainer: function HeaderContainer(_ref7) {
-    var children = _ref7.children,
-      height = _ref7.height;
+  HeaderContainer: function HeaderContainer(_ref9) {
+    var children = _ref9.children;
     return jsxRuntime.jsx(_HeaderContainer, {
-      height: height,
       children: children
     });
   },
   HeaderTitle: LayoutHeaderTitle.default,
   HeaderSubTitle: LayoutHeaderSubTitle.default,
-  // ✅ 서브타이틀 height 조절 가능
-  Subtitle: function Subtitle(_ref8) {
-    var children = _ref8.children,
-      height = _ref8.height;
+  Subtitle: function Subtitle(_ref10) {
+    var children = _ref10.children;
+    var context = React__default.default.useContext(EliceLayoutContext);
+    if (!context) {
+      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+    }
+    var isScrollActive = context.isScrollActive;
     return jsxRuntime.jsx(SubtitleContainer, {
-      height: height,
+      isSticky: isScrollActive,
       children: children
     });
   },
-  // ✅ Content height 조절 가능
-  Content: function Content(_ref9) {
-    var children = _ref9.children,
-      height = _ref9.height;
-    var _useAIDTMediaQuery2 = useAIDTMediaQuery.default(),
-      isMobile = _useAIDTMediaQuery2.isMobile,
-      isMiniTablet = _useAIDTMediaQuery2.isMiniTablet,
-      isTablet = _useAIDTMediaQuery2.isTablet,
-      isNotebook = _useAIDTMediaQuery2.isNotebook;
-    // ✅ 화면 크기에 따라 기본 Content 높이 설정 (props가 없을 경우)
-    var defaultHeight = isMobile ? "473px" : isMiniTablet ? "354px" : isTablet ? "410px" : isNotebook ? "510px" : "610px";
-    return jsxRuntime.jsx(ContentContainer, {
-      height: height || defaultHeight,
-      children: children
+  ContentContainer: function ContentContainer(_ref11) {
+    var children = _ref11.children;
+    var theme = material.useTheme();
+    var contentRef = React__default.default.useRef(null);
+    var context = React__default.default.useContext(EliceLayoutContext);
+    if (!context) {
+      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+    }
+    var isScrollActive = context.isScrollActive,
+      setIsScrollActive = context.setIsScrollActive;
+    React__default.default.useEffect(function () {
+      var handleScroll = function handleScroll() {
+        if (contentRef.current) {
+          var scrollTop = contentRef.current.scrollTop;
+          setIsScrollActive(scrollTop > 10);
+        }
+      };
+      var element = contentRef.current;
+      if (element) {
+        element.addEventListener("scroll", handleScroll);
+        handleScroll();
+      }
+      return function () {
+        if (element) {
+          element.removeEventListener("scroll", handleScroll);
+        }
+      };
+    }, []);
+    return jsxRuntime.jsxs(_ContentContainer, {
+      ref: contentRef,
+      theme: theme,
+      children: [children, !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
+        children: jsxRuntime.jsx(ScrollMoreIcon.default, {
+          size: 32,
+          color: "white"
+        })
+      })]
+    });
+  },
+  Content: function Content(_ref12) {
+    var children = _ref12.children;
+    return jsxRuntime.jsx(_Content, {
+      children: jsxRuntime.jsx(material.Typography, {
+        variant: "body1",
+        children: children
+      })
     });
   },
-  // ✅ 푸터 height 조절 가능
-  FooterContainer: function FooterContainer(_ref10) {
-    var children = _ref10.children,
-      height = _ref10.height;
+  FooterContainer: function FooterContainer(_ref13) {
+    var children = _ref13.children;
     return jsxRuntime.jsx(_FooterContainer, {
-      height: height,
       children: children
     });
   },

package/cjs/components/layout/layout-pagination/LayoutPagination.js

@@ -14,11 +14,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var PaginationWrapper = /*#__PURE__*/_styled__default.default("div", {
   target: "e8oep9n0"
 })("production" === "production" ? {
-  name: "ekcpux",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%)"
+  name: "1m30dfz",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)"
 } : {
-  name: "ekcpux",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%)",
+  name: "1m30dfz",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var LayoutPagination = function LayoutPagination(_ref) {

package/cjs/components/subtitle-button/SubtitleButton.js

@@ -23,7 +23,7 @@ var EliceSubButton = React.forwardRef(function (_a, ref) {
     disabled: disabled,
     sx: {
       width: isTablet ? '100%' : 'fit-content',
-      height: '56px',
+      height: '52px',
       borderRadius: isTablet ? 0 : '16px',
       padding: '8px 12px',
       backgroundColor: bluepurple.bluepurple[100],

package/cjs/icons/ScrollMoreIcon.d.ts

@@ -0,0 +1,7 @@
+import { IconProps } from "./_types";
+interface ScrollMoreIconProps extends IconProps {
+    bgColor?: string;
+    arrowColor?: string;
+}
+declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollMoreIcon;

package/cjs/icons/ScrollMoreIcon.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ScrollMoreIcon = function ScrollMoreIcon(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 36 : _a$size,
+    _a$bgColor = _a.bgColor,
+    bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
+    _a$arrowColor = _a.arrowColor,
+    arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
+    other = tslib.__rest(_a, ["size", "bgColor", "arrowColor"]);
+  return jsxRuntime.jsxs("svg", Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: [jsxRuntime.jsx("rect", {
+      width: "36",
+      height: "36",
+      rx: "16",
+      fill: bgColor
+    }), jsxRuntime.jsx("path", {
+      d: "M17.1914 22.4336L12.6914 17.9336C12.375 17.6172 12.2695 17.125 12.4453 16.7031C12.6211 16.2812 13.043 16 13.5 16H22.5C22.957 16 23.3438 16.2812 23.5195 16.7031C23.6953 17.125 23.5898 17.6172 23.2734 17.9336L18.7734 22.4336C18.3516 22.8906 17.6133 22.8906 17.1914 22.4336Z",
+      fill: arrowColor
+    })]
+  }));
+};
+
+exports.default = ScrollMoreIcon;

package/es/components/index.js

@@ -1,4 +1,3 @@
-export { default as EliceImage } from './AdaptiveImage/AdaptiveImage.js';
 export { default as EliceAIFeedback } from './AI-feedback/AIFeedback.js';
 export { default as EliceBadge } from './badge/Badge.js';
 export { default as EliceButton } from './button/Button.js';
@@ -14,4 +13,5 @@ export { default as EliceTable } from './table/Table.js';
 export { default as EliceTextarea } from './textarea/Textarea.js';
 export { default as EliceTooltip } from './tooltip/Tooltip.js';
 export { default as AIDTTypography } from './AIDTTypography/AIDTTypography.js';
+export { default as EliceImage } from './AdaptiveImage/AdaptiveImage.js';
 export { default as EliceSubButton } from './subtitle-button/SubtitleButton.js';

package/es/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 export interface LayoutFooterPagingProps {
     currentPage: number;
     totalPage: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+    allowPrev?: boolean;
+    allowNext?: boolean;
 }
 declare const LayoutFooterPaging: React.FC<LayoutFooterPagingProps>;
 export default LayoutFooterPaging;

package/es/components/layout/Footer/LayoutFooterPaging.js

@@ -1,8 +1,20 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography, useTheme } from '@mui/material';
+import useAIDTMediaQuery from '../../../hooks/useAIDTMediaQuery.js';
+import PaginationButton from '../../pagination-button/PaginationButton.js';
 
 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 FooterContainer = /*#__PURE__*/_styled("div", {
+  target: "ecog5a42"
+})("production" === "production" ? {
+  name: "vw5qh8",
+  styles: "display:flex;align-items:center;justify-content:center;gap:12px"
+} : {
+  name: "vw5qh8",
+  styles: "display:flex;align-items:center;justify-content:center;gap:12px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FooterPagination = /*#__PURE__*/_styled(Typography, {
   target: "ecog5a41"
 })("production" === "production" ? {
@@ -21,17 +33,35 @@ var StyledCurrentPage = /*#__PURE__*/_styled("span", {
 }, ";");
 var LayoutFooterPaging = function LayoutFooterPaging(_ref2) {
   var currentPage = _ref2.currentPage,
-    totalPage = _ref2.totalPage;
+    totalPage = _ref2.totalPage,
+    onPrev = _ref2.onPrev,
+    onNext = _ref2.onNext,
+    _ref2$allowPrev = _ref2.allowPrev,
+    allowPrev = _ref2$allowPrev === void 0 ? true : _ref2$allowPrev,
+    _ref2$allowNext = _ref2.allowNext,
+    allowNext = _ref2$allowNext === void 0 ? true : _ref2$allowNext;
   var theme = useTheme();
-  return jsxs(FooterPagination, {
-    variant: "pagination",
-    sx: {
-      color: "#D8D8E2"
-    },
-    children: [jsx(StyledCurrentPage, {
-      fontColor: theme.palette.primary.main,
-      children: currentPage
-    }), " ", "/ ", totalPage]
+  var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+  return jsxs(FooterContainer, {
+    children: [isMiniTablet && jsx(PaginationButton, {
+      left: true,
+      onClick: onPrev,
+      disabled: !allowPrev
+    }), jsxs(FooterPagination, {
+      variant: "pagination",
+      sx: {
+        color: "#D8D8E2"
+      },
+      children: [jsx(StyledCurrentPage, {
+        fontColor: theme.palette.primary.main,
+        children: currentPage
+      }), " ", "/ ", totalPage]
+    }), isMiniTablet && jsx(PaginationButton, {
+      right: true,
+      onClick: onNext,
+      disabled: !allowNext
+    })]
   });
 };
 

package/es/components/layout/Header/LayoutHeaderTitle.js

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Typography, useTheme, Stack } from '@mui/material';
 
 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)."; }
@@ -8,24 +8,29 @@ var StyledTitle = /*#__PURE__*/_styled(Stack, {
 })("flex-shrink:0;width:fit-content;background-color:", function (_ref) {
   var bgColor = _ref.bgColor;
   return bgColor;
-}, ";position:relative;top:auto;box-sizing:border-box;padding-top:17px;border-radius:0 0 26px 26px;");
+}, ";position:relative;top:auto;height:68px;box-sizing:border-box;padding-top:17px;border-radius:0 0 26px 26px;");
 var Title = /*#__PURE__*/_styled(Typography, {
   target: "e1to23d40"
 })("production" === "production" ? {
-  name: "v13ytb",
-  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff"
+  name: "kefn72",
+  styles: "border-top:1px dashed #fff;height:35px;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff"
 } : {
-  name: "v13ytb",
-  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff",
+  name: "kefn72",
+  styles: "border-top:1px dashed #fff;height:35px;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
   var children = _ref2.children,
     titleComponent = _ref2.titleComponent;
   var theme = useTheme();
+  if (titleComponent) {
+    return jsx(Fragment, {
+      children: titleComponent
+    });
+  }
   return jsx(StyledTitle, {
     bgColor: theme.palette.secondary.main,
-    children: titleComponent ? titleComponent : typeof children === "string" ? jsx(Title, {
+    children: typeof children === "string" ? jsx(Title, {
       variant: "h1",
       children: children
     }) : children

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

@@ -7,23 +7,22 @@ export interface EliceLayoutProps {
     allowNext?: boolean;
 }
 declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
-    HeaderContainer: ({ children, height }: {
+    HeaderContainer: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     HeaderTitle: ({ children, titleComponent }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
     HeaderSubTitle: ({ children }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    Subtitle: ({ children, height }: {
+    Subtitle: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, height }: {
+    ContentContainer: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    FooterContainer: ({ children, height }: {
+    Content: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterContainer: ({ children }: {
         children: React.ReactNode;
-        height?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
     FooterSubmit: React.FC<{}>;

package/es/components/layout/Layout.js

@@ -1,105 +1,188 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import _styled from '@emotion/styled/base';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTheme, Stack } from '@mui/material';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { Stack, Button, Typography, useTheme } from '@mui/material';
 import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
+import ScrollMoreIcon from '../../icons/ScrollMoreIcon.js';
 import LayoutPagination from './layout-pagination/LayoutPagination.js';
-import LayoutHeaderSubTitle from './Header/LayoutHeaderSubTitle.js';
-import LayoutHeaderTitle from './Header/LayoutHeaderTitle.js';
 import LayoutFooterPaging from './Footer/LayoutFooterPaging.js';
 import LayoutFooterSubmit from './Footer/LayoutFooterSubmit.js';
+import LayoutHeaderSubTitle from './Header/LayoutHeaderSubTitle.js';
+import LayoutHeaderTitle from './Header/LayoutHeaderTitle.js';
 
+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 EliceLayoutContext = React.createContext(undefined);
 var MainContainer = /*#__PURE__*/_styled(Stack, {
-  target: "efnp08i4"
-})("width:100%;height:100%;background:#fff;padding:", function (_ref) {
+  target: "efnp08i6"
+})("width:100%;height:calc(100vh - 112px);display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
-}, ";box-sizing:border-box;position:relative;");
+}, ";box-sizing:border-box;position:relative;overflow-y:none;");
 var _HeaderContainer = /*#__PURE__*/_styled(Stack, {
-  target: "efnp08i3"
-})("height:", function (_ref2) {
-  var height = _ref2.height;
-  return height || "74px";
-}, ";width:100%;background:#fff;justify-content:space-between;flex-direction:row;align-items:center;");
+  target: "efnp08i5"
+})("production" === "production" ? {
+  name: "14ia2gs",
+  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+} : {
+  name: "14ia2gs",
+  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var _FooterContainer = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i4"
+})("production" === "production" ? {
+  name: "1mz0nio",
+  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
+} : {
+  name: "1mz0nio",
+  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var SubtitleContainer = /*#__PURE__*/_styled(Stack, {
+  target: "efnp08i3"
+})("height:80px;width:100%;padding:20px 40px;display:flex;background-color:", function (_ref2) {
+  var isSticky = _ref2.isSticky;
+  return isSticky ? "#fff" : "none";
+}, ";position:", function (_ref3) {
+  var isSticky = _ref3.isSticky;
+  return isSticky ? "sticky" : "none";
+}, ";top:", function (_ref4) {
+  var isSticky = _ref4.isSticky;
+  return isSticky ? "0" : "auto";
+}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref5) {
+  var isSticky = _ref5.isSticky;
+  return isSticky ? "0 2px 5px rgba(0, 0, 0, 0.1)" : "none";
+}, ";");
+var _ContentContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i2"
-})("height:", function (_ref3) {
-  var height = _ref3.height;
-  return height || "80px";
-}, ";width:100%;padding:20px 40px;background-color:#f7f7f7;margin-top:18px;margin-bottom:14px;display:flex;align-items:center;");
-var ContentContainer = /*#__PURE__*/_styled(Stack, {
+})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette.grey[300];
+}, ";border-radius:4px;}");
+var ScrollMoreButton = /*#__PURE__*/_styled(Button, {
   target: "efnp08i1"
-})("height:", function (_ref4) {
-  var height = _ref4.height;
-  return height || "100%";
-}, ";width:100%;background-color:#fff;");
-var _FooterContainer = /*#__PURE__*/_styled(Stack, {
+})("production" === "production" ? {
+  name: "qkrk8u",
+  styles: "position:absolute;bottom:20px;right:46px;border-radius:50%;min-width:36px;height:36px;padding:0;z-index:20"
+} : {
+  name: "qkrk8u",
+  styles: "position:absolute;bottom:20px;right:46px;border-radius:50%;min-width:36px;height:36px;padding:0;z-index:20",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var _Content = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i0"
-})("height:", function (_ref5) {
-  var height = _ref5.height;
-  return height || "92px";
-}, ";width:100%;background:#fff;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row;");
-var EliceLayout = Object.assign(function (_ref6) {
-  var children = _ref6.children,
-    onPrev = _ref6.onPrev,
-    onNext = _ref6.onNext,
-    allowPrev = _ref6.allowPrev,
-    allowNext = _ref6.allowNext;
-  var theme = useTheme();
+})("production" === "production" ? {
+  name: "e7007z",
+  styles: "flex:1;width:100%;max-height:610px;min-height:0"
+} : {
+  name: "e7007z",
+  styles: "flex:1;width:100%;max-height:610px;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var EliceLayout = Object.assign(function (_ref8) {
+  var children = _ref8.children,
+    onPrev = _ref8.onPrev,
+    onNext = _ref8.onNext,
+    allowPrev = _ref8.allowPrev,
+    allowNext = _ref8.allowNext;
   var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
-  return jsxs(MainContainer, {
-    bgColor: theme.palette.background["default"],
-    isMiniTablet: isMiniTablet,
-    children: [jsx(LayoutPagination, {
-      onPrev: onPrev,
-      onNext: onNext,
-      allowPrev: allowPrev,
-      allowNext: allowNext
-    }), children]
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isScrollActive = _React$useState2[0],
+    setIsScrollActive = _React$useState2[1];
+  return jsx(EliceLayoutContext.Provider, {
+    value: {
+      isScrollActive: isScrollActive,
+      setIsScrollActive: setIsScrollActive
+    },
+    children: jsxs(MainContainer, {
+      isMiniTablet: isMiniTablet,
+      children: [!isTablet && jsx(LayoutPagination, {
+        onPrev: onPrev,
+        onNext: onNext,
+        allowPrev: allowPrev,
+        allowNext: allowNext
+      }), children]
+    })
   });
 }, {
-  // ✅ 헤더 height 조절 가능
-  HeaderContainer: function HeaderContainer(_ref7) {
-    var children = _ref7.children,
-      height = _ref7.height;
+  HeaderContainer: function HeaderContainer(_ref9) {
+    var children = _ref9.children;
     return jsx(_HeaderContainer, {
-      height: height,
       children: children
     });
   },
   HeaderTitle: LayoutHeaderTitle,
   HeaderSubTitle: LayoutHeaderSubTitle,
-  // ✅ 서브타이틀 height 조절 가능
-  Subtitle: function Subtitle(_ref8) {
-    var children = _ref8.children,
-      height = _ref8.height;
+  Subtitle: function Subtitle(_ref10) {
+    var children = _ref10.children;
+    var context = React.useContext(EliceLayoutContext);
+    if (!context) {
+      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+    }
+    var isScrollActive = context.isScrollActive;
     return jsx(SubtitleContainer, {
-      height: height,
+      isSticky: isScrollActive,
       children: children
     });
   },
-  // ✅ Content height 조절 가능
-  Content: function Content(_ref9) {
-    var children = _ref9.children,
-      height = _ref9.height;
-    var _useAIDTMediaQuery2 = useAIDTMediaQuery(),
-      isMobile = _useAIDTMediaQuery2.isMobile,
-      isMiniTablet = _useAIDTMediaQuery2.isMiniTablet,
-      isTablet = _useAIDTMediaQuery2.isTablet,
-      isNotebook = _useAIDTMediaQuery2.isNotebook;
-    // ✅ 화면 크기에 따라 기본 Content 높이 설정 (props가 없을 경우)
-    var defaultHeight = isMobile ? "473px" : isMiniTablet ? "354px" : isTablet ? "410px" : isNotebook ? "510px" : "610px";
-    return jsx(ContentContainer, {
-      height: height || defaultHeight,
-      children: children
+  ContentContainer: function ContentContainer(_ref11) {
+    var children = _ref11.children;
+    var theme = useTheme();
+    var contentRef = React.useRef(null);
+    var context = React.useContext(EliceLayoutContext);
+    if (!context) {
+      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+    }
+    var isScrollActive = context.isScrollActive,
+      setIsScrollActive = context.setIsScrollActive;
+    React.useEffect(function () {
+      var handleScroll = function handleScroll() {
+        if (contentRef.current) {
+          var scrollTop = contentRef.current.scrollTop;
+          setIsScrollActive(scrollTop > 10);
+        }
+      };
+      var element = contentRef.current;
+      if (element) {
+        element.addEventListener("scroll", handleScroll);
+        handleScroll();
+      }
+      return function () {
+        if (element) {
+          element.removeEventListener("scroll", handleScroll);
+        }
+      };
+    }, []);
+    return jsxs(_ContentContainer, {
+      ref: contentRef,
+      theme: theme,
+      children: [children, !isScrollActive && jsx(ScrollMoreButton, {
+        children: jsx(ScrollMoreIcon, {
+          size: 32,
+          color: "white"
+        })
+      })]
+    });
+  },
+  Content: function Content(_ref12) {
+    var children = _ref12.children;
+    return jsx(_Content, {
+      children: jsx(Typography, {
+        variant: "body1",
+        children: children
+      })
     });
   },
-  // ✅ 푸터 height 조절 가능
-  FooterContainer: function FooterContainer(_ref10) {
-    var children = _ref10.children,
-      height = _ref10.height;
+  FooterContainer: function FooterContainer(_ref13) {
+    var children = _ref13.children;
     return jsx(_FooterContainer, {
-      height: height,
       children: children
     });
   },

package/es/components/layout/layout-pagination/LayoutPagination.js

@@ -6,11 +6,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var PaginationWrapper = /*#__PURE__*/_styled("div", {
   target: "e8oep9n0"
 })("production" === "production" ? {
-  name: "ekcpux",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%)"
+  name: "1m30dfz",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)"
 } : {
-  name: "ekcpux",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%)",
+  name: "1m30dfz",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var LayoutPagination = function LayoutPagination(_ref) {

package/es/components/subtitle-button/SubtitleButton.js

@@ -19,7 +19,7 @@ var EliceSubButton = forwardRef(function (_a, ref) {
     disabled: disabled,
     sx: {
       width: isTablet ? '100%' : 'fit-content',
-      height: '56px',
+      height: '52px',
       borderRadius: isTablet ? 0 : '16px',
       padding: '8px 12px',
       backgroundColor: bluepurple[100],

package/es/icons/ScrollMoreIcon.d.ts

@@ -0,0 +1,7 @@
+import { IconProps } from "./_types";
+interface ScrollMoreIconProps extends IconProps {
+    bgColor?: string;
+    arrowColor?: string;
+}
+declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollMoreIcon;

package/es/icons/ScrollMoreIcon.js

@@ -0,0 +1,31 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ScrollMoreIcon = function ScrollMoreIcon(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 36 : _a$size,
+    _a$bgColor = _a.bgColor,
+    bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
+    _a$arrowColor = _a.arrowColor,
+    arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
+    other = __rest(_a, ["size", "bgColor", "arrowColor"]);
+  return jsxs("svg", Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: [jsx("rect", {
+      width: "36",
+      height: "36",
+      rx: "16",
+      fill: bgColor
+    }), jsx("path", {
+      d: "M17.1914 22.4336L12.6914 17.9336C12.375 17.6172 12.2695 17.125 12.4453 16.7031C12.6211 16.2812 13.043 16 13.5 16H22.5C22.957 16 23.3438 16.2812 23.5195 16.7031C23.6953 17.125 23.5898 17.6172 23.2734 17.9336L18.7734 22.4336C18.3516 22.8906 17.6133 22.8906 17.1914 22.4336Z",
+      fill: arrowColor
+    })]
+  }));
+};
+
+export { ScrollMoreIcon as default };

package/package.json

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