24.06.팀플 TIL

sparta TIL 2024. 6. 18. 15:43

팀플젝 [ 페이지공유하기 🔗 ]

1. 현재페이지 링크복사하기

  const handleLinkCopy = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      alert('클립보드에 복사되었습니다 :)');
    } catch (err) {
      alert('링크복사 실패');
    }
  };

✔️ navigator.clipboard.writeText()

- 대부분의 최신 브라우저(Chrome, Firefox, Edge, Safari)에서 지원

- 'navigator.clipboard' API는 보안상의 이유로 HTTPS 환경에서만 동작. 로컬 환경에서는 http://localhost에서도 동작

( + toast popup )

yarn add react-icons
yarn add react-toastify

// SharePage.jsx
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const handleLinkCopy = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      toast.success('링크가 복사되었습니다 :)', {
        position: 'top-center',
        icon: <SuccessIcon />,
        progressClassName: 'Toastify__progress-bar--success'
      });
    } catch (err) {
      toast.error('링크복사 실패', {
        position: 'top-center',
        icon: <ErrorIcon />,
        progressClassName: 'Toastify__progress-bar--error'
      });
    }
  };

// SharePage.style.jsx
// 컬러만 변경해서 사용했다.
import { ToastContainer } from 'react-toastify';
import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';

export const StyledToastContainer = styled(ToastContainer)`
  .Toastify__progress-bar--success {
    background-color: #275cd7 !important;
  }
  .Toastify__progress-bar--error {
    background-color: #d32f2f !important;
  }
  .toastify-icon {
    color: #257dcf;
  }
`;

export const SuccessIcon = styled(FaCheckCircle)`
  color: #2f71d4;
`;

export const ErrorIcon = styled(FaTimesCircle)`
  color: #f44336;
`;

이번의 💩멍청한 경험 : 팀 git merge 후, toast가 뜨지 않음

  const handleLinkCopy = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      toast.success('링크가 복사되었습니다 :)', {
        position: 'top-center',
        icon: <SuccessIcon />,
        progressClassName: 'Toastify__progress-bar--success'
      });
    } catch (err) {
      toast.error('링크복사 실패', {
        position: 'top-center',
        icon: <ErrorIcon />,
        progressClassName: 'Toastify__progress-bar--error'
      });
    }
  };

→ toast의 팝업 위치를 position: 'top-center'로 줬으니 최상단에서 뜨는데, 버튼의 위치인 화면 중앙에 있었으니 안보이지...

// main.jsx
ReactDOM.createRoot(document.getElementById('root')).render(
  <Providers>
    <GlobalStyle />
    <Router />
    <StyledToastContainer autoClose={3000} />
  </Providers>
);

→ App.jsx가 없는 구조여서 최상위파일인 main.js로 이동해서 컴포넌트 렌더링 → 어느위치에있든 현재화면의상단에 잘 나옴 !

2. 카카오톡 링크 공유하기

https://developers.kakao.com/ 로그인

내 애플리케이션 - 해당앱클릭 - 좌측에사이드바 '앱 키'

추후 배포 도메인으로 변경예정

▶︎ https://www.배포도메인.com

VITE_KAKAO_KEY = '받아온 키';

키는 .env.local 에 넣어 보안

⓵ Kakao SDK 추가 및 초기화

1) HTML 파일에 Kakao SDK를 추가

SDK가 뭐지 ?
: Software Development Kit"의 약자
특정 플랫폼, 운영체제, 하드웨어, 또는 소프트웨어와 상호 작용하는 응용 프로그램을 개발하기 위한
도구, 라이브러리, 코드 샘플, 문서, API(Application Programming Interface)를 포함하는 패키지

문서 - javaScript - 시작하기 - 다운로드

( 초기화코드도 여기에 있음 )

코드복사 → html <head>에 넣기

( 이렇게 진행하지 않고 구글검색해서 한줄짜리의 과거 script코드로

넣었다가 실패를 맛보고, 다시 최신버전에 맞는 이 방법으로 ^_^ !! )

⭐️ 업데이트가 생각보다 자주 되는 것 같아서 꼭 이 방법으로 !!!

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js" integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous" ></script>

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script
      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
      crossorigin="anonymous"
    ></script>
  </head>

2) Kakao SDK 초기화

kakao.init(VITE_KAKAO_KEY);
console.log(kakao.isInitialized()); 추가

  useEffect(() => {
    const VITE_KAKAO_KEY = import.meta.env.VITE_KAKAO_KEY;
    const { Kakao } = window;

    if (Kakao) {
      if (!Kakao.isInitialized()) { // 이미 초기화되었는지 확인
        Kakao.init(VITE_KAKAO_KEY); // 초기화되지 않은 경우 초기화
      }
      console.log(Kakao.isInitialized()); // 초기화 상태 로그 출력
    } else {
      console.error('카카오 SDK 로드실패'); // Kakao 객체가 없는 경우 에러 로그 출력
    }
  }, []);

초기화하는이유 ?_? : API 호출을 준비하고, 유효한 앱 키를 설정하기 위해

- API 호출 준비 : 카카오 SDK를 사용하여 API 호출을 준비하는 단계 → SDK가 올바르게 설정되고 사용할 준비완
- 유효성 검증 : 초기화 과정에서 제공된 앱 키가 유효한지 확인 → 유효하지 않은 키를 사용하면 API 호출이 실패
( 키에 공백이나 대소문자 오타, 세미콜론이 붙는 등 휴먼에러로 4011에러를 경험할 수 있다 ^_^ 🔥 )
- 한 번만 초기화 : SDK는 한 번만 초기화되어야 함 → 초기화 여부를 확인하는 조건문을 통해 이미 초기화된 경우 다시 초기화하지 않도록함

( 왜 한번만 초기화되어야 하는지 ?
1. 성능 최적화
초기화 과정은 리소스를 소모하는 작업. 여러 번 초기화하면 불필요한 리소스 소모와 성능 저하를 초래.
→ 한 번 초기화한 후에는 다시 초기화할 필요가 없다.

2. 안정성 유지
SDK를 여러 번 초기화하면 예기치 않은 오류나 충돌이 발생할 가능성이 있다.
ex) 동일한 설정이 여러 번 적용되거나,상태가 여러 번 초기화되면서 일관성이 깨질 수 있다.

3. 상태 유지
초기화 과정에서 설정한 상태나 데이터가 초기화에 의해 유지되기 때문
→ 다시 초기화하면 기존 상태나 데이터가 리셋되거나 덮어쓰여질 수 있다.

4. 중복 작업 방지
한 번 초기화하면 SDK 내부적으로 필요한 설정이나 데이터를 로드하고, 이를 유지하면서 API 호출을 처리할 준비를 마친다
→ 중복 초기화는 이러한 작업을 반복하게 하여 불필요한 작업을 방지한다 )

⓶ 링크 공유 방법, 함수 작성

문서 - 메시지 - 카카오톡공우'javaScript' 에서

내가 만든 버튼을 클릭하면 연결되게 할거니까

'직접만든버튼 사용하기'의 함수와

예제코드 적용

const handleKakaoLink = () => {
    const { Kakao } = window;

    if (Kakao) {
      Kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: 'IT직군 적합테스트',
          description: '나에게 맞는 직군은?!',
          imageUrl: 'https://ifh.cc/g/YqwJFL.png',
          link: {
            mobileWebUrl: window.location.href,
            webUrl: window.location.href
          }
        },
        buttons: [
          {
            title: '나도 테스트하러 가기',
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href
            }
          }
        ]
      });
    } else {
      toast.error('카카오 SDK가 로드되지 않았습니다', {
        position: 'top-center',
        icon: <ErrorIcon />,
        progressClassName: 'Toastify__progress-bar--error'
      });
    }
  };

https://ifh.cc/i-Cmr1Wr

iFH 이미지 호스팅

ifh.cc

▲ 이미지 업로드하면 url제공해주는 이미지호스팅 사이트 참고

⓷ React 컴포넌트에 적용

          <Button variant="fill" onClick={handleKakaoLink}>
            카카오톡 공유하기
          </Button> // Storybook으로 만들어주신 버튼 사용했음

클릭 - 로그인하면 - 공유할 친구목록이 나오고 선택해서 공유하기하면된다.

'sparta TIL' 카테고리의 다른 글

TypeScript Til 2 (0)	2024.06.25
TypeScript TIL 1 (0)	2024.06.25
24.06.14 TIL (0)	2024.06.15
24.06.11 TIL TanStack Query (0)	2024.06.11
24.06.10 TIL 동기와비동기/Promise/HTTP/json-server/axios (0)	2024.06.10

ABOUT ME

hr_l hr_l

'sparta TIL' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'sparta TIL' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바