@team-monolith/cds 1.76.3 → 1.76.5

package/dist/components/Book/Book.d.ts

@@ -1,16 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { SerializedStyles } from "@emotion/react";
 import React from "react";
+export declare const bookClasses: {
+    readonly cover: "Book-cover";
+    readonly progressText: "Book-progressText";
+    readonly progressBase: "Book-progressBase";
+    readonly progressBar: "Book-progressBar";
+};
 export interface ProgressInfo {
     /** 프로그레스 바 상단에 표시되는 텍스트 */
-    progressTitle: string;
+    title: string;
     /** 프로그레스 바 진행도 (0 ~ 1 사이 숫자) */
-    progressValue: number;
-    /** 프로그레스 바 배경 및 텍스트 색상 */
-    progressBaseColor: string;
-    /** 프로그레스 바 진행도 색상 */
-    progressBarColor: string;
+    value: number;
 }
 export interface BookProps {
     className?: string;
+    bookCss?: SerializedStyles;
     /** 제목 영역 (하단에 노출되는) 텍스트 */
     title?: string;
     /** subtitle 영역 (상단) 텍스트 */
@@ -31,8 +36,6 @@ export interface BookProps {
     onCoverClick?: () => void;
     /** 커버에 노출되는 아이콘 */
     icon?: React.ReactNode;
-    /** 커버 색상 */
-    coverColor: string;
     /** 진행도 프로그레스 바 영역 */
     progressInfo?: ProgressInfo;
 }

package/dist/components/Book/Book.js

@@ -6,6 +6,12 @@ import { forwardRef, useState } from "react";
 import shadows from "../../foundation/shadows";
 import { EyeOffFillIcon } from "../../icons";
 import { motion } from "framer-motion";
+export const bookClasses = {
+    cover: "Book-cover",
+    progressText: "Book-progressText",
+    progressBase: "Book-progressBase",
+    progressBar: "Book-progressBar",
+};
 // 이 ZINDEX는 Book 컴포넌트 내의 Stacking Context 에서 활용되므로
 // 다른 글로벌 ZINDEX와 충돌을 고려할 필요가 없습니다.
 const ZINDEX_BUTTONS = 5;
@@ -73,19 +79,19 @@ const CARD_COLOR_PALETTE = (theme) => ({
  * @returns
  */
 function Book(props, ref) {
-    const { className, title, subtitle, subtitleBold, coverColor, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, progressInfo, } = props;
+    const { className, bookCss, title, subtitle, subtitleBold, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, progressInfo, } = props;
     const theme = useTheme();
     const [open, setOpen] = useState(false);
-    return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : open) ? "open" : "closed", ref: ref, onHoverStart: () => {
+    return (_jsxs(Container, Object.assign({ css: bookCss, initial: "closed", animate: (controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : open) ? "open" : "closed", ref: ref, onHoverStart: () => {
             setOpen(true);
             onHoverStart === null || onHoverStart === void 0 ? void 0 : onHoverStart();
         }, onHoverEnd: () => {
             setOpen(false);
             onHoverEnd === null || onHoverEnd === void 0 ? void 0 : onHoverEnd();
-        } }, { children: [_jsxs(Cover, Object.assign({ className: className, css: onCoverClick &&
+        } }, { children: [_jsxs(Cover, Object.assign({ className: `${className} ${bookClasses.cover}`, css: onCoverClick &&
                     css `
             cursor: pointer;
-          `, backgroundColor: coverColor, variants: coverMotion, onClick: () => {
+          `, variants: coverMotion, onClick: () => {
                     setOpen(!open);
                     onCoverClick === null || onCoverClick === void 0 ? void 0 : onCoverClick();
                 } }, { children: [icon && _jsx(CoverIcon, { children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, {}), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
@@ -97,29 +103,24 @@ function Book(props, ref) {
                 opacity: 0.8;
               ` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Subtitle, { children: subtitle }), _jsx(Subtitle, Object.assign({ css: css `
               font-weight: 800;
-            ` }, { children: subtitleBold })), _jsx(CoverTitle, Object.assign({ showProgress: Boolean(progressInfo) }, { children: title })), progressInfo && (_jsxs(Progress, { children: [_jsx("div", Object.assign({ css: css `
-                  color: ${progressInfo.progressBaseColor};
-                ` }, { children: progressInfo.progressTitle })), _jsxs("div", Object.assign({ css: css `
+            ` }, { children: subtitleBold })), _jsx(CoverTitle, Object.assign({ showProgress: Boolean(progressInfo) }, { children: title })), progressInfo && (_jsxs(Progress, { children: [_jsx("div", Object.assign({ className: bookClasses.progressText }, { children: progressInfo.title })), _jsxs("div", Object.assign({ css: css `
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
-                ` }, { children: [_jsx("div", Object.assign({ css: css `
+                ` }, { children: [_jsx("div", Object.assign({ className: bookClasses.progressBase, css: css `
                     overflow: hidden;
-                    background-color: ${progressInfo.progressBaseColor};
                     width: 128px;
                     height: 6px;
                     border-radius: 3px;
-                  ` }, { children: _jsx("div", { css: css `
-                      background-color: ${progressInfo.progressBarColor};
-                      width: ${progressInfo.progressValue * 100}%;
+                  ` }, { children: _jsx("div", { className: bookClasses.progressBar, css: css `
+                      width: ${progressInfo.value * 100}%;
                       height: 6px;
-                    ` }) })), _jsxs("div", Object.assign({ css: css `
-                    color: ${progressInfo.progressBaseColor};
+                    ` }) })), _jsxs("div", Object.assign({ className: bookClasses.progressText, css: css `
                     width: 32px;
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                  ` }, { children: [Math.round(progressInfo.progressValue * 100), "%"] }))] }))] }))] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
+                  ` }, { children: [Math.round(progressInfo.value * 100), "%"] }))] }))] }))] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
                             // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
                             e.stopPropagation();
                         } }, { children: buttons }))] })), _jsx(Shelf, {})] })));
@@ -133,24 +134,21 @@ const Container = styled(motion.div) `
 
   padding-top: ${HOVER_Y_OFFSET}px;
 `;
-const Cover = styled(motion.div, {
-    shouldForwardProp: (prop) => prop !== "backgroundColor",
-})(({ backgroundColor }) => css `
-    height: ${BOOK_HEIGHT}px;
+const Cover = styled(motion.div) `
+  height: ${BOOK_HEIGHT}px;
 
-    border-radius: 8px;
-    background: ${backgroundColor};
-    box-shadow: ${shadows.shadow04};
+  border-radius: 8px;
+  box-shadow: ${shadows.shadow04};
 
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  overflow: hidden;
 
-    position: relative;
-    bottom: 0px;
-    z-index: ${ZINDEX_COVER};
-  `);
+  position: relative;
+  bottom: 0px;
+  z-index: ${ZINDEX_COVER};
+`;
 const CoverTexts = styled(motion.div) `
   width: 100%;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.76.3",
+  "version": "1.76.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,