Refactoring the Poketmon Master project

Poketmon Master is a project I worked on earlier. A team project came up in a hurry and I couldn't fully finish it, so I'm going to refactor the unfinished parts.

First, on the main page in dark mode, the names and the Pokémon marks below them are hard to see, so I think I need to fix that.

You can also see that part of the page is hidden behind the header, and dark mode isn't applied to the lower part either. I'm thinking of fixing this and adding a Kakao share feature so the content of the detail page can be shared on KakaoTalk, a Korean messaging app.

Implementing the share feature

Created the share button component

Add the snippet below to index.html

html

1
2
3
4
5<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // Enter the JavaScript key of the app you want to use
</script>

https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed

Kakao Developers

Register the Web site domain

After that, I fixed the Vercel 404 error on refresh.

I created a vercel.json file at the top-level path and added the code below from the official docs, and that fixed it cleanly.

json

1
2
3{
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api/404.js" }]
}

KakaoShareButton.tsx

jsx

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
59import styled from '@emotion/styled'
import React from 'react'
import { FiShare } from 'react-icons/fi'

const Kakao = (window as any).Kakao

export default function KakaoShareButton() {
    const url = `https://poketmon-master.vercel.app/poketmon/venusaur`

    const shareKakao = () => {
        Kakao.Share.sendDefault({
            objectType: 'feed',
            content: {
                title: '포켓몬 도감',
                description: `추억의 포켓몬 구경하기`,
                imageUrl:
                    'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
                link: {
                    mobileWebUrl: url,
                    webUrl: url,
                },
            },

            social: {
                likeCount: 999,
                commentCount: 999,
                sharedCount: 999,
            },
            buttons: [
                {
                    title: '추억의 포켓몬 구경하기',
                    link: {
                        mobileWebUrl: url,
                        webUrl: url,
                    },
                },
            ],
        })
    }

    return (
        <ShareBox>
            <ShareButton onClick={() => shareKakao()}>
                공유하기
                <FiShare />
            </ShareButton>
        </ShareBox>
    )
}

const ShareBox = styled.div`
    display: flex;
    justify-content: flex-end;
`

const ShareButton = styled.button`
    margin: 1rem 1rem 0 0;
    cursor: pointer;
`

You can see the successful result below!

Now I think all that's left is to make the dark mode state and the share button look nice.

Refactoring the Poketmon Master project

More in Projects