@tipp/ui 1.6.21 → 1.6.22

package/dist/index.js

@@ -41,7 +41,7 @@ import {
 } from "./chunk-I7VFM7I6.js";
 import {
   ContentsCard
-} from "./chunk-Z2UO6V3A.js";
+} from "./chunk-L5XYBDEW.js";
 import {
   CurriculumCard
 } from "./chunk-4DB5HWFL.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.6.21",
+  "version": "1.6.22",
   "private": false,
   "type": "module",
   "exports": {

package/src/app/platform/contents-card.tsx

@@ -8,6 +8,7 @@ import { Grid } from '@/atoms/grid';
 import { Skeleton } from '@/atoms/skeleton';
 import { Typo } from '@/atoms/typo';
 import { DotsVerticalIcon } from '@/icon';
+import { Card, Inset } from '@/atoms';
 
 export interface ContentsCardProps {
   title?: React.ReactNode;
@@ -38,37 +39,32 @@ export const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(
     ref
   ): React.ReactElement => {
     return (
-      <Flex
-        className="hover-shadow"
-        direction="column"
-        height="100%"
-        m="0"
+      <Card
         onClick={onClickCard}
         ref={ref}
         style={{
-          backgroundColor: 'var(--color-panel)',
-          borderRadius: 'var(--radius-5)',
-          overflow: 'hidden',
+          height: '100%',
+          width: '100%',
+          display: 'grid',
           cursor: 'pointer',
         }}
-        width="100%"
       >
         {/* 섬네일 */}
-        <Skeleton loading={isLoading}>
-          <Box
-            height="210px"
-            style={{
-              borderTopLeftRadius: 'var(--radius-4)',
-              borderTopRightRadius: 'var(--radius-4)',
-              backgroundImage: `url(${imageSrc})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-            }}
-            width="100%"
-          />
-        </Skeleton>
+        <Inset clip="padding-box" pb="0" side="top">
+          <Skeleton loading={isLoading}>
+            <Box
+              height="210px"
+              style={{
+                backgroundImage: `url(${imageSrc})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+              }}
+              width="100%"
+            />
+          </Skeleton>
+        </Inset>
         {/* 제목, 설명 */}
-        <Box p="5">
+        <Flex direction="column" p="4" pb="3">
           <Box>
             <Skeleton loading={isLoading}>
               <Heading mb="3" variant="heading5">
@@ -85,7 +81,7 @@ export const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(
             align="center"
             columns="1fr auto"
             justify="between"
-            py="2"
+            pt="2"
             style={{ marginTop: 'auto' }}
             width="100%"
           >
@@ -117,8 +113,8 @@ export const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(
               </DropdownMenu.Root>
             )}
           </Grid>
-        </Box>
-      </Flex>
+        </Flex>
+      </Card>
     );
   }
 );