From 4b78bd931cb40554fe4fd357b59db124cea163df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= Date: Tue, 31 Mar 2026 21:03:16 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/add_circle.svg | 8 +++ .../layout/Header/components/ChatHeader.tsx | 9 ++- .../Header/components/ChatListHeader.tsx | 24 ++++++++ src/components/layout/Header/headerConfig.ts | 4 ++ src/components/layout/Header/index.tsx | 2 + src/components/layout/Header/types.ts | 3 +- src/components/layout/index.tsx | 2 +- src/pages/Chat/ChatRoom.tsx | 2 +- src/pages/Chat/index.tsx | 56 ++++++++++--------- 9 files changed, 79 insertions(+), 31 deletions(-) create mode 100644 src/assets/svg/add_circle.svg create mode 100644 src/components/layout/Header/components/ChatListHeader.tsx diff --git a/src/assets/svg/add_circle.svg b/src/assets/svg/add_circle.svg new file mode 100644 index 0000000..e70fca9 --- /dev/null +++ b/src/assets/svg/add_circle.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx index c68ab35..805146a 100644 --- a/src/components/layout/Header/components/ChatHeader.tsx +++ b/src/components/layout/Header/components/ChatHeader.tsx @@ -21,16 +21,19 @@ function ChatHeader() { return ( <> -
+
- {chatRoom?.roomName ?? ''} +
+ {chatRoom?.roomName ?? ''} + {isGroup && {clubMembers.length}} +
-
diff --git a/src/components/layout/Header/components/ChatListHeader.tsx b/src/components/layout/Header/components/ChatListHeader.tsx new file mode 100644 index 0000000..0439681 --- /dev/null +++ b/src/components/layout/Header/components/ChatListHeader.tsx @@ -0,0 +1,24 @@ +import AddCircle from '@/assets/svg/add_circle.svg'; +import ChevronLeftIcon from '@/assets/svg/chevron-left.svg'; +import Search from '@/assets/svg/search.svg'; +import { useSmartBack } from '@/utils/hooks/useSmartBack'; +export default function ChatListHeader() { + const smartBack = useSmartBack(); + + return ( +
+ + 채팅방 +
+ + +
+
+ ); +} diff --git a/src/components/layout/Header/headerConfig.ts b/src/components/layout/Header/headerConfig.ts index 6b76f71..9e6a846 100644 --- a/src/components/layout/Header/headerConfig.ts +++ b/src/components/layout/Header/headerConfig.ts @@ -21,6 +21,10 @@ export const HEADER_CONFIGS: HeaderConfig[] = [ type: 'info', match: (pathname) => pathname === '/home' || pathname === '/timer', }, + { + type: 'chatList', + match: (pathname) => pathname === '/chats', + }, { type: 'chat', match: (pathname) => /^\/chats\/\d+$/.test(pathname), diff --git a/src/components/layout/Header/index.tsx b/src/components/layout/Header/index.tsx index 919fadd..61a0f7f 100644 --- a/src/components/layout/Header/index.tsx +++ b/src/components/layout/Header/index.tsx @@ -1,5 +1,6 @@ import { useLocation, useNavigate } from 'react-router-dom'; import ChatHeader from './components/ChatHeader'; +import ChatListHeader from './components/ChatListHeader'; import DefaultHeader from './components/DefaultHeader'; import InfoHeader from './components/InfoHeader'; import ManagerHeader from './components/ManagerHeader'; @@ -17,6 +18,7 @@ function Header() { const HEADER_RENDERERS: Record = { profile: () => , info: () => , + chatList: () => , chat: () => , none: () => null, notification: ({ title }) => , diff --git a/src/components/layout/Header/types.ts b/src/components/layout/Header/types.ts index 8f8cb9f..fa3d816 100644 --- a/src/components/layout/Header/types.ts +++ b/src/components/layout/Header/types.ts @@ -12,7 +12,8 @@ export type HeaderType = | 'signup' | 'schedule' | 'council' - | 'manager'; + | 'manager' + | 'chatList'; export interface HeaderConfig { type: HeaderType; diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index 889f22d..1c8be07 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -19,7 +19,7 @@ export default function Layout({ showBottomNav = false, contentClassName }: Layo const { pathname } = useLocation(); const { contentPaddingClassName, hasHeader } = getHeaderPresentation(pathname); const isChatRoomPage = pathname.startsWith('/chats/') && pathname !== '/chats'; - const mainBackgroundClassName = pathname === '/chats' ? 'bg-white' : 'bg-background'; + const mainBackgroundClassName = 'bg-background'; const { bottomNavRef, bottomOverlayInset, handleLayoutElement, layoutElement, mainRef } = useLayoutElements(showBottomNav); const layoutElements = useMemo( diff --git a/src/pages/Chat/ChatRoom.tsx b/src/pages/Chat/ChatRoom.tsx index e390578..160886f 100644 --- a/src/pages/Chat/ChatRoom.tsx +++ b/src/pages/Chat/ChatRoom.tsx @@ -46,7 +46,7 @@ function ChatMessageRow({ isGroup, isSameSender, message }: ChatMessageRowProps) )} {formattedTime} -
+
- )}
@@ -197,29 +201,31 @@ function ChatListPage() { } return ( -
- {rooms.map((room, index) => { - const shouldRenderAdvertisement = - chatRoomSlotsPerAdvertisement !== null && (index + 1) % chatRoomSlotsPerAdvertisement === 0; - const advertisement = shouldRenderAdvertisement - ? advertisements[Math.floor(index / chatRoomSlotsPerAdvertisement)] - : undefined; - - return ( - - - {advertisement && ( - - )} - {!advertisement && shouldRenderAdvertisement && isLoadingAdvertisements && ( - - )} - - ); - })} +
+
+ {rooms.map((room, index) => { + const shouldRenderAdvertisement = + chatRoomSlotsPerAdvertisement !== null && (index + 1) % chatRoomSlotsPerAdvertisement === 0; + const advertisement = shouldRenderAdvertisement + ? advertisements[Math.floor(index / chatRoomSlotsPerAdvertisement)] + : undefined; + + return ( + + + {advertisement && ( + + )} + {!advertisement && shouldRenderAdvertisement && isLoadingAdvertisements && ( + + )} + + ); + })} +
); From ac3012e05d8a8ab2c1f06aea319019b16593847c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= Date: Tue, 31 Mar 2026 21:18:34 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:tailwind=20=EB=AC=B8=EB=B2=95=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header/components/ChatHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx index 805146a..25727f0 100644 --- a/src/components/layout/Header/components/ChatHeader.tsx +++ b/src/components/layout/Header/components/ChatHeader.tsx @@ -29,7 +29,7 @@ function ChatHeader() {
{chatRoom?.roomName ?? ''} - {isGroup && {clubMembers.length}} + {isGroup && {clubMembers.length}}
From 80eb84696c85bbe89e06e3306e49b80c3caa5b5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= Date: Tue, 31 Mar 2026 21:44:13 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header/components/ChatHeader.tsx | 4 ++-- src/components/layout/Header/components/ChatListHeader.tsx | 7 ++++--- src/components/layout/Header/index.tsx | 1 + src/pages/Chat/index.tsx | 2 -- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx index 25727f0..13671fa 100644 --- a/src/components/layout/Header/components/ChatHeader.tsx +++ b/src/components/layout/Header/components/ChatHeader.tsx @@ -28,12 +28,12 @@ function ChatHeader() {
- {chatRoom?.roomName ?? ''} + {chatRoom?.roomName ?? ''} {isGroup && {clubMembers.length}}
-
diff --git a/src/components/layout/Header/components/ChatListHeader.tsx b/src/components/layout/Header/components/ChatListHeader.tsx index 0439681..edb1b20 100644 --- a/src/components/layout/Header/components/ChatListHeader.tsx +++ b/src/components/layout/Header/components/ChatListHeader.tsx @@ -2,6 +2,7 @@ import AddCircle from '@/assets/svg/add_circle.svg'; import ChevronLeftIcon from '@/assets/svg/chevron-left.svg'; import Search from '@/assets/svg/search.svg'; import { useSmartBack } from '@/utils/hooks/useSmartBack'; + export default function ChatListHeader() { const smartBack = useSmartBack(); @@ -10,12 +11,12 @@ export default function ChatListHeader() { - 채팅방 + 채팅방
- -
diff --git a/src/components/layout/Header/index.tsx b/src/components/layout/Header/index.tsx index d1f79bc..4173071 100644 --- a/src/components/layout/Header/index.tsx +++ b/src/components/layout/Header/index.tsx @@ -28,6 +28,7 @@ function Header() { normal: ({ title }) => , full: ({ title }) => , signup: ({ title, onBack }) => , + council: ({ title }) => , default: ({ title }) => , manager: ({ title }) => , }; diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx index 66f548e..93360ca 100644 --- a/src/pages/Chat/index.tsx +++ b/src/pages/Chat/index.tsx @@ -4,7 +4,6 @@ import type { Advertisement } from '@/apis/advertisement/entity'; import type { Room } from '@/apis/chat/entity'; import BellOffIcon from '@/assets/svg/bell-off.svg'; import PersonIcon from '@/assets/svg/person.svg'; -import BottomOverlaySpacer from '@/components/layout/BottomOverlaySpacer'; import { useAdvertisementInterval } from '@/utils/hooks/useAdvertisementInterval'; import { useAdvertisements } from '@/utils/hooks/useAdvertisements'; import useChat from './hooks/useChat'; @@ -222,7 +221,6 @@ function ChatListPage() { ); })} - ); } From d81b9a76580cc8a84e42600866c849b861700800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= Date: Tue, 31 Mar 2026 21:51:23 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=ED=8F=B0=ED=8A=B8=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EB=B0=8F=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header/components/ChatHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx index 13671fa..2bba1bf 100644 --- a/src/components/layout/Header/components/ChatHeader.tsx +++ b/src/components/layout/Header/components/ChatHeader.tsx @@ -29,7 +29,7 @@ function ChatHeader() {
{chatRoom?.roomName ?? ''} - {isGroup && {clubMembers.length}} + {isGroup && {clubMembers.length}}
From 5703d9aa9f8e4037c4b309ed296ab39ccfbc34c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= Date: Wed, 1 Apr 2026 08:59:30 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?= =?UTF-8?q?=EC=82=AC=EB=9E=8C=EC=88=98=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header/components/ChatHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx index 2bba1bf..1d1c249 100644 --- a/src/components/layout/Header/components/ChatHeader.tsx +++ b/src/components/layout/Header/components/ChatHeader.tsx @@ -29,7 +29,7 @@ function ChatHeader() {
{chatRoom?.roomName ?? ''} - {isGroup && {clubMembers.length}} + {isGroup && {clubMembers.length}}
From d170fe3b0feb92594ff98a45777ab63bb6489a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= Date: Wed, 1 Apr 2026 09:00:23 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header/components/ChatListHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Header/components/ChatListHeader.tsx b/src/components/layout/Header/components/ChatListHeader.tsx index edb1b20..646d102 100644 --- a/src/components/layout/Header/components/ChatListHeader.tsx +++ b/src/components/layout/Header/components/ChatListHeader.tsx @@ -13,7 +13,7 @@ export default function ChatListHeader() { 채팅방
-