Merge pull request #144 from prgrms-web-devcourse-final-project/feature/

#61

feat: ChatMessage 컴포넌트 개발

src/components/organisms/ChatMessage/index.tsx

@@ -0,0 +1,40 @@
+import { Text } from "components/atoms";
+import {
+  ChatMessageWrapper,
+  MessageInfoWrapper,
+  MessageWrapper,
+} from "./styled";
+import { getTime } from "utils";
+
+export interface IChatMessageProps {
+  /** 채팅 메시지 내용 */
+  msg: string;
+  /** 채팅 보낸 유저가 나인지 타인인지 구분 */
+  isMe: boolean;
+  /** 해당 채팅이 그룹에서 마지막 메시지인지 구분,(시간 표시 유무 구분)*/
+  isLastMsg: boolean;
+  /** 해당 채팅을 읽었는지 구분 */
+  isRead: boolean;
+  /** 해당 메시지 보낸 시간 */
+  createdAt: string;
+}
+
+export const ChatMessage = ({
+  isMe,
+  isRead,
+  isLastMsg,
+  msg,
+  createdAt,
+}: IChatMessageProps) => {
+  return (
+    <ChatMessageWrapper isMe={isMe}>
+      <MessageWrapper>
+        <Text content={msg} />
+      </MessageWrapper>
+      <MessageInfoWrapper>
+        {!isRead && <Text variant="button" content={"1"} />}
+        {isLastMsg && <Text variant="button" content={getTime(createdAt)} />}
+      </MessageInfoWrapper>
+    </ChatMessageWrapper>
+  );
+};

src/components/organisms/ChatMessage/stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChatMessage } from ".";
+
+const meta: Meta<typeof ChatMessage> = {
+  title: "Organisms/ChatMessage",
+  component: ChatMessage,
+  tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isMe: false,
+    isLastMsg: true,
+    isRead: true,
+    msg: "안녕하세요",
+    createdAt: "2024-11-28 16:29:36",
+  },
+};
+
+export const MyMessage: Story = {
+  args: {
+    isMe: true,
+    isLastMsg: true,
+    isRead: false,
+    msg: "안녕하세요",
+    createdAt: new Date().toString(),
+  },
+};
+
+export default meta;

src/components/organisms/ChatMessage/styled.ts

@@ -0,0 +1,35 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import type { IChatMessageProps } from ".";
+
+export const MessageWrapper: ReturnType<typeof styled.div> = styled.div`
+  background-color: #d9d9d9;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  max-width: 70%;
+`;
+export const MessageInfoWrapper: ReturnType<typeof styled.div> = styled.div`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+`;
+
+export const ChatMessageWrapper: ReturnType<
+  typeof styled.div<Pick<IChatMessageProps, "isMe">>
+> = styled.div<Pick<IChatMessageProps, "isMe">>`
+  display: flex;
+  flex-direction: ${({ isMe }) => (isMe ? "row-reverse" : "row")};
+  align-items: end;
+  gap: 0.25rem;
+  ${({ isMe }) =>
+    isMe &&
+    css`
+      ${MessageWrapper} {
+        background-color: #a9a9a9;
+      }
+      ${MessageInfoWrapper} {
+        align-items: end;
+      }
+    `}
+`;

src/utils/dayFormatter.ts

@@ -38,12 +38,12 @@ export const getTimeRemaining = (targetDate: Date | string): string => {
 /**
  * 현재 시간이랑 param으로 들어온 Date 비교해서 남은 시간을 아래 형태로 변경하는 함수
  * https://day.js.org/docs/en/durations/humanize 참조 바람
- * 1초 ~ 59초 = "n 초 전",
- * 1분 ~ 59분 = "n 분 전",
- * 1시 ~ 23시간 = "n 시간 전"
- * 1일 ~ 29일 = "n 일 전"
- * 30일 ~ 364일 = "n 개월 전"
- * 365일 단위로 = "n 년 전"
+ * - 1초 ~ 59초 = "n 초 전",
+ * - 1분 ~ 59분 = "n 분 전",
+ * - 1시 ~ 23시간 = "n 시간 전"
+ * - 1일 ~ 29일 = "n 일 전"
+ * - 30일 ~ 364일 = "n 개월 전"
+ * - 365일 단위로 = "n 년 전"
  * @param date Date | string
  * @returns string
  */
@@ -55,3 +55,12 @@ export const getRelativeTime = (date: Date | string): string => {
   }
   return dayjs.duration(target.diff(now)).humanize(true);
 };
+
+/**
+ * 입력받은 시간을 [오전/오후] HH:mm 형태로 변경하는 함수
+ * @param date Date | string
+ * @returns string [오전/오후] HH:mm
+ */
+export const getTime = (date: Date | string): string => {
+  return dayjs(date).format("A HH:mm");
+};