feat(fe): add toggle for hiding expired sessions (#246)

* feat: add toggle for hiding expired sessions

* feat(fe): update session status styling and improve visibility

* test: add visibility check for ongoing session in QnAPage test

* test: update session visibility checks and add expired session toggle test

Author: cjeongmin

apps/client/src/components/my/SessionRecord.tsx

@@ -13,12 +13,12 @@ function SessionRecord({ session }: SessionRecordProps) {
     <div className='flex h-fit flex-col items-start justify-start gap-4 self-stretch border-b border-gray-200 px-2.5 pb-4 pt-2.5'>
       <div className='flex h-fit flex-col items-start justify-center gap-2.5 self-stretch'>
         {session.expired ? (
-          <div className='inline-flex items-center justify-center gap-2.5 rounded bg-green-100 px-2 py-1'>
-            <div className='text-base font-medium text-green-800'>만료된 세션</div>
+          <div className='inline-flex items-center justify-center gap-2.5 rounded bg-red-100 px-2 py-1'>
+            <div className='text-base font-medium text-red-600'>만료된 세션</div>
           </div>
         ) : (
-          <div className='inline-flex items-center justify-center gap-2.5 rounded bg-blue-100 px-2 py-1'>
-            <div className='text-base font-medium text-blue-800'>진행 중인 세션</div>
+          <div className='inline-flex items-center justify-center gap-2.5 rounded bg-green-100 px-2 py-1'>
+            <div className='text-base font-medium text-green-800'>진행 중인 세션</div>
           </div>
         )}
       </div>

apps/client/src/components/qna/ChattingList.tsx

@@ -97,7 +97,7 @@ function ChattingList() {
       <div className='inline-flex h-[54px] w-full items-center justify-between border-b border-gray-200 px-4 py-3'>
         <div className='shrink grow basis-0 text-lg font-medium text-black'>실시간 채팅</div>
         {!expired && (
-          <div className='max-w-[100px] overflow-x-auto whitespace-nowrap bg-green-100 px-2 py-1 transition-colors duration-150 scrollbar-hide'>
+          <div className='max-w-[100px] overflow-x-auto whitespace-nowrap bg-green-100 px-2 py-1 scrollbar-hide'>
             <p className='text-[10px] font-medium text-green-800'>{participantCount}명 참여중</p>
           </div>
         )}

apps/client/src/components/qna/QuestionList.tsx

@@ -144,7 +144,14 @@ function QuestionList() {
     <>
       <div className='inline-flex h-full w-4/5 flex-grow flex-col items-center justify-start rounded-lg bg-white shadow'>
         <div className='inline-flex h-[54px] w-full items-center justify-between border-b border-gray-200 px-8 py-2'>
-          <div className='text-lg font-medium text-black'>{sessionTitle}</div>
+          <div className='inline-flex h-full w-fit gap-4'>
+            <div className='self-center text-lg font-medium text-black'>{sessionTitle}</div>
+            <div className={`self-center rounded ${expired ? 'bg-red-100' : 'bg-green-100'} px-2 py-1`}>
+              <p className={`text-xs font-medium ${expired ? 'text-red-600' : 'text-green-800'}`}>
+                {expired ? '만료된 세션' : '진행 중인 세션'}
+              </p>
+            </div>
+          </div>
           {!expired && (
             <div className='flex flex-row gap-2'>
               <div className='relative'>

apps/client/src/pages/MyPage.tsx

@@ -1,23 +1,38 @@
 import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
 
 import { getSessions } from '@/features/session';
 
+import { Button } from '@/components';
 import { SessionRecord } from '@/components/my';
 
 function MyPage() {
+  const [hideExpired, setHideExpired] = useState(true);
+
   const { data } = useQuery({ queryKey: ['/sessions'], queryFn: getSessions });
 
-  const sessions = data?.sessionData;
+  const sessions = useMemo(() => {
+    if (!data) return [];
+    if (hideExpired) return data.sessionData.filter((session) => session.expired === false);
+    return data.sessionData;
+  }, [data, hideExpired]);
 
   return (
     <div className='inline-flex h-full w-full items-center justify-center gap-4 overflow-hidden px-4 py-4 md:max-w-[1194px]'>
       <div className='inline-flex shrink grow basis-0 flex-col items-center justify-start self-stretch rounded-lg bg-white shadow'>
         <div className='inline-flex h-[54px] items-center justify-between self-stretch border-b border-gray-200 px-8 py-2'>
           <div className='text-lg font-medium text-black'>참여한 세션 기록</div>
-          <div className='rounded-md px-3 py-2' />
+          <Button
+            className={`transition-colors duration-200 ${hideExpired ? 'bg-emerald-100' : 'bg-red-100'}`}
+            onClick={() => setHideExpired((prev) => !prev)}
+          >
+            <div className={`rounded-md text-xs font-medium ${hideExpired ? 'text-green-800' : 'text-red-600'}`}>
+              만료된 세션 {hideExpired ? '보이기' : '숨기기'}
+            </div>
+          </Button>
         </div>
         <div className='flex shrink grow basis-0 flex-col items-start justify-start gap-4 self-stretch overflow-y-auto px-8 py-2'>
-          {sessions?.map((session) => (
+          {sessions.map((session) => (
             <SessionRecord
               key={session.sessionId}
               session={{

apps/client/tests/MyPage.spec.ts

@@ -61,10 +61,17 @@ test.beforeEach(async ({ page }) => {
 test('세션 목록 확인', async ({ page }) => {
   await expect(page.locator('text=참여한 세션 기록')).toBeVisible();
 
-  const sessionTitles = ['세션 1', '세션 2', '세션 3'];
-  await Promise.all(
-    sessionTitles.map(async (title) => {
-      await expect(page.locator(`text=${title}`)).toBeVisible();
-    }),
-  );
+  await expect(page.locator('text=세션 1')).toBeVisible();
+  await expect(page.locator('text=세션 2')).toBeHidden();
+  await expect(page.locator('text=세션 3')).toBeVisible();
+});
+
+test('세션 만료 여부 토글', async ({ page }) => {
+  const toggleButton = page.locator('text=만료된 세션 보이기');
+  await toggleButton.waitFor();
+  await toggleButton.click();
+
+  await expect(page.locator('text=세션 1')).toBeVisible();
+  await expect(page.locator('text=세션 2')).toBeVisible();
+  await expect(page.locator('text=세션 3')).toBeVisible();
 });

apps/client/tests/QnAPage.spec.ts

@@ -173,6 +173,7 @@ test.beforeEach(async ({ page }) => {
 });
 
 test('질문 목록이 올바르게 표시되는지 확인', async ({ page }) => {
+  await expect(page.locator('text=진행 중인 세션')).toBeVisible();
   await expect(page.locator('text=테스트 세션 제목')).toBeVisible();
 });