본문 바로가기

sparta/TypeScript&Next

[NEXT]- 마지막 팀 과제에 쓴 거 정리 (2)

    // Supabase와 동기화된 데이터 가져오기
      const { data: bookmarkData } = await supabase
        .from('bookmarks')
        .select('post_id')
        .eq('user_id', user.id)

      const bookmarkedPostIds = bookmarkData?.map(
        (bookmark) => bookmark.post_id,
      )

      setPosts((prev) =>
        prev.map((post) => ({
          ...post,
          isBookmarked: bookmarkedPostIds?.includes(post.id) || false,
        })),
      )
    } catch (error) {
      setError('북마크 상태를 변경할 수 없습니다.')
    }
//북마크버튼
<button
            onClick={(e) => {
              e.stopPropagation()
              toggleBookmark(posts.id)
            }}
          >
            {posts.isBookmarked ? (
              <FaStar className="w-[30px] h-[30px]" />
            ) : (
              <FaRegStar className="w-[30px] h-[30px]" />
            )}
          </button>

 

 

// 야심차게 준비한 부분,
 const handleComplete = async () => {
    try {
      await Swal.fire({
        title: '🎉 학습 완료!',
        text: '모든 카드를 학습하셨습니다!',
        icon: 'success',
        confirmButtonText: '확인',
      })
      router.push('/learning')
    } catch (err) {
      console.error('Swal 오류:', err)
    }
  }


// ...
{currentIndex === totalCards - 1 ? (
        <button
          className="px-4 py-2 bg-[#282E3E] text-white rounded hover:bg-[#3f475e] transition duration-300"
          onClick={handleComplete}
        >
          완료하기
        </button>
      ) : (
        <button
          className="px-4 py-2 bg-[#282E3E] text-white rounded hover:bg-[#3f475e] transition duration-300"
          onClick={handleBack}
        >
          뒤로가기
        </button>
      )}