From 67744c0968748dae56f2c4e7d8ca65b7ca08e8a5 Mon Sep 17 00:00:00 2001 From: baeksunghyun Date: Fri, 7 Mar 2025 16:07:18 +0900 Subject: [PATCH 1/4] Fix: ChatStyles.css --- src/components/ChatStyles.css | 923 +++++++++++----------------------- 1 file changed, 282 insertions(+), 641 deletions(-) diff --git a/src/components/ChatStyles.css b/src/components/ChatStyles.css index 6d7fee4..3cb59cc 100644 --- a/src/components/ChatStyles.css +++ b/src/components/ChatStyles.css @@ -7,13 +7,10 @@ --light-gray: #f2f2f2; --medium-gray: #e0e0e0; --dark-gray: #333333; - /* 더 어둡게 변경하여 대비 향상 */ --white: #ffffff; --black: #121212; - /* 더 어둡게 변경 */ --pink: #ff8a9e; --text-primary: #222222; - /* 텍스트 기본 색상 추가 */ } /* 전체 레이아웃 */ @@ -86,7 +83,6 @@ border: 1px solid var(--medium-gray); background-color: var(--light-gray); color: var(--text-primary); - /* 텍스트 색상 명시 */ } /* 탭 메뉴 */ @@ -102,9 +98,7 @@ text-align: center; cursor: pointer; color: var(--text-primary); - /* 텍스트 색상 명시 */ font-weight: 500; - /* 조금 더 두껍게 */ } .chat-tab.active { @@ -176,7 +170,6 @@ font-weight: bold; margin-bottom: 5px; color: var(--text-primary); - /* 텍스트 색상 명시 */ } .chat-room .chat-name .room-number { @@ -189,7 +182,6 @@ color: var(--dark-gray); font-size: 14px; font-weight: 500; - /* 조금 더 두껍게 */ } .chat-room .chat-time { @@ -207,18 +199,12 @@ border-bottom: 1px solid var(--medium-gray); } -/* 채팅 생성 버튼 */ -.create-room-btn, -.refresh-btn { +/* 채팅 생성/새로고침 버튼 */ +.create-room-btn, .refresh-btn, .home-btn { position: static; - /* Remove fixed positioning */ width: auto; - /* Remove fixed width */ height: auto; - /* Remove fixed height */ border-radius: 20px; - /* Rounded corners but not circular */ - background-color: var(--primary-green); color: var(--white); display: flex; align-items: center; @@ -232,99 +218,188 @@ border: none; } -.create-room-btn i, -.refresh-btn i { +.create-room-btn, .refresh-btn { + background-color: var(--primary-green); +} + +.home-btn { + background-color: #3b82f6; +} + +.create-room-btn i, .refresh-btn i { margin-right: 5px; font-size: 16px; } - -.create-room-btn:hover, -.refresh-btn:hover { +.create-room-btn:hover, .refresh-btn:hover, .home-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } -/* 채팅방 생성 폼 */ -.create-room-form { +.home-btn:hover { + background-color: #2563eb; +} + +/* 채팅방 생성 모달 */ +.create-room-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: rgba(0, 0, 0, 0.75); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2000; + padding: 0; +} + +.create-room-modal { width: 100%; - max-width: 500px; - margin: 0 auto; - padding: 20px; - background-color: var(--white); + max-width: 600px; + background-color: white; + border-radius: 10px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + z-index: 2001; +} + +.create-room-header { + background-color: #333; + color: white; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.create-room-header h2 { + margin: 0; + font-size: 18px; + font-weight: 600; +} + +.close-btn { + background: none; + border: none; + color: white; + font-size: 24px; + cursor: pointer; + padding: 0; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; +} + +.create-room-form { + padding: 30px; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; } +/* 폼 스타일링 */ .form-group { - margin-bottom: 20px; + margin-bottom: 25px; + width: 100%; + max-width: 500px; + margin-left: auto; + margin-right: auto; } -.form-group label, -.form-label { +.form-group label, .form-label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; - /* 어두운 배경에 어두운 글자색은 보이지 않으므로 수정 */ font-size: 14px; } -/* 폼 입력 필드 스타일 수정 */ -.form-group input, -.form-group select, .form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; background-color: white; - /* 배경색을 흰색으로 변경 */ color: #333; - /* 텍스트 색상을 어두운 색으로 변경 */ font-size: 15px; transition: all 0.2s; } -.form-group input:focus, -.form-group select:focus, .form-control:focus { outline: none; border-color: var(--primary-green); box-shadow: 0 0 0 2px rgba(63, 178, 127, 0.2); } -/* 필요한 경우 placeholder 색상도 조정 */ -.form-group input::placeholder, -.form-group select::placeholder, .form-control::placeholder { color: #aaa; } -.form-group input.error, .form-control.error { border-color: #e74c3c; } -.form-group .error-message, .error-message { color: #e74c3c; font-size: 13px; margin-top: 5px; } +/* 체크박스 스타일 */ +.checkbox-wrapper { + display: flex; + align-items: center; + margin-bottom: 20px; + width: 100%; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.checkbox-wrapper input[type="checkbox"] { + margin-right: 10px; + cursor: pointer; + width: 18px; + height: 18px; + accent-color: var(--primary-green); +} + +.checkbox-label { + color: #333; + font-size: 14px; + cursor: pointer; +} + +/* 버튼 스타일링 */ .form-actions { display: flex; - justify-content: flex-end; - gap: 10px; - margin-top: 20px; + justify-content: center; + gap: 20px; + margin-top: 30px; + width: 100%; } .btn { - padding: 10px 18px; + padding: 12px 30px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; - font-size: 15px; + font-size: 16px; + min-width: 120px; transition: all 0.2s; } @@ -333,14 +408,12 @@ cursor: not-allowed; } -.btn-cancel, -.btn-secondary { +.btn-cancel, .btn-secondary { background-color: #6c757d; color: white; } -.btn-cancel:hover:not(:disabled), -.btn-secondary:hover:not(:disabled) { +.btn-cancel:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { background-color: #5a6268; } @@ -353,35 +426,17 @@ background-color: #45c28d; } - -.btn-secondary { - background-color: var(--light-gray); - color: var(--black); -} - /* 채팅 창 */ .chat-window { flex: 1; display: flex; flex-direction: column; background-color: var(--light-green); + height: 100%; + overflow: hidden; } /* 채팅 헤더 */ -.chat-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 15px 20px; - background-color: var(--white); - border-bottom: 1px solid var(--medium-gray); - position: relative; - /* 상대 위치 설정 */ - z-index: 5; - /* 적절한 z-index 설정 */ -} - -/* 채팅방 정보 영역 */ .chat-header { display: flex; justify-content: space-between; @@ -397,18 +452,15 @@ display: flex; align-items: center; gap: 15px; - /* 제목과 버튼 사이 간격 */ flex: 1; } -/* 채팅방 제목 */ .room-title { font-size: 18px; font-weight: bold; color: var(--text-primary); } - /* 헤더 내 버튼 스타일 */ .header-actions { display: flex; @@ -446,23 +498,6 @@ background-color: #fde9e7; } -/* 반응형 디자인 */ -@media (max-width: 576px) { - .room-info-container { - flex-direction: column; - align-items: flex-start; - gap: 8px; - } - - .header-actions { - margin-left: 0; - } - - .connection-status { - margin-top: 5px; - } -} - /* 연결 상태 */ .connection-status { display: flex; @@ -472,26 +507,28 @@ font-weight: 500; } -/* 버튼 비활성화 상태 */ -.action-btn.disabled { - opacity: 0.5; - cursor: not-allowed; +.status-indicator { + width: 8px; + height: 8px; + border-radius: 50%; + margin-right: 6px; } +.status-indicator.connected { + background-color: var(--primary-green); +} -.chat-header .room-info { - font-size: 14px; - color: var(--dark-gray); +.status-indicator.disconnected { + background-color: #e74c3c; } -/* 오른쪽 버튼 영역 */ -.chat-header .actions { - display: flex; - align-items: center; - gap: 10px; +/* 버튼 비활성화 상태 */ +.action-btn.disabled { + opacity: 0.5; + cursor: not-allowed; } -/* 채팅 상단 버튼 그룹 (새로고침, 생성) */ +/* 채팅 상단 버튼 그룹 */ .chat-action-buttons { position: absolute; top: 15px; @@ -501,46 +538,14 @@ z-index: 10; } -.chat-header .action-btn { - background: none; - border: none; - cursor: pointer; - color: var(--dark-gray); - font-weight: 500; - padding: 5px 10px; -} - -.chat-header .action-btn:hover { - color: var(--primary-green); -} - -.chat-header .action-btn.delete { - color: #e74c3c; -} - /* 채팅 메시지 영역 */ -/* 채팅 메시지 영역에 최대 높이와 스크롤 적용 */ .chat-messages { flex: 1; padding: 20px; overflow-y: auto; - /* 세로 스크롤 적용 */ max-height: calc(100vh - 180px); - /* 채팅 입력창과 헤더를 제외한 높이로 설정 */ - display: flex; - flex-direction: column; -} - -/* 채팅창 전체가 flex로 구성되도록 */ -.chat-window { - flex: 1; display: flex; flex-direction: column; - background-color: var(--light-green); - height: 100%; - /* 전체 높이 사용 */ - overflow: hidden; - /* 넘치는 부분 숨김 */ } /* 날짜 구분선 */ @@ -655,20 +660,15 @@ border: 3px solid var(--light-gray); border-top: 3px solid var(--primary-green); border-radius: 50%; - width: a20px; + width: 20px; height: 20px; animation: spin 1s linear infinite; margin-right: 10px; } @keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } /* 채팅 입력 영역 */ @@ -677,20 +677,15 @@ align-items: center; padding: 15px 20px; background-color: #2a2a2a; - /* 배경색 약간 밝게 조정 */ border-top: 1px solid #444; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } -/* 버튼 색상도 조정 */ -.chat-input .emoji-btn, -.chat-input .attach-btn { +.chat-input .emoji-btn, .chat-input .attach-btn { color: #ddd; - /* 아이콘 색상을 밝게 */ } -.chat-input .emoji-btn:hover, -.chat-input .attach-btn:hover { +.chat-input .emoji-btn:hover, .chat-input .attach-btn:hover { color: var(--primary-green); } @@ -702,9 +697,7 @@ outline: none; color: white; background-color: #333; - /* 입력창 배경색 */ border-radius: 20px; - /* 더 둥근 모서리 */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; margin-right: 10px; @@ -712,11 +705,9 @@ .chat-input input:focus { background-color: #3a3a3a; - /* 포커스 시 약간 밝은 배경 */ box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(63, 178, 127, 0.3); } -/* 플레이스홀더 텍스트 색상도 변경 */ .chat-input input::placeholder { color: #aaa; } @@ -726,7 +717,6 @@ color: white; border: none; border-radius: 20px; - /* 둥근 모서리 */ padding: 10px 20px; font-size: 15px; font-weight: 500; @@ -745,7 +735,6 @@ .chat-input .send-btn:hover { background-color: #45c28d; - /* 호버 시 더 밝은 녹색 */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } @@ -763,79 +752,27 @@ box-shadow: none; } -/* 반응형 디자인 */ -@media (max-width: 768px) { - .chat-input { - padding: 12px 15px; - } - - .chat-input input { - padding: 10px 14px; - font-size: 14px; - } - - .chat-input .send-btn { - padding: 8px 15px; - font-size: 14px; - } -} - -@media (max-width: 576px) { - .chat-input { - padding: 10px; - } - - .chat-input input { - padding: 8px 12px; - } - - .chat-input .send-btn { - padding: 8px 12px; - } - - .chat-input .send-btn i { - margin-right: 0; - } -} - +/* 채팅 콘텐츠 영역 */ .chat-content-area { flex: 1; - background-color: #c4f871; + background-color: #f0fbf1; display: flex; flex-direction: column; } +/* 빈 상태 메시지 */ .empty-state { display: flex; justify-content: center; align-items: center; height: 100%; - color: #fff; + color: #222; font-size: 18px; + flex-direction: column; } -/* 연결 상태 표시 */ -.connection-status { - display: flex; - align-items: center; - font-size: 14px; - color: var(--dark-gray); - font-weight: 500; -} - -.status-indicator { - width: 8px; - height: 8px; - border-radius: 50%; - margin-right: 6px; -} - -.status-indicator.connected { - background-color: var(--primary-green); -} - -.status-indicator.disconnected { - background-color: #e74c3c; +.empty-state p { + margin:.10px 0; } /* 빈 채팅창 메시지 */ @@ -864,264 +801,21 @@ font-weight: 500; } -/* 미디어 쿼리 */ -@media (max-width: 768px) { - .sidebar { - width: 60px; - } - - .chat-list-container { - position: relative; - /* For absolute positioning of buttons */ - } - - .create-room-btn { - left: 130px; - width: 40px; - height: 40px; - } - - .refresh-btn { - left: 130px; - } -} - -@media (max-width: 576px) { - .chat-layout { - flex-direction: column; - } - - .sidebar { - width: 100%; - height: 60px; - flex-direction: row; - padding: 0 10px; - } - - .sidebar .profile { - margin-bottom: 0; - margin-right: 10px; - } - - .sidebar .nav-item { - height: 100%; - width: auto; - margin-right: 15px; - margin-bottom: 0; - } - - .sidebar .bottom-icons { - margin-top: 0; - margin-left: auto; - display: flex; - } - - .chat-list-container, - .chat-window { - width: 100%; - } - - .create-room-btn { - bottom: 20px; - right: 20px; - left: auto; - } - - .refresh-btn { - bottom: 80px; - right: 20px; - left: auto; - } - -} - -/* 채팅 콘텐츠 영역 (우측 검은 영역) */ -.chat-content-area { - flex: 1; - background-color: #f0fbf1; - /* 검은색 배경 */ - display: flex; - flex-direction: column; -} - -.empty-state { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - color: #222; - font-size: 18px; - flex-direction: column; -} - -.empty-state p { - margin: 10px 0; -} - -.chat-action-buttons { - position: absolute; - top: 15px; - right: 20px; - display: flex; - gap: 10px; - z-index: 10; -} - -@media (max-width: 768px) { - .chat-action-buttons { - top: 10px; - right: 10px; - gap: 5px; - } - - .create-room-btn, - .refresh-btn { - padding: 6px 12px; - font-size: 13px; - } -} - -/* For mobile layouts */ -@media (max-width: 576px) { - .chat-action-buttons { - top: 70px; - /* Adjust based on your mobile header height */ - right: 10px; - } -} - -/* 채팅방 생성 모달 개선 스타일 */ -.create-room-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background-color: rgba(0, 0, 0, 0.75); - /* 더 진한 오버레이 */ - padding: 20px; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000; -} - -.create-room-modal { - width: 100%; - max-width: 450px; - background-color: white; - /* 흰색 배경으로 변경 */ +/* 비공개 채팅방 스타일 */ +.chat-room .private-badge { + display: inline-block; + background-color: #f8d7da; + color: #721c24; + font-size: 12px; + padding: 2px 6px; border-radius: 10px; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); - overflow: hidden; - animation: fadeIn 0.3s ease-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(-20px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -.create-room-header { - background-color: #333; - color: white; - padding: 15px 20px; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid #eee; -} - -.create-room-header h2 { - font-size: 18px; - font-weight: 600; - margin: 0; -} - -.create-room-header .close-btn { - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - padding: 0; - line-height: 1; -} - -.create-room-form { - padding: 25px; -} - -.form-label { - display: block; - margin-bottom: 8px; - color: #333; - font-weight: 500; - font-size: 14px; -} - -.form-group { - margin-bottom: 20px; -} - -.form-control { - width: 100%; - padding: 12px 15px; - border: 1px solid #ddd; - border-radius: 8px; - background-color: white; - color: #333; - font-size: 15px; - transition: all 0.2s; -} - -.form-control:focus { - outline: none; - border-color: var(--primary-green); - box-shadow: 0 0 0 2px rgba(63, 178, 127, 0.2); -} - -.form-control::placeholder { - color: #aaa; -} - -.form-control.error { - border-color: #e74c3c; + margin-left: 8px; + font-weight: normal; } -.error-message { +.chat-room .profile-img i.fa-lock { + font-size: 20px; color: #e74c3c; - font-size: 13px; - margin-top: 5px; -} - -/* 체크박스 스타일 개선 */ -.checkbox-wrapper { - display: flex; - align-items: center; - margin-bottom: 20px; -} - -.checkbox-wrapper input[type="checkbox"] { - margin-right: 10px; - cursor: pointer; - width: 18px; - height: 18px; - accent-color: var(--primary-green); -} - -.checkbox-label { - color: #333; - font-size: 14px; - cursor: pointer; } /* 비밀번호 입력 모달 스타일 */ @@ -1137,7 +831,7 @@ left: 0; right: 0; bottom: 0; - z-index: 1000; + z-index: 2000; } .password-modal { @@ -1178,81 +872,6 @@ line-height: 1.4; } -/* 삭제, 나가기 버튼 스타일 */ -.chat-room-actions { - display: flex; - position: absolute; - bottom: -50px; - /* 채팅 헤더 아래로 위치 */ - right: 20px; - gap: 10px; - z-index: 5; -} - -.chat-room-actions .action-btn { - background-color: var(--primary-green); - color: white; - border: none; - border-radius: 20px; - padding: 8px 15px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - display: flex; - align-items: center; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - transition: all 0.2s ease; -} - -.chat-room-actions .action-btn i { - margin-right: 5px; -} - -.chat-room-actions .action-btn:hover { - transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.chat-room-actions .action-btn.delete { - background-color: #e74c3c; -} - -/* 반응형 디자인 */ -@media (max-width: 768px) { - .chat-room-actions { - bottom: -45px; - right: 10px; - } - - .chat-room-actions .action-btn { - padding: 6px 12px; - font-size: 13px; - } -} - -/* 비공개 채팅방 스타일 */ -.chat-room .private-badge { - display: inline-block; - background-color: #f8d7da; - color: #721c24; - font-size: 12px; - padding: 2px 6px; - border-radius: 10px; - margin-left: 8px; - font-weight: normal; -} - -.chat-room .profile-img i.fa-lock { - font-size: 20px; - color: #e74c3c; -} - -/* 비공개 채팅방 입장 시 비밀번호 확인 모달에 대한 스타일 */ -.password-modal-container { - z-index: 2000; - /* 기본 모달보다 앞에 표시 */ -} - .password-modal .room-info { background-color: #f8f9fa; padding: 12px; @@ -1269,30 +888,7 @@ animation: shake 0.5s ease-in-out; } -@keyframes shake { - - 0%, - 100% { - transform: translateX(0); - } - - 10%, - 30%, - 50%, - 70%, - 90% { - transform: translateX(-5px); - } - - 20%, - 40%, - 60%, - 80% { - transform: translateX(5px); - } -} - -/* 로딩 스피너 스타일 */ +/* 로딩 스피너 */ .spinner { display: inline-block; width: 16px; @@ -1305,94 +901,139 @@ vertical-align: middle; } -@keyframes spin { +/* 애니메이션 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } to { - transform: rotate(360deg); + opacity: 1; + transform: translateY(0); } } -/* 비밀번호 오류 애니메이션 */ -.password-modal .error-message { - animation: shake 0.5s ease-in-out; -} - @keyframes shake { + 0%, 100% { transform: translateX(0); } + 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } + 20%, 40%, 60%, 80% { transform: translateX(5px); } +} - 0%, - 100% { - transform: translateX(0); +/* 반응형 디자인 */ +@media (max-width: 768px) { + .sidebar { + width: 60px; } - - 10%, - 30%, - 50%, - 70%, - 90% { - transform: translateX(-5px); + + .chat-list-container { + position: relative; } - - 20%, - 40%, - 60%, - 80% { - transform: translateX(5px); + + .chat-input { + padding: 12px 15px; } -} - -/* 홈 버튼 스타일 - 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 { + + .chat-input input { + padding: 10px 14px; + font-size: 14px; + } + + .chat-input .send-btn { + padding: 8px 15px; + font-size: 14px; + } + + .chat-action-buttons { + top: 10px; + right: 10px; + gap: 5px; + } + + .create-room-btn, .refresh-btn, .home-btn { padding: 6px 12px; font-size: 13px; } - - .chat-action-buttons { - flex-wrap: wrap; - /* 공간이 부족하면 버튼 줄바꿈 */ + + .room-info-container { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .header-actions { + margin-left: 0; + } + + .connection-status { + margin-top: 5px; } } @media (max-width: 576px) { + .chat-layout { + flex-direction: column; + } + + .sidebar { + width: 100%; + height: 60px; + flex-direction: row; + padding: 0 10px; + } + + .sidebar .profile { + margin-bottom: 0; + margin-right: 10px; + } + + .sidebar .nav-item { + height: 100%; + width: auto; + margin-right: 15px; + margin-bottom: 0; + } + + .sidebar .bottom-icons { + margin-top: 0; + margin-left: auto; + display: flex; + } + + .chat-list-container, .chat-window { + width: 100%; + } + + .create-room-btn { + bottom: 20px; + right: 20px; + left: auto; + } + + .refresh-btn { + bottom: 80px; + right: 20px; + left: auto; + } + + .chat-input { + padding: 10px; + } + + .chat-input input { + padding: 8px 12px; + } + + .chat-input .send-btn { + padding: 8px 12px; + } + + .chat-input .send-btn i { + margin-right: 0; + } + .chat-action-buttons { top: 70px; right: 10px; + flex-wrap: wrap; } } \ No newline at end of file From a1651088ae9e8f22dd1e91d793f4132cd3d1f005 Mon Sep 17 00:00:00 2001 From: baeksunghyun Date: Fri, 7 Mar 2025 16:34:52 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Fix:=20=EC=B1=84=ED=8C=85=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=B0=BD=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChatStyles.css | 130 +++++++++++++++++++++++----------- 1 file changed, 88 insertions(+), 42 deletions(-) diff --git a/src/components/ChatStyles.css b/src/components/ChatStyles.css index 3cb59cc..66cd721 100644 --- a/src/components/ChatStyles.css +++ b/src/components/ChatStyles.css @@ -200,7 +200,9 @@ } /* 채팅 생성/새로고침 버튼 */ -.create-room-btn, .refresh-btn, .home-btn { +.create-room-btn, +.refresh-btn, +.home-btn { position: static; width: auto; height: auto; @@ -218,7 +220,8 @@ border: none; } -.create-room-btn, .refresh-btn { +.create-room-btn, +.refresh-btn { background-color: var(--primary-green); } @@ -226,12 +229,15 @@ background-color: #3b82f6; } -.create-room-btn i, .refresh-btn i { +.create-room-btn i, +.refresh-btn i { margin-right: 5px; font-size: 16px; } -.create-room-btn:hover, .refresh-btn:hover, .home-btn:hover { +.create-room-btn:hover, +.refresh-btn:hover, +.home-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } @@ -319,7 +325,8 @@ margin-right: auto; } -.form-group label, .form-label { +.form-group label, +.form-label { display: block; margin-bottom: 8px; font-weight: 500; @@ -408,12 +415,14 @@ cursor: not-allowed; } -.btn-cancel, .btn-secondary { +.btn-cancel, +.btn-secondary { background-color: #6c757d; color: white; } -.btn-cancel:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { +.btn-cancel:hover:not(:disabled), +.btn-secondary:hover:not(:disabled) { background-color: #5a6268; } @@ -432,8 +441,11 @@ display: flex; flex-direction: column; background-color: var(--light-green); - height: 100%; + height: 100vh; + /* 100%에서 100vh로 변경 */ overflow: hidden; + position: relative; + /* 추가 */ } /* 채팅 헤더 */ @@ -543,9 +555,7 @@ flex: 1; padding: 20px; overflow-y: auto; - max-height: calc(100vh - 180px); - display: flex; - flex-direction: column; + /* max-height 속성 제거 또는 수정 */ } /* 날짜 구분선 */ @@ -667,25 +677,40 @@ } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } /* 채팅 입력 영역 */ .chat-input { + position: sticky; + /* 추가 */ + bottom: 0; + /* 추가 */ display: flex; align-items: center; padding: 15px 20px; background-color: #2a2a2a; border-top: 1px solid #444; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + width: 100%; + /* 추가 */ + z-index: 10; + /* 추가 */ } -.chat-input .emoji-btn, .chat-input .attach-btn { +.chat-input .emoji-btn, +.chat-input .attach-btn { color: #ddd; } -.chat-input .emoji-btn:hover, .chat-input .attach-btn:hover { +.chat-input .emoji-btn:hover, +.chat-input .attach-btn:hover { color: var(--primary-green); } @@ -772,7 +797,7 @@ } .empty-state p { - margin:.10px 0; + margin: .10px 0; } /* 빈 채팅창 메시지 */ @@ -907,6 +932,7 @@ opacity: 0; transform: translateY(-20px); } + to { opacity: 1; transform: translateY(0); @@ -914,9 +940,26 @@ } @keyframes shake { - 0%, 100% { transform: translateX(0); } - 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } - 20%, 40%, 60%, 80% { transform: translateX(5px); } + + 0%, + 100% { + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translateX(-5px); + } + + 20%, + 40%, + 60%, + 80% { + transform: translateX(5px); + } } /* 반응형 디자인 */ @@ -924,46 +967,48 @@ .sidebar { width: 60px; } - + .chat-list-container { position: relative; } - + .chat-input { padding: 12px 15px; } - + .chat-input input { padding: 10px 14px; font-size: 14px; } - + .chat-input .send-btn { padding: 8px 15px; font-size: 14px; } - + .chat-action-buttons { top: 10px; right: 10px; gap: 5px; } - - .create-room-btn, .refresh-btn, .home-btn { + + .create-room-btn, + .refresh-btn, + .home-btn { padding: 6px 12px; font-size: 13px; } - + .room-info-container { flex-direction: column; align-items: flex-start; gap: 8px; } - + .header-actions { margin-left: 0; } - + .connection-status { margin-top: 5px; } @@ -973,64 +1018,65 @@ .chat-layout { flex-direction: column; } - + .sidebar { width: 100%; height: 60px; flex-direction: row; padding: 0 10px; } - + .sidebar .profile { margin-bottom: 0; margin-right: 10px; } - + .sidebar .nav-item { height: 100%; width: auto; margin-right: 15px; margin-bottom: 0; } - + .sidebar .bottom-icons { margin-top: 0; margin-left: auto; display: flex; } - - .chat-list-container, .chat-window { + + .chat-list-container, + .chat-window { width: 100%; } - + .create-room-btn { bottom: 20px; right: 20px; left: auto; } - + .refresh-btn { bottom: 80px; right: 20px; left: auto; } - + .chat-input { padding: 10px; } - + .chat-input input { padding: 8px 12px; } - + .chat-input .send-btn { padding: 8px 12px; } - + .chat-input .send-btn i { margin-right: 0; } - + .chat-action-buttons { top: 70px; right: 10px; From 7ecc736e999ea525d60336bf13b0fc4c9bebd479 Mon Sep 17 00:00:00 2001 From: whale22 Date: Sat, 8 Mar 2025 18:29:16 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EC=95=8C=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/pets/EGG_0.png | Bin 907 -> 0 bytes public/pets/EGG_1.png | Bin 907 -> 0 bytes public/pets/EGG_1_128.png | Bin 4036 -> 1416 bytes public/pets/EGG_2_128.png | Bin 0 -> 1416 bytes public/pets/GROWN_0.png | Bin 3883 -> 0 bytes public/pets/GROWN_1.png | Bin 3883 -> 0 bytes public/pets/GROWN_1_128.png | Bin 4314 -> 1746 bytes public/pets/GROWN_2_128.png | Bin 0 -> 1717 bytes public/pets/HATCH_0.png | Bin 3174 -> 0 bytes public/pets/HATCH_1.png | Bin 3174 -> 0 bytes public/pets/HATCH_1_128.png | Bin 3461 -> 709 bytes public/pets/HATCH_2_128.png | Bin 0 -> 710 bytes src/pages/Profile.jsx | 6 +++--- src/pages/profile.css | 10 +++++++++- 14 files changed, 12 insertions(+), 4 deletions(-) delete mode 100644 public/pets/EGG_0.png delete mode 100644 public/pets/EGG_1.png create mode 100644 public/pets/EGG_2_128.png delete mode 100644 public/pets/GROWN_0.png delete mode 100644 public/pets/GROWN_1.png create mode 100644 public/pets/GROWN_2_128.png delete mode 100644 public/pets/HATCH_0.png delete mode 100644 public/pets/HATCH_1.png create mode 100644 public/pets/HATCH_2_128.png diff --git a/public/pets/EGG_0.png b/public/pets/EGG_0.png deleted file mode 100644 index c5ba43952ab68ce659a0e72aff539026f5d3468e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 907 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 YN9&^>(cdv(l>A5QXzAZ9)v$Z=KPViAi~s-t diff --git a/public/pets/EGG_2_128.png b/public/pets/EGG_2_128.png new file mode 100644 index 0000000000000000000000000000000000000000..2949cf379db316083e012d35f3ddbfa3275ef0ee GIT binary patch literal 1416 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 Hvk3hkFYz%} diff --git a/public/pets/GROWN_2_128.png b/public/pets/GROWN_2_128.png new file mode 100644 index 0000000000000000000000000000000000000000..cc19e730f10b7e53ece44c40ed155f47012c5394 GIT binary patch literal 1717 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 M07*qoM6N<$g5yy1sQ>@~ diff --git a/public/pets/HATCH_1.png b/public/pets/HATCH_1.png deleted file mode 100644 index 83a39d2c972553fe6500a4d58f408587e48a5393..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3174 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 M07*qoM6N<$g5yy1sQ>@~ diff --git a/public/pets/HATCH_1_128.png b/public/pets/HATCH_1_128.png index cecf9b587384a6d838febe6d1f0d14e140d83b99..b15a9dd2f394aeadae6a2fd88954f4a13c4d120b 100644 GIT binary patch literal 709 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSoCO|{#S9GG!XV7ZFl&wk0|QgJ zr;B4q#hkZy_GXJXO0YlZl}||Y*&?FY<-yh4>bT{Ey@FB)OQ1-|20_7QLf3J+bg^@#CuS*v+O(*&QO81m-ZXY+v_zQ|;TH@CIUNd^1Y&-e9yqqI_T-$p7f-uW{N}G(b?fb1KXwj3h9=>L2fMQD ze#`%y^Z)hn_JZpPhO!D4j8GXCDD(BN?+4i3_4Kdg-nZVe`P+|n{&gi^O)oKmbh9Yz z==*KsP^Vw7Df~T8_xqHs&u7n^>;0z^R`0~Xw$o#Ke6CcPY>I?@>-`P3Tz5jQobN1HX{O{kzUi`S_)t{N0f6kwD{qh#m zMwl|uc;+X?{|*x19=h|!UsQ+I5_G9?^+_iV_z54y9|NZmn_f{&vf-d{Y^UJGVy?@UrV`sE; z&HwGmx7!vSx39CCc4g`O|IbT6fd&lYb%CER?%(pOnqlc%Nh!})%g+9^gc<-#2D{G4 Xe|??2cWM3RB9M@$tDnm{r-UW|wZuCd literal 3461 zcmb_eX*d*I8$M&nAWOEfW{Va?qE}-l8ATX-lC5lGi?NJl3{pzAY*|J^NexBHSVti= zmMBY>>?RGyK3V&C|9ro`f8V*T=iKL9=bY!c&wb91`+?atLk>1!HUI#J5#kc^0C9%_ zJ#x@DYdMn-fYl#i7YG15?_oedPM#nDY$l%i`etSxerUfy4?lkiBYk}d{{TNXPw(3R zgbw2^LTuCM0$Str+g#RqL(3Ie-qAoxngDI*wkza*44m(B^XRn3#j{!S@gK`WShd9T zvmx;DQw67p?z#`-uP0dDP+JloEqNaqMq6Cm8QiI-mM;N0q$!( zv|-2D*#SoXHptr`5~|c53|j+_@hyk*Bdi72*}jHtC1BKcb&lshGi%on6J=v(UzBlq z)}S<m8ZFiLyNt%+wXKY=RFly?@InTyQLBlDq2T zIW-Q-1ka6Vsz2t2|Eu@%j{DS#gR(89k(x9?Pw)+#V zCw^A8XEx77@TY#^$$)2AXJ9iZuPm(st+e|wuh=bLTXDUkP{N|Y4%tbBXLR&OA{nvp7x zdSc>YU%9nl9L&5U608_*Y@r|c%8lTb>V}`Y(*@!DTrshH@kid3Zpm(r?r;T01#N|j z0k1N*GHlsD!(qdX!!C;fivo+(VOo$sUI#Ca-+=qT=|QZu7i!IG<7!8OdVXttbERVD zSvS6HaL$kQ8gBTk7j3|P(*|h0;{PbAKrf^Sd7o2rUG7YA{e^nsN$g#|JNfb$*`qeK z#iOX#sOTh7cIm$Rv}!0!%Z=bC>OxTYd3zM4;q2n6JW||J+&a^Ex+@)(<5t^S^$p$G z*)Bgy7$S5mBwg&!L*+X+{-__>O^kbPkk@)8;X*=N=5S^NnK{!WlTLVIt!0g|-mo4d z7!BN@%2Ry?Y`o1xY;uq0!gI+VUY6ySwFKw-jPp(LC7p0odPD#^s598xzn)q=snT59QrbLk<1XUCAlS^)>0^nH-m55-P~z7Zu%}yHh)0Lr+uWwexiXK?gZD;yuIB$iTi{WY5 z)BBAt8l}cH8>O)W*laAzZvKw?HhC}k4`~v!DzI{m*$MIyG7D*l7LI<$h+-6H%4T}b zqRO1eTz5qAs20E8QC1E+@qjeHCfKUTmh1UZcln%N{x48G|8;wxfw=>0ziD_J~f-V>~g4`y11S~MR_2QpB+bI#|@+P1z!?R=qHzt4YY%zUR;NO{)Ct1f8Jgu&P~}|bL@}U!1xRg|GZNDWs!=Y7E^r*bUV_UD-B+{{a^1bbCij! zB+iOB`ds;meir7nkRD(g}hHu|e%viFpi%2bL4m(CP3^8rZPY!<`&a!Dhqk5tJ zyhq=VNR_NU$P0B72(BhiWxRm|HabIO}hrQsV3Xx7vN86u58W3q)nIH zD#^!R)7Jc+J&K_l?`ESM%pDrs^?UNQVdy2}YDap<+D}Td!*adOJ9~wOva0gi*N`xtlsKQn=Gj;;qCc?wf>8t2EL|@?@jGo?Xle*T4vu$=pmJ3 zO4kBtuS?&++oapX>$@?UD=&7-x6Yv$fuB*S3I zBA6I-02DwZ022;y1BU;@WStyc$R$CpL`La24#Hv;t#Yov4BEgY?03sb<4yy}gecA- zA*-7?ZM7rU;^Y2YR)1G5m3#1cQa zO0QfERi&%ohik0-m_|&0k~$t8UfoGd;xAlBgW^|S&a`7cq8+nXG&si=sZH&<0Kabd z_TLl(kl3ZHaHE?@qS`X#So2oZzJ181gj|a!_hQbYdL77X=LJ zG&Ixl)?B*}^>woCfhaNjkB@*JdkO)~`wtfX#9mSZ0C3*6HF7gC0cQ@z2bT8V)@PA+ Oh(-q2E|u#!#ry|2+h3Oe diff --git a/public/pets/HATCH_2_128.png b/public/pets/HATCH_2_128.png new file mode 100644 index 0000000000000000000000000000000000000000..8a243e8475796041e9a78a659de7f8689411bc50 GIT binary patch literal 710 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSoCO|{#S9GG!XV7ZFl&wk0|Qfq zr;B4q#hkZyY_mlIMc5vg8qVmDPL>ofa`rAhv+K?AxpzO?+&z0H<(;1X^E-Ptd#(jJ z0Xrx;JnN3|ie1OW>(~6Vv@5Etjo+Kjyi?sFj!9q+1Iu=^?<}jH9X-2r$#Z|7K9%F? zc6Gje{@ffT4S9Q<1HKdXK3ZgUmezjuG!|_f^_{&f3P|DclhbP{JYy$fB9AXJpb$0>LpAd6M@QXzt27JD6UTVa`?LK zRi`ig*3~LzbfnO0+^bq@57JIv;Y1jtEeXRr?-)uto5y*o>O-eSDQ(O*UCGx za`-Vc2{$~@+Rh(vXZQYsmlZF6I)9awo$J5ZZ;n;upTJL5tG1~HFoM*uDC~HX-H>$N z-gfKKFMk>r_MWUrDX9Lfe%0-$>A^>bYCcsJ+gl?mP3z6~`p&BM{mSHzpQoR+qCI+>W|%v)4k6B-}y;X zQhdJXn(7ZrzWji^3g_*>l`^{e*q*Uo9{ z { // 티어 아이콘 매핑 const tierEmojis = { - SEED: "🌱", - SPROUT: "🌿", + SEED: "🫘", + SPROUT: "🌱", FLOWER: "🌺", FRUIT: "🍎", TREE: "🌳", @@ -153,7 +153,7 @@ const Profile = ({ userInfo }) => {
Pet diff --git a/src/pages/profile.css b/src/pages/profile.css index 30251bb..5010219 100644 --- a/src/pages/profile.css +++ b/src/pages/profile.css @@ -3,7 +3,7 @@ width: 100%; background-color: white; border-radius: 12px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); padding: 24px; margin-bottom: 32px; box-sizing: border-box; @@ -18,9 +18,16 @@ transform: translateY(-2px); } +h2 { + color: #222222; +} + /* Pet section styling */ .pet-section { position: relative; + display: flex ; + justify-content: center; + width: 170px; flex-shrink: 0; } @@ -75,6 +82,7 @@ display: flex; flex-direction: column; gap: 12px; + padding-left:10px; } .user-header { From 8d2720e18181f5a938f45dfd17e9c33123311fd2 Mon Sep 17 00:00:00 2001 From: Sukyeong Sung Date: Mon, 10 Mar 2025 12:18:35 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Feat:=20s3=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 ++- src/components/ChatRoomList.jsx | 27 ++++++++++++++++----------- src/config.js | 10 +++++++--- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/.env b/.env index 0c6fdce..abf0f10 100644 --- a/.env +++ b/.env @@ -1,2 +1,3 @@ VITE_CORE_FRONT_BASE_URL="http://localhost:5173" -VITE_CORE_API_BASE_URL="http://localhost:8090" \ No newline at end of file +VITE_CORE_API_BASE_URL="http://localhost:8090" +REACT_APP_API_URL=http://localhost:8090 \ No newline at end of file diff --git a/src/components/ChatRoomList.jsx b/src/components/ChatRoomList.jsx index 4cdbf92..d1f66df 100644 --- a/src/components/ChatRoomList.jsx +++ b/src/components/ChatRoomList.jsx @@ -4,7 +4,6 @@ import ChatService from '../services/ChatService'; 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 = () => { @@ -263,13 +262,16 @@ const ChatRoomList = () => { const isRoomsEmpty = rooms.length === 0; const getImageUrl = (imageUrl) => { - if (!imageUrl) return null; - console.log('Original imageUrl:', imageUrl); // 디버깅용 - // API_BACKEND_URL이 이미 슬래시로 끝나지 않는지 확인 - const baseUrl = API_BACKEND_URL.endsWith('/') ? API_BACKEND_URL.slice(0, -1) : API_BACKEND_URL; - const fullUrl = `${baseUrl}${imageUrl}`; - console.log('Full imageUrl:', fullUrl); // 디버깅용 - return fullUrl; + if (!imageUrl) return '/default-room.png'; + try { + // 이미 완전한 S3 URL인 경우 그대로 반환 + if (imageUrl.includes('s3.ap-northeast-2.amazonaws.com')) { + return imageUrl; + } + return '/default-room.png'; + } catch { + return '/default-room.png'; + } }; return ( @@ -345,10 +347,13 @@ const ChatRoomList = () => { src={getImageUrl(room.imageUrl)} alt={room.title} className="room-image" + loading="lazy" onError={(e) => { - console.log('Image load failed:', room.imageUrl); - e.target.onerror = null; - e.target.src = '/default-room.png'; + if (!e.target.getAttribute('data-error-handled')) { + console.error('Image load failed:', room.imageUrl); + e.target.setAttribute('data-error-handled', 'true'); + e.target.src = '/default-room.png'; + } }} /> ) : ( diff --git a/src/config.js b/src/config.js index 74c4773..e2723db 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,8 @@ -const API_BACKEND_URL = import.meta.env.VITE_CORE_API_BASE_URL; -const API_FRONT_URL = import.meta.env.VITE_CORE_FRONT_BASE_URL; +// Vite 환경변수 사용 +const API_BACKEND_URL = import.meta.env.VITE_CORE_API_BASE_URL || 'http://localhost:8090'; +const API_FRONT_URL = import.meta.env.VITE_CORE_FRONT_BASE_URL || 'http://localhost:5173'; -export { API_BACKEND_URL, API_FRONT_URL }; \ No newline at end of file +export { + API_BACKEND_URL, + API_FRONT_URL +}; \ No newline at end of file