Repository: SOPT-all/36-COLLABORATION-WEB-GOODOC
Pull request #23: Feat: 채팅 뷰 헤더 컴포넌트 구현
Author: login: jisooooooooooo
Labels: name: ✨Feature
description: 기능 개발
name: 🐵지수
Created: 2025-05-14T16:11:32Z | Merged: 2025-05-14T17:50:57Z

# 🩺 Pull requests
### 📍 작업한 이슈번호
- #22 

### 💻 작업한 내용
- 채팅 뷰에서 헤더 컴포넌트를 구현했습니다.

- 모바일 화면 크기 설정
global.css
```
#root {
  width: 375px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #fff;
}
```
화면 크기 375px로 고정하고 중앙에 정렬되게 설정했습니다.

### 📢 PR Point
- 뒤로가기 기능은 라우팅 설정 후 추가하겠습니다!

### 📸 스크린샷
![image](https://github.com/user-attachments/assets/9e0cb9ef-dd84-4a7e-9987-f376f6479716)


Diff:
diff --git a/src/main.tsx b/src/main.tsx
index 962146c..d866a38 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,9 @@
-
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.tsx";
-import "./index.css";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import './index.css';
+import App from './App.tsx';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,7 +16,7 @@ const queryClient = new QueryClient({
   },
 });
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
diff --git a/src/shared/assets/svg/back-arrow.svg b/src/shared/assets/svg/back-arrow.svg
new file mode 100644
index 0000000..de5e642
--- /dev/null
+++ b/src/shared/assets/svg/back-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 17.8828C7 17.5898 7.12891 17.3203 7.36328 17.0977L15.1211 9.35156C15.3789 9.09375 15.625 9 15.9062 9C16.4805 9 16.9375 9.42188 16.9375 10.0078C16.9375 10.2891 16.832 10.5586 16.6445 10.7461L14.0195 13.418L10.082 17.0156L12.9062 16.8398H27.7305C28.3398 16.8398 28.7617 17.2734 28.7617 17.8828C28.7617 18.4922 28.3398 18.9258 27.7305 18.9258H12.9062L10.0703 18.75L14.0195 22.3477L16.6445 25.0195C16.832 25.1953 16.9375 25.4766 16.9375 25.7578C16.9375 26.3438 16.4805 26.7656 15.9062 26.7656C15.625 26.7656 15.3789 26.6602 15.1445 26.4375L7.36328 18.668C7.12891 18.4453 7 18.1758 7 17.8828Z" fill="#393939"/>
+</svg>
diff --git a/src/shared/assets/svg/menu.svg b/src/shared/assets/svg/menu.svg
new file mode 100644
index 0000000..d573301
--- /dev/null
+++ b/src/shared/assets/svg/menu.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 12C9 11.4477 9.44772 11 10 11H26C26.5523 11 27 11.4477 27 12C27 12.5523 26.5523 13 26 13H10C9.44772 13 9 12.5523 9 12Z" fill="#393939"/>
+<path d="M9 18C9 17.4477 9.44772 17 10 17H26C26.5523 17 27 17.4477 27 18C27 18.5523 26.5523 19 26 19H10C9.44772 19 9 18.5523 9 18Z" fill="#393939"/>
+<path d="M9 24C9 23.4477 9.44772 23 10 23H26C26.5523 23 27 23.4477 27 24C27 24.5523 26.5523 25 26 25H10C9.44772 25 9 24.5523 9 24Z" fill="#393939"/>
+</svg>
diff --git a/src/shared/components/Chat/ChatHeader.tsx b/src/shared/components/Chat/ChatHeader.tsx
new file mode 100644
index 0000000..a07fe11
--- /dev/null
+++ b/src/shared/components/Chat/ChatHeader.tsx
@@ -0,0 +1,18 @@
+import BackArrowIcon from '@shared/assets/svg/back-arrow.svg?react';
+import MenuIcon from '@shared/assets/svg/menu.svg?react';
+
+const ChatHeader: React.FC = () => {
+  return (
+    <header className="flex items-center justify-between px-[20px] py-[8px] border-b border-[#CACED8]">
+      <div className="flex items-center">
+        <BackArrowIcon className="w-[36px] h-[36px] cursor-pointer" />
+        <span className="ml-[8px] mr-[4px] title-semi-14 text-SoftBlack">AI 건강매니저 굿봇</span>
+        <div className="flex items-center justify-center px-[5px] py-[3px] rounded-[12px] bg-Mainblue">
+          <span className="body-med-10 text-White">상담가능</span>
+        </div>
+      </div>
+      <MenuIcon className="w-[36px] h-[36px] cursor-pointer" />
+    </header>
+  );
+};
+export default ChatHeader;
diff --git a/src/shared/styles/global.css b/src/shared/styles/global.css
index a1103a9..b4f1eda 100644
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   font-family: 'Pretendard', sans-serif;
   margin: 0;
   padding: 0;
@@ -8,6 +9,13 @@ html, body {
   color: #333;
 }
 
+#root {
+  width: 375px;
+  margin: 0 auto;
+  min-height: 100vh;
+  background-color: #fff;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -23,7 +31,10 @@ button {
   box-sizing: border-box;
 }
 
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
   font-family: inherit;
   font-size: inherit;
   border: 1px solid #ccc;
@@ -31,7 +42,12 @@ input, textarea, select, button {
   outline: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
   font-weight: bold;
 }


Reviews:
user: login: jstar000
body: 너비 375px 확인했습니다!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T17:23:38Z
user: login: jisooooooooooo
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-14T17:33:43Z
user: login: heeyyeon
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T17:36:21Z
user: login: heeyyeon
body: 저도 너비 확인했습니닷!!✨✨✨
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-14T17:37:14Z
user: login: jisooooooooooo
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-14T17:48:21Z
user: login: jstar000
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-14T17:49:01Z

Review comments:
diff_hunk: @@ -0,0 +1,18 @@
+import BackArrowIcon from '@shared/assets/svg/back-arrow.svg?react';
+import MenuIcon from '@shared/assets/svg/menu.svg?react';
+
+const ChatHeader: React.FC = () => {
+  return (
+    <header className="flex items-center justify-between px-[20px] py-[8px] border-b border-[#CACED8]">
+      <div className="flex items-center gap-2">
+        <BackArrowIcon className="w-6 h-6 cursor-pointer" />
+        <span className="title-semi-14 text-SoftBlack ml-[8px] mr-[4px]">AI 건강매니저 굿봇</span>
+        <div className="flex items-center justify-center px-[5px] py-[3px] rounded-[12px] bg-Mainblue">
path: src/shared/components/Chat/ChatHeader.tsx
user: login: jstar000
body: 패딩, 높이너비 등 길이 관련 세팅에 px-[20px] 과 w-6 처럼 tailwind의 유틸리티 클래스를 사용하기도 하고, 픽셀을 명시하기도 하는데 하나로 통일되면 좋지 않을까요?
저희 CSS 컨벤션에는 '스타일은 최대한 Tailwind의 유틸리티 클래스로만 작성합니다' 라고 작성돼있긴 한데.. 단위 관련 컨벤션 얘기를 해본 적이 없는 것 같아 같이 얘기해보면 좋을 것 같아요
사실 저도 아직 익숙하지가 않아서 그런지 그냥 px이나 rem이 더 직관적으로 느껴지긴 해서ㅎㅎ
created_at: 2025-05-14T17:23:20Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,18 @@
+import BackArrowIcon from '@shared/assets/svg/back-arrow.svg?react';
+import MenuIcon from '@shared/assets/svg/menu.svg?react';
+
+const ChatHeader: React.FC = () => {
+  return (
+    <header className="flex items-center justify-between px-[20px] py-[8px] border-b border-[#CACED8]">
+      <div className="flex items-center gap-2">
+        <BackArrowIcon className="w-6 h-6 cursor-pointer" />
+        <span className="title-semi-14 text-SoftBlack ml-[8px] mr-[4px]">AI 건강매니저 굿봇</span>
+        <div className="flex items-center justify-center px-[5px] py-[3px] rounded-[12px] bg-Mainblue">
path: src/shared/components/Chat/ChatHeader.tsx
user: login: jisooooooooooo
body: 저도 이거 고민되긴 하는데 개인적으로 유틸리티 클래스가 익숙하지 않아서 px이나 rem을 쓰는 게 편하기도 하고 직관적으로 보이긴 합니닷,,
같이 얘기한 후에 컨벤션 수정합시다 ㅎㅎ~
created_at: 2025-05-14T17:33:43Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,18 @@
+import BackArrowIcon from '@shared/assets/svg/back-arrow.svg?react';
+import MenuIcon from '@shared/assets/svg/menu.svg?react';
+
+const ChatHeader: React.FC = () => {
+  return (
+    <header className="flex items-center justify-between px-[20px] py-[8px] border-b border-[#CACED8]">
+      <div className="flex items-center gap-2">
+        <BackArrowIcon className="w-6 h-6 cursor-pointer" />
+        <span className="title-semi-14 text-SoftBlack ml-[8px] mr-[4px]">AI 건강매니저 굿봇</span>
+        <div className="flex items-center justify-center px-[5px] py-[3px] rounded-[12px] bg-Mainblue">
path: src/shared/components/Chat/ChatHeader.tsx
user: login: heeyyeon
body: 좋습니당~ 저도 유틸리티 함수 사용이 익숙하지 않아서 자꾸 확인하게 되네요ㅎㅎ 
created_at: 2025-05-14T17:36:21Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,18 @@
+import BackArrowIcon from '@shared/assets/svg/back-arrow.svg?react';
+import MenuIcon from '@shared/assets/svg/menu.svg?react';
+
+const ChatHeader: React.FC = () => {
+  return (
+    <header className="flex items-center justify-between px-[20px] py-[8px] border-b border-[#CACED8]">
+      <div className="flex items-center gap-2">
+        <BackArrowIcon className="w-6 h-6 cursor-pointer" />
+        <span className="title-semi-14 text-SoftBlack ml-[8px] mr-[4px]">AI 건강매니저 굿봇</span>
+        <div className="flex items-center justify-center px-[5px] py-[3px] rounded-[12px] bg-Mainblue">
path: src/shared/components/Chat/ChatHeader.tsx
user: login: jisooooooooooo
body: 컨벤션 수정했고 단위 통일해서 수정했습니다!
created_at: 2025-05-14T17:48:21Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-14T16:12:03Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-14T17:42:57Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-14T17:47:46Z
body: ### 빌드 결과
빌드 성공 🎉
author_association: NONE