Merge pull request #108 from B03-Killer/feature/#107

채널 목록, 채널 등록, 채널 검색 UI 적용

src/app/(providers)/(root)/[workspaceId]/chat/(home)/_components/ChannelItem/ChannelItem.tsx

@@ -1,15 +1,16 @@
 import type { GetChatChannelsResponse } from '@/types/channel';
-import {
-  ChannelListContent,
-  ChannelListHeader,
-  ChannelListImage,
-  ChannelListItem,
-  ChannelListMessage,
-  ChannelListTitle,
-  ChannelListUserState
-} from '../ChannelList';
 import useWorkspaceId from '@/hooks/useWorkspaceId';
 import { CHANNEL_TYPE } from '@/constants/channel';
+import ChatCard from '@/components/ChatCard/ChatCard';
+import Link from 'next/link';
+import { ComponentProps } from 'react';
+import Image from 'next/image';
+import { AirPlayIcon } from '@/icons';
+import dayjs from 'dayjs';
+
+type ChannelListImageProps = Required<Pick<ComponentProps<'img'>, 'src'>> & {
+  type: keyof typeof CHANNEL_TYPE;
+};
 
 const ChannelItem = ({
   channel_name,
@@ -20,28 +21,50 @@ const ChannelItem = ({
   user_count,
   is_dm,
   channel_id,
-  type
+  type,
+  created_at
 }: GetChatChannelsResponse) => {
   const workspaceId = useWorkspaceId();
   const href =
     type === CHANNEL_TYPE.chat ? `/${workspaceId}/chat/${channel_id}` : `/${workspaceId}/video-channel/${channel_name}`;
 
   return (
-    <ChannelListItem href={href}>
-      <ChannelListImage
-        src={user_thumbnail ?? 'https://blog.kakaocdn.net/dn/bCXLP7/btrQuNirLbt/N30EKpk07InXpbReKWzde1/img.png'}
+    <Link href={href}>
+      <ChatCard
+        date={dayjs(created_at).format('YYYY-MM-DD')}
+        icon={
+          <ChannelImage
+            type={type}
+            src={user_thumbnail ?? 'https://blog.kakaocdn.net/dn/bCXLP7/btrQuNirLbt/N30EKpk07InXpbReKWzde1/img.png'}
+          />
+        }
+        message={message}
+        name={user_name ?? channel_name}
+        status={user_state}
+        userCount={is_dm ? undefined : user_count}
       />
-      <ChannelListContent>
-        <ChannelListHeader>
-          <ChannelListTitle>
-            {user_name ?? channel_name}
-            <span className="text-xs text-gray-500 ml-2">{is_dm ? '' : `(${user_count})`}</span>
-          </ChannelListTitle>
-          {user_state && <ChannelListUserState>{user_state}</ChannelListUserState>}
-        </ChannelListHeader>
-        <ChannelListMessage>{message}</ChannelListMessage>
-      </ChannelListContent>
-    </ChannelListItem>
+    </Link>
+  );
+};
+
+const ChannelImage = ({ src = '', type }: ChannelListImageProps) => {
+  if (type === CHANNEL_TYPE.video) {
+    return (
+      <div className="w-[40px] h-[40px] flex items-center justify-center bg-primary200Main rounded-full">
+        <AirPlayIcon className="w-[20px] h-[20px] text-white stroke-current" />
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      width={40}
+      height={40}
+      className="rounded-full object-cover w-[40px] h-[40px]"
+      alt=""
+      unoptimized
+    />
   );
 };
 

src/app/(providers)/(root)/[workspaceId]/chat/(home)/layout.tsx

@@ -1,10 +1,39 @@
 'use client';
 
 import { PageLayout } from '@/components/PageLayout';
+import useWorkspaceId from '@/hooks/useWorkspaceId';
+import { MessagePlusIcon, Video48Icon } from '@/icons';
 import { StrictPropsWithChildren } from '@/types/common';
+import Link from 'next/link';
 
 const ChatLayout = ({ children }: StrictPropsWithChildren) => {
-  return <PageLayout title="채팅">{children}</PageLayout>;
+  const workspaceId = useWorkspaceId();
+
+  return (
+    <PageLayout
+      title="대화"
+      TopBarRightIcon2={<VideoChatButton workspaceId={workspaceId} />}
+      TopBarRightIcon1={<MessageChatButton workspaceId={workspaceId} />}
+    >
+      {children}
+    </PageLayout>
+  );
+};
+
+const VideoChatButton = ({ workspaceId }: { workspaceId: number }) => {
+  return (
+    <Link href={`/${workspaceId}/chat/add?type=video`}>
+      <Video48Icon className="text-grey700Black stroke-current w-6 h-6" />
+    </Link>
+  );
+};
+
+const MessageChatButton = ({ workspaceId }: { workspaceId: number }) => {
+  return (
+    <Link href={`/${workspaceId}/chat/add?type=chat`}>
+      <MessagePlusIcon className="text-grey700Black stroke-current w-6 h-6" />
+    </Link>
+  );
 };
 
 export default ChatLayout;

src/app/(providers)/(root)/[workspaceId]/chat/(home)/page.tsx

@@ -1,13 +1,10 @@
 'use client';
 
 import { useEffect, useMemo } from 'react';
-import Link from 'next/link';
 import { useQueryClient } from '@tanstack/react-query';
 import { useGetChatChannels } from '../_hooks/useQueryChat';
 import ChannelItem from './_components/ChannelItem';
-import TestHeader from '../_components/TestHeader';
 import { QUERY_KEYS } from '../_constants/constants';
-import { ChannelListContainer } from './_components/ChannelList';
 import { updateChatChannels } from './_utils/updateChatChannels';
 import { subscribeToChannels } from '../_utils/subscribe';
 import type { GetChatChannelsResponse } from '@/types/channel';
@@ -54,23 +51,11 @@ const ChatListPage = () => {
   }
 
   return (
-    <>
-      {/* <TestHeader
-        title="채팅 리스트"
-        rightButton={
-          <div className="flex items-center gap-2">
-            <Link href={`/${workspaceId}/chat/add?type=video`}>화상채팅</Link>
-            <Link href={`/${workspaceId}/chat/add?type=chat`}>채팅</Link>
-          </div>
-        }
-      /> */}
-      <div className="p-4" />
-      <ChannelListContainer>
-        {channels.map((item) => (
-          <ChannelItem key={item.channel_id} {...item} />
-        ))}
-      </ChannelListContainer>
-    </>
+    <ul>
+      {channels.map((item) => (
+        <ChannelItem key={item.channel_id} {...item} />
+      ))}
+    </ul>
   );
 };
 

src/app/(providers)/(root)/[workspaceId]/chat/[id]/(home)/layout.tsx

@@ -1,8 +1,40 @@
+'use client';
+
 import { StrictPropsWithChildren } from '@/types/common';
-import { DropdownProvider } from '../_provider/DropdownProvider';
+import { ContextMenuProvider } from '../_provider/ContextMenuProvider';
+import { PageLayout } from '@/components/PageLayout';
+import { MenuIcon } from '@/icons';
+import { useState } from 'react';
+import Sidebar from '../_components/Sidebar';
 
 const ChatDetailLayout = ({ children }: StrictPropsWithChildren) => {
-  return <DropdownProvider>{children}</DropdownProvider>;
+  const [isOpenSidebar, setIsOpenSidebar] = useState(false);
+
+  const handleOpenSidebar = () => {
+    setIsOpenSidebar((prev) => !prev);
+  };
+
+  return (
+    <ContextMenuProvider>
+      <PageLayout
+        title="채팅"
+        showBottomBar={false}
+        TopBarRightIcon1={<MenuButton onClick={handleOpenSidebar} />}
+        contentClassName="h-[calc(100dvh-52px)] overflow-hidden"
+      >
+        {children}
+      </PageLayout>
+      <Sidebar isOpenSidebar={isOpenSidebar} handleOpenSidebar={handleOpenSidebar} />
+    </ContextMenuProvider>
+  );
+};
+
+const MenuButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <button type="button" onClick={onClick}>
+      <MenuIcon />
+    </button>
+  );
 };
 
 export default ChatDetailLayout;