develp branch 작업내용 머지 : develop -> main

src/api/rooms/getJoinedRooms.ts

@@ -1,12 +1,12 @@
 import { apiClient } from '../index';
 
-// 가입한 방 목록 응답 데이터 타입
 export interface JoinedRoomItem {
   roomId: number;
   bookImageUrl: string;
   roomTitle: string;
   memberCount: number;
   userPercentage: number;
+  deadlineDate?: string | null;
 }
 
 export interface JoinedRoomsResponse {

src/api/rooms/getRoomDetail.ts

@@ -45,19 +45,19 @@ export const getRoomDetail = async (roomId: number): Promise<RoomDetailResponse>
     return response.data;
   } catch (error: unknown) {
     console.error('방 상세 정보 조회 API 오류:', error);
-    
+
     if (error instanceof AxiosError) {
       // 모집기간이 만료된 방인 경우
       if (error.response?.data?.code === 100004) {
         throw new Error('모집기간이 만료된 방입니다.');
       }
-      
+
       // 방 접근 권한이 없는 경우
       if (error.response?.data?.code === 140011) {
         throw new Error('방 접근 권한이 없습니다.');
       }
     }
-    
+
     throw error;
   }
 };

src/api/rooms/getRoomPlaying.ts

@@ -64,16 +64,16 @@ export const convertVotesToPolls = (currentVotes: CurrentVote[]): Poll[] => {
 
 export const getRoomPlaying = async (roomId: number): Promise<RoomPlayingResponse> => {
   try {
-    const response = await apiClient.get<RoomPlayingResponse>(`/rooms/${roomId}/playing`);
+    const response = await apiClient.get<RoomPlayingResponse>(`/rooms/${roomId}`);
     return response.data;
   } catch (error: unknown) {
     console.error('진행중인 방 상세 정보 조회 API 오류:', error);
-    
+
     // 방 접근 권한이 없는 경우
     if (error instanceof AxiosError && error.response?.data?.code === 140011) {
       throw new Error('방 접근 권한이 없습니다.');
     }
-    
+
     throw error;
   }
 };

src/api/rooms/getRoomsByCategory.ts

@@ -17,6 +17,7 @@ export interface RoomsResponse {
   data: {
     deadlineRoomList: RoomItem[];
     popularRoomList: RoomItem[];
+    recentRoomList: RoomItem[];
   };
 }
 

src/api/rooms/getSearchRooms.ts

@@ -29,14 +29,18 @@ export const getSearchRooms = async (
   cursor?: string,
   isFinalized: boolean = false,
   category: string = '',
+  isAllCategory: boolean = false,
 ): Promise<SearchRoomsResponse> => {
   try {
     const params = new URLSearchParams();
-    params.append('keyword', keyword);
+    if (!isAllCategory && keyword) {
+      params.append('keyword', keyword);
+    }
     params.append('sort', sort);
     params.append('isFinalized', String(isFinalized));
     if (cursor) params.append('cursor', cursor);
     if (category) params.append('category', category);
+    if (isAllCategory) params.append('isAllCategory', 'true');
 
     const url = `/rooms/search?${params.toString()}`;
     const response = await apiClient.get<SearchRoomsResponse>(url);

src/components/group/CompletedGroupModal.tsx

@@ -103,7 +103,7 @@ const Text = styled.p`
   font-size: ${typography.fontSize.sm};
   font-weight: ${typography.fontWeight.regular};
   color: ${colors.white};
-  margin: 96px 20px 20px 20px;
+  margin: 20px;
 `;
 
 const Content = styled.div<{ isEmpty?: boolean }>`

src/components/group/MyGroupBox.tsx

@@ -2,6 +2,8 @@ import { MyGroupCard } from './MyGroupCard';
 import { useInfiniteCarousel } from '../../hooks/useInfiniteCarousel';
 import styled from '@emotion/styled';
 import rightChevron from '../../assets/common/right-Chevron.svg';
+import backIcon from '@/assets/common/back.svg';
+import nextIcon from '@/assets/common/next.svg';
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getJoinedRooms, type JoinedRoomItem } from '@/api/rooms/getJoinedRooms';
@@ -28,6 +30,7 @@ const convertJoinedRoomToGroup = (room: JoinedRoomItem): Group => ({
   participants: room.memberCount,
   coverUrl: room.bookImageUrl,
   progress: room.userPercentage,
+  deadLine: room.deadlineDate || undefined,
 });
 
 interface MyGroupProps {
@@ -108,6 +111,22 @@ export function MyGroupBox({ onMyGroupsClick }: MyGroupProps) {
     isDragging = false;
   };
 
+  const handlePrevClick = () => {
+    if (scrollRef.current) {
+      const container = scrollRef.current;
+      const cardWidth = cardRefs.current[0]?.offsetWidth || 0;
+      container.scrollLeft -= cardWidth + 12;
+    }
+  };
+
+  const handleNextClick = () => {
+    if (scrollRef.current) {
+      const container = scrollRef.current;
+      const cardWidth = cardRefs.current[0]?.offsetWidth || 0;
+      container.scrollLeft += cardWidth + 12;
+    }
+  };
+
   return (
     <Container>
       <Header>
@@ -125,7 +144,17 @@ export function MyGroupBox({ onMyGroupsClick }: MyGroupProps) {
           <ErrorText>{error}</ErrorText>
         </ErrorContainer>
       ) : groups.length > 0 ? (
-        <>
+        <CarouselContainer>
+          {!isSingle && (
+            <>
+              <NavButton className="nav-button prev" onClick={handlePrevClick}>
+                <img src={backIcon} alt="이전" />
+              </NavButton>
+              <NavButton className="nav-button next" onClick={handleNextClick}>
+                <img src={nextIcon} alt="다음" />
+              </NavButton>
+            </>
+          )}
           {isSingle ? (
             <Carousel>
               <MyGroupCard
@@ -158,7 +187,7 @@ export function MyGroupBox({ onMyGroupsClick }: MyGroupProps) {
               ))}
             </Carousel>
           )}
-        </>
+        </CarouselContainer>
       ) : (
         <EmptyContainer>
           <EmptyCard role="status" aria-live="polite">
@@ -208,6 +237,45 @@ const MoreButton = styled.button`
   }
 `;
 
+const CarouselContainer = styled.div`
+  position: relative;
+  width: 100%;
+
+  &:hover .nav-button {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+
+const NavButton = styled.button`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  visibility: hidden;
+  transition: all 0.1s ease;
+
+  &.prev {
+    left: 4%;
+  }
+
+  &.next {
+    right: 4%;
+  }
+
+  img {
+    filter: invert(1);
+  }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
 const Carousel = styled.div`
   display: flex;
   padding: 0;

src/components/group/MyGroupCard.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import peopleImg from '../../assets/common/people.svg';
 import type { Group } from './MyGroupBox';
 import { colors, typography } from '@/styles/global/global';
+import { useNavigate } from 'react-router-dom';
 
 interface MyGroupCardProps {
   group: Group;
@@ -12,25 +13,44 @@ interface MyGroupCardProps {
 
 export const MyGroupCard = forwardRef<HTMLDivElement, MyGroupCardProps>((props, ref) => {
   const { group, onClick, isMine } = props;
+  const navigate = useNavigate();
+  const hasDeadline = group.deadLine != null;
+
+  const handleClick = () => {
+    if (hasDeadline) {
+      navigate(`/group/detail/${group.id}`);
+    } else {
+      onClick?.();
+    }
+  };
+
   return (
-    <Card ref={ref} onClick={onClick}>
+    <Card ref={ref} onClick={handleClick}>
       <Thumbnail src={group.coverUrl} alt="책 표지" />
       <Info>
         <div>
           <CardTitle>{group.title}</CardTitle>
           <Participants>
             <img src={peopleImg} alt="" />
-            <span>{group.participants}명 참여</span>
+            <span>{group.participants}명</span>
           </Participants>
         </div>
         <div>
-          <ProgressText>
-            {isMine ? '내 진행도' : `${group.userName}님의 진행도`}{' '}
-            <Percent>{Math.floor(group.progress || 0)}%</Percent>
-          </ProgressText>
-          <Bar>
-            <Fill width={group.progress || 0} />
-          </Bar>
+          {hasDeadline ? (
+            <DeadlineText>
+              시작까지 <DeadlineValue>{group.deadLine}</DeadlineValue>
+            </DeadlineText>
+          ) : (
+            <>
+              <ProgressText>
+                {isMine ? '내 진행도' : `${group.userName}님의 진행도`}{' '}
+                <Percent>{Math.floor(group.progress || 0)}%</Percent>
+              </ProgressText>
+              <Bar>
+                <Fill width={group.progress || 0} />
+              </Bar>
+            </>
+          )}
         </div>
       </Info>
     </Card>
@@ -80,7 +100,7 @@ const Participants = styled.p`
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: ${typography.fontSize.xs};
+  font-size: ${typography.fontSize.sm};
   font-weight: ${typography.fontWeight.medium};
   color: ${colors.grey[300]};
   margin: 8px 0;
@@ -101,6 +121,19 @@ const Percent = styled.span`
   font-weight: ${typography.fontWeight.semibold};
 `;
 
+const DeadlineText = styled.p`
+  font-size: ${typography.fontSize.sm};
+  color: ${colors.grey[300]};
+  margin: 12px 0;
+`;
+
+const DeadlineValue = styled.span`
+  font-size: ${typography.fontSize.base};
+  color: ${colors.purple.main};
+  font-weight: ${typography.fontWeight.semibold};
+  margin-left: 4px;
+`;
+
 const Bar = styled.div`
   width: 100%;
   height: 6px;

src/components/group/MyGroupModal.tsx

@@ -255,7 +255,7 @@ export const MyGroupModal = ({ onClose }: MyGroupModalProps) => {
 const TabContainer = styled.div`
   display: flex;
   gap: 8px;
-  margin: 76px 20px 20px 20px;
+  margin: 20px;
 `;
 
 const Tab = styled.button<{ selected: boolean }>`

src/components/group/RecruitingGroupBox.tsx

@@ -98,9 +98,15 @@ const Title = styled.h2`
 const TabContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 8px;
   justify-content: center;
   margin-bottom: 24px;
+
+  @media (max-width: 373px) {
+    max-width: 240px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 const Tab = styled.button<{ selected?: boolean }>`