Skip to content

Conversation

@junjeeong
Copy link
Collaborator

@junjeeong junjeeong commented Apr 23, 2025

Pull requests

✅ 작업한 내용

  • 카카오톡 공유하기 기능, 트위터 공유하기 기능 모달입니다.

🔢 #178

❗️PR Point

  • Modal이다보니 조건부 렌더링은 부모 컴포넌트에서 해줍니다. X 버튼을 눌렀을 떄 꺼져야 하므로 closeModal이라는 함수를 prop으로 받도록 했습니다.
  • 공유할 때의 title과 description imageUrl이 필요합니다. prop으로 받기보다 모달을 띄우는 페이지의 meta 데이터를 가져오도록 했습니다.
  • 때문에 각 페이지에서 meta 데이터를 어떻게 할지 새로운 작업이 추가로 필요합니다.
  • 로컬에서 테스트 하시면 트위터 공유하기는 잘 되나, 카카오톡 공유를 누르면 연결 실패(카카오톡 계정과 카카오톡이 연결이 되어있지 않습니다) 화면이 뜹니다. 이유는 카카오 디벨로퍼스의 Owner 계정이(현재 [[email protected]]) 브라우저의 카카오톡에 로그인이 되어야 하는데 로컬에서 테스트 시에만 마주하는 상황이라고 하여 배포 환경에서 정확한 테스트가 필요합니다. 테스트 영상은 Owner 계정을 잠시 제 카카오톡 계정으로 바꾼 것입니다. (+@ 정정 다시 해보니 됩니다! 이 부분은 이상 없습니다!)

📸 스크린샷

Result.mov
SubHeader.mov

@junjeeong junjeeong added the 👩‍💻 Feat 새로운 기능 label Apr 23, 2025
@junjeeong junjeeong requested a review from Soohyuniii April 23, 2025 06:31
@junjeeong junjeeong self-assigned this Apr 23, 2025
@junjeeong junjeeong linked an issue Apr 23, 2025 that may be closed by this pull request
2 tasks
useEffect(() => {
// 카카오톡 SDK 초기화
if (window.Kakao && !window.Kakao.isInitialized()) {
window.Kakao.init("a4816c8b85267871796431d92ed23451");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

키값을 환경변수로 사용해야 할 것 같습니다!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추가적으로 환경변수는 api쪽이 아니라 저희 쪽에서도 등록 가능합니다!

@@ -0,0 +1,14 @@
import UrlCopyButton from "./UrlCopyButton";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

절대경로로 수정 가능할까요?

@@ -0,0 +1,66 @@
import { useEffect, useState } from "react";
import UrlCopyBar from "@/components/button/UrlCopyBar";
import KakaoShareButton from "../button/KakaoShareButton";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

절대경로로 수정 가능할까요?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이부분 반영이 안된 것 같습니다!

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이건 왜 제거되었을까요,,?

@junjeeong
Copy link
Collaborator Author

PR 내용이 많이 바뀌어 다시 확인 부탁드립니다!
위에 comment는 모두 반영했습니다!
환경변수는 아무래도 백엔드팀에게 설정해달라고 말씀드리는게 낫겠네여!

<button onClick={handleShare}>
<img
src="/icon/kakaotalk.svg"
alt="카카오통 공유하기 버튼"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt이기는 한데 오타 있습니다!

@@ -0,0 +1,66 @@
import { useEffect, useState } from "react";
import UrlCopyBar from "@/components/button/UrlCopyBar";
import KakaoShareButton from "../button/KakaoShareButton";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이부분 반영이 안된 것 같습니다!

@junjeeong
Copy link
Collaborator Author

d8f24eb

반영했습니다!

@junjeeong junjeeong merged commit fd76ef2 into dev Apr 23, 2025
1 check passed
@junjeeong junjeeong changed the title Feature/공유하기 모달 구현 feat: 공유하기 모달 구현 Apr 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

👩‍💻 Feat 새로운 기능

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feat: 공유하기 모달 구현

3 participants