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..1d1c249 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..646d102 --- /dev/null +++ b/src/components/layout/Header/components/ChatListHeader.tsx @@ -0,0 +1,25 @@ +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 ff865d9..ad2b0f1 100644 --- a/src/components/layout/Header/headerConfig.ts +++ b/src/components/layout/Header/headerConfig.ts @@ -25,6 +25,10 @@ export const HEADER_CONFIGS: HeaderConfig[] = [ type: 'info', match: (pathname) => pathname === '/home' || pathname === '/timer' || pathname === '/council', }, + { + 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 e7a6024..4173071 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'; @@ -18,6 +19,7 @@ function Header() { const HEADER_RENDERERS: Record = { profile: () => , info: () => , + chatList: () => , chat: () => , none: () => null, notification: ({ title }) => , @@ -26,6 +28,7 @@ function Header() { normal: ({ title }) => , full: ({ title }) => , signup: ({ title, onBack }) => , + council: ({ title }) => , default: ({ title }) => , manager: ({ title }) => , }; diff --git a/src/components/layout/Header/types.ts b/src/components/layout/Header/types.ts index 056a034..6e48276 100644 --- a/src/components/layout/Header/types.ts +++ b/src/components/layout/Header/types.ts @@ -12,7 +12,9 @@ export type HeaderType = | 'full' | 'signup' | 'schedule' - | 'manager'; + | 'council' + | '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} -
+
- )}
@@ -193,30 +196,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 && ( + + )} + + ); + })} +
); }