sdp-tech#25 feat: add quotation check page

src/common/BottomButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styled from 'styled-components/native';
-import { Body16B, Body16M } from '../styles/GlobalText';
+import { Body16M } from '../styles/GlobalText';
 import { PURPLE, GREEN, PURPLE2 } from '../styles/GlobalColor';
 
 interface BottomButtonProps {
@@ -13,7 +13,7 @@ interface BottomButtonProps {
 const BottomButton = ({ value, pressed, onPress }: BottomButtonProps) => {
   return (
     <ButtonContainer pressed={pressed} onPress={onPress}>
-      <Body16B style={{color: pressed ? PURPLE2 : PURPLE }}>{value}</Body16B>
+      <Body16M style={{color: pressed ? PURPLE2 : PURPLE }}>{value}</Body16M>
     </ButtonContainer>
   )
 }

src/components/Home/Quotation/QuotationForm.tsx

@@ -42,7 +42,7 @@ const FilterSection = ({ label, items }: FilterSectionProps) => {
   )
 }
 
-const QuotationForm = ({ navigation, route }: StackScreenProps<HomeStackParams, 'Quotation'>) => {
+const QuotationForm = ({ navigation, route }: StackScreenProps<HomeStackParams, 'QuotationForm'>) => {
   const materials = ['폴리에스테르', '면', '스웨이드', '울', '캐시미어', '가죽', '데님', '추가 요청사항에 기재']
   const sizes = ['XS(85)', 'S(90)', 'M(95)', 'L(100)', 'XL(105)', 'XXL(110)']
   const options = ['프릴 추가', '단추 추가', '지퍼 추가', '주머니 추가']

src/components/Home/Quotation/QuotationPage.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Dimensions } from 'react-native';
+import styled from 'styled-components/native';
+import { getStatusBarHeight } from 'react-native-safearea-height';
+
+import { HomeStackParams } from '../../../pages/Home';
+import { StackScreenProps } from '@react-navigation/stack';
+
+import Arrow from '../../../assets/common/Arrow.svg';
+
+import { BLACK, GREEN, PURPLE, PURPLE2, PURPLE3 } from '../../../styles/GlobalColor';
+import { Body14R, Body16M, Caption11M, Caption12M, Filter14M, Subtitle16M, Title20B } from '../../../styles/GlobalText';
+import Carousel from '../../../common/Carousel';
+import CheckBox from '../../../common/CheckBox';
+import BottomButton from '../../../common/BottomButton';
+
+const statusBarHeight = getStatusBarHeight(true);
+const { width, height } = Dimensions.get('window');
+
+const QuotationPage = ({ navigation, route }: StackScreenProps<HomeStackParams, 'QuotationPage'>) => {
+  const quotation = [
+    {key: '재질', data: '니트'},
+    {key: '희망 사이즈', data: '여성 55'},
+    {key: '추가 요청사항', data: ''},
+    {key: '포폴 사용 가능 여부', data: '가능'},
+    {key: '거래 방식', data: '비대면'},
+    {key: '이름', data: '이소윤'},
+    {key: '연락처', data: '010 1234 1234'},
+    {key: '주소', data: '서울특별시 서대문구 어쩌구저쩌구동 124'},
+  ]
+  // 한 줄에 2개씩 아이템 배치
+  const refPhotos = [...new Array(6).keys()]
+  const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
+    return arr.reduce((result, item, index) => {
+      if (index % pairSize === 0) {
+        result.push([]);
+      }
+      result[result.length - 1].push(item);
+      return result;
+    }, []);
+  };
+  const splitRefPhotos = splitArrayIntoPairs(refPhotos, 2);
+  return (
+    <ScrollView>
+      <BackButton onPress={() => navigation.goBack()}>
+        <Arrow color={'white'} />
+      </BackButton>
+      <ImageBackground
+        source={{uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp'}}
+        style={{width: '100%', height: '100%'}}
+      >
+        <View style={{position: 'absolute', width: '100%', height: '100%', backgroundColor: BLACK, opacity: 0.9}} />
+        <Title20B style={{marginTop: statusBarHeight, color: 'white', textAlign: 'center'}}>견적서 확인</Title20B>
+        <View style={{paddingVertical: 35, paddingHorizontal: 20}}>
+          <Title20B style={{color: 'white', marginBottom: 3}}>마켓명 (SDP의 상점)</Title20B>
+          <Caption12M style={{color: 'white', marginBottom: 18}}>리폼러 닉네임 (전성식탁)</Caption12M>
+          <Body16M style={{color: 'white'}}>마켓 소개글</Body16M>
+        </View>
+        <View style={{backgroundColor: 'white', marginHorizontal: 10}}>
+          <View style={{backgroundColor: GREEN, marginHorizontal: 20, paddingVertical: 5, alignItems: 'center'}}>
+            <Filter14M style={{color: PURPLE}}>견적서 영수증</Filter14M>
+          </View>
+          {quotation.map((item, index) => {
+            return (
+              <>
+                <TextBox key={index}>
+                  <Subtitle16M style={{flex: 1}}>{item.key}</Subtitle16M>
+                  <Body14R style={{flex: 1.5, textAlign: 'right'}}>{item.data}</Body14R>
+                </TextBox>
+                {item.key === '추가 요청사항' &&
+                (
+                  <>
+                    <Carousel
+                      data={splitRefPhotos}
+                      renderItem={({item}: any) => {
+                        return (
+                          <View style={{ flexDirection: 'row' }}>
+                            {item.map((subItem: any) => (
+                              <View key={subItem.id} style={{width: '50%', paddingHorizontal: 20}}>
+                                <ImageBackground
+                                  source={{uri:'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp'}}
+                                  style={{width: '100%', height: 170 }}
+                                  alt={subItem.fileName}
+                                />
+                              </View>
+                            ))}
+                          </View>
+                        )
+                      }}
+                      slider
+                    />
+                    <Body14R style={{textAlign: 'center'}}>이렇게 저렇게 해주세요</Body14R>
+                  </>
+                )}
+              </>
+            )
+          })}
+        </View>
+        <View style={{backgroundColor: PURPLE3, marginHorizontal: 10, alignItems: 'center', paddingVertical: 15}}>
+          <Subtitle16M style={{color: PURPLE}}>안내문</Subtitle16M>
+          <Caption11M style={{color: PURPLE, marginVertical: 5}}>
+            증빙자료를 첨부하시면 담당자 검토 후, 확인 마크를 달아드립니다.{'\n'}
+            첨부 가능 자료 : 재학증명서, 졸업증명서, 성적증명서{'\n'}
+            (용량 입력) 이하 (파일형식 입력) 파일만 등록 가능합니다.{'\n'}
+            제출한 자료는 의뢰인에게 노출되지 않습니다. 
+          </Caption11M>
+          <CheckBox style={{paddingHorizontal: 30, alignSelf: 'center', marginVertical: 5}} pressed={false} onPress={() => {}} text='리폼 제품이 서비스 내의 포트폴리오에 사용되는 것에 동의합니다.' />
+        </View>
+        <View style={{padding: 10, marginVertical: 30}}>
+          <BottomButton value={'견적서 보내기'} pressed={false} onPress={() => {}} />
+          <View style={{marginVertical: 5}} />
+          <BottomButton value={'취소하기'} pressed={true} onPress={() => {}} />
+        </View>
+      </ImageBackground>
+    </ScrollView>
+  )
+}
+
+const BackButton = styled.TouchableOpacity`
+  padding: 10px;
+  position: absolute;
+  left: 0px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+
+const TextBox = styled.View`
+  flex-direction: row;
+  padding: 8px 25px;
+  justify-content: space-between;
+`
+
+export default QuotationPage;

src/pages/Home.tsx

@@ -13,6 +13,7 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import CustomHeader from '../common/CustomHeader';
 import MarketTabView from '../components/Home/Market/MarketTabView';
 import QuotationForm from '../components/Home/Quotation/QuotationForm';
+import QuotationPage from '../components/Home/Quotation/QuotationPage';
 import TempStorage from '../components/Home/Market/TempStorage';
 import ServiceRegistrationPage from '../components/Home/Market/ServiceRegistration';
 import ServiceDetailPageScreen from '../components/Home/Market/ServiceDetailPage';
@@ -28,7 +29,8 @@ export type HomeStackParams = {
     id?: number;
   };
   GoodsDetailPage: undefined;
-  Quotation: undefined;
+  QuotationForm: undefined;
+  QuotationPage: undefined;
   ServiceRegistrationPage: undefined;
   GoodsRegistrationPage: undefined;
   TempStorage: undefined;
@@ -51,7 +53,8 @@ const HomeScreen = ({
       <HomeStack.Screen name='Market' component={MarketTabView} />
       <HomeStack.Screen name='ServiceDetailPage' component={ServiceDetailPageScreen} />
       <HomeStack.Screen name='ServiceRegistrationPage' component={ServiceRegistrationPage} />
-      <HomeStack.Screen name='Quotation' component={QuotationForm} />
+      <HomeStack.Screen name='QuotationForm' component={QuotationForm} />
+      <HomeStack.Screen name='QuotationPage' component={QuotationPage} />
       <HomeStack.Screen name='GoodsDetailPage' component={GoodsDetailPageScreen} />
       <HomeStack.Screen name='GoodsRegistrationPage' component={GoodsRegistrationPage} />
       <HomeStack.Screen name='TempStorage' component={TempStorage} />
@@ -71,9 +74,12 @@ const HomeMainScreen = ({
       <TouchableOpacity onPress={() => navigation.navigate('Market')}>
         <Text>마켓</Text>
       </TouchableOpacity>
-      <TouchableOpacity onPress={() => navigation.navigate('Quotation')}>
+      <TouchableOpacity onPress={() => navigation.navigate('QuotationForm')}>
         <Text>견적서</Text>
       </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigation.navigate('QuotationPage')}>
+        <Text>견적서 확인</Text>
+      </TouchableOpacity>
       <TouchableOpacity onPress={() => navigation.navigate('ServiceDetailPage', {})}>
         <Text>서비스 디테일</Text>
       </TouchableOpacity>