#25 feat: add quotation check page (#42)

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/InputInfo.tsx

@@ -0,0 +1,57 @@
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import styled from 'styled-components/native';
+import { getStatusBarHeight } from 'react-native-safearea-height';
+import { Body14M, Subtitle16B, Title20B } from '../../../styles/GlobalText';
+import { BLACK, PURPLE } from '../../../styles/GlobalColor';
+import Arrow from '../../../assets/common/Arrow.svg';
+import InputBox from '../../../common/InputBox';
+import BottomButton from '../../../common/BottomButton';
+
+interface InputInfoProps {
+  onClose: () => void;
+  onNavigate: () => void;
+}
+
+export interface InfoProps {
+  name: string;
+  tel: string;
+  address: string;
+}
+
+const statusBarHeight = getStatusBarHeight(true);
+
+const InputInfo = ({ onClose, onNavigate }: InputInfoProps) => {
+  return (
+    <SafeAreaView>
+      <BackButton onPress={onClose}>
+        <Arrow color={BLACK} />
+      </BackButton>
+      <Title20B style={{textAlign: 'center'}}>내 정보</Title20B>
+      <View style={{padding: 20, marginVertical: 30}}>
+        <Subtitle16B>이름</Subtitle16B>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} placeholder='입력해주세요' />
+        <Subtitle16B style={{marginTop: 25}}>연락처</Subtitle16B>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} placeholder='입력해주세요' />
+        <Subtitle16B style={{marginTop: 25}}>주소</Subtitle16B>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} />
+        <TouchableOpacity style={{position: 'absolute', top: 260, right: 30}}>
+          <Body14M style={{color: PURPLE}}>주소 찾기</Body14M>
+        </TouchableOpacity>
+        <InputBox style={{height: 40, paddingVertical: 10, marginTop: 10, borderColor: PURPLE}} placeholder='입력해주세요' />
+      </View>
+      <View style={{paddingHorizontal: 45, paddingVertical: 20, marginTop: 250}}>
+        <BottomButton value='다음' pressed={false} onPress={onNavigate} />
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const BackButton = styled.TouchableOpacity`
+  padding: 10px;
+  position: absolute;
+  left: 0px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+
+export default InputInfo;

src/components/Home/Quotation/QuotationForm.tsx

@@ -1,5 +1,5 @@
 import { SetStateAction, useState, Dispatch, useEffect } from 'react';
-import { ScrollView, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
+import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Modal } from 'react-native';
 import styled from 'styled-components/native';
 import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
 import { Body14M, Body16M, Caption11M, Caption12M, Subtitle16B, Subtitle18B, Subtitle18M, Title20B } from '../../../styles/GlobalText';
@@ -18,6 +18,8 @@ import Search from '../../../assets/common/Search.svg';
 import Photo from '../../../assets/common/Photo.svg';
 import PhotoOptions, { PhotoResultProps } from '../../../common/PhotoOptions';
 import Carousel from '../../../common/Carousel';
+import InputInfo from './InputInfo';
+import Rejection from './Rejection';
 
 const statusBarHeight = getStatusBarHeight(true);
 
@@ -42,13 +44,14 @@ 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 = ['프릴 추가', '단추 추가', '지퍼 추가', '주머니 추가']
   const [text, setText] = useState<string>('');
   const [photos, setPhotos] = useState<PhotoResultProps[]>([]);
   const [refPhotos, setRefPhotos] = useState<PhotoResultProps[]>([]);
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
 
   // 한 줄에 2개씩 아이템 배치
   const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
@@ -167,8 +170,12 @@ const QuotationForm = ({ navigation, route }: StackScreenProps<HomeStackParams,
         </FilterBox>
       </View>
       <View style={{paddingHorizontal: 45, paddingVertical: 20}}>
-        <BottomButton value='다음' pressed={false} onPress={() => {}} />
+        <BottomButton value='다음' pressed={false} onPress={() => setModalVisible(true)} />
       </View>
+      <Modal visible={modalVisible}>
+        {/* 소비자일 경우 */}
+        <InputInfo onClose={() => setModalVisible(false)} onNavigate={() => { setModalVisible(false); navigation.navigate('QuotationPage')}} />
+      </Modal>
     </ScrollView>
   )
 }

src/components/Home/Quotation/QuotationPage.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Dimensions, Modal, Image } 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';
+import Rejection from './Rejection';
+
+const statusBarHeight = getStatusBarHeight(true);
+const { width, height } = Dimensions.get('window');
+
+const QuotationPage = ({ navigation, route }: StackScreenProps<HomeStackParams, 'QuotationPage'>) => {
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [finishModal, setFinishModal] = useState<boolean>(false);
+  const showModal = () => {
+    setFinishModal(true);
+    setTimeout(() => {
+      setFinishModal(false);
+    }, 3000);
+  };
+  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={showModal}
+            onPress={() => navigation.navigate('SentQuotation')}
+            />
+          <View style={{marginVertical: 5}} />
+          <BottomButton value={'취소하기'} pressed={true} onPress={() => setModalVisible(true)} />
+        </View>
+      </ImageBackground>
+      <Modal visible={finishModal} transparent={true}>
+        {/* 리폼러일 경우 */}
+        <View style={{backgroundColor: 'black', opacity: 0.8, height: '100%', alignItems: 'center', justifyContent: 'center'}}>
+          <Title20B style={{color: 'white'}}>카톡 링크를 전송했어요!</Title20B>
+          <Image source={require('../../../assets/rocket.png')} style={{width: 230, height: 230}} />
+          <Subtitle16M style={{color: 'white', textAlign: 'center'}}>의뢰인이 카톡 링크를 통해{'\n'}상담을 신청할 거예요</Subtitle16M>
+        </View>
+      </Modal>
+      <Modal visible={modalVisible}>
+        {/* 리폼러일 경우 */}
+        <Rejection onClose={() => setModalVisible(false)} />
+      </Modal>
+    </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/components/Home/Quotation/Rejection.tsx

@@ -0,0 +1,57 @@
+import { FlatList, SafeAreaView, TouchableOpacity, View } from 'react-native';
+import styled from 'styled-components/native';
+import { getStatusBarHeight } from 'react-native-safearea-height';
+import { Body14M, Body14R, Subtitle16B, Subtitle18B, Subtitle18M, Title20B } from '../../../styles/GlobalText';
+import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
+import Arrow from '../../../assets/common/Arrow.svg';
+import InputBox from '../../../common/InputBox';
+import BottomButton from '../../../common/BottomButton';
+
+interface RejectionProps {
+  onClose: () => void;
+}
+
+const statusBarHeight = getStatusBarHeight(true);
+
+const Rejection = ({ onClose }: RejectionProps) => {
+  return (
+    <SafeAreaView>
+      <BackButton onPress={onClose}>
+        <Arrow color={BLACK} />
+      </BackButton>
+      <Title20B style={{textAlign: 'center'}}>견적서 거절 사유</Title20B>
+      <View style={{padding: 20, marginVertical: 30, alignItems: 'center'}}>
+        <Subtitle18B>견적서를 거절한 이유가 무엇인가요?</Subtitle18B>
+        <Body14R>다음 견적서를 작성할 때 많은 도움이 돼요.</Body14R>
+        <FlatList
+          data={[...new Array(6).keys()]}
+          style={{height: 400}}
+          renderItem={({item}: any) => {
+            return (
+              <TouchableOpacity style={{borderRadius: 8, borderColor: PURPLE, borderWidth: 1, backgroundColor: 'white', paddingHorizontal: 55, paddingVertical: 25, marginVertical: 5}}>
+                <Subtitle18M style={{color: PURPLE}}>요청하신 리폼을 할 수 없는 의류</Subtitle18M>
+              </TouchableOpacity>
+            )
+          }}
+         />
+      </View>
+      <View style={{position: 'absolute', width: '100%', bottom: -200, borderTopWidth: 8, borderColor: '#EAEAEA', zIndex: 1, backgroundColor: 'white', paddingHorizontal: 20}}>
+        <Body14R style={{textAlign: 'center', marginVertical: 10}}>추가적인 의견이나 거절 사유가 있다면 말씀해주세요.</Body14R>
+        <InputBox placeholder='입력해 주세요' long />
+        <View style={{paddingHorizontal: 30, paddingVertical: 20}}>
+          <BottomButton value='거절 사유 보내기' pressed={false} onPress={() => {}} />
+        </View>
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const BackButton = styled.TouchableOpacity`
+  padding: 10px;
+  position: absolute;
+  left: 0px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+
+export default Rejection;

src/components/Home/Quotation/SentQuotation.tsx

@@ -0,0 +1,23 @@
+import { SafeAreaView, Image, View, TouchableOpacity } from "react-native"
+import { Body14M, Body16B, Subtitle16B, Title20B } from "../../../styles/GlobalText"
+import Arrow from '../../../assets/common/Arrow.svg';
+import { GREEN } from "../../../styles/GlobalColor";
+
+const SentQuotation = () => {
+  return (
+    <SafeAreaView style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
+      <Title20B style={{marginBottom: 10, textAlign: 'center'}}>리폼러에게 견적서를{'\n'}전달했어요!</Title20B>
+      <Image source={require('../../../assets/rocket.png')} style={{width: 230, height: 230}} />
+      <Subtitle16B style={{textAlign: 'center', marginTop: 10}}>리폼러가 견적서를 확인 후,{'\n'}카톡으로 연락할거에요~{'\n'}느낌의 안내문</Subtitle16B>
+      <TouchableOpacity style={{flexDirection: 'row', borderRadius: 5, backgroundColor: GREEN, marginTop: 100, width: '90%', alignItems: 'center', justifyContent: 'space-between', paddingRight: 20}}>
+        <View style={{padding: 16}}>
+          <Body14M>이 마켓이 마음에 들었나요?</Body14M>
+          <Body16B>SDP 마켓의 다른 서비스 보러가기</Body16B>
+        </View>
+        <Arrow color={'black'} transform={[{ rotate: '180deg' }]} />
+      </TouchableOpacity>
+    </SafeAreaView>
+  )
+}
+
+export default SentQuotation;