From 3d54841f26009a2b385558725977a3cfe1fb13db Mon Sep 17 00:00:00 2001 From: miikii41 <130055803+miikii41@users.noreply.github.com> Date: Wed, 4 Dec 2024 16:19:32 +0900 Subject: [PATCH] MatchingPageSeeker --- App.tsx | 11 +- src/components/Home/Main/SeekerMainPage.tsx | 2 +- .../Home/Matching/MatchingPageSeeker.tsx | 217 ++++++++++++++++++ 3 files changed, 228 insertions(+), 2 deletions(-) create mode 100644 src/components/Home/Matching/MatchingPageSeeker.tsx diff --git a/App.tsx b/App.tsx index 71ee139..7ea8a20 100644 --- a/App.tsx +++ b/App.tsx @@ -29,6 +29,7 @@ import RequestStyle from './src/components/Home/Request/RequestStyle'; import RequestSent from './src/components/Home/Request/RequestSent'; import RequestAccepted from './src/components/Home/Request/RequestAccepted'; import MatchingPage from './src/components/Home/Matching/MatchingPage'; +import MatchingPageSeeker from './src/components/Home/Matching/MatchingPageSeeker'; import AddCloset from './src/components/Closet/AddCloset'; import ClosetMain from './src/components/Closet/ClosetMain'; import DoraCloset from './src/components/Closet/DoraCloset'; @@ -53,12 +54,20 @@ function SeekerNavigator() { - + + + + + + + + + ); diff --git a/src/components/Home/Main/SeekerMainPage.tsx b/src/components/Home/Main/SeekerMainPage.tsx index 2d7d496..49bfde4 100644 --- a/src/components/Home/Main/SeekerMainPage.tsx +++ b/src/components/Home/Main/SeekerMainPage.tsx @@ -12,7 +12,7 @@ const SeekerMainPage = () => { Main Page Matching - navigation.navigate('MatchingPage')}> + navigation.navigate('MatchingPageSeeker')}> 현재 요청서의 수락 현황은..... diff --git a/src/components/Home/Matching/MatchingPageSeeker.tsx b/src/components/Home/Matching/MatchingPageSeeker.tsx new file mode 100644 index 0000000..71b6d44 --- /dev/null +++ b/src/components/Home/Matching/MatchingPageSeeker.tsx @@ -0,0 +1,217 @@ +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 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'; // 예시: 보라색 +const LIGHTGRAY = '#d3d3d3'; // 예시: 연한 회색 +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; + border-radius: 10px; + shadow-color: #000; + shadow-opacity: 0.1; + shadow-radius: 5px; + elevation: 3; + position: relative; + +`; + +// 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 AddButton = styled.Text` + position: absolute; + color: black; + font-size: 14px; + text-decoration: underline; + bottom: 10px; + right: 0px; +`; + +// 추가적인 텍스트 스타일 (옵션) +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 MatchingPageSeeker: React.FC = () => { + 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'), // 거래 완료 + }; + + // 요청서 확인 버튼 클릭 시 호출되는 함수 + const handleViewRequest = (id: string) => { + navigation.navigate('RequestPage', { requestId: id }); + }; + + // 공통으로 사용하는 FlatList 컴포넌트 + const renderRequestItem = ({ item }: { item: Request }) => ( + + + + {item.id} + + handleViewRequest(item.id)}> + {item.status === 'completed' ? '제안서 확인' : '요청서 확인'} + + + + + {item.name} + {item.requestDate} + + {/* 완료 상태에서 추가 버튼 */} + {item.status === 'completed' && ( + navigation.navigate('MyPageTabView')}> + 리뷰 작성하기 + + )} + + + ); + + return ( + + ( + + )} + > + + item.id} + /> + + + {/* 거래 중 탭 */} + + item.id} + /> + + + {/* 거래 완료 탭 */} + + item.id} + /> + + + + ); +}; + +export default MatchingPageSeeker; + +const styles = StyleSheet.create({ + tabContent: { + padding: 20, + textAlign: 'center', + fontSize: 16, + }, +});