/citation

๐ŸŽ‰ ์ƒˆํ•ด์—๋Š” ์ž‘๋…„์— ๊ณ ๋งˆ์› ๋˜ ๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ์žฅ ํ•œ ์žฅ์”ฉ ๋ณด๋‚ด ๋ณด๋Š” ๊ฑด ์–ด๋•Œ์š”?

Primary LanguageTypeScript

์ƒˆํ•ด์—๋Š” ๊ฐ์‚ฌ์žฅ

Citations in new year

๐Ÿ‘‹ Screens

startcreatesharecitation

๊ฐ์‚ฌ์žฅ์„ ์ƒ์„ฑํ•˜๊ณ , ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŽ Share

์นด์นด์˜คํ†ก ๋งํฌ์™€ ํŽ˜์ด์Šค๋ถ URL ๊ฒŒ์‹œ๊ธ€๋กœ ๊ฐ์‚ฌ์žฅ์„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์–ด์š”.

Kakaotalk์œผ๋กœ ๋งํฌ ๊ณต์œ ํ•˜๊ธฐ

  1. ์นด์นด์˜ค ๊ฐœ๋ฐœ์ž์—์„œ ์ƒˆ๋กœ์šด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ํ”Œ๋žซํผ์„ ๋“ฑ๋กํ•˜๊ณ , JavaScript API ํ‚ค๋ฅผ ์–ป์Šต๋‹ˆ๋‹ค.
  2. public/index.html์— Kakao SDK CDN์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค(์ฝ”๋“œ).
  3. ์ฝ”๋“œ
// SDK๋ฅผ typescript์—์„œ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์ž„์‹œ declaration
declare const Kakao: any;

// initializeKakaotalk์€ SDK ์ดˆ๊ธฐํ™”๋ฅผ ์œ„ํ•ด ํ•œ ๋ฒˆ๋งŒ ํ˜ธ์ถœ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
export const initializeKakaotalk = () => {
  Kakao.init('YOUR_API_KEY');
};

export const shareWithKakaotalk = (shareLink: string, shareName: string): void => {
  Kakao.Link.createDefaultButton({
    container: '#kakao-share-button',
    objectType: 'feed',
    content: {
      title: `${shareName} ๋‹˜๊ป˜์„œ ๋ณด๋‚ธ ์ƒˆ๋กœ์šด ๊ฐ์‚ฌ์žฅ์ด ๋„์ฐฉํ–ˆ์–ด์š”!`,
      description: '๐ŸŽ‰ ์•„๋ž˜ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์„œ ํ™•์ธํ•ด ์ฃผ์„ธ์š”.',
      imageUrl: 'https://raw.githubusercontent.com/junhoyeo/citation/master/src/assets/images/kakaotalk.png',
      link: { mobileWebUrl: shareLink, webUrl: shareLink },
    },
    buttons: [
      {
        title: '์ง€๊ธˆ ํ™•์ธํ•˜๊ธฐ',
        link: { mobileWebUrl: shareLink, webUrl: shareLink },
      },
    ],
  });
};
  • initializeKakaotalk ํ•จ์ˆ˜๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋‹ˆ, ReactDOM.render๊ฐ€ ์žˆ๋Š” index ๋˜๋Š” Router ๋“ฑ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฃจํŠธ์—์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

  • shareWithKakaotalk์„ ์‹คํ–‰ํ•˜๊ฒŒ ๋˜๋ฉด ํ˜„์žฌ ๋กœ๊ทธ์ธ๋œ ์นด์นด์˜คํ†ก ๊ณ„์ •์˜ ์นœ๊ตฌ์™€ ์ฑ„ํŒ…๋ฐฉ์— ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ฐฝ์ด ์—ด๋ฆฝ๋‹ˆ๋‹ค.

share-kakaotalk

๋ณด๋‚ธ ๋ฉ”์„ธ์ง€๋Š” ์œ„์ฒ˜๋Ÿผ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

Facebook์œผ๋กœ URL ๊ณต์œ ํ•˜๊ธฐ

๋ณต์žกํ•œ ์ ˆ์ฐจ ์—†์ด Facebook์˜ sharer.php๋ฅผ ์ด์šฉํ•ด URL์„ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

  1. public/index.html์— og:title, og:image ๋“ฑ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  2. ๋ณธ ํ”„๋กœ์ ํŠธ๋Š” spa-github-pages(ํ•œ๊ตญ์–ด ๋ฒˆ์—ญ)์˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด Github Pages ์ƒ์—์„œ BrowserRouter SPA ์•ฑ์„ ๊ตฌํ˜„ํ•˜๋ฏ€๋กœ, public/404.html์—๋„ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
  3. ์ฝ”๋“œ
// ๊ณต์œ ํ•  URL์˜ ์ฟผ๋ฆฌ๋ฅผ ๋ฌธ์ž์—ด ํ…œํ”Œ๋ฆฟ์„ ์ด์šฉํ•ด ๋นŒ๋”ฉํ•ฉ๋‹ˆ๋‹ค.
const shareURL = `https://www.facebook.com/sharer.php?u=${shareLink}&t=${shareTitle}`;

// ์ ์ ˆํ•œ ์‚ฌ์ด์ฆˆ๋กœ ๋ณด์ด๊ฒŒ ์—ด์–ด ์ค๋‹ˆ๋‹ค.
window.open(shareURL, '', 'width=500,height=500,left=600');

share-facebook

๊ณต์œ ๋œ URL์€ ์œ„์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.