From 4b02f00c5d35a3ff6e96c211be9b141a43f9d493 Mon Sep 17 00:00:00 2001
From: Seojin Kwak <81500249+SJ-Kwak@users.noreply.github.com>
Date: Fri, 2 Feb 2024 00:04:31 +0100
Subject: [PATCH] sdp-tech#25 feat: add quotation form
---
src/assets/common/Check.svg | 3 +
src/assets/common/Photo.svg | 4 +
src/common/CheckBox.tsx | 35 +++++
src/common/Filter.tsx | 31 ++++
src/common/InputBox.tsx | 33 ++++
.../Home/Quotation/QuotationForm.tsx | 146 ++++++++++++++++++
.../Home/Quotation/QuotationPage.tsx | 0
src/pages/Home.tsx | 6 +
8 files changed, 258 insertions(+)
create mode 100644 src/assets/common/Check.svg
create mode 100644 src/assets/common/Photo.svg
create mode 100644 src/common/CheckBox.tsx
create mode 100644 src/common/Filter.tsx
create mode 100644 src/common/InputBox.tsx
create mode 100644 src/components/Home/Quotation/QuotationForm.tsx
create mode 100644 src/components/Home/Quotation/QuotationPage.tsx
diff --git a/src/assets/common/Check.svg b/src/assets/common/Check.svg
new file mode 100644
index 0000000..a2db59b
--- /dev/null
+++ b/src/assets/common/Check.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/common/Photo.svg b/src/assets/common/Photo.svg
new file mode 100644
index 0000000..11ca7b4
--- /dev/null
+++ b/src/assets/common/Photo.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/src/common/CheckBox.tsx b/src/common/CheckBox.tsx
new file mode 100644
index 0000000..3c6c08c
--- /dev/null
+++ b/src/common/CheckBox.tsx
@@ -0,0 +1,35 @@
+import { View, TouchableOpacity, ViewStyle } from 'react-native';
+import Check from '../assets/common/Check.svg';
+import { PURPLE } from '../styles/GlobalColor';
+import { Body14M } from '../styles/GlobalText';
+
+interface CheckBoxProps {
+ pressed: boolean;
+ onPress: () => void;
+ text: string;
+ style?: ViewStyle
+}
+
+const CheckBox = ({ pressed, onPress, text, style }: CheckBoxProps) => {
+ return (
+
+
+
+
+ {text}
+
+ )
+}
+
+export default CheckBox;
\ No newline at end of file
diff --git a/src/common/Filter.tsx b/src/common/Filter.tsx
new file mode 100644
index 0000000..a3de7f4
--- /dev/null
+++ b/src/common/Filter.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components/native';
+import { BLACK, PURPLE } from '../styles/GlobalColor';
+import { Filter14M } from '../styles/GlobalText';
+
+interface FilterProps {
+ value: string;
+ pressed: boolean;
+ onPress: () => void;
+}
+
+const Filter = ({ value, pressed, onPress }: FilterProps) => {
+ return (
+
+ {value}
+
+ )
+}
+
+const FilterContainer = styled.TouchableOpacity<{ pressed: boolean }>`
+ display: flex;
+ padding: 6px 16px;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 8px;
+ margin-right: 10px;
+ border-radius: 12px;
+ border: 1px solid ${PURPLE};
+ background: ${(props: { pressed: boolean; }) => props.pressed ? PURPLE : 'white'};
+`
+
+export default Filter;
\ No newline at end of file
diff --git a/src/common/InputBox.tsx b/src/common/InputBox.tsx
new file mode 100644
index 0000000..4c51a54
--- /dev/null
+++ b/src/common/InputBox.tsx
@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction } from 'react';
+import { TextInput } from 'react-native';
+import { BLACK2 } from '../styles/GlobalColor';
+
+interface InputBoxProps {
+ value: string;
+ setValue: Dispatch>;
+ placeholder: string;
+ long?: boolean;
+}
+
+const InputBox = ({ value, setValue, placeholder, long }: InputBoxProps) => {
+ return (
+
+ )
+}
+
+export default InputBox;
\ No newline at end of file
diff --git a/src/components/Home/Quotation/QuotationForm.tsx b/src/components/Home/Quotation/QuotationForm.tsx
new file mode 100644
index 0000000..76ed82d
--- /dev/null
+++ b/src/components/Home/Quotation/QuotationForm.tsx
@@ -0,0 +1,146 @@
+import { SetStateAction, useState, Dispatch } from 'react';
+import { ScrollView, View, Text, TouchableOpacity, ImageBackground } 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';
+import { getStatusBarHeight } from 'react-native-safearea-height';
+
+import Filter from '../../../common/Filter';
+import InputBox from '../../../common/InputBox';
+import BottomButton from '../../../common/BottomButton';
+import CheckBox from '../../../common/CheckBox';
+
+import { StackScreenProps } from '@react-navigation/stack';
+import { HomeStackParams } from '../../../pages/Home';
+
+import Arrow from '../../../assets/common/Arrow.svg';
+import Search from '../../../assets/common/Search.svg';
+import Photo from '../../../assets/common/Photo.svg';
+
+const statusBarHeight = getStatusBarHeight(true);
+
+interface FilterSectionProps {
+ label: string;
+ items: any[];
+}
+
+const FilterSection = ({ label, items }: FilterSectionProps) => {
+ return (
+
+
+ {label}
+ • 중복 가능
+
+
+ {items.map((item, index) => (
+ {}} />
+ ))}
+
+
+ )
+}
+
+const QuotationForm = ({ navigation, route }: StackScreenProps) => {
+ const materials = ['폴리에스테르', '면', '스웨이드', '울', '캐시미어', '가죽', '데님', '추가 요청사항에 기재']
+ const sizes = ['XS(85)', 'S(90)', 'M(95)', 'L(100)', 'XL(105)', 'XXL(110)']
+ const options = ['프릴 추가', '단추 추가', '지퍼 추가', '주머니 추가']
+ const [text, setText] = useState('');
+
+ return (
+
+ navigation.goBack()}>
+
+
+
+
+
+
+
+
+ 마켓명 (SDP의 상점)
+ 리폼러 닉네임 (전성식탁)
+ 마켓 소개글
+
+
+
+ 견적서 작성
+
+
+ 작업할 사진 첨부
+
+
+
+
+
+
+
+
+ 추가 요청사항
+
+
+ 참고 사진 첨부
+
+
+
+
+ 포트폴리오 사용 가능 여부
+ {}} text='리폼 제품이 서비스 내의 포트폴리오에 사용되는 것에 동의합니다.' />
+
+
+ 거래 방식 선택
+
+ {['비대면', '대면'].map((item, index) => (
+ {}} />
+ ))}
+
+
+
+ {}} />
+
+
+ )
+}
+
+const BackButton = styled.TouchableOpacity`
+ padding: 10px;
+ position: absolute;
+ left: 0px;
+ top: ${statusBarHeight-10}px;
+ z-index: 1;
+`
+
+const SearchButton = styled.TouchableOpacity`
+ padding: 10px;
+ position: absolute;
+ right: 7px;
+ top: ${statusBarHeight-10}px;
+ z-index: 1;
+`
+
+const PhotoButton = styled.TouchableOpacity`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding-horizontal: 16px;
+ background: ${LIGHTGRAY};
+ border-radius: 6px;
+ margin-bottom: 20px;
+`
+
+const FilterContainer = styled.View`
+ padding: 20px 15px;
+ border-bottom-width: 0.5px;
+ border-color: #D9D9D9;
+`
+
+const FilterBox = styled.View`
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+`
+
+export default QuotationForm;
\ No newline at end of file
diff --git a/src/components/Home/Quotation/QuotationPage.tsx b/src/components/Home/Quotation/QuotationPage.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 0a8ced7..1757510 100644
--- a/src/pages/Home.tsx
+++ b/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 DetailPageScreen from '../components/Home/Market/DetailPage';
+import QuotationForm from '../components/Home/Quotation/QuotationForm';
export type HomeStackParams = {
Home: undefined;
@@ -20,6 +21,7 @@ export type HomeStackParams = {
DetailPage: {
id?: number;
};
+ Quotation: undefined;
};
const HomeStack = createStackNavigator();
@@ -36,6 +38,7 @@ const HomeScreen = ({
+
);
};
@@ -53,6 +56,9 @@ const HomeMainScreen = ({
navigation.navigate('Market')}>
마켓
+ navigation.navigate('Quotation')}>
+ 견적서
+
);
};