Merge pull request #19 from titicacadev/feature/add-floating-install-button

💫 floating-install-button 패키지 추가

Author: yceffort

packages/floating-install-button/README.md

@@ -0,0 +1,15 @@
+# `floating-install-button`
+
+퍼블릭 웹뷰에서 공통으로 쓰이는 플로팅 설치 유도 버튼입니다.
+
+꼭 퍼블릭 웹뷰 환경에서만 쓰일 수 있도록 유의 부탁드립니다.
+
+## Usage
+
+```javascript
+import FloatingInstallButton from '@titicaca/floating-install-button'
+```
+
+```jsx harmony
+<FloatingInstallButton appInstallLink="href" isPublic={isPublic} />
+```

packages/floating-install-button/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@titicaca/floating-install-button",
+  "version": "1.0.0-alpha.5",
+  "description": "floating triple install button",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/titicacadev/triple-design-system.git"
+  },
+  "keywords": [
+    "triple",
+    "floating",
+    "install",
+    "button"
+  ],
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/titicacadev/triple-frontend/issues"
+  },
+  "homepage": "https://github.com/titicacadev/triple-frontend#readme",
+  "dependencies": {
+    "@titicaca/triple-design-system": "^1.0.0-alpha.5"
+  }
+}

packages/floating-install-button/src/index.tsx

@@ -0,0 +1,110 @@
+declare var window: any
+
+import React, { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import { GetGlobalColor, Text, Container } from '@titicaca/triple-design-system'
+
+const MIN_DESKTOP_WIDTH = 1142
+const CLOSE_INSTALL_BUTTON_KEY = 'close_install_button'
+
+const FloatingButton = styled.div`
+  position: fixed;
+  height: 84px;
+  border-radius: 42px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.07);
+  background-color: rgba(${GetGlobalColor('blue')}, 0.98);
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+  margin-bottom: 30px;
+  overflow: hidden;
+
+  @media (min-width: ${MIN_DESKTOP_WIDTH}px) {
+    display: none;
+  }
+`
+
+const InstallDescription = styled(Text)`
+  height: 21px;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 23px 0px 0px 32px;
+  color: rgb(${GetGlobalColor('white')});
+`
+
+const Description = styled(Text)`
+  width: 200px;
+  height: 15px;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(${GetGlobalColor('white')}, 0.6);
+  margin: 3px 0px 22px 32px;
+`
+
+const GoAppButton = styled.img`
+  width: 20px;
+  height: 20px;
+`
+
+const CloseButton = styled.img`
+  width: 30px;
+  height: 30px;
+  margin: 27px 16px 27px 0;
+`
+
+export default function FloatingInstallButton({
+  appInstallLink,
+  isPublic,
+  trackEvent,
+  trackEventParams,
+}: {
+  appInstallLink?: string
+  isPublic?: boolean
+  trackEvent?: any
+  trackEventParams?: {
+    onShow?: any
+    onSelect?: any
+    onClose?: any
+  }
+}) {
+  const [buttonVisibility, setButtonVisibility] = useState(false)
+
+  const sendTrackEventRequest = (param) => {
+    trackEvent && param && trackEvent(param)
+  }
+
+  useEffect(() => {
+    const visitedPages = window.sessionStorage.getItem(CLOSE_INSTALL_BUTTON_KEY)
+    if (!visitedPages) {
+      setButtonVisibility(true)
+      sendTrackEventRequest(trackEventParams && trackEventParams.onShow)
+    }
+  })
+
+  const onClose = () => {
+    setButtonVisibility(false)
+    window.sessionStorage.setItem(CLOSE_INSTALL_BUTTON_KEY, 'true')
+    sendTrackEventRequest(trackEventParams && trackEventParams.onClose)
+  }
+
+  const onSelect = () => {
+    sendTrackEventRequest(trackEventParams && trackEventParams.onSelect)
+  }
+
+  return buttonVisibility && isPublic ? (
+    <FloatingButton>
+      <Container floated="left">
+        <InstallDescription>
+          <a href={appInstallLink} onClick={onSelect}>
+            <Container floated="left">트리플 앱 설치하기</Container>
+            <GoAppButton src="https://assets.triple.guide/images/[email protected]" />
+          </a>
+        </InstallDescription>
+        <Description>가이드북, 일정짜기, 길찾기, 맛집</Description>
+      </Container>
+      <Container floated="right" onClick={onClose}>
+        <CloseButton src="https://assets.triple.guide/images/[email protected]" />
+      </Container>
+    </FloatingButton>
+  ) : null
+}