Feature: 강의 코드 클릭 시에 강의 공유가 가능한 텍스트를 클립보드에 복사한다.

[Byeonjin]

Feature Description

강의 코드 복사 버튼 작업 #68

To-Do

• 강의 코드 공유 버튼 UI 작업
• 강의 코드 공유 기능 구현
• index.html meta open graph 추가
• 추가: 불필요한 중복 코드 제거

추가 사항

강의 코드 공유 버튼 UI를 작업한 후, 클릭 시에 공유할 수 있도록 기능을 추가하였습니다.

const handleShareButtonClicked = async () => {
    try {
      await navigator.clipboard.writeText(
        `[함께 듣는 실시간 강의 Boarlog]\n\n지금 진행되는 강의에 참여해보세요.\n\n강의 코드: ${lectureCode}\n강의 제목: 강의 제목\n강의 링크: 강의 링크`
      );
      showToast({ message: "클립보드에 강의 코드를 복사했어요.", type: "success" });
    } catch (error) {
      console.error("복사 실패:", error);
      showToast({ message: "강의 코드 복사에 실패했어요. 잠시 후 다시 시도해 주세요.", type: "alert" });
    }
  };

복사한 텍스트는 아래와 같습니다.

[함께 듣는 실시간 강의 Boarlog]

지금 진행되는 강의에 참여해보세요.

강의 코드: 000000
강의 제목: 강의 제목
강의 링크: 강의 링크

해당 기능으로 추후에 서비스 링크를 공유할 것에 대비하여 index.html에 meta 태그를 추가 작성하였습니다. open graph를 추가 작성하여 카카오톡 공유 시에 썸네일 이미지와 서비스 이름, 서비스에 대한 설명이 노출되도록 하였습니다.

추가적으로 중복된 코드를 제거하였습니다. (Header/components/HeaderInstructorControls.tsx 내부)

2023-11-28.15-17-28.mp4