Merge pull request #77 from cskime/feature/#52

[#52] API 연동(2)

Author: cskime

src/components/badge/badge-type.js

@@ -1,8 +1,8 @@
 const BADGE_TYPE = Object.freeze({
-  acquaintance: "acquaintance",
-  coworker: "coworker",
-  family: "family",
-  friend: "friend",
+  지인: "지인",
+  동료: "동료",
+  가족: "가족",
+  친구: "친구",
 });
 
 export default BADGE_TYPE;

src/components/badge/badge.jsx

@@ -3,31 +3,24 @@ import Colors from "../color/colors";
 import BADGE_TYPE from "./badge-type";
 
 const styles = {
-  [BADGE_TYPE.acquaintance]: {
+  [BADGE_TYPE.지인]: {
     backgroundColor: Colors.beige(100),
     color: Colors.beige(500),
   },
-  [BADGE_TYPE.coworker]: {
+  [BADGE_TYPE.동료]: {
     backgroundColor: Colors.purple(100),
     color: Colors.purple(600),
   },
-  [BADGE_TYPE.family]: {
+  [BADGE_TYPE.가족]: {
     backgroundColor: Colors.green(100),
     color: Colors.green(500),
   },
-  [BADGE_TYPE.friend]: {
+  [BADGE_TYPE.친구]: {
     backgroundColor: Colors.blue(100),
     color: Colors.blue(500),
   },
 };
 
-const title = {
-  [BADGE_TYPE.acquaintance]: "지인",
-  [BADGE_TYPE.coworker]: "동료",
-  [BADGE_TYPE.family]: "가족",
-  [BADGE_TYPE.friend]: "친구",
-};
-
 const StyledBadge = styled.div`
   background-color: ${({ $type }) => styles[$type].backgroundColor};
   color: ${({ $type }) => styles[$type].color};
@@ -39,7 +32,7 @@ const StyledBadge = styled.div`
 `;
 
 function Badge({ type }) {
-  return <StyledBadge $type={type}>{title[type]}</StyledBadge>;
+  return <StyledBadge $type={type}>{type}</StyledBadge>;
 }
 
 export default Badge;

src/components/color/background-color.js

@@ -0,0 +1,10 @@
+import Colors from "./colors";
+
+const BACKGROUND_COLOR = Object.freeze({
+  beige: Colors.beige(200),
+  purple: Colors.purple(200),
+  blue: Colors.blue(200),
+  green: Colors.green(200),
+});
+
+export default BACKGROUND_COLOR;

src/components/option/background-select.jsx

@@ -1,9 +1,10 @@
+import { useEffect, useState } from "react";
 import styled from "styled-components";
-import Colors from "../color/colors";
 import CheckImage from "../../assets/ic-check.svg";
-import { useEffect, useState } from "react";
 import { OutlinedButton } from "../button/button";
 import BUTTON_SIZE from "../button/button-size";
+import BACKGROUND_COLOR from "../color/background-color";
+import Colors from "../color/colors";
 
 const BackgroundWrapper = styled.div`
   padding-top: 50px;
@@ -44,10 +45,10 @@ function BackgroundSelect({ type, selected, onSelect }) {
   const [imageUrls, setImageUrls] = useState([]);
 
   const colorOptions = [
-    { color: Colors.beige(200) },
-    { color: Colors.purple(200) },
-    { color: Colors.blue(200) },
-    { color: Colors.green(200) },
+    { color: BACKGROUND_COLOR.beige },
+    { color: BACKGROUND_COLOR.purple },
+    { color: BACKGROUND_COLOR.blue },
+    { color: BACKGROUND_COLOR.green },
   ];
 
   /* useEffect(() => {

src/components/popover/popover.jsx

@@ -37,6 +37,7 @@ function Popover({ id, alignment, action, children }) {
 
   const handleClick = () => handleTargetClick(true);
   const handleBackdropClick = () => setShowsPopover(false);
+  const handlePopoverClick = (event) => event.stopPropagation();
 
   return (
     <>
@@ -46,7 +47,9 @@ function Popover({ id, alignment, action, children }) {
       {showsPopover && (
         <Portal id="popover">
           <Container onClick={handleBackdropClick}>
-            <StyledPopover $position={position}>{children}</StyledPopover>
+            <StyledPopover $position={position} onClick={handlePopoverClick}>
+              {children}
+            </StyledPopover>
           </Container>
         </Portal>
       )}

src/features/message/api/messages.js

@@ -0,0 +1,21 @@
+import { apiClient } from "../../../api/client";
+
+async function getMessages({ recipientId, limit, page = 1 }) {
+  const searchParams = new URLSearchParams();
+  searchParams.append("page", page);
+  if (limit) {
+    searchParams.append("limit", limit);
+  }
+
+  const response = await apiClient.get(
+    `recipients/${recipientId}/messages/?${searchParams.toString()}`
+  );
+  if (response.status !== 200) {
+    throw new Error("Message data를 가져오는데 실패했습니다.");
+  }
+
+  const data = response.data;
+  return data.results;
+}
+
+export { getMessages };

src/features/message/components/message-card-detail.jsx

@@ -48,7 +48,8 @@ function MessageCardDetail({ message }) {
     <StyledMessageCardDetail>
       <Header>
         <MessageSender
-          profileImage={message.profileImage}
+          profileImageUrl={message.profileImageURL}
+          relationship={message.relationship}
           name={message.sender}
         />
         <CreatedDate>{formatDate(message.createdAt, ".")}</CreatedDate>

src/features/message/components/message-card.jsx

@@ -57,7 +57,8 @@ function MessageCard({ isEditing, message, onDelete }) {
     <StyledMessageCard>
       <Header>
         <MessageSender
-          profileImage={message.profileImage}
+          profileImageUrl={message.profileImageURL}
+          relationship={message.relationship}
           name={message.sender}
         />
         {isEditing && (

src/features/message/components/message-sender.jsx

@@ -42,11 +42,11 @@ const StyledMessageSender = styled.div`
   gap: 14px;
 `;
 
-function MessageSender({ profileImage, name }) {
+function MessageSender({ profileImageUrl, relationship, name }) {
   return (
     <StyledMessageSender>
-      <Avatar source={profileImage} />
-      <SenderInfo name={name} type={BADGE_TYPE.coworker} />
+      <Avatar source={profileImageUrl} />
+      <SenderInfo name={name} type={BADGE_TYPE[relationship]} />
     </StyledMessageSender>
   );
 }

src/features/reaction/api/reaction.js

@@ -0,0 +1,29 @@
+import { apiClient } from "../../../api/client";
+
+async function getReactions({ recipientId }) {
+  const response = await apiClient.get(`recipients/${recipientId}/reactions/`);
+  if (response.status !== 200) {
+    throw new Error("Reactions data를 가져오는데 실패했습니다.");
+  }
+
+  const data = response.data;
+  return data.results;
+}
+
+async function addReaction({ recipientId, emoji }) {
+  const response = await apiClient.post(
+    `recipients/${recipientId}/reactions/`,
+    {
+      emoji,
+      type: "increase",
+    }
+  );
+  if (response.status !== 201) {
+    throw new Error("Reaction을 추가하는데 실패했습니다.");
+  }
+
+  const data = response.data;
+  return data;
+}
+
+export { addReaction, getReactions };