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

수파베이스로의 연결

이제 모든 기능을 구현하였으니 자료들을 수파베이스로 연결하기만 하면 되었는데 작성버튼을 클릭을 하였을 때 자료가 가야하기 때문에

우선 버튼을 만들었다.

                    <Style.Buttons>
                        <button onClick={() => navigate(-1)}>취소</button>
                        <button onClick={handleSubmit}>등록</button>
                    </Style.Buttons>

취소버튼은 작성을 하고 싶지않을 때 바로 전 화면으로 돌아가게 한 것이고, 등록버튼이 클릭을 하였을 때 수파베이스로 자료가 보내지도록 하였다.

   const handleSubmit = async () => {
        const fields = [
            { value: postTitle, message: "제목을 입력해 주세요." },
            { value: title, message: "노래 제목을 입력해 주세요." },
            { value: youtubeLink, message: "유튜브 링크를 입력해 주세요." },
            { value: desc, message: "내용을 입력해 주세요." },
            { value: name, message: "가수 이름을 입력해 주세요." },
            { value: selectedSeason, message: "계절을 선택해 주세요." }
        ];

        for (const field of fields) {
            if (!field.value) {
                alert(field.message);
                return;
            }
        }
        const {
            data: { session }
        } = await supabase.auth.getSession();
        
//만약 로그인이 안된 상태에서 저장하려고 한다면 로그인창으로 가게하기
        if (!session?.user) { 
            alert("로그인을 먼저 해주세요.");
            navigate("/login");
            return;
        }

        const userId = session.user.id; // 사용자 ID 가져오기

        const updatedHashArr = [...hashArr]; // 해시태그가 빈값일 때 자동으로 가수명과 곡명을 저장하도록 하기
        if (updatedHashArr.length === 0) {
            updatedHashArr.push(title, name);
        }

        const { data, error } = await supabase.from("... 수파베이스 테이블이름").insert([
            {
                user_id: userId,
                postTitle: postTitle,
                title: title,
                url: youtubeLink,
                desc: desc,
                name: name,
                genre: selectedSeason,
                hashtags: updatedHashArr
            }
        ]);
// 입력 후 초기화(빈칸으로 적용하기), 게시글 입력되었다 알려준 후 전페이지로 이동
        if (error) {
            alert("입력이 되지 않았습니다");
        } else {
            setPostTitle("");
            setTitle("");
            setYoutubeLink("");
            setDesc("");
            setName("");
            setHashtag("");
            setHashArr([]);
            setSelectedSeason("");
            alert("게시글이 입력되었습니다.");
            navigate("/");
        }
    };

위와 같은 코드를 추가한 결과 아래와 같은 결과물을 만들어낼 수 있었다.