@team-monolith/cds 1.60.2 → 1.61.0

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface BookProps {
+    className?: string;
+    title?: string;
+    chapter?: string;
+    courseType?: string;
+    isHidden?: boolean;
+    buttons?: React.ReactNode;
+    /** 전달하면 controlled component로 애니메이션을 제어할 수 있다 */
+    open?: boolean;
+    onHoverStart?: () => void;
+    onHoverEnd?: () => void;
+    onCoverClick?: () => void;
+    icon?: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<BookProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/components/Book/Book.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { forwardRef, useState } from "react";
+import shadows from "../../foundation/shadows";
+import { EyeOffFillIcon } from "../../icons";
+import { motion } from "framer-motion";
+// 이 ZINDEX는 Book 컴포넌트 내의 Stacking Context 에서 활용되므로
+// 다른 글로벌 ZINDEX와 충돌을 고려할 필요가 없습니다.
+const ZINDEX_BUTTONS = 5;
+const ZINDEX_HIDE = 4;
+const ZINDEX_TEXT = 3;
+const ZINDEX_COVER = 2;
+const ZINDEX_ICON = 1;
+const BOOK_HEIGHT = 235;
+const HOVER_Y_OFFSET = 12;
+const SHELF_HEIGHT = 16;
+const BOOK_SHELF_GAP = 10;
+const BUTTONS_HEIGHT = 36; // Button의 높이는 36px (small)로 가정합니다.
+const coverMotion = {
+    closed: {
+        y: 0,
+        boxShadow: shadows.shadow04,
+        transition: { duration: 0.3 },
+    },
+    open: {
+        y: -HOVER_Y_OFFSET,
+        boxShadow: shadows.shadow16,
+        transition: { duration: 0.3 },
+    },
+};
+const textMotion = {
+    closed: {
+        paddingBottom: 12,
+        transition: { duration: 0.3 },
+    },
+    open: {
+        paddingBottom: 12 + BUTTONS_HEIGHT + 4,
+        transition: { duration: 0.3 },
+    },
+};
+const buttonsMotion = {
+    closed: {
+        opacity: 0,
+        pointerEvents: "none",
+        transition: { duration: 0.3 },
+    },
+    open: {
+        opacity: 1,
+        pointerEvents: "auto",
+        transition: { duration: 0.3 },
+    },
+};
+const CARD_COLOR_PALETTE = (theme) => ({
+    border: theme.color.foreground.primaryDisabled,
+    backgrond: theme.color.background.primary,
+    text: theme.color.foreground.neutralAlt,
+});
+/**
+ * Framer Motion의 whileHover를 사용하지 않고 직접 애니메이션 상태를 관리합니다.
+ * 내부적으로는 간단한 애니메이션 상태 관리가 있으며, 필요한 경우
+ * open 상태를 전달하여 외부에서 관리할 수 있습니다.
+ *
+ * 사유1)
+ *   모바일에서는 hover가 없기 때문에 whileHover를 사용할 수 없습니다.
+ *   클릭(탭)을 통해 열고 닫을 수 있어야 합니다.
+ *
+ * 사유2)
+ *   관리/배부 드랍다운 Modal이 Card 위로 그려져 hoverEnd를 유발하기 때문에
+ *   특성 상황에서는 hoverEnd가 발생했어도 Card를 열고 있어야 합니다.
+ * @param props
+ * @param ref
+ * @returns
+ */
+function Book(props, ref) {
+    const { className, title, chapter, courseType, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, } = props;
+    const theme = useTheme();
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== undefined ? 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, 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 `
+                position: absolute;
+                z-index: ${ZINDEX_HIDE};
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                opacity: 0.8;
+
+                width: 24px;
+                height: 24px;
+              ` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Chapter, { children: chapter }), _jsx(CourseType, { children: courseType }), _jsx(CoverTitle, { children: title })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
+                            // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
+                            e.stopPropagation();
+                        } }, { children: buttons }))] })), _jsx(Shelf, {})] })));
+}
+export default forwardRef(Book);
+const Container = styled(motion.div) `
+  position: relative;
+
+  width: 200px;
+  height: ${BOOK_HEIGHT + HOVER_Y_OFFSET + SHELF_HEIGHT + BOOK_SHELF_GAP}px;
+
+  padding-top: ${HOVER_Y_OFFSET}px;
+`;
+const Cover = styled(motion.div)(({ theme }) => css `
+    height: ${BOOK_HEIGHT}px;
+
+    border-radius: 8px;
+    background: ${CARD_COLOR_PALETTE(theme).backgrond};
+    box-shadow: ${shadows.shadow04};
+
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    overflow: hidden;
+
+    position: relative;
+    bottom: 0px;
+    z-index: ${ZINDEX_COVER};
+  `);
+const CoverTexts = styled(motion.div) `
+  width: 100%;
+  height: 100%;
+  padding: 12px 12px 12px 24px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: ${ZINDEX_TEXT};
+
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const CoverTitle = styled.h1(({ theme }) => css `
+    word-wrap: break-word;
+    word-break: keep-all;
+
+    margin: auto 0 8px 0;
+    color: ${CARD_COLOR_PALETTE(theme).text};
+
+    /* Alt/Paragraph/16px-Eb */
+    font-family: ${theme.fontFamily.title};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px;
+
+    /* multiline 말줄임말 적용 css */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
+  `);
+const BookGradient = styled.div `
+  width: 200px;
+  height: ${BOOK_HEIGHT}px;
+  background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(0, 0, 0, 0.75) 100%
+    ),
+    linear-gradient(
+      90deg,
+      #999 0%,
+      #fbfbfb 2%,
+      #fbfbfb 4%,
+      #cdcdcd 6%,
+      #fbfbfb 10%,
+      #fbfbfb 100%
+    );
+  mix-blend-mode: multiply;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+  z-index: ${ZINDEX_COVER};
+`;
+const Buttons = styled(motion.div)(({ theme }) => css `
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    padding: 0 12px 0 24px;
+
+    position: absolute;
+    bottom: 12px;
+    z-index: ${ZINDEX_BUTTONS};
+
+    svg {
+      color: ${CARD_COLOR_PALETTE(theme).text};
+    }
+  `);
+const Shelf = styled.div(({ theme }) => css `
+    height: ${SHELF_HEIGHT}px;
+    width: calc(100% + 32px);
+    border-radius: 4px;
+    background: ${theme.color.background.neutralAltActive};
+
+    position: absolute;
+    bottom: 0px;
+    left: -16px;
+  `);
+const Hide = styled.div(({ theme }) => css `
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: ${theme.color.blanket.neutral};
+    border-radius: 8px;
+
+    z-index: ${ZINDEX_HIDE};
+  `);
+const Chapter = styled.div(({ theme }) => css `
+    color: ${CARD_COLOR_PALETTE(theme).text};
+
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+
+    opacity: 0.8;
+  `);
+const CourseType = styled.div(({ theme }) => css `
+    color: ${CARD_COLOR_PALETTE(theme).text};
+
+    /* Default/Label/12px-Eb */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 16px; /* 133.333% */
+
+    opacity: 0.8;
+  `);
+const CoverIcon = styled.div(({ theme }) => css `
+    position: absolute;
+    top: 50%;
+    left: 100px;
+    transform: translateY(-50%);
+
+    svg {
+      width: 120px;
+      height: 120px;
+      color: ${theme.color.blanket.neutral};
+    }
+
+    z-index: ${ZINDEX_ICON};
+  `);

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

@@ -0,0 +1 @@
+export { default } from "./Book";

package/dist/components/Book/index.js

@@ -0,0 +1 @@
+export { default } from "./Book";

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/AlertDialog";
 export * from "./components/DecoratedNumber";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
+export { default as Book } from "./components/Book";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as CheckboxInput } from "./components/CheckboxInput";

package/dist/index.js

@@ -3,6 +3,7 @@ export * from "./components/AlertDialog";
 export * from "./components/DecoratedNumber";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
+export { default as Book } from "./components/Book";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as CheckboxInput } from "./components/CheckboxInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.60.2",
+  "version": "1.61.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -13,6 +13,7 @@
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
+    "framer-motion": "^11.3.19",
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.12.4",
     "lodash": "^4.17.21",