Feat: Chat-23-chatting (#6)

* Feat: input, chatbox, ai프로필 UI 컴포넌트 완성

* Feat: 채팅 ai 프로필, 채팅 header UI 구현

* Style: font, color 적용 형식 변경

src/App.module.scss

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

src/App.tsx

@@ -1,5 +1,6 @@
 import Router from './pages';
 import { Reset } from 'styled-reset';
+import './App.module.scss';
 
 function App() {
   return (

src/apis/aiChatApi.ts

@@ -0,0 +1 @@
+export {};

src/assets/index.ts

@@ -0,0 +1,6 @@
+export { ReactComponent as DadaChat } from './dada-chat.svg';
+export { ReactComponent as LuluChat } from './lulu-chat.svg';
+export { ReactComponent as ChichiChat } from './chichi-chat.svg';
+export { ReactComponent as LeftChevron } from './left-shavron.svg';
+export { ReactComponent as CalendarIcon } from './calendar-icon.svg';
+export { ReactComponent as Plus } from './plus.svg';

src/components/Headers/ChatHeader.module.scss

@@ -0,0 +1,22 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  width: 100%;
+  height: 56px;
+  position: fixed;
+  top: 0;
+  background-color: $WH;
+  .title {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    @include sub18;
+  }
+}

src/components/Headers/ChatHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './ChatHeader.module.scss';
+import { LeftChevron, CalendarIcon } from '../../assets';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const ChatHeader = ({ children }: IProps) => {
+  const navigate = useNavigate();
+  const onGoBack = () => {
+    navigate(-1);
+  };
+  return (
+    <div className={styles.container}>
+      <LeftChevron onClick={onGoBack} />
+      <h3 className={styles.title}>{children}</h3>
+      <CalendarIcon />
+    </div>
+  );
+};
+
+export default ChatHeader;

src/components/common/AiChatBox.module.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables/fonts.scss';
+
+.container {
+  display: flex;
+  gap: 10px;
+  .messagesWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    .aiName {
+      @include body14;
+    }
+  }
+}

src/components/common/AiChatBox.tsx

@@ -0,0 +1,33 @@
+import { DadaChat, LuluChat, ChichiChat } from '../../assets';
+import LeftChatBox from '../../components/common/LeftChatBox';
+import styles from './AiChatBox.module.scss';
+
+interface IProps {
+  ai: string;
+}
+
+const AiChatBox = ({ ai }: IProps) => {
+  return (
+    <>
+      <div className={styles.container}>
+        {ai === 'dada' ? (
+          <DadaChat />
+        ) : ai === 'lulu' ? (
+          <LuluChat />
+        ) : (
+          <ChichiChat />
+        )}
+        <div className={styles.messagesWrapper}>
+          <p className={styles.aiName}>
+            {ai === 'dada' ? '다다' : ai === 'lulu' ? '루루' : '치치'}
+          </p>
+          <LeftChatBox>이렇게! 이렇게!</LeftChatBox>
+          <LeftChatBox>{`I'm 진정이에요`}</LeftChatBox>
+          <LeftChatBox>장충동 왕족발 보쌈!</LeftChatBox>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AiChatBox;

src/components/common/LeftChatBox.module.scss

@@ -0,0 +1,21 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.wrapper {
+  display: flex;
+  width: 100%;
+  .message {
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px;
+    background-color: $BK30;
+    padding: 12px;
+    max-width: 180px;
+  }
+  .time {
+    display: flex;
+    align-items: flex-end;
+    @include navRegular;
+    color: $BK70;
+  }
+}

src/components/common/LeftChatBox.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './LeftChatBox.module.scss';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const LeftChatBox = ({ children }: IProps) => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.message}>{children}</div>
+      <span className={styles.time}>오전 9:54</span>
+    </div>
+  );
+};
+
+export default LeftChatBox;

src/components/common/RightChatBox.module.scss

@@ -0,0 +1,23 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  .message {
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px;
+    background-color: $primary_default;
+    padding: 12px;
+    max-width: 180px;
+    color: $WH;
+  }
+  .time {
+    display: flex;
+    align-items: flex-end;
+    @include navRegular;
+    color: $BK70;
+  }
+}

src/components/common/RightChatBox.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './RightChatBox.module.scss';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const RightChatBox = ({ children }: IProps) => {
+  return (
+    <div className={styles.wrapper}>
+      <span className={styles.time}>오전 9:54</span>
+      <div className={styles.message}>{children}</div>
+    </div>
+  );
+};
+
+export default RightChatBox;

src/global.d.ts

@@ -2,3 +2,8 @@ declare module '*.scss' {
   const content: { [className: string]: string };
   export = content;
 }
+declare module '*.svg' {
+  export const ReactComponent: REact.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

src/pages/Chat/Chat.module.scss

@@ -1,4 +1,45 @@
 @import '../../styles/variables/colors.scss';
-.example {
-  background-color: $orange;
+@import '../../styles/variables/fonts.scss';
+
+.messagesContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 20px;
+  padding: 10px;
+  margin-top: 56px;
+  margin-bottom: 48px;
+}
+.aiChanged {
+  display: flex;
+  justify-content: center;
+  @include caption;
+  color: $BK70;
+}
+
+.inputBox {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 48px;
+  .plusBtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    background-color: transparent;
+  }
+  .input {
+    flex-grow: 1;
+    border: none;
+    outline: none;
+  }
+  .submitBtn {
+    width: 56px;
+    border: none;
+    background-color: $primary_default;
+    color: $WH;
+  }
 }

src/pages/Chat/Chat.tsx

@@ -1,7 +1,30 @@
 import styles from './Chat.module.scss';
+import { Plus } from '../../assets';
+import RightChatBox from '../../components/common/RightChatBox';
+import ChatHeader from '../../components/Headers/ChatHeader';
+import AiChatBox from '../../components/common/AiChatBox';
 
 const Chat = () => {
-  return <div className={styles.example}>Chat</div>;
+  return (
+    <div>
+      <ChatHeader>다다</ChatHeader>
+      <div className={styles.messagesContainer}>
+        <AiChatBox ai="dada" />
+        <RightChatBox>공습경보! 공습경보!</RightChatBox>
+        <p
+          className={styles.aiChanged}
+        >{`대화 상대가 '루루'로 변경되었습니다.`}</p>
+        <AiChatBox ai="lulu" />
+      </div>
+      <div className={styles.inputBox}>
+        <button className={styles.plusBtn}>
+          <Plus />
+        </button>
+        <input className={styles.input} />
+        <button className={styles.submitBtn}>전송</button>
+      </div>
+    </div>
+  );
 };
 
 export default Chat;