Merge branch 'main' of https://github.com/miikii41/capstoneProject

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() {
       <Stack.Screen name="RequestPage" component={RequestPage} />
       <Stack.Screen name="RequestSent" component={RequestSent} />
       <Stack.Screen name="RequestAccepted" component={RequestAccepted} />
-      <Stack.Screen name="MatchingPage" component={MatchingPage} />
+      <Stack.Screen name="MatchingPageSeeker" component={MatchingPageSeeker} />
       <Stack.Screen name="InitialLogin" component={InitialLogin} />
       <Stack.Screen name="AddCloset" component={AddCloset} />
       <Stack.Screen name="DoraCloset" component={DoraCloset} />
       <Stack.Screen name="ClosetMain" component={ClosetMain} />
       <Stack.Screen name="CalendarWithCloset" component={CalendarWithCloset} />
+
+
+
+      <Stack.Screen name="PortfolioPage" component={PortfolioPage} />
+      <Stack.Screen name="Review" component={Review} />
+      <Stack.Screen name="MyPageTabView" component={MyPageTabView} />
+
+
  </Stack.Navigator>
 
   );

src/components/Chat/ChatList.tsx

@@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 const ChatList = () => {
   const navigation = useNavigation();
   const chats = [
-    { id: '1', nickname: 'User Nickname', lastMessage: '간단한 제안서의 내용' },
+    { id: '1', nickname: 'User Nickname', lastMessage: '가장 많이 매칭된 코디' },
   ];
 
   return (

src/components/Closet/ClosetMain.tsx

@@ -7,6 +7,7 @@ const ClosetMain = ({ navigation, route }) => {
   const [availableClothes, setAvailableClothes] = useState<string | number[]>([
     require('../../assets/Closet/sweater.png'),
     require('../../assets/Closet/brownpants.png'),
+    require('../../assets/StyleResult/img.png'),
     ]); // 선택되지 않은 옷들  , sweater.png 임의로 기본값으로 추가
   const [chosenClothes, setChosenClothes] = useState<string | number[]>([
       ]); // 선택된 옷들

src/components/Home/Main/SeekerMainPage.tsx

@@ -12,7 +12,7 @@ const SeekerMainPage = () => {
       <Text style={styles.header}>Main Page</Text>
       <Text style={styles.subHeader}>Matching</Text>
 
-  <TouchableOpacity onPress={() => navigation.navigate('MatchingPage')}>
+  <TouchableOpacity onPress={() => navigation.navigate('MatchingPageSeeker')}>
      <View style={styles.chartContainer}>
        <Text style={styles.chartText}>현재 요청서의 수락 현황은.....</Text>
        <View style={styles.progressWrapper}>

src/components/Home/Matching/MatchingPageSeeker.tsx

@@ -0,0 +1,216 @@
+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<NativeStackNavigationProp<HomeStackParams>>();
+
+  const requestlist: Request[] = [
+    {
+      id: 'FashionMaster',
+      name: '#데이트 #레스토랑 #페미닌',
+      requestDate: '2024-12-03',
+      status: 'progress',
+    },
+    {
+      id: 'fashionlover',
+      name: '#학교 #발표 #비즈니스',
+      requestDate: '2024-12-03',
+      status: 'completed',
+    },
+    {
+      id: 'StyleBest',
+      name: '#비즈니스 #회사 #미니멀',
+      requestDate: '2024-12-04',
+      status: 'before',
+    },
+    {
+      id: 'Stylist',
+      name: '#친구 #여행 #캐쥬얼',
+      requestDate: '2024-12-03',
+      status: 'before',
+    },
+    {
+          id: 'Styler',
+          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 }) => (
+    <RequestBox>
+      <RequestHeader>
+        <View>
+          <RequestId>{item.id}</RequestId>
+        </View>
+        <TouchableOpacity onPress={() => handleViewRequest(item.id)}>
+             <ButtonText>{item.status === 'completed' ? '제안서 확인' : '보낸 요청서 보기'}</ButtonText>
+        </TouchableOpacity>
+
+      </RequestHeader>
+
+      <RequestName>{item.name}</RequestName>
+      <RequestDate>{item.requestDate}</RequestDate>
+
+        {item.status === 'completed' && (
+          <TouchableOpacity
+             onPress={() => navigation.navigate('MyPageTabView')}>
+            <AddButton>리뷰 작성하기</AddButton>
+          </TouchableOpacity>
+        )}
+
+    </RequestBox>
+  );
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#f0f0f0' }}>
+      <Tabs.Container
+        renderTabBar={(props) => (
+          <MaterialTabBar
+            {...props}
+            activeColor={DEEPPINK} // 활성 탭 글씨 색상
+            inactiveColor={LIGHTGRAY} // 비활성 탭 글씨 색상
+            indicatorStyle={{
+              backgroundColor: DEEPPINK, // 인디케이터 색상
+              height: 4,
+            }}
+            labelStyle={{
+              fontSize: 16,
+              fontWeight: 'bold',
+            }}
+            tabBarStyle={{
+              backgroundColor: WHITE,
+              borderBottomWidth: 1,
+              borderBottomColor: GRAY,
+            }}
+          />
+        )}
+      >
+        <Tabs.Tab name="대기중">
+          <Tabs.FlatList
+            data={filteredRequests.before}
+            renderItem={renderRequestItem}
+            keyExtractor={(item) => item.id}
+          />
+        </Tabs.Tab>
+
+        {/* 거래 중 탭 */}
+        <Tabs.Tab name="작성중">
+          <Tabs.FlatList
+            data={filteredRequests.progress}
+            renderItem={renderRequestItem}
+            keyExtractor={(item) => item.id}
+          />
+        </Tabs.Tab>
+
+        {/* 거래 완료 탭 */}
+        <Tabs.Tab name="완료">
+          <Tabs.FlatList
+            data={filteredRequests.completed}
+            renderItem={renderRequestItem}
+            keyExtractor={(item) => item.id}
+          />
+        </Tabs.Tab>
+      </Tabs.Container>
+    </SafeAreaView>
+  );
+};
+
+export default MatchingPageSeeker;
+
+const styles = StyleSheet.create({
+  tabContent: {
+    padding: 20,
+    textAlign: 'center',
+    fontSize: 16,
+  },
+});

src/components/Home/Request/RequestApproval.tsx

@@ -46,7 +46,7 @@ const RequestApproval = () => {
                 style={styles.orderCheckButton}
                 onPress={() => navigation.navigate('RequestPage')}
               >
-                <Text style={styles.orderCheckText}>주문서 확인</Text>
+                <Text style={styles.orderCheckText}>요청서 확인</Text>
               </TouchableOpacity>
             </View>
           );

yarn.lock

@@ -4013,6 +4013,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"