Merge pull request #45 from CommitField/fix-chat-ui

Fix: Home으로 가는 버튼 추가

Author: ces0135-hub

src/components/ChatRoomList.jsx

@@ -5,6 +5,7 @@ import ChatRoom from './ChatRoom';
 import PasswordModal from './PasswordModal';
 import './ChatStyles.css';
 import { API_BACKEND_URL } from '../config';
+import { Home } from 'lucide-react'; // Import Home icon from lucide-react
 
 const ChatRoomList = () => {
  const [rooms, setRooms] = useState([]);
@@ -173,6 +174,11 @@ const ChatRoomList = () => {
  navigate('/create-room');
  };
 
+ // 홈으로 돌아가기
+ const goToHome = () => {
+ navigate('/home');
+ };
+
  // 탭 변경 시 목록 새로고침
  const handleTabChange = (tab) => {
  setActiveTab(tab);
@@ -272,6 +278,9 @@ const ChatRoomList = () => {
  <div className="chat-list-container">
  {/* 새로고침/생성 버튼 */}
  <div className="chat-action-buttons">
+ <div className="home-btn" onClick={goToHome} title="홈으로">
+ <Home size={18} style={{ marginRight: '5px' }} />홈으로
+ </div>
  <div className="refresh-btn" onClick={handleRefresh} title="새로고침">
  <i className="fa-solid fa-arrows-rotate"></i>새로고침
  </div>
@@ -332,7 +341,7 @@ const ChatRoomList = () => {
  >
  <div className="profile-img">
  {room.imageUrl ? (
- <img 
+ <img
  src={getImageUrl(room.imageUrl)}
  alt={room.title}
  className="room-image"

src/components/ChatStyles.css

@@ -1337,4 +1337,63 @@
  80% {
  transform: translateX(5px);
  }
+}
+
+/* 홈 버튼 스타일 - ChatStyles.css에 추가 */
+
+.home-btn {
+ position: static;
+ width: auto;
+ height: auto;
+ border-radius: 20px;
+ background-color: #3b82f6;
+ /* 파란색 배경 - 다른 버튼과 구분 */
+ color: var(--white);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 15px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ transition: all 0.2s ease;
+ border: none;
+}
+
+.home-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ background-color: #2563eb;
+ /* 호버 시 더 진한 파란색 */
+}
+
+/* 채팅 상단 버튼 그룹 조정 - 기존에 있지만 gap 조정 */
+.chat-action-buttons {
+ position: absolute;
+ top: 15px;
+ right: 20px;
+ display: flex;
+ gap: 10px;
+ z-index: 10;
+}
+
+/* 모바일 레이아웃에서 홈 버튼 조정 */
+@media (max-width: 768px) {
+ .home-btn {
+ padding: 6px 12px;
+ font-size: 13px;
+ }
+
+ .chat-action-buttons {
+ flex-wrap: wrap;
+ /* 공간이 부족하면 버튼 줄바꿈 */
+ }
+}
+
+@media (max-width: 576px) {
+ .chat-action-buttons {
+ top: 70px;
+ right: 10px;
+ }
 }