@tipp/ui 1.2.21 → 1.3.1

package/dist/utils/index.js

@@ -1,10 +1,10 @@
 import "../chunk-DRBRT57F.js";
-import {
-  getCellAlign
-} from "../chunk-A7CXRZIO.js";
 import {
   scrollTo
 } from "../chunk-ZXQZRIRS.js";
+import {
+  getCellAlign
+} from "../chunk-A7CXRZIO.js";
 import "../chunk-N552FDTV.js";
 export {
   getCellAlign,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.2.21",
+  "version": "1.3.1",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -54,8 +54,8 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/eslint-config": "1.0.0",
-    "@tipp/typescript-config": "1.0.0"
+    "@tipp/typescript-config": "1.0.0",
+    "@tipp/eslint-config": "1.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/molecules/index.ts

@@ -5,4 +5,5 @@ export * from './dot-navigation';
 
 export * from './stepper';
 
-export * from './tag-selector';
+export * from './tag-selector';
+export * from './learning-post';

package/src/molecules/learning-post.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import type { ThemeProviderProps } from '../theme/theme-provider';
+import { ThemeProvider } from '../theme/theme-provider';
+import { Grid } from '../atoms/grid';
+import { Flex } from '../atoms/flex';
+import { Heading } from '../atoms/heading';
+import { Typo } from '../atoms/typo';
+import { AspectRatio } from '../atoms/aspect-ratio';
+import { Badge } from '../atoms/badge';
+import { Box } from '../atoms/box';
+import { Button } from '../atoms/button';
+
+interface Tag {
+  name?: string;
+  id: string;
+}
+export interface LearningPostProps {
+  defaultThemeProps?: Partial<ThemeProviderProps>;
+  html?: string;
+  title?: string;
+  metaDescription?: string;
+  /** 섬네일에 해당하는 이미지 컴포넌트 */
+  imageComp?: React.ReactElement;
+  tags?: Tag[];
+  children?: React.ReactElement;
+  onPageBack?: () => void;
+}
+
+export function LearningPost(props: LearningPostProps): React.ReactNode {
+  const {
+    defaultThemeProps,
+    html,
+    tags,
+    title,
+    metaDescription,
+    imageComp,
+    onPageBack,
+    children,
+  } = props;
+  return (
+    <ThemeProvider
+      {...defaultThemeProps}
+      accentColor="iris"
+      scaling="110%"
+      style={{}}
+    >
+      {html ? (
+        <Grid
+          columns={{ initial: '1', md: '130px 1fr 130px' }}
+          gap={{ initial: '2', md: '5' }}
+          height="100%"
+          justify="center"
+          pb="160px"
+          position="relative"
+          px="4"
+          width="100%"
+        >
+          <div />
+          <Flex
+            align="center"
+            direction="column"
+            maxWidth="880px"
+            mt={{ initial: '3', md: '8' }}
+            overflow="hidden"
+            width="100%"
+          >
+            <Grid align="start" columns={{ initial: '1', sm: '2' }} gap="2">
+              <Grid
+                gap="3"
+                mb={{ initial: '4', sm: '0' }}
+                style={{ alignSelf: 'flex-start' }}
+              >
+                <Heading
+                  style={{
+                    fontSize: '2.4rem',
+                    lineHeight: 1.25,
+                    wordBreak: 'keep-all',
+                  }}
+                  variant="heading1"
+                >
+                  {title}
+                </Heading>
+                <Typo>{metaDescription}</Typo>
+                <Flex gap="1" wrap="wrap">
+                  {tags?.map((el) => {
+                    if (el.name?.startsWith('filter')) return;
+                    return (
+                      <Badge key={el.id} size="large" variant="solid">
+                        {el.name}
+                      </Badge>
+                    );
+                  })}
+                </Flex>
+              </Grid>
+
+              <AspectRatio
+                ratio={5 / 3}
+                style={{
+                  overflow: 'hidden',
+                  borderRadius: 'var(--radius-4)',
+                  objectFit: 'cover',
+                }}
+              >
+                {imageComp}
+              </AspectRatio>
+            </Grid>
+
+            <Box mt="5" width="100%">
+              <div
+                className="gh-content"
+                dangerouslySetInnerHTML={{ __html: html }}
+              />
+            </Box>
+          </Flex>
+          {children}
+        </Grid>
+      ) : (
+        <Flex
+          align="center"
+          direction="column"
+          gap="6"
+          height="100%"
+          justify="center"
+          width="100%"
+        >
+          <Heading variant="heading1">콘텐츠를 찾을 수 없습니다.</Heading>
+          <Heading
+            align="center"
+            color="gray"
+            variant="heading4"
+            weight="regular"
+          >
+            {`요청하신 콘텐츠를 찾을 수 없습니다.
+        잠시 후 다시 시도해주세요.`}
+          </Heading>
+          <Button onClick={onPageBack} size="large">
+            뒤로가기
+          </Button>
+        </Flex>
+      )}
+    </ThemeProvider>
+  );
+}

package/src/theme/theme-provider.tsx

@@ -3,7 +3,7 @@ import { Theme } from '@radix-ui/themes';
 
 type ThemeProps = React.ComponentProps<typeof Theme>;
 
-interface ThemeProviderProps extends ThemeProps {
+export interface ThemeProviderProps extends ThemeProps {
   children: React.ReactNode;
 }