@team-monolith/cds 1.76.4 → 1.76.6

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

@@ -1,13 +1,15 @@
 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 {
     /** 프로그레스 바 상단에 표시되는 텍스트 */
     title: string;
     /** 프로그레스 바 진행도 (0 ~ 1 사이 숫자) */
     value: number;
-    /** 프로그레스 바 배경 및 텍스트 색상 */
-    baseColor: string;
-    /** 프로그레스 바 진행도 색상 */
-    barColor: string;
 }
 export interface BookProps {
     className?: string;
@@ -31,8 +33,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,7 +79,7 @@ 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, 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: () => {
@@ -82,10 +88,10 @@ function Book(props, ref) {
         }, 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,24 +103,19 @@ 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.baseColor};
-                ` }, { children: progressInfo.title })), _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.baseColor};
                     width: 128px;
                     height: 6px;
                     border-radius: 3px;
-                  ` }, { children: _jsx("div", { css: css `
-                      background-color: ${progressInfo.barColor};
+                  ` }, { children: _jsx("div", { className: bookClasses.progressBar, css: css `
                       width: ${progressInfo.value * 100}%;
                       height: 6px;
-                    ` }) })), _jsxs("div", Object.assign({ css: css `
-                    color: ${progressInfo.baseColor};
+                    ` }) })), _jsxs("div", Object.assign({ className: bookClasses.progressText, css: css `
                     width: 32px;
                     display: flex;
                     justify-content: center;
@@ -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.4",
+  "version": "1.76.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,