Poketmon Master 프로젝트 리팩토링

이전에 진행했던 Poketmon Master 프로젝트인데 급하게 팀 프로젝트를 진행하게 되어서 완벽하게 완성하지 못한 부분을 리팩토링 하려고 합니다.

먼저 메인 페이지에서 다크모드일 때 이름이랑 아래의 포켓몬 마크가 잘 보이지 않기 때문에 이 부분을 수정해야 할 것 같습니다.

또한 헤더에 영역이 가려지고 다크모드일 때도 아래의 부분은 적용이 되지 않는 것을 알 수 있습니다. 이 부분을 수정하고 상세페이지의 내용을 공유할 수 있는 카카오 공유하기 기능을 넣어볼까 합니다.

공유하기 기능 구현

공유하기 버튼 컴포넌트 생성

아래의 문구 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'); // 사용하려는 앱의 JavaScript 키 입력
</script>

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

Kakao Developers

Web 사이트 도메인 등록

그 후에 vercel 404 새로고침 오류를 해결해 주었습니다.

최상위 경로에 vercel.josn 파일을 생성하고 공식 문서에 있는 아래의 코드를 삽입해 주니 말끔하게 해결되었습니다.

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;
`

아래와 같이 성공한 결과 화면을 보실 수 있습니다!

이제 앞으로 다크모드 상태와 공유하기 버튼만 예쁘게 디자인하면 될 것 같습니다.

Poketmon Master 프로젝트 리팩토링

프로젝트의 다른 글