Merge pull request #66 from cskime/feature/#34

[#34] Emoji picker 추가, 공유하기 개발

Author: cskime

index.html

@@ -41,5 +41,12 @@
     <div id="popover"></div>
     <div id="modal"></div>
     <script type="module" src="/src/main.jsx"></script>
+
+    <!-- Kakao JavaScript SDK -->
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.6/kakao.min.js"
+      integrity="sha384-WAtVcQYcmTO/N+C1N+1m6Gp8qxh+3NlnP7X1U7qP6P5dQY/MsRBNTh+e1ahJrkEm"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>

package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "emoji-picker-react": "^4.13.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-quill-new": "^3.6.0",

package.json

@@ -1,13 +1,20 @@
+import EmojiPicker from "emoji-picker-react";
 import styled from "styled-components";
 import addImage from "../../../assets/ic-face-smile-add.svg";
 import shareImage from "../../../assets/ic-share.svg";
 import { OutlinedButton } from "../../../components/button/button";
 import BUTTON_SIZE from "../../../components/button/button-size";
 import Colors from "../../../components/color/colors";
+import Popover from "../../../components/popover/popover";
+import POPOVER_ALIGNMENT from "../../../components/popover/popover-alignment";
+import Toast from "../../../components/toast/toast";
 import { useMedia } from "../../../hooks/use-media";
+import { useToast } from "../../../hooks/use-toast";
+import { shareRollingPaper } from "../../../libs/kakao/kakao-service";
 import { media } from "../../../utils/media";
 import RollingPaperReactions from "./rolling-paper-reactions";
 import RollingPaperSenders from "./rolling-paper-senders";
+import RollingPaperSharePopover from "./rolling-paper-share-popover";
 
 const RecipientName = styled.h2`
   margin: 0;
@@ -100,22 +107,37 @@ const StyledRollingPaperHeader = styled.div`
   }
 `;
 
-function RollingPaperHeader({ recipientName, messages, reactions }) {
+function RollingPaperHeader({
+  recipientId,
+  recipientName,
+  messages,
+  reactions,
+}) {
+  const { showsToast, setShowsToast } = useToast();
   const { isDesktop, isMobile } = useMedia();
 
+  const name = <RecipientName>{`To. ${recipientName}`}</RecipientName>;
+
+  const handleShareKakao = () => {
+    shareRollingPaper({
+      recipientId,
+      recipientName,
+    });
+  };
+
+  const handleShareUrl = () => {
+    const url = window.location.href;
+    navigator.clipboard.writeText(url);
+    setShowsToast(true);
+  };
+
   return (
     <StyledRollingPaperHeader>
       {isMobile && (
-        <RollingPaperHeaderContent>
-          <RecipientName>{`To. ${recipientName}`}</RecipientName>
-        </RollingPaperHeaderContent>
+        <RollingPaperHeaderContent>{name}</RollingPaperHeaderContent>
       )}
       <RollingPaperHeaderContent>
-        {isMobile || (
-          <div>
-            <RecipientName>{`To. ${recipientName}`}</RecipientName>
-          </div>
-        )}
+        {isMobile || <div>{name}</div>}
         <HeaderTrailing>
           <DividedContainer>
             {isDesktop && (
@@ -126,15 +148,40 @@ function RollingPaperHeader({ recipientName, messages, reactions }) {
             <RollingPaperReactions reactions={reactions.slice(0, 8)} />
           </DividedContainer>
           <DividedContainer>
-            <AddButton
-              size={BUTTON_SIZE.small}
-              title={isMobile ? null : "추가"}
-              icon={addImage}
-            />
-            <ShareButton size={BUTTON_SIZE.small} icon={shareImage} />
+            <Popover
+              id="emoji-picker-popover"
+              alignment={POPOVER_ALIGNMENT.right}
+              action={
+                <AddButton
+                  size={BUTTON_SIZE.small}
+                  title={isMobile ? null : "추가"}
+                  icon={addImage}
+                />
+              }
+            >
+              <EmojiPicker />
+            </Popover>
+            <Popover
+              id="share-popover"
+              alignment={POPOVER_ALIGNMENT.right}
+              action={
+                <ShareButton size={BUTTON_SIZE.small} icon={shareImage} />
+              }
+            >
+              <RollingPaperSharePopover
+                onShareKakao={handleShareKakao}
+                onShareUrl={handleShareUrl}
+              />
+            </Popover>
           </DividedContainer>
         </HeaderTrailing>
       </RollingPaperHeaderContent>
+      {showsToast && (
+        <Toast
+          message="URL이 복사 되었습니다."
+          onDismiss={() => setShowsToast(false)}
+        />
+      )}
     </StyledRollingPaperHeader>
   );
 }

src/features/rolling-paper/components/rolling-paper-header.jsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import Colors from "../../../components/color/colors";
+
+const ShareOption = styled.li`
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  background-color: white;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${Colors.gray(100)};
+  }
+`;
+
+const StyledRollingPaperSharePopover = styled.ul`
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+  background-color: white;
+  width: 140px;
+  list-style: none;
+  margin: 0;
+`;
+
+function RollingPaperSharePopover({ onShareKakao, onShareUrl }) {
+  return (
+    <StyledRollingPaperSharePopover>
+      <ShareOption onClick={onShareKakao}>카카오톡 공유</ShareOption>
+      <ShareOption onClick={onShareUrl}>URL 공유</ShareOption>
+    </StyledRollingPaperSharePopover>
+  );
+}
+
+export default RollingPaperSharePopover;

src/features/rolling-paper/components/rolling-paper-share-popover.jsx

@@ -0,0 +1,22 @@
+function initKakaoSDK() {
+  window.Kakao.init(import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY);
+  window.Kakao.isInitialized();
+}
+
+function shareRollingPaper({ recipientId, recipientName }) {
+  if (!recipientId || !recipientName) return;
+
+  const appIdString = import.meta.env.VITE_KAKAO_MESSAGE_TEMPLATE_ID;
+  const appId = Number(appIdString);
+  if (!appId) return;
+
+  window.Kakao.Share.sendCustom({
+    templateId: appId,
+    templateArgs: {
+      recipientId,
+      recipientName,
+    },
+  });
+}
+
+export { initKakaoSDK, shareRollingPaper };

src/libs/kakao/kakao-service.js

@@ -1,6 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./app";
+import { initKakaoSDK } from "./libs/kakao/kakao-service";
+
+initKakaoSDK();
 
 const root = createRoot(document.getElementById("root"));
 

src/main.jsx

@@ -17,6 +17,7 @@ function MessagesPage() {
       {recipient && (
         <>
           <RollingPaperHeader
+            recipientId={recipient.id}
             recipientName={recipient.name}
             messages={recipient.recentMessages}
             reactions={recipient.topReactions}