feat: 모임방 상세페이지

src/components/common/Post/PostHeader.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-
 interface PostHeaderProps {
   profileImgUrl: string;
   userName: string;

src/components/feed/FollowList.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import rightArrow from '../../assets/feed/rightArrow.svg';
 import people from '../../assets/feed/people.svg';
 import character from '../../assets/feed/character.svg';
+import { typography } from '@/styles/global/global';
 
 const followerData = {
   followers: [
@@ -83,7 +84,7 @@ const Container = styled.div`
     display: flex;
     flex-direction: row;
     color: var(--color-white);
-    font-size: 11px;
+    font-size: ${typography.fontSize['2xs']};
     font-weight: var(--font-weight-medium);
     line-height: 20px;
   }
@@ -127,7 +128,7 @@ const FollowContainer = styled.div`
         text-overflow: ellipsis;
         text-align: center;
         white-space: nowrap;
-        font-size: var(--string-size-small02, 11px);
+        font-size: ${typography.fontSize['2xs']};
         font-weight: var(--string-weight-regular, 400);
         line-height: 20px;
       }

src/components/feed/UserProfileItem.tsx

@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import styled from '@emotion/styled';
 import rightArrow from '../../assets/feed/rightArrow.svg';
+import { typography } from '@/styles/global/global';
 
 export interface UserProfileItemProps {
   profileImgUrl: string;
@@ -143,7 +144,7 @@ const UserProfile = styled.div`
     align-items: center;
     gap: 2px;
     color: var(--color-white);
-    font-size: 11px;
+    font-size: ${typography.fontSize['2xs']};
     font-weight: var(--font-weight-regular);
     line-height: 20px;
   }

src/components/group/GroupCard.tsx

@@ -8,25 +8,30 @@ interface Props {
   group: Group;
   isOngoing?: boolean;
   type?: 'main' | 'search' | 'modal';
+  isRecommend?: boolean;
 }
 
 export const GroupCard = forwardRef<HTMLDivElement, Props>(
-  ({ group, isOngoing, type = 'main' }, ref) => {
+  ({ group, isOngoing, type = 'main', isRecommend = false }, ref) => {
     return (
       <Card ref={ref} cardType={type}>
-        <Cover src={group.coverUrl} alt="cover" cardType={type} />
+        <Cover src={group.coverUrl} alt="cover" cardType={type} isRecommend={isRecommend} />
         <Info>
-          <Title>{group.title}</Title>
+          <Title isRecommend={isRecommend}>{group.title}</Title>
           <Bottom>
-            <Participant>
+            <Participant isRecommend={isRecommend}>
               <img src={peopleIcon} alt="people" />
               <p>{group.participants}</p>
               <MaximumParticipants>/ {group.maximumParticipants}명</MaximumParticipants>
             </Participant>
             {isOngoing === true ? (
-              <RecruitingDeadline>{group.deadLine}일 뒤 모집 마감</RecruitingDeadline>
+              <RecruitingDeadline isRecommend={isRecommend}>
+                {group.deadLine}일 뒤 모집 마감
+              </RecruitingDeadline>
             ) : (
-              <OngoingDeadline>{group.deadLine}일 뒤 종료</OngoingDeadline>
+              <OngoingDeadline isRecommend={isRecommend}>
+                {group.deadLine}일 뒤 종료
+              </OngoingDeadline>
             )}
           </Bottom>
         </Info>
@@ -39,23 +44,23 @@ const Card = styled.div<{ cardType: 'main' | 'search' | 'modal' }>`
   display: flex;
   align-items: center;
   background: ${({ cardType }) =>
-    cardType === 'search' ? 'var(--color-black-main)' : 'var(--color-darkgrey-main)'};
+    cardType === 'search' ? colors.black.main : colors.darkgrey.main};
+  border-top: ${({ cardType }) =>
+    cardType === 'search' ? `1px solid ${colors.darkgrey.dark}` : 'none'};
+  border: ${({ cardType }) => (cardType === 'main' ? `1px solid ${colors.grey[300]}` : 'none')};
   border-radius: ${({ cardType }) => (cardType === 'search' ? `none` : '12px')};
   box-sizing: border-box;
   padding: ${({ cardType }) => (cardType === 'search' ? '24px 12px 12px 12px' : '12px')};
   gap: 12px;
   width: 100%;
-  border: ${({ cardType }) => (cardType === 'main' ? '1px solid var(--color-grey-300)' : 'none')};
-  border-top: ${({ cardType }) =>
-    cardType === 'search' ? `1px solid ${colors.darkgrey.dark}` : ''};
 `;
 
-const Cover = styled.img<{ cardType: 'main' | 'search' | 'modal' }>`
+const Cover = styled.img<{ cardType: 'main' | 'search' | 'modal'; isRecommend?: boolean }>`
   object-fit: cover;
   flex-shrink: 0;
-
-  width: ${({ cardType }) => (cardType === 'search' ? '60px' : '80px')};
-  height: ${({ cardType }) => (cardType === 'search' ? '80px' : '107px')};
+  width: ${({ cardType, isRecommend }) => (cardType === 'search' || isRecommend ? '60px' : '80px')};
+  height: ${({ cardType, isRecommend }) =>
+    cardType === 'search' || isRecommend ? '80px' : '107px'};
 `;
 
 const Info = styled.div`
@@ -65,8 +70,9 @@ const Info = styled.div`
   flex: 1;
 `;
 
-const Title = styled.h3`
-  font-size: ${typography.fontSize.lg};
+const Title = styled.h3<{ isRecommend: boolean }>`
+  font-size: ${({ isRecommend }) =>
+    isRecommend ? typography.fontSize.sm : typography.fontSize.lg};
   font-weight: ${typography.fontWeight.semibold};
   color: #ffffff;
   margin-bottom: 10px;
@@ -84,31 +90,32 @@ const Bottom = styled.div`
   gap: 6px;
 `;
 
-const Participant = styled.div`
+const Participant = styled.div<{ isRecommend: boolean }>`
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--color-white);
-  font-size: var(--font-size-small03);
-  font-weight: var(--font-weight-medium);
+  color: ${colors.white};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.medium};
   img {
     width: 16px;
     height: 16px;
   }
 `;
+
 const MaximumParticipants = styled.div`
-  color: var(--color-grey-100);
-  font-size: var(--font-size-small03);
+  color: ${colors.grey[100]};
+  font-size: ${typography.fontSize.xs};
 `;
 
-const RecruitingDeadline = styled.div`
-  font-size: var(--font-size-small03);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-red);
+const RecruitingDeadline = styled.div<{ isRecommend: boolean }>`
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.medium};
+  color: ${colors.red};
 `;
 
-const OngoingDeadline = styled.div`
-  font-size: var(--font-size-small03);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-white);
+const OngoingDeadline = styled.div<{ isRecommend: boolean }>`
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.medium};
+  color: ${colors.white};
 `;

src/components/group/MyGroupBox.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import rightChevron from '../../assets/common/right-Chevron.svg';
 
 export interface Group {
-  id: string;
+  id: number | string;
   title: string;
   participants: number;
   maximumParticipants?: number;

src/components/today-words/MessageList/MessageList.styled.ts

@@ -50,7 +50,7 @@ export const UserName = styled.div`
 
 export const TimeStamp = styled.div`
   color: ${semanticColors.text.tertiary};
-  font-size: 11px;
+  font-size: ${typography.fontSize['2xs']};
   font-weight: ${typography.fontWeight.regular};
 `;
 

src/mocks/groupDetail.mock.ts

@@ -0,0 +1,53 @@
+export const mockGroupDetail = {
+  title: '서집만 읽는 사람들 3월',
+  isPrivate: true,
+  introduction:
+    '‘서집만 읽는 사람들’ 3월 모임입니다. 이번 달 모임방은 심장보다 단단한 토마토 한 알 완독합니다.',
+  activityPeriod: {
+    start: '2025.01.12',
+    end: '2025.01.28',
+  },
+  members: {
+    current: 15,
+    max: 30,
+  },
+  ddayText: '2일 남음',
+  genre: '문학',
+  book: {
+    title: '심장보다 단단한 토마토 한 알',
+    author: '고선경 저 · 림',
+    coverUrl:
+      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s',
+    description:
+      '유머와 재미, 솔직한 고백 속에서 빛나는 진심, 용기와 사랑을 여전히 간직한 채로 어쩌고저쩌고...',
+  },
+  recommendations: [
+    {
+      id: 1,
+      title: '방제목입니다다 방 제목입...',
+      participants: 22,
+      maximumParticipants: 30,
+      deadLine: 3,
+      coverUrl:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s',
+    },
+    {
+      id: 2,
+      title: '방제목입니다다 방 제목입...',
+      participants: 22,
+      maximumParticipants: 30,
+      deadLine: 3,
+      coverUrl:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s',
+    },
+    {
+      id: 3,
+      title: '방제목입니다다 방 제목입...',
+      participants: 22,
+      maximumParticipants: 30,
+      deadLine: 3,
+      coverUrl:
+        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s',
+    },
+  ],
+};