2024. 09. 02. (팀프로젝트 - startify 02)

1. 기본틀 만들기

페이지를 만들기 위해서 우선 기본적인 형태부터 만들었다.

1. 제목
2. 유튜브링크
3. 유튜브 아이프레임
4. 게시글 내용
5. 가수이름
6. 계절(선택창)
7. 해시테그
8. 게시글 입력 버튼

이 들어가야한다. 

기본적으로 우선 input 창이 들어가야하는 제목, 유튜브링크, 가수이름, 해시테그에는 아래와 같은 코드를 기본적으로 작성하여 목록 : input 창이 뜨도록 하였다.(게시글 내용은 input대신 textarea를 사용한다.)

placeholder은 input 창안에 뜨는 글이다.(input 입력 시 사라진다.)

//useState를 사용하여 미리 변수값들을 정해놓는다.
import React, { useState } from "react";
const [..., set...] = useState("");

 

//input안의 값이 바뀔 때마다 출력을 해준다.
    const handle...Change = (event) => {
        set...(event.target.value);
    };

//return에 들어가야 할 부분
<div>
 <label>... : </label>
 <input placeholder="...을 입력해주세요." value={...} onChange={handle...Change} />
</div>

2. 유튜브 아이프레임 넣기

위와 같이 세팅을 해두고 이제 유튜브 아이프레임을 넣어야 한다.

유튜브 아이프레임을 넣기 위해 아래와 같은 코드를 사용하였다.

//getYoutubeKey
export const getYoutubeKey = (url) => {
    return url ? url.split("v=")[1]?.split("&")[0] : null;
};

//유튜브영상을 넣기 위해 필요한 유튜브주소를 코드형식으로 변환
const getEmbedLink = (link) => {
        const videoId = getYoutubeKey(link);
        return `https://www.youtube.com/embed/${videoId}?loop=1&autoplay=1&mute=1&playlist=${videoId}`;
    };

 

//유튜브영상을 iframe을 통해 넣기위한 작업
                    <div>
                        {youtubeLink ? (
                            <Preview>
                                <iframe
                                    src={getEmbedLink(youtubeLink)}
                                    frameBorder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowFullScreen
                                    title="YouTube Video Preview"
                                ></iframe>
                            </Preview>
                        ) : (
                            <PlaceholderMessage>유튜브 링크를 넣어주세요.</PlaceholderMessage>
                        )}
                    </div>

처음에는 유튜브 영상을 넣다가 대신에 썸네일을 넣는 것도 나쁘지 않겠다는 생각에 썸네일 관련해서도 코드를 찾아보고 팀원에게 물어서 둘 중 어떤게 더 나은지 결정하기로 하였다.

아래는 그래서 만들어둔 유튜브 썸네일을 위한 코드이다.

    ////유튜브썸네일을 넣기 위해 필요한 jpg를 코드형식으로 변환
    const getThumbnailLink = (link) => {
        const videoId = getYoutubeKey(link);
        return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
    };

//유튜브 썸네일을 넣기 위한 return 영역
            <div>
                {youtubeLink ? (
                    <Preview>
                        <img src={getThumbnailLink(youtubeLink)} alt="YouTube Thumbnail Preview" />
                    </Preview>
                ) : (
                    <PlaceholderMessage>유튜브 링크를 넣어주세요.</PlaceholderMessage>
                )}
            </div>

결론적으로는 해당국가에서 못보게 하거나 공유불가인 영상이있을 수 있기때문에 미리 확인하기 위해서 영상을 띄우는 것으로 합의보았다.