[Feat] inProgress에 따라 스터디 채널 탭 설정

frontend/src/api/session-list/getSessionList.ts

@@ -2,11 +2,11 @@ import { api } from "@/api/config/axios.ts";
 import { Session } from "@/pages/SessionListPage/types/session";
 
 interface GetSessionListRequest {
-  inProgress: 0 | 1;
+  inProgress: boolean;
 }
 
 export const getSessionList = async ({
-  inProgress = 0,
+  inProgress = false,
 }: GetSessionListRequest): Promise<Session[]> => {
   const response = await api.get("api/rooms", {
     params: {

frontend/src/components/common/Animate/NotFound.tsx

@@ -20,7 +20,9 @@ const NotFound = ({ message, className, redirect }: NotFoundProps) => {
         style={{ width: 200 }}
         className={"dark:invert"}
       />
-      <p className={"text-medium-m font-light"}>{message}</p>
+      <p className={"text-medium-m text-gray-500 text-center flex flex-col gap-0.5"}>
+        {message?.split("\n").map(text => (<p>{text}</p>))}
+      </p>
       {redirect && (
         <Link
           className={

frontend/src/pages/SessionListPage/SessionListPage.tsx

@@ -11,7 +11,7 @@ import SessionList from "./view/SessionList";
 import ErrorBlock from "@components/common/Error/ErrorBlock";
 
 const SessionListPage = () => {
-  const [currentTab, setCurrentTab] = useState<0 | 1>(0);
+  const [currentTab, setCurrentTab] = useState(false);
   const [_, setSelectedCategory] = useState<string>("전체");
   const {
     data: sessionList,
@@ -44,10 +44,10 @@ const SessionListPage = () => {
           </Link>
           <div className="absolute bottom-0 -z-10 w-full h-0.1 bg-gray-100" />
         </div>
-        <SessionList sessionList={sessionList || []} listLoading={isLoading} />
+        <SessionList inProgress={currentTab} sessionList={sessionList || []} listLoading={isLoading} />
         <ErrorBlock
           error={error}
-          message={"서버에서 세션 목록을 불러오는데 실패했습니다!"}
+          message={"서버에서 세션 목록을 불러오는데 실패했습니다"}
         />
       </div>
     </SidebarPageLayout>

frontend/src/pages/SessionListPage/api/useGetSessionList.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { getSessionList } from "@/api/session-list/getSessionList.ts";
 
 interface SessionListRequest {
-  inProgress: 0 | 1;
+  inProgress: boolean;
 }
 
 export const useGetSessionList = ({ inProgress }: SessionListRequest) => {

frontend/src/pages/SessionListPage/view/SessionList.tsx

@@ -5,11 +5,12 @@ import type { Session } from "@/pages/SessionListPage/types/session";
 import NotFound from "@components/common/Animate/NotFound.tsx";
 
 interface SessionListProps {
+  inProgress: boolean;
   listLoading: boolean;
   sessionList: Session[];
 }
 
-const SessionList = ({ listLoading, sessionList }: SessionListProps) => {
+const SessionList = ({ inProgress, listLoading, sessionList }: SessionListProps) => {
   const toast = useToast();
   const renderSessionList = () => {
     return sessionList.map((session) => {
@@ -36,22 +37,21 @@ const SessionList = ({ listLoading, sessionList }: SessionListProps) => {
   return (
     <div>
       {listLoading && <LoadingIndicator loadingState={listLoading} />}
-      <ul className={"grid grid-cols-2 lg:grid-cols-3 gap-4"}>
-        {!listLoading && sessionList.length <= 0 ? (
-          <li key={-1} className={"flex justify-center items-center"}>
-            <NotFound
-              message={"새로운 스터디 세션을 만들어 면접 준비를 시작해보세요!"}
-              className={""}
-              redirect={{
-                path: "/sessions/create",
-                buttonText: "새로운 세션 생성하러 가기 ",
-              }}
-            />
-          </li>
-        ) : (
-          renderSessionList()
-        )}
-      </ul>
+      {!listLoading && sessionList.length <= 0 ? (
+        <div key={-1} className={"flex justify-center items-center"}>
+          <NotFound
+            message={
+              inProgress ? "현재 진행 중인 세션이 없어요.\n세션을 생성해서 면접 연습을 시작하세요!"
+                : "공개된 세션이 없어요.\n세션을 생성해서 면접 연습을 시작하세요!"
+            }
+            className={""}
+          />
+        </div>
+      ) : (
+        <ul className={"w-full grid grid-cols-2 lg:grid-cols-3 gap-4"}>
+          {renderSessionList()}
+        </ul>
+      )}
     </div>
   );
 };

frontend/src/pages/SessionListPage/view/Tab.tsx

@@ -1,14 +1,9 @@
 interface TabProps {
-  currentTab: 0 | 1;
-  tabStatus: 0 | 1;
-  setCurrentTab: React.Dispatch<React.SetStateAction<0 | 1>>;
+  currentTab: boolean;
+  tabStatus: boolean;
+  setCurrentTab: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const tabName = {
-  0: "공개된 세션",
-  1: "진행 중인 세션",
-};
-
 const Tab = ({ currentTab, tabStatus, setCurrentTab }: TabProps) => {
   return (
     <button
@@ -23,7 +18,7 @@ const Tab = ({ currentTab, tabStatus, setCurrentTab }: TabProps) => {
         className={`px-1 pb-1.5 border-b-2
         ${currentTab === tabStatus ? "border-green-400" : "border-transparent"}`}
       >
-        {tabName[tabStatus]}
+        {tabStatus ? "진행 중인 세션" : "공개된 세션"}
       </span>
       <div
         className={`border-b-2 ${currentTab === tabStatus ? "border-green-400" : "border-transparent"} transition-all duration-200`}

frontend/src/pages/SessionListPage/view/TabContainer.tsx

@@ -1,21 +1,21 @@
 import Tab from "./Tab";
 
 interface CategoryTabProps {
-  currentTab: 0 | 1;
-  setCurrentTab: React.Dispatch<React.SetStateAction<0 | 1>>;
+  currentTab: boolean;
+  setCurrentTab: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const TabContainer = ({ currentTab, setCurrentTab }: CategoryTabProps) => {
   return (
     <section className="flex items-center gap-2">
       <Tab
         currentTab={currentTab}
-        tabStatus={0}
+        tabStatus={false}
         setCurrentTab={setCurrentTab}
       />
       <Tab
         currentTab={currentTab}
-        tabStatus={1}
+        tabStatus={true}
         setCurrentTab={setCurrentTab}
       />
     </section>