-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.tsx
More file actions
127 lines (113 loc) ยท 3.84 KB
/
Copy pathindex.tsx
File metadata and controls
127 lines (113 loc) ยท 3.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import InfoButton from 'components/InfoButton'
import PrefetchLink from 'components/next/PrefetchLink'
import RadialBlurImageEdit from 'components/RadialBlurImageEdit'
import UploadButton from 'components/UploadButton'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import { useEffect, useState } from 'react'
import JsFileDownloader from 'js-file-downloader'
import { createFileInput } from 'utils/virtualFileInput'
import style from './index.scss'
import { preloadImage } from 'utils/prefetch'
import isMobile from 'is-mobile'
const Home: NextPage = () => {
const [imageUrl, setImageUrl] = useState(null as string | null)
const [fileInput, setFileInput] = useState(
null as null | ReturnType<typeof initiateFileInput>
)
const [isKakaoBrower, setKakaoBrower] = useState(false)
useEffect(() => {
const isKakao = navigator.userAgent.match('KAKAOTALK')
setKakaoBrower(Boolean(isKakao))
}, [])
const initiateFileInput = () => {
return createFileInput({
multiple: false,
accept: 'image/*'
})
}
useEffect(() => {
const fileInputInstance = initiateFileInput()
setFileInput(fileInputInstance)
fileInputInstance.onChange((files) => {
if (!files) return
setImageUrl(files[0].thumbnail as string)
fileInputInstance.reset()
})
}, [])
useEffect(() => {
// Fixing iOS vh issues
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
// Fixing iOS prefetch image issue
preloadImage('https://i.imgur.com/FT8r0pM.png')
}, [])
return (
<>
<NextSeo
title="๊ธด๋ฐํ ์ด๋ฏธ์ง ์์ฑ๊ธฐ"
description="์ด๋ฏธ์ง๋ฅผ ์ฒจ๋ถํ๋ฉด ํด๋น ์ด๋ฏธ์ง๋ฅผ ์์๊ฐ์ ๊ธด๋ฐํ๊ฒ ๋ง๋ค์ด๋๋ฆฝ๋๋ค."
openGraph={{
type: 'website',
locale: 'ko_KR',
site_name:
'๊ธด๋ฐํ ์ด๋ฏธ์ง ์์ฑ๊ธฐ, ์ด๋ฏธ์ง๋ฅผ ์์ ๊ฐ์ ๊ธด๋ฐํ๊ฒ ๋ง๋ค์ด์ค๋๋ค',
images: [
{
url: `https://i.imgur.com/tm4X9ls.png`,
width: 1200,
height: 630,
alt: '๊ธด๋ฐํ ์ด๋ฏธ์ง ์์ฑ๊ธฐ, ์ด๋ฏธ์ง๋ฅผ ์์ ๊ฐ์ ๊ธด๋ฐํ๊ฒ ๋ง๋ค์ด์ค๋๋ค',
type: 'image/png'
}
]
}}
additionalLinkTags={[
{
rel: 'icon',
href: '/favicon.ico'
}
]}
/>
<main className="indexPage">
<UploadButton
label="์
๋ก๋ ํ ์ด๋ฏธ์ง๋ฅผ<br>์ ํํด์ฃผ์ธ์."
onClick={() => fileInput?.open()}
/>
<PrefetchLink href="https://github.com/hmmhmmhm/do-urgency" />
<InfoButton className="indexPage__infoButton" />
{imageUrl && imageUrl.length > 0 && (
<RadialBlurImageEdit
className="indexPage__edit"
imageUrl={imageUrl}
onDownload={async (canvasElement) => {
if (isKakaoBrower) {
alert(
'์นด์นด์ค ์ธ์ฑ ๋ธ๋ผ์ฐ์ ์์ ์ด๋ฏธ์ง๋ฅผ ๊พน ๋๋ฌ์ ๋์ค๋ ํจ๋์์ ๋ค์ด๋ก๋ ๋ฐ์์ฃผ์ธ์.'
)
return
}
if (isMobile()) {
alert(
'๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ ์ด๋ฏธ์ง๋ฅผ ๊พน ๋๋ฌ์ ๋์ค๋ ํจ๋์์ ๋ค์ด๋ก๋ ๋ฐ์์ผ ์ฌ์ง์ฒฉ์ ๋ณด๊ด์ด ๊ฐ๋ฅํฉ๋๋ค.'
)
}
await new JsFileDownloader({
url: canvasElement.toDataURL(),
filename: 'image.png',
forceDesktopMode: true,
nativeFallbackOnError: true,
contentType: 'image/png'
})
}}
onClose={() => {
setImageUrl(null)
}}
/>
)}
</main>
<style jsx>{style}</style>
</>
)
}
export default Home