[#7] 채팅방 목록, 채팅방 상세 페이지 디자인, 컴포넌트 구현

연관 이슈

#7 (closed)

작업 내용

채팅 목록, 채팅 상세 페이지(공지사항, 검색 포함), 디자인 + 구현, fcm 세팅, styled-components react-icons firebase sweetalert2 설치

• 채팅 목록
• 채팅 상세 페이지(공지사항, 검색)
• fcm 세팅

테스트 결과 or 스크린샷 (선택)

작업한 부분을 캡처해 보여주면 이해하기 쉬워요

리뷰 요구사항 (선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

src/components/ChattingDetail.css

+/* ChattingDetail.css */
+.chatting-detail-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #ffffff;
+  min-height: 100vh;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.chatting-header {
+  width: 100%;
+  background-color: #f8f9fa;
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.chatting-header h1 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-left: 0.5rem;
+  color: #343a40;
+}
+
+.chatting-messages {
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+  padding: 1rem;
+  box-sizing: border-box;
+  background-color: #f1f3f5;
+  border-radius: 0.5rem;
+}
+
+.chatting-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+
+.chatting-message img {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.chatting-message .message-content {
+  background-color: #ffffff;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  max-width: 70%;
+}
+
+.chatting-message.own .message-content {
+  background-color: #e0f7fa;
+  margin-left: auto;
+}
+
+.chatting-input-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: #ffffff;
+  border-top: 1px solid #e9ecef;
+}
+
+.chatting-input-container input {
+  flex: 1;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.5rem;
+  margin-right: 0.5rem;
+  outline: none;
+}
+
+.chatting-input-container button {
+  background-color: #007bff;
+  color: #ffffff;
+  border: none;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.chatting-input-container button:hover {
+  background-color: #0056b3;
+}
\ No newline at end of file