Test/kint5

.github/workflows/cd.yaml

@@ -3,24 +3,24 @@ name: CD
 on:
   push:
     branches-ignore:
-      - '**'
+      - "**"
     tags:
-      - 'release-prod-*'
-      - 'release-pr-*'
+      - "release-prod-*"
+      - "release-pr-*"
 
 env:
   GITHUB_API_URL_BASE: https://api.github.com/repos/${{ github.repository }}
   # Node.js
-  NODE_VERSION: 'lts/*'
-  NPM_REGISTRY_URL: 'https://registry.npmjs.org'
+  NODE_VERSION: "lts/*"
+  NPM_REGISTRY_URL: "https://registry.npmjs.org"
   NODE_AUTH_TOKEN: ${{ secrets.READ_ONLY_NPM_TOKEN }}
   HUSKY: 0
   # Slack notifications
   SLACK_WEBHOOK: ${{ secrets.GHA_NOTIFICATIONS_WEBHOOK_URL }}
-  SLACK_CHANNEL: '#triple-web-dev-notifications' # 메시지 보낼 채널
-  SLACK_USERNAME: 'Triple Frontend' # 메시지를 보내는 계정 이름
-  SLACK_ICON_EMOJI: ':triple_new:'
-  SLACK_DETAIL_URL: 'https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+  SLACK_CHANNEL: "#triple-web-dev-notifications" # 메시지 보낼 채널
+  SLACK_USERNAME: "Triple Frontend" # 메시지를 보내는 계정 이름
+  SLACK_ICON_EMOJI: ":triple_new:"
+  SLACK_DETAIL_URL: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
   SLACK_GITHUB_REPOSITORY: ${{ github.repository }}
   SLACK_AUTHOR_NAME: ${{ github.event.sender.login }}
   SLACK_AUTHOR_ICON: ${{ github.event.sender.avatar_url }}
@@ -46,7 +46,6 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: ${{ env.NPM_REGISTRY_URL }}
-          # cache: 'pnpm'
 
       - name: Wait for CI
         uses: fountainhead/action-wait-for-check@v1.1.0
@@ -59,16 +58,16 @@ jobs:
         if: steps.wait-for-ci.outputs.conclusion == 'timed_out'
         env:
           SLACK_COLOR: fail
-          SLACK_TITLE: ':pleading: CI Waiting timeout'
-          SLACK_TOPIC: 'CI workflow가 시작되었는지, 기다리는 job의 이름이 CI job과 일치하는지, 확인해주세요.'
+          SLACK_TITLE: ":pleading: CI Waiting timeout"
+          SLACK_TOPIC: "CI workflow가 시작되었는지, 기다리는 job의 이름이 CI job과 일치하는지, 확인해주세요."
         run: pnpm dlx @titicaca/gha-tools notify
 
       - name: Notify checking CI failure
         if: steps.wait-for-ci.outputs.conclusion == 'failure'
         env:
           SLACK_COLOR: fail
-          SLACK_TITLE: ':pleading: CI FAILURE'
-          SLACK_TOPIC: '배포를 중단합니다.'
+          SLACK_TITLE: ":pleading: CI FAILURE"
+          SLACK_TOPIC: "배포를 중단합니다."
         run: pnpm dlx @titicaca/gha-tools notify
 
       - name: Shutdown workflow
@@ -92,15 +91,14 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: ${{ env.NPM_REGISTRY_URL }}
-          # cache: 'pnpm'
 
       - name: Get release version
         run: echo "DEPLOY_VERSION=v$(cat ./lerna.json | jq -r '.version')" >> $GITHUB_ENV
 
       - name: Notify deploy start to slack
         env:
           SLACK_COLOR: gray
-          SLACK_TITLE: ':rocket: Release WORKING'
+          SLACK_TITLE: ":rocket: Release WORKING"
           SLACK_TOPIC: ${{ env.DEPLOY_VERSION }}
         run: pnpm dlx @titicaca/gha-tools notify
 
@@ -120,15 +118,15 @@ jobs:
         if: success()
         env:
           SLACK_COLOR: success
-          SLACK_TITLE: ':tada: Release SUCCESS'
+          SLACK_TITLE: ":tada: Release SUCCESS"
           SLACK_TOPIC: ${{ env.DEPLOY_VERSION }}
         run: pnpm dlx @titicaca/gha-tools notify
 
       - name: Notify deploy fail to slack
         if: failure()
         env:
           SLACK_COLOR: fail
-          SLACK_TITLE: ':pleading: Release FAILURE'
+          SLACK_TITLE: ":pleading: Release FAILURE"
           SLACK_TOPIC: ${{ env.DEPLOY_VERSION }}
         run: pnpm dlx @titicaca/gha-tools notify
 
@@ -213,7 +211,6 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: ${{ env.NPM_REGISTRY_URL }}
-          # cache: 'pnpm'
 
       - name: Get release version
         env:
@@ -231,7 +228,7 @@ jobs:
       - name: Notify release start to Slack
         env:
           SLACK_COLOR: gray
-          SLACK_TITLE: ':rocket: Release WORKING'
+          SLACK_TITLE: ":rocket: Release WORKING"
           SLACK_TOPIC: ${{ env.DEPLOY_VERSION }}
         run: pnpm dlx @titicaca/gha-tools notify
 
@@ -269,14 +266,14 @@ jobs:
         if: success()
         env:
           SLACK_COLOR: success
-          SLACK_TITLE: ':tada: Release SUCCESS'
+          SLACK_TITLE: ":tada: Release SUCCESS"
           SLACK_TOPIC: ${{ env.DEPLOY_VERSION }}
         run: pnpm dlx @titicaca/gha-tools notify
 
       - name: Notify release failure to Slack
         if: failure()
         env:
           SLACK_COLOR: fail
-          SLACK_TITLE: ':pleading: Release FAILURE'
+          SLACK_TITLE: ":pleading: Release FAILURE"
           SLACK_TOPIC: ${{ env.DEPLOY_VERSION }}
         run: pnpm dlx @titicaca/gha-tools notify

.github/workflows/ci.yaml

@@ -150,7 +150,7 @@ jobs:
 
       - name: Generate coverage report
         id: test
-        run: pnpm run test:coverage -- --ci --reporters github-actions --reporters summary --maxWorkers ${{ steps.cpu-cores.outputs.count }}
+        run: pnpm run test:coverage -- --ci --reporters github-actions --reporters summary --maxWorkers 2
 
       - name: Notify testing failure
         if: failure() && steps.test.outcome == 'failure'

.storybook/decorators.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { GlobalStyle } from '../packages/core-elements/src'
+import { GlobalStyle } from '../packages/kint5-core-elements/src'
 import {
   EnvProvider,
   HistoryProvider,

packages/app-banner/src/desktop-floating-app-banner.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DesktopFloatingAppBanner } from '.'
+
+export default {
+  title: 'app-banner / DesktopFloatingAppBanner',
+  component: DesktopFloatingAppBanner,
+} as Meta<typeof DesktopFloatingAppBanner>
+
+export const Basic: StoryObj<typeof DesktopFloatingAppBanner> = {
+  args: {},
+}

packages/app-banner/src/floating-app-banner.tsx

@@ -0,0 +1,231 @@
+import { Container, FlexBox, Text } from '@titicaca/core-elements'
+
+interface AppBannerProps {
+  onClose?: () => void
+}
+
+export function DesktopFloatingAppBanner({ onClose }: AppBannerProps) {
+  return (
+    <a
+      href="https://triple.global"
+      target="_blank"
+      css={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        width: '100vw',
+        backgroundColor: '#7743EE',
+        height: 160,
+        textAlign: 'center',
+      }}
+      rel="noreferrer"
+    >
+      <button
+        css={{
+          position: 'absolute',
+          top: 16,
+          right: 16,
+        }}
+        onClick={(e) => {
+          e.preventDefault()
+          onClose?.()
+        }}
+      >
+        <img
+          src="https://assets.triple.guide/images/triple-korea/floating-banner-close.svg"
+          width={24}
+          height={24}
+          alt=""
+        />
+      </button>
+      <FlexBox
+        flex
+        flexDirection="row"
+        css={{
+          margin: '0 auto',
+          width: 'fit-content',
+        }}
+      >
+        <Container
+          css={{
+            position: 'relative',
+            height: 160,
+            width: 140,
+          }}
+        >
+          <img
+            src="https://assets.triple.guide/images/triple-korea/floating-banner-app-preview.png"
+            width={140}
+            height={182}
+            alt=""
+            css={{
+              position: 'absolute',
+              left: 0,
+              bottom: 0,
+            }}
+          />
+        </Container>
+        <Container
+          css={{
+            marginLeft: 22,
+            maxWidth: 390,
+            textAlign: 'left',
+          }}
+        >
+          <Text
+            size={22}
+            bold
+            css={{
+              color: '#FFE814',
+              marginTop: 33,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            韓国旅行のコンシェルジュTRIPLE Korea
+          </Text>
+          <Text
+            size={11}
+            css={{
+              fontWeight: 400,
+              marginTop: 12,
+              color: '#fff',
+            }}
+          >
+            韓国旅行をお考え中ですか？インターパークがリリスした韓国旅行専門アプリ
+            「TRIPLE Korea」をダウンロードしてみてください。 QRコードでTRIPLE
+            Koreaをダウンロード
+          </Text>
+        </Container>
+        <Container
+          css={{
+            borderRadius: '50%',
+            border: '2px solid #fff',
+            width: 'fit-content',
+            height: 'fit-content',
+            padding: '20px 18px 23px',
+            margin: '40px 0 0 60px',
+          }}
+        >
+          <img
+            src="https://assets.triple.guide/images/triple-korea/floating-banner-app-icon.svg"
+            width={40}
+            height={32.4}
+            alt=""
+          />
+        </Container>
+        <Container
+          css={{
+            width: 80,
+            height: 80,
+            borderRadius: 6,
+            backgroundColor: '#fff',
+            padding: 7,
+            margin: '40px 0 0 16px',
+          }}
+        >
+          <img
+            src="https://assets.triple.guide/images/triple-korea/floating-banner-app-qrcode.png"
+            width={66}
+            height={66}
+            alt=""
+          />
+        </Container>
+      </FlexBox>
+    </a>
+  )
+}
+
+interface MobileFloatingAppBannerProps extends AppBannerProps {
+  bottomGap?: number
+}
+
+export function MobileFloatingAppBanner({
+  bottomGap = 0,
+  onClose,
+}: MobileFloatingAppBannerProps) {
+  return (
+    <Container
+      css={{
+        position: 'fixed',
+        bottom: bottomGap,
+        left: 0,
+        backgroundColor: '#7743EE',
+        width: '100vw',
+        height: 170,
+        textAlign: 'center',
+      }}
+    >
+      <button
+        css={{
+          position: 'absolute',
+          top: 16,
+          right: 16,
+        }}
+        onClick={onClose}
+      >
+        <img
+          src="https://assets.triple.guide/images/triple-korea/floating-banner-close.svg"
+          width={24}
+          height={24}
+          alt=""
+        />
+      </button>
+      <Text
+        size={16}
+        bold
+        css={{
+          marginTop: 32,
+          color: '#fff',
+        }}
+      >
+        韓国旅行のコンシェルジュTRIPLE Korea
+      </Text>
+      <a
+        href="https://itunes.apple.com/app/id6476254427"
+        target="_blank"
+        css={{
+          display: 'block',
+          padding: '9px 0',
+          borderRadius: 28,
+          backgroundColor: '#fff',
+          width: '193px',
+          margin: '16px auto 0',
+        }}
+        rel="noreferrer"
+      >
+        <Text
+          size={12}
+          bold
+          css={{
+            color: '#7743EE',
+          }}
+        >
+          App Storeからダウンロード
+        </Text>
+      </a>
+      <a
+        href="https://play.google.com/store/apps/details?id=com.interparktriple.kint5"
+        target="_blank"
+        css={{
+          display: 'block',
+          padding: '9px 0',
+          borderRadius: 28,
+          backgroundColor: '#fff',
+          width: '193px',
+          margin: '8px auto 0',
+        }}
+        rel="noreferrer"
+      >
+        <Text
+          size={12}
+          bold
+          css={{
+            color: '#7743EE',
+          }}
+        >
+          Google Playからダウンロード
+        </Text>
+      </a>
+    </Container>
+  )
+}

packages/app-banner/src/index.ts

@@ -1 +1,5 @@
 export { default } from './app-banner'
+export {
+  DesktopFloatingAppBanner,
+  MobileFloatingAppBanner,
+} from './floating-app-banner'