+ setModalType(null)}
+ onRightClick={() => {
+ console.log('매칭 거절 확인')
+ setModalType('rejectSuccess')
+ }}
+ />
+ )}
+
+ {/* 매칭 거절 성공 모달 */}
+ {modalType === 'rejectSuccess' && (
+ {
+ console.log('매칭 거절 성공 확인')
+ setModalType(null)
+ }}
+ />
+ )}
+
+ {/* 매칭 수락 확인 모달 */}
+ {modalType === 'accept' && (
+ setModalType(null)}
+ onRightClick={() => {
+ console.log('매칭 수락 확인')
+ setModalType('acceptSuccess')
+ }}
+ />
+ )}
+
+ {/* 매칭 수락 성공 모달 */}
+ {modalType === 'acceptSuccess' && (
+ {
+ console.log('매칭 수락 성공 확인')
+ setModalType(null)
+ }}
+ />
+ )}
+
+ {/* 매칭 취소 확인 모달 */}
+ {modalType === 'cancel' && (
+ setModalType(null)}
+ onRightClick={() => {
+ console.log('매칭 취소 확인')
+ setModalType('cancelSuccess')
+ }}
+ />
+ )}
+
+ {/* 매칭 취소 성공 모달 */}
+ {modalType === 'cancelSuccess' && (
+ {
+ console.log('매칭 취소 성공 확인')
+ setModalType(null)
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/src/components/mypage/matching-status/MatchingTimerCard.tsx b/src/components/mypage/matching-status/MatchingTimerCard.tsx
new file mode 100644
index 00000000..ee9fa057
--- /dev/null
+++ b/src/components/mypage/matching-status/MatchingTimerCard.tsx
@@ -0,0 +1,132 @@
+import { cn } from '@/utils/cn'
+
+type MatchingStatus = 'default' | 'auto-rejected' | 'accepted'
+type RequestType = 'received' | 'sent'
+
+interface MatchingTimerCardProps {
+ /** 요청 타입 (받은 요청 / 보낸 요청) */
+ requestType: RequestType
+ /** 매칭 상태 */
+ status?: MatchingStatus
+ /** 타이머 값 (초 단위) */
+ timerSeconds?: number
+ /** 타이머 표시 텍스트 (HH:MM:SS 형식, 예: "09:58:29") */
+ timerText?: string
+ /** 수락 버튼 클릭 핸들러 (받은 요청일 때만) */
+ onAccept?: () => void
+ /** 거절 버튼 클릭 핸들러 (받은 요청일 때만) */
+ onReject?: () => void
+ /** 매칭 취소 버튼 클릭 핸들러 (보낸 요청일 때만) */
+ onCancel?: () => void
+ /** 추가 클래스명 */
+ className?: string
+}
+
+/**
+ * 타이머를 HH:MM:SS 형식으로 포맷팅
+ */
+const formatTimer = (seconds: number): string => {
+ const hours = Math.floor(seconds / 3600)
+ const minutes = Math.floor((seconds % 3600) / 60)
+ const secs = seconds % 60
+ return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+const MatchingTimerCard = ({
+ requestType,
+ status = 'default',
+ timerSeconds,
+ timerText,
+ onAccept,
+ onReject,
+ onCancel,
+ className,
+}: MatchingTimerCardProps) => {
+ const isAutoRejected = status === 'auto-rejected'
+ const isAccepted = status === 'accepted'
+ const isReceived = requestType === 'received'
+ const isSent = requestType === 'sent'
+
+ // 타이머 텍스트 결정
+ const displayTimer = timerText || (timerSeconds !== undefined ? formatTimer(timerSeconds) : '00:00:00')
+
+ // 상태에 따른 텍스트와 색상
+ const statusText = isAutoRejected
+ ? '자동 거절 되었습니다.'
+ : isAccepted
+ ? '매칭 수락 되었습니다.'
+ : '대기 만료까지'
+ const statusTextColor = isAutoRejected
+ ? 'text-semantic-700'
+ : isAccepted
+ ? 'text-primary-500-normal'
+ : 'text-neutral-500'
+ const timerColor = isAutoRejected || isAccepted ? 'text-neutral-200' : 'text-primary-500-normal'
+
+ return (
+
+ {/* 탭 영역 */}
+
+
+ {/* 매칭 거절 확인 모달 */}
+ {modalType === 'reject' && (
+
+ setActiveTab('received')}
+ />
+ setActiveTab('sent')}
+ />
+
+
+ {/* 탭 컨텐츠 */}
+
+ {activeTab === 'received' && (
+ <>
+ {/* 프로젝트 섹션 */}
+
+
+
+
+ {/* 넥트 팀원 섹션 */}
+
+
+
+
+ 프로젝트
+
+ {receivedProjects.map(project => (
+
+
+ setModalType('accept')}
+ onReject={() => setModalType('reject')}
+ />
+
+ ))}
+
+
+
+ {/* 유의사항 섹션 */}
+
+
+
+
+ 넥트 팀원
+
+ {receivedTeamMembers.map((partGroup, partIndex) => (
+
+
+
+ ))}
+
+ {partGroup.members.map(member => (
+
+
+ console.log(`${member.nickname}에게 메시지 보내기`)}
+ />
+ setModalType('accept')}
+ onReject={() => setModalType('reject')}
+ />
+
+ ))}
+
+
+
+ )}
+ {activeTab === 'sent' && (
+ <>
+ {/* 프로젝트 섹션 */}
+
+
+
+
+ 유의사항
+
+
+
+
+
+ {/* 넥트 팀원 섹션 */}
+
+
+
+
+ 프로젝트
+
+ {sentProjects.map(project => (
+
+
+ setModalType('cancel')}
+ />
+
+ ))}
+
+
+
+ {/* 유의사항 섹션 */}
+
+
+
+
+ 넥트 팀원
+
+ {sentTeamMembers.map((partGroup, partIndex) => (
+
+
+
+ ))}
+
+ {partGroup.members.map(member => (
+
+
+ console.log(`${member.nickname}에게 메시지 보내기`)}
+ />
+ setModalType('cancel')}
+ />
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ 유의사항
+
+
+
+
+ )
+}
+
+export default MatchingTimerCard
diff --git a/src/components/mypage/matching-status/ProfileCard.tsx b/src/components/mypage/matching-status/ProfileCard.tsx
new file mode 100644
index 00000000..462c2831
--- /dev/null
+++ b/src/components/mypage/matching-status/ProfileCard.tsx
@@ -0,0 +1,74 @@
+import { cn } from '@/utils/cn'
+import ChatIcon from '@/assets/icons/mypage/chat.svg?react'
+
+interface ProfileCardProps {
+ /** 프로필 이미지 URL */
+ imageUrl?: string
+ /** 사용자 닉네임 */
+ nickname: string
+ /** 사용자 파트 (예: Design, Frontend, Backend) */
+ part: string
+ /** 프로필 소개 텍스트 */
+ introduction?: string
+ /** 메시지 버튼 클릭 핸들러 */
+ onMessageClick?: () => void
+ /** 추가 클래스명 */
+ className?: string
+}
+
+const ProfileCard = ({ imageUrl, nickname, part, introduction, onMessageClick, className }: ProfileCardProps) => {
+ return (
+
+ {/* 타이머 영역 */}
+
+
+
+
+ {/* 버튼 영역 */}
+ {status === 'default' && (
+ {statusText}
+{displayTimer}
+
+ {/* 받은 요청: 거절/수락 버튼 */}
+ {isReceived && (
+ <>
+
+
+
+ )}
+
+ {/* 보낸 요청: 매칭 취소 버튼 */}
+ {isSent && (
+
+ )}
+
+ )}
+
+
+ )
+}
+
+export default ProfileCard
diff --git a/src/components/mypage/matching-status/ProjectCard.tsx b/src/components/mypage/matching-status/ProjectCard.tsx
new file mode 100644
index 00000000..f5b2df17
--- /dev/null
+++ b/src/components/mypage/matching-status/ProjectCard.tsx
@@ -0,0 +1,63 @@
+import { cn } from '@/utils/cn'
+
+interface ProjectCardProps {
+ /** 프로젝트 이름 */
+ projectName: string
+ /** 프로젝트 카테고리 (예: "금융 · 핀테크") */
+ category: string
+ /** 프로젝트 설명 */
+ description: string
+ /** 현재 팀원 수 */
+ currentMembers: number
+ /** 전체 팀원 수 */
+ totalMembers: number
+ /** 클릭 핸들러 */
+ onClick?: () => void
+ /** 추가 클래스명 */
+ className?: string
+}
+
+const ProjectCard = ({ projectName, category, description, currentMembers, totalMembers, onClick, className }: ProjectCardProps) => {
+ return (
+
+ {/* 프로필 이미지 */}
+
+
+
+
+ {/* 텍스트 영역 */}
+
+ {imageUrl ? (
+ 
+ ) : (
+
+ )}
+
+
+
+
+ {/* 메시지 아이콘 버튼 */}
+
+
+ {/* 닉네임 | Part */}
+
+
+
+ {/* 프로필 소개 */}
+
+
+ {nickname}
+ +{part}
++ {introduction || '프로필 소개 (첫 문장까지 미리보기됨)'} +
+
+
+ )
+}
+
+export default ProjectCard
diff --git a/src/components/mypage/ongoing-project/OngoingProject.tsx b/src/components/mypage/ongoing-project/OngoingProject.tsx
index 1cca6a5f..d26db187 100644
--- a/src/components/mypage/ongoing-project/OngoingProject.tsx
+++ b/src/components/mypage/ongoing-project/OngoingProject.tsx
@@ -2,14 +2,14 @@ import { useState, useCallback, useEffect } from 'react'
import Button from '@/components/common/Button'
import { MyPageHeader } from '../MyPageHeader'
import HamburgerIcon from '@/assets/icons/common/hamburger.svg?react'
-import Tabbar from './Tabbar'
+import SegmentTabButton from '../SegmentTabButton'
import ProjectManagementView from './tab1-project-setting/ProjectManagementView'
import TeamManagementView from './tab2-team-management/TeamManagementView'
import { useNavigationBlocker } from '@/hooks/mypage/useNavigationBlocker'
import { useOngoingProjectForm } from '@/hooks/mypage/useOngoingProjectForm'
import type { TabType } from '@/types/mypage/ongoindProject'
-import CTAModal from '../../common/CTAModal'
+import CTAModal from '@/components/common/CTAModal'
import PartSettingsModal from './PartSettingsModal'
import { useNavigate } from 'react-router'
import type { ProjectSettingsType } from '@/utils/schemas/projectSchema'
@@ -212,7 +212,18 @@ const OngoingProject = () => {
{/* 탭바 */}
-
+ {/* 상단: 프로젝트 이름 + 카테고리 */}
+
+
+
+
+ {/* 하단: 팀원 수 */}
+
+ {/* 프로젝트 이름 | 카테고리 */}
+
+
+
+ {/* 프로젝트 설명 */}
+ + {projectName} +
+ +{category}
++ {description} +
+
+
+ + 팀원 + {` ${currentMembers}`} + / + {totalMembers} +
+
+ handleActivateTab('프로젝트 설정')}
+ />
+ handleActivateTab('팀원 관리')}
+ />
+
{/* 탭 01. 프로젝트 설정 */}
{activeTab === '프로젝트 설정' && (
diff --git a/src/components/mypage/ongoing-project/Tabbar.tsx b/src/components/mypage/ongoing-project/Tabbar.tsx
deleted file mode 100644
index cade4af4..00000000
--- a/src/components/mypage/ongoing-project/Tabbar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { TabType } from '@/types/mypage/ongoindProject'
-
-interface ITabbar {
- currentTab: string
- onClick: (tabName: TabType) => void
-}
-
-const Tabbar = ({ currentTab, onClick }: ITabbar) => {
- return (
-
-
-
-
-
- )
-}
-
-export default Tabbar
diff --git a/src/components/mypage/profile-analysis/ProfileAnalysis.tsx b/src/components/mypage/profile-analysis/ProfileAnalysis.tsx
index 4e2d7dd3..7abbb594 100644
--- a/src/components/mypage/profile-analysis/ProfileAnalysis.tsx
+++ b/src/components/mypage/profile-analysis/ProfileAnalysis.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react'
-import CTAModal from '../../common/CTAModal'
+import CTAModal from '@/components/common/CTAModal'
import EmptyProfileAnalysis from './EmptyProfileAnalysis'
import { useCollaboStore, useGrowGuideStore, useRoleRecommendStore, useSkillStore } from '@/stores/profileAnalysisStore'
import ProfileRadarChart from '@/components/profile-analysis/ProfileRadarChart'
diff --git a/src/components/mypage/profile-settings/ProfileSettings.tsx b/src/components/mypage/profile-settings/ProfileSettings.tsx
index bffdccbe..d4597096 100644
--- a/src/components/mypage/profile-settings/ProfileSettings.tsx
+++ b/src/components/mypage/profile-settings/ProfileSettings.tsx
@@ -6,7 +6,7 @@ import { useProfileSettingsForm } from '@/hooks/mypage/useProfileSettingsForm'
import { useCTAModal } from '@/stores/useCTAModal'
import type { ProfileFormDataType } from '@/utils/schemas/profileSchema'
-import CTAModal from '../../common/CTAModal'
+import CTAModal from '@/components/common/CTAModal'
import { MyPageHeader } from '../MyPageHeader'
import ProfileBasicInfo from './ProfileBasicInfo'
import Section01Introduction from './sections/Section01Introduction'
diff --git a/src/constants/matchingNotice.ts b/src/constants/matchingNotice.ts
new file mode 100644
index 00000000..0f7ee4a5
--- /dev/null
+++ b/src/constants/matchingNotice.ts
@@ -0,0 +1,42 @@
+export interface NoticeItem {
+ /** 규칙 번호 */
+ number: number
+ /** 규칙 메인 텍스트 */
+ text: string
+ /** 규칙 하위 설명 텍스트 (선택, 여러 줄은 \n으로 구분) */
+ subText?: string
+}
+
+/** 받은 요청 유의사항 */
+export const RECEIVED_REQUEST_NOTICES: NoticeItem[] = [
+ {
+ number: 1,
+ text: '대기 만료 시, 매칭이 자동 거절 처리',
+ },
+ {
+ number: 2,
+ text: '24시간 동안의 매칭 취소 / 거절 / 수락은 번복 불가',
+ },
+ {
+ number: 3,
+ text: '리더가 직접 보내는 요청은 파트당 최대 3명까지 가능 (24시간 동안)',
+ subText: '리더는 24시간동안 한 프로젝트의 파트당 최대 3명에게 **매칭 요청을 직접 보낼 수 있습니다.**\n이때, 유저가 보내오는 프로젝트 매칭 요청은 포함되지 않습니다.',
+ },
+]
+
+/** 보낸 요청 유의사항 */
+export const SENT_REQUEST_NOTICES: NoticeItem[] = [
+ {
+ number: 1,
+ text: '대기 만료 시, 매칭이 자동 거절 처리',
+ },
+ {
+ number: 2,
+ text: '24시간 동안의 매칭 취소 / 거절 / 수락은 번복 불가',
+ },
+ {
+ number: 3,
+ text: '매칭 신청 후 대기 중인 24시간동안 다른 프로젝트에 신청할 수 없습니다.',
+ subText: '이때, 타 유저로 부터 받은 요청은 포함되지 않습니다.',
+ },
+]