diff --git a/src/components/Home/Matching/MatchingPage.tsx b/src/components/Home/Matching/MatchingPage.tsx index 8f856a1..26e4047 100644 --- a/src/components/Home/Matching/MatchingPage.tsx +++ b/src/components/Home/Matching/MatchingPage.tsx @@ -1,7 +1,12 @@ import React from 'react'; +import { SafeAreaView, Text, FlatList, StyleSheet, TouchableOpacity, View, Alert } from 'react-native'; import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view'; -import { SafeAreaView, Text } from 'react-native'; import styled from 'styled-components/native'; +import { useNavigation } from '@react-navigation/native'; +import { NativeStackNavigationProp } from '@react-navigation/native-stack'; +import { RootStackParamList } from '../../../App'; // RootStackParamList을 App.tsx에서 export 해야 함 +import { HomeStackParams } from '../../../pages/Home'; // 네비게이션 타입 추가 + // 색상 값 직접 지정 const DEEPPINK = 'deeppink'; // 예시: 보라색 @@ -10,30 +15,122 @@ const WHITE = '#FFFFFF'; // 흰색 const GRAY = '#808080'; // 회색 const BLACK = '#000000'; // 검정 +// 타입 정의 +type Request = { + id: string; + name: string; + requestDate: string; + status: 'before' | 'progress' | 'completed'; +}; + +// 스타일 정의 (템플릿 리터럴 사용) const RequestBox = styled.View` padding: 15px; margin: 10px; - background-color: ${WHITE}; + background-color: white; border-radius: 10px; - shadow-color: ${BLACK}; + shadow-color: #000; shadow-opacity: 0.1; shadow-radius: 5px; elevation: 3; `; +// RequestBox 내부의 헤더를 위한 스타일 +const RequestHeader = styled.View` + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; +`; + +// 버튼 텍스트 스타일 +const ButtonText = styled.Text` + color: black; + font-size: 14px; + text-decoration: underline; +`; + +// 추가적인 텍스트 스타일 (옵션) +const RequestId = styled.Text` + font-size: 16px; + font-weight: bold; +`; + +const RequestName = styled.Text` + font-size: 14px; + color: #555; +`; + +const RequestDate = styled.Text` + font-size: 12px; + color: #888; +`; + const MatchingPage: React.FC = () => { - const requestlist = [ - { id: 'Cindy', name: '#데이트 #레스토랑 #페미닌', requestDate: '2024-12-03', status: 'progress' }, - { id: 'Dora', name: '#학교 #발표 #비즈니스', requestDate: '2024-12-03', status: 'completed' }, - { id: 'Ariana', name: '#비즈니스 #회사 #미니멀', requestDate: '2024-12-04', status: 'before' }, + const navigation = useNavigation>(); + + const requestlist: Request[] = [ + { + id: 'Cindy', + name: '#데이트 #레스토랑 #페미닌', + requestDate: '2024-12-03', + status: 'progress', + }, + { + id: 'Dora', + name: '#학교 #발표 #비즈니스', + requestDate: '2024-12-03', + status: 'completed', + }, + { + id: 'Ariana', + name: '#비즈니스 #회사 #미니멀', + requestDate: '2024-12-04', + status: 'before', + }, + { + id: 'Minki', + name: '#친구 #여행 #캐쥬얼', + requestDate: '2024-12-03', + status: 'before', + }, + { + id: 'Sabrina', + name: '#친구 #공원 #스트리트', + requestDate: '2024-11-23', + status: 'before', + }, ]; + // 상태별 데이터 필터링 const filteredRequests = { - before: requestlist.filter(request => request.status === 'before'), - progress: requestlist.filter(request => request.status === 'progress'), - completed: requestlist.filter(request => request.status === 'completed'), + before: requestlist.filter(request => request.status === 'before'), // 거래 전 + progress: requestlist.filter(request => request.status === 'progress'), // 거래 중 + completed: requestlist.filter(request => request.status === 'completed'), // 거래 완료 + }; + + // 요청서 확인 버튼 클릭 시 호출되는 함수 + const handleViewRequest = (id: string) => { + navigation.navigate('RequestPage', { requestId: id }); }; + // 공통으로 사용하는 FlatList 컴포넌트 + const renderRequestItem = ({ item }: { item: Request }) => ( + + + + {item.id} + + handleViewRequest(item.id)}> + 요청서 확인 + + + + {item.name} + {item.requestDate} + + ); + return ( { ( - - {item.name} - {item.requestDate} - - )} + renderItem={renderRequestItem} keyExtractor={(item) => item.id} /> - + {/* 거래 중 탭 */} + ( - - {item.name} - {item.requestDate} - - )} + renderItem={renderRequestItem} keyExtractor={(item) => item.id} /> - + {/* 거래 완료 탭 */} + ( - - {item.name} - {item.requestDate} - - )} + renderItem={renderRequestItem} keyExtractor={(item) => item.id} /> @@ -102,3 +186,11 @@ const MatchingPage: React.FC = () => { }; export default MatchingPage; + +const styles = StyleSheet.create({ + tabContent: { + padding: 20, + textAlign: 'center', + fontSize: 16, + }, +});