Repository: SOPT-all/36-COLLABORATION-WEB-GOODOC
Pull request #51: Feat: 채팅 뷰 배경화면 구현
Author: login: jisooooooooooo
Labels: name: ✨Feature
description: 기능 개발
name: 🐵지수
Created: 2025-05-15T17:58:12Z | Merged: 2025-05-16T04:17:51Z

# 🩺 Pull requests
### 📍 작업한 이슈번호
- #31 

### 💻 작업한 내용
- 채팅 메시지 영역 컴포넌트 구현
- 채팅 화면 구현

### 📢 PR Point
- `overflow-y-auto` 사용해서 채팅 영역이 넘치면 스크롤 생기도록 구현하고 영역이 넘쳐서 스크롤 될 때 스크롤바 생기지 않도록 `global.css`에 스크롤바 보이지 않게 하는 유틸리티 클래스 정의했습니다!
```
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
```

### 📸 스크린샷
![image](https://github.com/user-attachments/assets/206c8605-6a5f-4260-a81c-c1d1d1a98681)



Diff:
diff --git a/src/pages/chat/components/ChatBody.tsx b/src/pages/chat/components/ChatBody.tsx
new file mode 100644
index 0000000..b81667c
--- /dev/null
+++ b/src/pages/chat/components/ChatBody.tsx
@@ -0,0 +1,16 @@
+import Alert from '@shared/assets/svg/chatAlert.svg?react';
+
+const NOTICE_MESSAGE = '익명으로 공개하니 안심하세요';
+
+const ChatBody: React.FC = () => {
+  return (
+    <section className="bg-CGray-8 h-full flex flex-col pb-[5rem]">
+      <div className="flex items-center py-[.94rem] pl-[1rem] gap-[.25rem]">
+        <Alert className="w-[1rem] h-[1rem]" aria-hidden="true" />
+        <p className="title-semi-14 text-Mainblue">{NOTICE_MESSAGE}</p>
+      </div>
+    </section>
+  );
+};
+
+export default ChatBody;
diff --git a/src/pages/chat/components/ChatHeader.tsx b/src/pages/chat/components/ChatHeader.tsx
index ceffe61..41fcc2e 100644
--- a/src/pages/chat/components/ChatHeader.tsx
+++ b/src/pages/chat/components/ChatHeader.tsx
@@ -3,7 +3,7 @@ import MenuIcon from '@shared/assets/svg/menu.svg?react';
 
 const ChatHeader: React.FC = () => {
   return (
-    <header className="flex items-center justify-between px-[1.25rem] py-[.5rem] border-b border-[#CACED8]">
+    <header className="flex items-center justify-between px-[1.25rem] py-[.5rem] bg-CGray-8 border-b border-[#CACED8]">
       <div className="flex items-center">
         <BackArrowIcon className="w-[2.25rem] h-[2.25rem] cursor-pointer" />
         <span className="ml-[.5rem] mr-[.25rem] title-semi-14 text-SoftBlack">
diff --git a/src/pages/chat/components/ChatInput.tsx b/src/pages/chat/components/ChatInput.tsx
index 7d0bf35..fedb452 100644
--- a/src/pages/chat/components/ChatInput.tsx
+++ b/src/pages/chat/components/ChatInput.tsx
@@ -2,13 +2,15 @@ import SendIcon from '@shared/assets/svg/send.svg?react';
 
 const ChatInput: React.FC = () => {
   return (
-    <div className="flex items-center bg-white rounded-tl-[.5rem] rounded-tr-[.5rem] shadow-[.25rem_-0.25rem_1.25rem_0rem_rgba(0,0,0,0.05)] px-[1rem] py-[.75rem]">
-      <input
-        type="text"
-        placeholder="메시지를 입력하세요."
-        className="flex-1 h-[2.5rem] px-[.625rem] py-[.5625rem] border border-[#ECEDF0] rounded-[.75rem] bg-white body-med-14 placeholder:body-med-14 placeholder:text-CGray-6 outline-none"
-      />
-      <SendIcon className="w-[1.5rem] h-[1.5rem] ml-[.75rem] cursor-pointer text-CGray-6" />
+    <div className="bg-CGray-8">
+      <div className="flex items-center px-[0.75rem] pt-[.5rem] pb-[2.625rem] bg-White rounded-tl-[.5rem] rounded-tr-[.5rem] shadow-[.25rem_-0.25rem_1.25rem_0rem_rgba(0,0,0,0.05)]">
+        <input
+          type="text"
+          placeholder="메시지를 입력하세요."
+          className="flex-1 h-[2.5rem] px-[.625rem] py-[.5625rem] border border-[#ECEDF0] rounded-[.75rem] bg-white body-med-14 placeholder:body-med-14 placeholder:text-CGray-6 outline-none"
+        />
+        <SendIcon className="w-[1.5rem] h-[1.5rem] ml-[.75rem] cursor-pointer text-CGray-6" />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/chat/page/.gitkeep b/src/pages/chat/page/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/chat/page/ChatPage.tsx b/src/pages/chat/page/ChatPage.tsx
new file mode 100644
index 0000000..6edbbd6
--- /dev/null
+++ b/src/pages/chat/page/ChatPage.tsx
@@ -0,0 +1,17 @@
+import ChatHeader from '@pages/chat/components/ChatHeader';
+import ChatBody from '@pages/chat/components/ChatBody';
+import ChatInput from '@pages/chat/components/ChatInput';
+
+const ChatPage: React.FC = () => {
+  return (
+    <div className="h-screen flex flex-col">
+      <ChatHeader />
+      <main className="flex-1 overflow-y-auto scrollbar-hide">
+        <ChatBody />
+      </main>
+      <ChatInput />
+    </div>
+  );
+};
+
+export default ChatPage;
diff --git a/src/shared/assets/svg/chatAlert.svg b/src/shared/assets/svg/chatAlert.svg
new file mode 100644
index 0000000..79ace63
--- /dev/null
+++ b/src/shared/assets/svg/chatAlert.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="IconAlert">
+<path id="&#244;&#128;&#158;&#160;" d="M8 15C7.88264 15 7.7066 14.9648 7.51589 14.8662C3.41565 12.6479 2 11.7183 2 9.19014V3.88028C2 3.15493 2.33007 2.91549 2.93888 2.67606C3.79707 2.34507 6.54034 1.3662 7.39853 1.09859C7.58924 1.04225 7.79462 1 8 1C8.20538 1 8.41076 1.03521 8.6088 1.09859C9.45966 1.38028 12.2029 2.33803 13.0611 2.67606C13.6773 2.92254 14 3.15493 14 3.88028V9.19014C14 11.7183 12.6577 12.7676 8.48411 14.8662C8.30073 14.9577 8.11736 15 8 15ZM8 9.0493C8.36675 9.0493 8.57946 8.85211 8.5868 8.47183L8.68949 4.64084C8.69682 4.26761 8.39609 3.99296 7.99266 3.99296C7.58191 3.99296 7.29584 4.26056 7.30318 4.6338L7.40587 8.47183C7.4132 8.84507 7.61858 9.0493 8 9.0493ZM8 11.4085C8.4401 11.4085 8.82152 11.0775 8.82152 10.6549C8.82152 10.2324 8.44743 9.89437 8 9.89437C7.55257 9.89437 7.17848 10.2394 7.17848 10.6549C7.17848 11.0704 7.5599 11.4085 8 11.4085Z" fill="#0073F9"/>
+</g>
+</svg>
diff --git a/src/shared/styles/global.css b/src/shared/styles/global.css
index b4f1eda..d69c5b6 100644
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -56,3 +56,11 @@ img {
   max-width: 100%;
   display: block;
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index 270a4d0..397418c 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -81,7 +81,7 @@
   }
 
   .body-med-10 {
-    @apply text-[0.625rem] leading-[1.25rem];
+    @apply text-[0.625rem] leading-[0.75rem];
     font-weight: 500; /* medium */
   }
 


Reviews:
user: login: mmaybei
body: ChatHeader에 상담가능 부분이 피그마 GUI보다 세로로 뚱뚱해 보여서 요 부분 확인해보면 좋을 것 같습니당!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-16T01:18:11Z
user: login: heeyyeon
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-16T03:46:09Z
user: login: jisooooooooooo
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-16T03:57:39Z

Review comments:
diff_hunk: @@ -1,4 +1,10 @@
+import ChatPage from './pages/chat/page/ChatPage';
+
 function App() {
-  return <></>;
+  return (
+    <>
+      <ChatPage />
+    </>
+  );
 }
path: src/App.tsx
user: login: mmaybei
body: 요 부분 잘못 push 된 것 같습니당 !!
created_at: 2025-05-16T01:15:01Z
author_association: COLLABORATOR
diff_hunk: @@ -56,3 +56,11 @@ img {
   max-width: 100%;
   display: block;
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
path: src/shared/styles/global.css
user: login: mmaybei
body: 👍 
created_at: 2025-05-16T01:17:09Z
author_association: COLLABORATOR
diff_hunk: @@ -56,3 +56,11 @@ img {
   max-width: 100%;
   display: block;
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
path: src/shared/styles/global.css
user: login: heeyyeon
body: 좋습니당ㅎㅎ!!👍🏻
created_at: 2025-05-16T03:43:14Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,16 @@
+import Alert from '@shared/assets/svg/chatAlert.svg?react';
+
+const NOTICE_MESSAGE = '익명으로 공개하니 안심하세요';
path: src/pages/chat/components/ChatBody.tsx
user: login: heeyyeon
body: 이렇게 미리 변수로 선언해주니까 깔끔하고 좋은 것 같아요!!
created_at: 2025-05-16T03:46:02Z
author_association: MEMBER
diff_hunk: @@ -1,4 +1,10 @@
+import ChatPage from './pages/chat/page/ChatPage';
+
 function App() {
-  return <></>;
+  return (
+    <>
+      <ChatPage />
+    </>
+  );
 }
path: src/App.tsx
user: login: jisooooooooooo
body: 수정했습니다!!
created_at: 2025-05-16T03:57:39Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-15T17:58:42Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-15T18:07:41Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-16T03:56:24Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-16T04:14:36Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: jisooooooooooo
created_at: 2025-05-16T04:17:03Z
body: 상담가능 폰트에 적용된 body-med-10에서 leading이 1.25rem으로 되어 있어서 뚱뚱해 보였나봐요,,!
theme.css에서 
```
.body-med-10 {
    @apply text-[0.625rem] leading-[0.75rem];
    font-weight: 500; /* medium */
  }
```
이부분 1.25 -> 0.75rem으로 수정했습니다~
![스크린샷 2025-05-16 131229](https://github.com/user-attachments/assets/033dff19-3610-4dac-bc12-23ff306efa71)

author_association: COLLABORATOR