@tipp/ui 2.3.35 → 2.3.37

package/src/constrant/training-info-guideline.schema.json

@@ -10,7 +10,8 @@
         "items":{
           "oneOf": [
             { "$ref": "#/definitions/TrainingInfoGuidelineFileValue" },
-            { "$ref": "#/definitions/TrainingInfoGuidelineVideoValue" }
+            { "$ref": "#/definitions/TrainingInfoGuidelineVideoValue" },
+            { "$ref": "#/definitions/TrainingInfoGuidelineYoutubeShortsValue" }
           ]
         }
       }
@@ -39,6 +40,16 @@
       },
       "required": ["type", "url", "videoTitle"],
       "additionalProperties": false
+    },
+    "TrainingInfoGuidelineYoutubeShortsValue": {
+      "type": "object",
+      "properties": {
+        "type": { "const": "youtube-shorts" },
+        "url": { "type": "string" },
+        "title": { "type": "string" }
+      },
+      "required": ["type", "url", "title"],
+      "additionalProperties": false
     }
   },
   "additionalProperties": false

package/src/molecules/training-info-guideline.tsx

@@ -63,6 +63,19 @@ function TrainingInfoGuidelineItem({
     );
   }
 
+  if (value.type === 'youtube-shorts') {
+    return (
+      <TrainingInfoGuidelineButton
+        description="TIPP 쇼츠 보기"
+        icon={<VideoIcon />}
+        onClick={() => {
+          window.open(value.url, '_blank');
+        }}
+        title={value.title}
+      />
+    );
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용
   if (value.type === 'video') {
     return (

package/src/types/training-info-guideline-schema-generated.ts

@@ -7,7 +7,11 @@
 
 export interface TrainingInfoGuidelineContents {
   version: 2;
-  values: (TrainingInfoGuidelineFileValue | TrainingInfoGuidelineVideoValue)[];
+  values: (
+    | TrainingInfoGuidelineFileValue
+    | TrainingInfoGuidelineVideoValue
+    | TrainingInfoGuidelineYoutubeShortsValue
+  )[];
 }
 export interface TrainingInfoGuidelineFileValue {
   type: "file";
@@ -20,4 +24,9 @@ export interface TrainingInfoGuidelineVideoValue {
   url: string;
   videoTitle: string;
 }
+export interface TrainingInfoGuidelineYoutubeShortsValue {
+  type: "youtube-shorts";
+  url: string;
+  title: string;
+}
 

package/dist/chunk-F7LTJOOC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n} from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지, 1부터 시작 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n  /** 표시할 페이지 버튼의 개수 */\n  siblingCount?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0, siblingCount = 2 } = props;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    let start = Math.max(1, page - siblingCount);\n    let end = Math.min(count, page + siblingCount);\n    if (page - siblingCount <= 0 && end < count) {\n      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n    } else if (page + siblingCount > count && start > 1) {\n      start = Math.max(1, start - (page + siblingCount - count));\n    }\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page, siblingCount]);\n\n  // onChange 참조가 매 렌더 새로 생성되더라도 effect가 재발화하지 않도록 ref로 보관한다.\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  });\n\n  // 내부 page 상태가 바뀔 때만 부모에 알림. 마운트 시 초기 page는 부모가 이미 알고 있으므로 제외.\n  const isFirstRender = useRef(true);\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n    onChangeRef.current?.(page);\n  }, [page]);\n\n  useEffect(() => {\n    if (props.page && props.page !== page) {\n      setPage(props.page);\n    }\n  }, [props.page, page]);\n\n  const prev = useMemo<number | undefined>(() => {\n    const p = page - 1;\n    return p < 1 ? undefined : p;\n  }, [page]);\n\n  const next = useMemo<number | undefined>(() => {\n    const n = page + 1;\n    return n > count ? undefined : n;\n  }, [count, page]);\n\n  const onClickPrev = useCallback(() => {\n    prev && setPage(prev);\n  }, [prev]);\n\n  const onClickNext = useCallback(() => {\n    next && setPage(next);\n  }, [next]);\n\n  const doublePrev = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    return Math.max(0, visibleItems[0] - 1);\n  }, [visibleItems]);\n\n  const onClickDoublePrev = useCallback(() => {\n    doublePrev && setPage(doublePrev);\n  }, [doublePrev]);\n\n  const doubleNext = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    const n = visibleItems[visibleItems.length - 1] + 1;\n    if (n > count) return;\n    return Math.min(count, n);\n  }, [count, visibleItems]);\n\n  const onClickDoubleNext = useCallback(() => {\n    doubleNext && setPage(doubleNext);\n  }, [doubleNext]);\n\n  const iconSize = {\n    height: 24,\n    width: 24,\n  };\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: 'large',\n    style: { borderRadius: '50%' },\n  };\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\">\n      <IconButton\n        disabled={!doublePrev}\n        onClick={onClickDoublePrev}\n        {...moveButtonProps}\n      >\n        <DoubleArrowLeftIcon {...iconSize} />\n      </IconButton>\n      <IconButton disabled={!prev} onClick={onClickPrev} {...moveButtonProps}>\n        <ChevronLeftIcon {...iconSize} />\n      </IconButton>\n      <Flex gap=\"1\">\n        {visibleItems.map((item) => {\n          return (\n            <button\n              className={`page-button ${item === page ? 'active' : ''}`}\n              key={item}\n              onClick={() => {\n                setPage(item);\n              }}\n              type=\"button\"\n            >\n              <Typo variant=\"body\">{item}</Typo>\n            </button>\n          );\n        })}\n      </Flex>\n      <IconButton disabled={!next} onClick={onClickNext} {...moveButtonProps}>\n        <ChevronRightIcon {...iconSize} />\n      </IconButton>\n      <IconButton\n        disabled={!doubleNext}\n        onClick={onClickDoubleNext}\n        {...moveButtonProps}\n      >\n        <DoubleArrowRightIcon {...iconSize} />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-SLJLEPD2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/molecules/training-info-guideline.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileTextIcon, VideoIcon } from '@radix-ui/react-icons';\nimport { AspectRatio } from '@/atoms/aspect-ratio';\nimport { Button } from '@/atoms/button';\nimport type { TrainingInfoGuidelineContents } from '@/types/training-info-guideline-schema-generated';\nimport { Dialog } from '@/atoms/dialog';\nimport { Spinner } from '@/atoms/spinner';\nimport { Box } from '@/atoms/box';\nimport { Separator } from '@/atoms/separator';\nimport { Typo } from '@/atoms/typo';\nimport { Flex } from '../atoms/flex';\n\nexport interface TrainingInfoGuidelineProps {\n  values: TrainingInfoGuidelineContents['values'];\n  onClickFileDownload: (args: { url: string; filename: string }) => void;\n}\n\nexport function TrainingInfoGuideline({\n  values,\n  onClickFileDownload,\n}: TrainingInfoGuidelineProps): React.ReactElement {\n  return (\n    <>\n      {values.map((value) => (\n        <TrainingInfoGuidelineItem\n          key={getItemKey(value)}\n          onClickFileDownload={onClickFileDownload}\n          value={value}\n        />\n      ))}\n    </>\n  );\n}\n\ntype TrainingInfoGuidelineValue =\n  TrainingInfoGuidelineContents['values'][number];\n\nfunction getItemKey(value: TrainingInfoGuidelineValue): string {\n  return value.url;\n}\n\ninterface TrainingInfoGuidelineItemProps {\n  value: TrainingInfoGuidelineValue;\n  onClickFileDownload: TrainingInfoGuidelineProps['onClickFileDownload'];\n}\n\nfunction TrainingInfoGuidelineItem({\n  value,\n  onClickFileDownload,\n}: TrainingInfoGuidelineItemProps): React.ReactElement | null {\n  const [isLoading, setIsLoading] = useState(true);\n\n  if (value.type === 'file') {\n    return (\n      <TrainingInfoGuidelineButton\n        description=\"파일 다운로드\"\n        icon={<FileTextIcon />}\n        onClick={() => {\n          onClickFileDownload({ url: value.url, filename: value.filename });\n        }}\n        title={value.downloadButtonName}\n      />\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 차후 다른 타입 추가 시 사용\n  if (value.type === 'video') {\n    return (\n      <Dialog.Root>\n        <Dialog.Trigger>\n          <TrainingInfoGuidelineButton\n            description=\"영상 자료\"\n            icon={<VideoIcon />}\n            title={value.videoTitle}\n          />\n        </Dialog.Trigger>\n        <Dialog.Content\n          height=\"100%\"\n          maxHeight=\"500px\"\n          maxWidth=\"800px\"\n          title={value.videoTitle}\n          width=\"100%\"\n        >\n          <AspectRatio ratio={16 / 9} style={{ width: '100%' }}>\n            <Flex\n              align=\"center\"\n              justify=\"center\"\n              style={{\n                width: '100%',\n                height: '100%',\n                backgroundColor: 'black',\n                position: 'relative',\n              }}\n            >\n              {isLoading ? (\n                <Flex\n                  align=\"center\"\n                  height=\"100%\"\n                  justify=\"center\"\n                  position=\"absolute\"\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    zIndex: 1,\n                    color: 'white',\n                  }}\n                  width=\"100%\"\n                >\n                  <Spinner size=\"3\" style={{ width: 48, height: 48 }} />\n                </Flex>\n              ) : null}\n\n              <iframe\n                allowFullScreen\n                onError={() => {\n                  setIsLoading(false);\n                }} // 필요시 에러 메시지로 대체\n                onLoad={() => {\n                  setIsLoading(false);\n                }}\n                src={`${value.url}?theme=light`}\n                style={{ width: '100%', height: '100%', border: 'none' }}\n                title=\"Curriculum Video\"\n              />\n            </Flex>\n          </AspectRatio>\n        </Dialog.Content>\n      </Dialog.Root>\n    );\n  }\n  return null;\n}\n\ninterface TrainingInfoGuidelineButtonProps {\n  icon: React.ReactNode;\n  title: string;\n  description?: string;\n  onClick?: () => void;\n}\n\nfunction TrainingInfoGuidelineButton({\n  icon,\n  title,\n  description,\n  onClick,\n}: TrainingInfoGuidelineButtonProps): React.ReactElement {\n  return (\n    <Button\n      onClick={onClick}\n      style={{ width: '100%', height: '48px' , textAlign: 'left'}}\n      variant=\"outline\"\n    >\n      <Flex align=\"center\" gap=\"2\" width=\"100%\">\n        {icon}\n        <Separator orientation=\"vertical\" size=\"2\" />\n        <Box>\n          <Typo as=\"div\">\n            {title}\n          </Typo>\n          {typeof description === 'string' && description !== '' ? (\n            <Typo variant=\"caption\" >\n              {description}\n            </Typo>\n          ) : null}\n        </Box>\n        \n      </Flex>\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}