diff --git a/src/assets/rocket.png b/src/assets/rocket.png new file mode 100644 index 0000000..d92ee0c Binary files /dev/null and b/src/assets/rocket.png differ diff --git a/src/components/Home/Quotation/InputInfo.tsx b/src/components/Home/Quotation/InputInfo.tsx new file mode 100644 index 0000000..9d117aa --- /dev/null +++ b/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 ( + + + + + 내 정보 + + 이름 + + 연락처 + + 주소 + + + 주소 찾기 + + + + + + + + ) +} + +const BackButton = styled.TouchableOpacity` + padding: 10px; + position: absolute; + left: 0px; + top: ${statusBarHeight-10}px; + z-index: 1; +` + +export default InputInfo; \ No newline at end of file diff --git a/src/components/Home/Quotation/QuotationForm.tsx b/src/components/Home/Quotation/QuotationForm.tsx index e2d1d6c..4a0feb3 100644 --- a/src/components/Home/Quotation/QuotationForm.tsx +++ b/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); @@ -49,6 +51,7 @@ const QuotationForm = ({ navigation, route }: StackScreenProps(''); const [photos, setPhotos] = useState([]); const [refPhotos, setRefPhotos] = useState([]); + const [modalVisible, setModalVisible] = useState(false); // 한 줄에 2개씩 아이템 배치 const splitArrayIntoPairs = (arr: any[], pairSize: number) => { @@ -167,8 +170,12 @@ const QuotationForm = ({ navigation, route }: StackScreenProps - {}} /> + setModalVisible(true)} /> + + {/* 소비자일 경우 */} + setModalVisible(false)} onNavigate={() => { setModalVisible(false); navigation.navigate('QuotationPage')}} /> + ) } diff --git a/src/components/Home/Quotation/QuotationPage.tsx b/src/components/Home/Quotation/QuotationPage.tsx index c5196ff..d991311 100644 --- a/src/components/Home/Quotation/QuotationPage.tsx +++ b/src/components/Home/Quotation/QuotationPage.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { ScrollView, View, Text, TouchableOpacity, ImageBackground, Dimensions } from 'react-native'; +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'; @@ -13,11 +13,20 @@ import { Body14R, Body16M, Caption11M, Caption12M, Filter14M, Subtitle16M, Title 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) => { + const [modalVisible, setModalVisible] = useState(false); + const [finishModal, setFinishModal] = useState(false); + const showModal = () => { + setFinishModal(true); + setTimeout(() => { + setFinishModal(false); + }, 3000); + }; const quotation = [ {key: '재질', data: '니트'}, {key: '희망 사이즈', data: '여성 55'}, @@ -107,11 +116,26 @@ const QuotationPage = ({ navigation, route }: StackScreenProps {}} text='리폼 제품이 서비스 내의 포트폴리오에 사용되는 것에 동의합니다.' /> - {}} /> + navigation.navigate('SentQuotation')} + /> - {}} /> + setModalVisible(true)} /> + + {/* 리폼러일 경우 */} + + 카톡 링크를 전송했어요! + + 의뢰인이 카톡 링크를 통해{'\n'}상담을 신청할 거예요 + + + + {/* 리폼러일 경우 */} + setModalVisible(false)} /> + ) } diff --git a/src/components/Home/Quotation/Rejection.tsx b/src/components/Home/Quotation/Rejection.tsx new file mode 100644 index 0000000..4a0a719 --- /dev/null +++ b/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 ( + + + + + 견적서 거절 사유 + + 견적서를 거절한 이유가 무엇인가요? + 다음 견적서를 작성할 때 많은 도움이 돼요. + { + return ( + + 요청하신 리폼을 할 수 없는 의류 + + ) + }} + /> + + + 추가적인 의견이나 거절 사유가 있다면 말씀해주세요. + + + {}} /> + + + + ) +} + +const BackButton = styled.TouchableOpacity` + padding: 10px; + position: absolute; + left: 0px; + top: ${statusBarHeight-10}px; + z-index: 1; +` + +export default Rejection; \ No newline at end of file diff --git a/src/components/Home/Quotation/SentQuotation.tsx b/src/components/Home/Quotation/SentQuotation.tsx new file mode 100644 index 0000000..1b71348 --- /dev/null +++ b/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 ( + + 리폼러에게 견적서를{'\n'}전달했어요! + + 리폼러가 견적서를 확인 후,{'\n'}카톡으로 연락할거에요~{'\n'}느낌의 안내문 + + + 이 마켓이 마음에 들었나요? + SDP 마켓의 다른 서비스 보러가기 + + + + + ) +} + +export default SentQuotation; \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ba2d984..021dd68 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -14,6 +14,7 @@ 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 SentQuotation from '../components/Home/Quotation/SentQuotation'; import TempStorage from '../components/Home/Market/TempStorage'; import ServiceRegistrationPage from '../components/Home/Market/ServiceRegistration'; import ServiceDetailPageScreen from '../components/Home/Market/ServiceDetailPage'; @@ -31,6 +32,7 @@ export type HomeStackParams = { GoodsDetailPage: undefined; QuotationForm: undefined; QuotationPage: undefined; + SentQuotation: undefined; ServiceRegistrationPage: undefined; GoodsRegistrationPage: undefined; TempStorage: undefined; @@ -55,6 +57,7 @@ const HomeScreen = ({ +