채팅을 위한 컴포넌트 구현

frontend/.storybook/main.ts

@@ -1,6 +1,6 @@
+import { Configuration } from 'webpack';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import path from 'path';
-import { Configuration } from 'webpack';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -57,12 +57,14 @@ const config: StorybookConfig = {
     if (config.module?.rules) {
       config.module = config.module || {};
       config.module.rules = config.module.rules || [];
+
       const imageRule = config.module.rules.find((rule) =>
         rule?.['test']?.test('.svg'),
       );
       if (imageRule) {
         imageRule['exclude'] = /\.svg$/;
       }
+
       config.module.rules.push({
         test: /\.svg$/i,
         oneOf: [

frontend/src/components/ChatList/ChatList.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ChatList from './ChatList';
+
+const meta: Meta<typeof ChatList> = {
+  component: ChatList,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChatList>;
+
+export const Default: Story = {
+  args: {
+    chats: [
+      {
+        sender: '상돌',
+        time: '14:00',
+        message: '안나야 공은 찰 줄 아냐',
+        isMyMessage: false,
+      },
+      {
+        sender: '안나',
+        time: '14:04',
+        message: '시비걸꺼면 나가라',
+        isMyMessage: true,
+      },
+      {
+        sender: '안나',
+        time: '14:04',
+        message: '지하돌아',
+        isMyMessage: true,
+      },
+      {
+        sender: '테바',
+        time: '14:06',
+        message: '여러분~ 싸우지 마세요',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+      {
+        sender: '테바',
+        time: '14:07',
+        message:
+          '두 분 다 강퇴 당하고 싶지 않으시면 서로 말 예쁘게 해주시고 ~ 각자 괜찮은 시간이나 좀 남겨주세요!',
+        isMyMessage: false,
+      },
+    ],
+  },
+
+  decorators: (Story) => {
+    return (
+      <div style={{ height: '200px' }}>
+        <Story />
+      </div>
+    );
+  },
+};

frontend/src/components/ChatList/ChatList.style.ts

@@ -0,0 +1,17 @@
+import { Theme, css } from '@emotion/react';
+
+export const list = ({ theme }: { theme: Theme }) => css`
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  height: 100%;
+  padding: 2rem;
+
+  background-color: ${theme.colorPalette.grey[100]};
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

frontend/src/components/ChatList/ChatList.tsx

@@ -0,0 +1,23 @@
+import ChatMessage, {
+  ChatMessageProps,
+} from '@_components/ChatMessage/ChatMessage';
+
+import { list } from './ChatList.style';
+import { useTheme } from '@emotion/react';
+
+interface ChatListProps {
+  chats: ChatMessageProps[];
+}
+
+export default function ChatList(props: ChatListProps) {
+  const { chats } = props;
+  const theme = useTheme();
+
+  return (
+    <div css={list({ theme })}>
+      {chats.map((chat) => (
+        <ChatMessage key={chat.message + chat.time} {...chat} />
+      ))}
+    </div>
+  );
+}

frontend/src/components/ChatMessage/ChatMessage.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ChatMessage from './ChatMessage';
+
+const meta: Meta<typeof ChatMessage> = {
+  component: ChatMessage,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChatMessage>;
+
+export const Default: Story = {
+  args: {
+    sender: '테바',
+    time: '12:12',
+    imageUrl: '',
+    message: '여러분~ 싸우지 마세요',
+    isMyMessage: false,
+  },
+};

frontend/src/components/ChatMessage/ChatMessage.style.ts

@@ -0,0 +1,53 @@
+import { Theme, css } from '@emotion/react';
+
+export const ChatMessageStyle = ({
+  isMyMessage,
+}: {
+  isMyMessage: boolean;
+}) => css`
+  display: flex;
+  flex-direction: ${isMyMessage ? 'row-reverse' : 'row'};
+  gap: 1rem;
+`;
+
+export const messageContainer = ({
+  isMyMessage,
+}: {
+  isMyMessage: boolean;
+}) => css`
+  display: flex;
+  flex-direction: column;
+  ${isMyMessage && 'align-items: flex-end'}
+`;
+
+export const senderStyle = ({ theme }: { theme: Theme }) => css`
+  ${theme.typography.Medium}
+  color:${theme.colorPalette.grey[900]};
+`;
+
+export const messageStyle = ({
+  theme,
+  isMyMessage,
+}: {
+  theme: Theme;
+  isMyMessage: boolean;
+}) => css`
+  ${theme.typography.b4};
+  display: inline-block;
+
+  max-width: 25rem;
+  padding: 10px;
+
+  word-break: break-all;
+
+  background-color: ${isMyMessage
+    ? theme.colorPalette.yellow[200]
+    : theme.colorPalette.orange[100]};
+  border-radius: ${isMyMessage ? '12px' : 0} ${isMyMessage ? 0 : '12px'} 12px
+    12px;
+`;
+
+export const timeStyle = ({ theme }: { theme: Theme }) => css`
+  ${theme.typography.c3}
+  color:${theme.colorPalette.grey[400]};
+`;

frontend/src/components/ChatMessage/ChatMessage.tsx

@@ -0,0 +1,36 @@
+import {
+  ChatMessageStyle,
+  messageContainer,
+  messageStyle,
+  senderStyle,
+  timeStyle,
+} from './ChatMessage.style';
+
+import UserPreview from '@_components/UserPreview/UserPreview';
+import { formatHhmmToKoreanWithPrefix } from '@_utils/formatters';
+import { useTheme } from '@emotion/react';
+
+export interface ChatMessageProps {
+  sender: string;
+  message: string;
+  isMyMessage: boolean;
+  time: string;
+  imageUrl?: string;
+}
+
+export default function ChatMessage(props: ChatMessageProps) {
+  const { sender, message, isMyMessage, time, imageUrl } = props;
+  const theme = useTheme();
+  return (
+    <div css={ChatMessageStyle({ isMyMessage })}>
+      <UserPreview imageUrl={imageUrl} />
+      <div css={messageContainer({ isMyMessage })}>
+        <span css={senderStyle({ theme })}>{sender}</span>
+        <div css={messageStyle({ theme, isMyMessage })}>{message}</div>
+        <span css={timeStyle({ theme })}>
+          {formatHhmmToKoreanWithPrefix(time)}
+        </span>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ChattingFooter/ChattingFooter.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ChattingFooter from './ChattingFooter';
+
+const meta: Meta<typeof ChattingFooter> = {
+  component: ChattingFooter,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChattingFooter>;
+
+export const Default: Story = {
+  args: { onSubmit: (string: string) => alert(string) },
+};

frontend/src/components/ChattingFooter/ChattingFooter.style.ts

@@ -0,0 +1,47 @@
+import { Theme, css } from '@emotion/react';
+
+export const footer = ({ theme }: { theme: Theme }) => css`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  height: 7rem;
+
+  background-color: ${theme.colorPalette.white[100]};
+  box-shadow: 0 -10px 15px rgb(0 0 0 / 20%);
+`;
+
+export const menuButton = ({ theme }: { theme: Theme }) => css`
+  width: 4.5rem;
+  height: 4.5rem;
+
+  background-color: ${theme.colorPalette.orange[300]};
+  border: 0;
+  border-radius: 50%;
+`;
+
+export const messageForm = ({ theme }: { theme: Theme }) => css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 80%;
+  height: 70%;
+  padding: 1rem 2rem;
+
+  background: ${theme.colorPalette.grey[200]};
+  border-radius: 50px;
+`;
+
+export const messageInput = ({ theme }: { theme: Theme }) => css`
+  ${theme.typography.s2}
+  width: 100%;
+  background: rgb(0 0 0 / 0%);
+  border: 0;
+  outline: none;
+`;
+
+export const sendingButton = css`
+  background: rgb(0 0 0 / 0%);
+  border: 0;
+`;