Merge pull request #68 from codeit-maso/feature/chan

✨ feat: 이모지 리액션, 카카오톡 공유, 클립보드 기능 구현

Author: LeeCh0129

src/api/emojiReactions.js

@@ -0,0 +1,48 @@
+import { api } from './api';
+
+export const fetchReactions = async (recipientId, limit = 8) => {
+  try {
+    const teamId = import.meta.env.VITE_TEAM_ID;
+    const res = await api.get(
+      `/${teamId}/recipients/${recipientId}/reactions/?limit=${limit}`,
+    );
+    return res.data.results;
+  } catch (error) {
+    console.error('리액션 목록 가져오기 실패:', error);
+    return [];
+  }
+};
+
+export const addReaction = async (recipientId, emoji) => {
+  try {
+    const teamId = import.meta.env.VITE_TEAM_ID;
+    const res = await api.post(
+      `/${teamId}/recipients/${recipientId}/reactions/`,
+      {
+        emoji: emoji,
+        type: 'increase',
+      },
+    );
+    return res.data;
+  } catch (error) {
+    console.error('이모지 리액션 추가 실패:', error);
+    throw error;
+  }
+};
+
+export const decreaseReaction = async (recipientId, emoji) => {
+  try {
+    const teamId = import.meta.env.VITE_TEAM_ID;
+    const res = await api.post(
+      `/${teamId}/recipients/${recipientId}/reactions/`,
+      {
+        emoji: emoji,
+        type: 'decrease',
+      },
+    );
+    return res.data;
+  } catch (error) {
+    console.error('이모지 리액션 감소 실패:', error);
+    throw error;
+  }
+};

src/api/fetchReactions.js

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import styles from './Toast.module.scss';
+import successIcon from '../../../assets/images/success.svg';
+import closeIcon from '../../../assets/images/close.svg';
+
+export default function Toast({
+  isVisible,
+  message,
+  onClose,
+  duration = 5000,
+  type = 'success',
+}) {
+  useEffect(() => {
+    if (isVisible) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, duration);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, onClose, duration]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={`${styles.toast} ${styles[`toast--${type}`]}`}>
+      <div className={styles.iconContainer}>
+        {type === 'success' && (
+          <img src={successIcon} alt="성공" className={styles.icon} />
+        )}
+      </div>
+      <div className={styles.content}>{message}</div>
+      <button
+        className={styles.closeButton}
+        onClick={onClose}
+        aria-label="닫기"
+      >
+        <img src={closeIcon} alt="닫기" />
+      </button>
+    </div>
+  );
+}

src/api/fetchRecipient.js

@@ -0,0 +1,63 @@
+@use '../../../assets/styles/variables.scss' as *;
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #383838;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  max-width: 90%;
+  min-width: 320px;
+  text-align: left;
+  animation: fadeIn 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+}
+
+.content {
+  flex: 1;
+  word-break: break-word;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  margin: 0 4px;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 10px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}