@team-monolith/cds 1.76.1 → 1.76.2

package/@types/emotion.d.ts

@@ -120,20 +120,20 @@ interface CodleColors {
     decorativeSilver: string;
     decorativeGray: string;
     decorativeBlack: string;
-    decorativeLightRed: string;
-    decorativeMidRed: string;
-    decorativeLightIndigo: string;
-    decorativeMidIndigo: string;
-    decorativeLightGreen: string;
-    decorativeMidGreen: string;
-    decorativeLightPurple: string;
-    decorativeMidPurple: string;
-    decorativeLightGold: string;
-    decorativeMidGold: string;
-    decorativeLightGray: string;
-    decorativeMidGray: string;
-    decorativeLightBlack: string;
-    decorativeMidBlack: string;
+    decorativeRedContainer: string;
+    decorativeRedOnContainer: string;
+    decorativeIndigoContainer: string;
+    decorativeIndigoOnContainer: string;
+    decorativeGreenContainer: string;
+    decorativeGreenOnContainer: string;
+    decorativePurpleContainer: string;
+    decorativePurpleOnContainer: string;
+    decorativeGoldContainer: string;
+    decorativeGoldOnContainer: string;
+    decorativeGrayContainer: string;
+    decorativeGrayOnContainer: string;
+    decorativeBlackContainer: string;
+    decorativeBlackOnContainer: string;
   };
   blanket: {
     neutral: string;

package/dist/CdsProvider.js

@@ -125,20 +125,20 @@ export const light = {
             decorativeSilver: "#6A7781",
             decorativeGray: "#747474",
             decorativeBlack: "#474658",
-            decorativeLightRed: "#FFCDD7",
-            decorativeMidRed: "#FE5375",
-            decorativeLightIndigo: "#CED1FF",
-            decorativeMidIndigo: "#8088FF",
-            decorativeLightGreen: "#BCF1D1",
-            decorativeMidGreen: "#4AC078",
-            decorativeLightPurple: "#E5CAEF",
-            decorativeMidPurple: "#C673E4",
-            decorativeLightGold: "#E3D7C2",
-            decorativeMidGold: "#B09666",
-            decorativeLightGray: "#D6D6D6",
-            decorativeMidGray: "#969696",
-            decorativeLightBlack: "#CAC8D8",
-            decorativeMidBlack: "#474658",
+            decorativeRedContainer: "#FFCDD7",
+            decorativeRedOnContainer: "#FE5375",
+            decorativeIndigoContainer: "#CED1FF",
+            decorativeIndigoOnContainer: "#8088FF",
+            decorativeGreenContainer: "#BCF1D1",
+            decorativeGreenOnContainer: "#4AC078",
+            decorativePurpleContainer: "#E5CAEF",
+            decorativePurpleOnContainer: "#C673E4",
+            decorativeGoldContainer: "#E3D7C2",
+            decorativeGoldOnContainer: "#B09666",
+            decorativeGrayContainer: "#D6D6D6",
+            decorativeGrayOnContainer: "#969696",
+            decorativeBlackContainer: "#CAC8D8",
+            decorativeBlackOnContainer: "#474658",
         },
         blanket: {
             neutral: COLOR.alpha030,
@@ -270,20 +270,20 @@ export const dark = {
             decorativeSilver: "#6A7781",
             decorativeGray: "#747474",
             decorativeBlack: "#474658",
-            decorativeLightRed: "#FFCDD7",
-            decorativeMidRed: "#FE5375",
-            decorativeLightIndigo: "#CED1FF",
-            decorativeMidIndigo: "#8088FF",
-            decorativeLightGreen: "#BCF1D1",
-            decorativeMidGreen: "#4AC078",
-            decorativeLightPurple: "#E5CAEF",
-            decorativeMidPurple: "#C673E4",
-            decorativeLightGold: "#E3D7C2",
-            decorativeMidGold: "#B09666",
-            decorativeLightGray: "#D6D6D6",
-            decorativeMidGray: "#969696",
-            decorativeLightBlack: "#CAC8D8",
-            decorativeMidBlack: "#474658",
+            decorativeRedContainer: "#FFCDD7",
+            decorativeRedOnContainer: "#FE5375",
+            decorativeIndigoContainer: "#CED1FF",
+            decorativeIndigoOnContainer: "#8088FF",
+            decorativeGreenContainer: "#BCF1D1",
+            decorativeGreenOnContainer: "#4AC078",
+            decorativePurpleContainer: "#E5CAEF",
+            decorativePurpleOnContainer: "#C673E4",
+            decorativeGoldContainer: "#E3D7C2",
+            decorativeGoldOnContainer: "#B09666",
+            decorativeGrayContainer: "#D6D6D6",
+            decorativeGrayOnContainer: "#969696",
+            decorativeBlackContainer: "#CAC8D8",
+            decorativeBlackOnContainer: "#474658",
         },
         blanket: {
             neutral: COLOR.alphaf20,

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

@@ -1,4 +1,14 @@
 import React from "react";
+export interface progressInfo {
+    /** 프로그레스 바 상단에 표시되는 텍스트 */
+    progressTitle: string;
+    /** 프로그레스 바 진행도 (0 ~ 1 사이 숫자) */
+    progressValue: number;
+    /** 프로그레스 바 배경 및 텍스트 색상 */
+    progressBaseColor: string;
+    /** 프로그레스 바 진행도 색상 */
+    progressBarColor: string;
+}
 export interface BookProps {
     className?: string;
     /** 제목 영역 (하단에 노출되는) 텍스트 */
@@ -24,7 +34,7 @@ export interface BookProps {
     /** 커버 색상 */
     coverColor: string;
     /** 진행도 프로그레스 바 영역 */
-    progress?: React.ReactNode;
+    progress?: progressInfo;
 }
 declare const _default: React.ForwardRefExoticComponent<BookProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/components/Book/Book.js

@@ -97,7 +97,30 @@ 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: !!progress }, { children: title })), progress && _jsx(Progress, { children: progress })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
+            ` }, { children: subtitleBold })), _jsx(CoverTitle, Object.assign({ showProgress: Boolean(progress) }, { children: title })), progress &&
+                                _jsxs(Progress, { children: [_jsx("div", Object.assign({ css: css `
+                  color: ${progress.progressBaseColor};
+                ` }, { children: progress.progressTitle })), _jsxs("div", Object.assign({ css: css `
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                ` }, { children: [_jsx("div", Object.assign({ css: css `
+                    overflow: hidden;
+                    background-color: ${progress.progressBaseColor};
+                    width: 128px;
+                    height: 6px;
+                    border-radius: 3px;
+                  ` }, { children: _jsx("div", { css: css `
+                      background-color: ${progress.progressBarColor};
+                      width: ${progress.progressValue * 100}%;
+                      height: 6px;
+                    ` }) })), _jsxs("div", Object.assign({ css: css `
+                    color: ${progress.progressBaseColor};
+                    width: 32px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  ` }, { children: [Math.round(progress.progressValue * 100), "%"] }))] }))] })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
                             // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
                             e.stopPropagation();
                         } }, { children: buttons }))] })), _jsx(Shelf, {})] })));
@@ -143,12 +166,13 @@ const CoverTexts = styled(motion.div) `
   flex-direction: column;
   gap: 4px;
 `;
-const CoverTitle = styled.h1 `
-  ${({ theme, showProgress }) => css `
+const CoverTitle = styled("h1", {
+    shouldForwardProp: (prop) => prop !== "showProgress",
+})(({ theme, showProgress }) => css `
     word-wrap: break-word;
     word-break: keep-all;
 
-    margin: auto 0 ${showProgress ? '4px' : '8px'} 0;
+    margin: auto 0 ${showProgress ? "4px" : "8px"} 0;
     color: ${CARD_COLOR_PALETTE(theme).text};
 
     /* Alt/Paragraph/16px-Eb */
@@ -164,8 +188,7 @@ const CoverTitle = styled.h1 `
     display: -webkit-box;
     -webkit-line-clamp: 7;
     -webkit-box-orient: vertical;
-  `}
-`;
+  `);
 const BookGradient = styled.div `
   width: 200px;
   height: ${BOOK_HEIGHT}px;

package/package.json

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