From f54e228793e5dc2218f41cfde9e6db89e13f9e4c Mon Sep 17 00:00:00 2001 From: YoungSik <126939845+youngsikkk@users.noreply.github.com> Date: Sat, 3 Feb 2024 00:58:05 +0900 Subject: [PATCH] sdp-tech#14 feat : service registration page (#29) --- src/common/Hashtag.tsx | 10 +- .../Home/Market/ServiceRegistration.tsx | 259 ++++++++++++++++++ src/pages/Home.tsx | 6 + 3 files changed, 269 insertions(+), 6 deletions(-) create mode 100644 src/components/Home/Market/ServiceRegistration.tsx diff --git a/src/common/Hashtag.tsx b/src/common/Hashtag.tsx index cd13734..d25c63d 100644 --- a/src/common/Hashtag.tsx +++ b/src/common/Hashtag.tsx @@ -1,8 +1,8 @@ import { useState } from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import styled from 'styled-components/native'; -import { Filter14M } from '../styles/GlobalText'; -import { PURPLE } from '../styles/GlobalColor'; +import { Filter14M, Subtitle16B } from '../styles/GlobalText'; +import { BLACK, BLACK2, GRAY, PURPLE } from '../styles/GlobalColor'; interface HashtagProps { value: string; @@ -14,7 +14,7 @@ interface HashtagProps { const Hashtag = ({value, pressable, pressed, onPress} : HashtagProps) => { return ( - {value} + {value} ) } @@ -26,9 +26,7 @@ const HashtagContainer = styled.TouchableOpacity<{ pressed: boolean }>` align-items: center; padding: 4px 16px; margin: 5px; - background: ${(props: { pressed: boolean }) => props.pressed ? 'white' : PURPLE}; - border-color: ${PURPLE}; - border-width: 1px; + background: ${(props: { pressed: boolean }) => props.pressed ? 'white' : "#dcdcdc"}; ` export default Hashtag; \ No newline at end of file diff --git a/src/components/Home/Market/ServiceRegistration.tsx b/src/components/Home/Market/ServiceRegistration.tsx new file mode 100644 index 0000000..71ff7b9 --- /dev/null +++ b/src/components/Home/Market/ServiceRegistration.tsx @@ -0,0 +1,259 @@ +import { StackScreenProps } from "@react-navigation/stack" +import { HomeStackParams } from "../../../pages/Home" +import { ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native" +import Arrow from '../../../assets/common/Arrow.svg'; +import styled from "styled-components/native"; +import { getStatusBarHeight } from "react-native-safearea-height"; +import { Body14B, Body14M, Body16B, Subtitle16B, Subtitle16M, Subtitle18M } from "../../../styles/GlobalText"; +import { LIGHTGRAY } from "../../../styles/GlobalColor"; +import InputBox from "../../../common/InputBox"; +import { useState } from "react"; +import Filter from "../../../common/Filter"; +import Hashtag from "../../../common/Hashtag"; + +const statusBarHeight = getStatusBarHeight(true); + +const BackButton = styled.TouchableOpacity` + padding: 10px; + position: absolute; + left: 0px; + top: ${statusBarHeight-10}px; + z-index: 1; +` +const StyledButton = styled.TouchableOpacity` + display: flex; + flex-direction: row; + align-items: center; + padding:12px; + padding-horizontal: 16px; + background: ${LIGHTGRAY}; + border-radius: 6px; + margin-bottom: 20px; + margin-top: 10px; + border: 1px solid #000; +` + +const ButtonSection = styled.View` + display: flex; + flex-direction: row; + justify-content:space-around; +` + +const UploadSection = styled.View` + display: flex; + flex-direction: row; + flex:1; + justify-content:center; + align-items:center; + width: 100%; + height: 350px; + background-color: gray; +` + +const UploadButton = styled.TouchableOpacity` + background-color: white; + padding: 8px; + flex: 0.35; + align-items: center; + border-radius: 20px; +` + +const FooterButton = styled.TouchableOpacity` + display: flex; + flex-direction: row; + align-items: center; + padding:12px; + margin-bottom: 20px; + margin-top: 10px; + border: 1px solid #000; + justify-content: center; +` + +const FillerSection = styled.View` + display: flex; + flex-direction: row; + flex:1; + justify-content:center; + align-items:center; + height: 250px; + background-color: #dcdcdc; + margin:10px; + border-radius: 20px; +` + +const TagContainer = styled.View` + padding: 20px 15px; +` + +const TagBox = styled.View` + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; +` + +interface HashtagSectionProps { + items: any[]; +} + +const FilterSection = ({ items }: HashtagSectionProps) => { + return ( + + + + + {items.map((item, index) => ( + {}} /> + ))} + + + ) +} + + +const RegistrationPage = ({ navigation, route }: StackScreenProps) => { + const [text, setText] = useState(''); + const [name, setName] = useState(''); + const [hashTag, setHashTag] = useState(''); + const [price, setPrice] = useState(''); + const [detail, setDetail] = useState(''); + const [addPrice, setAddprice] = useState(0); + const [notice, setNotice] = useState(''); + const tag = ["#가방", "#어쩌구저쩌구", "#가방", "#가방", "#가방"] + const registList = [{ + option: "디테일 어쩌구", + price: `${price}`+`${addPrice}`, + detail: "상세설명" + }, { + option: "디테일 어쩌구", + price: `${price}`+`${addPrice}`, + detail: "상세설명" + } ] + return ( + + + navigation.goBack()}> + + + 서비스 등록 + + + + 정보 불러오기 + + + 임시저장 + + + {/* 사진 업로드하는 컴포넌트 만들 것 */} + + + 이미지 등록 + + + + 상품 이름 + + + + + + 해시태그 입력 + + + + + + + 가격 + + + + + + 상세 설명 + 필터 설정 + + + 설정하기 + + + + 제작기간 + + + + + 상품 상세 + + + 작성하기 + + + + + 가격 책정 기준 + 설명글 (특별한 기술이나 소재가 사용된 부분을 설명해주세요 + + + + 디테일 + + + + 금액 + + + + + 상세 설명 + 이미지 1장 첨부 가능합니다. + + + + + 📷 + 등록하기 + + + + + + 등록된 목록 + + {registList.map((item, idx) => ( + + + {idx+1}. {item.option} + {item.price}원 + + + {item.detail} + + + 🗑️ + 수정하기 + + + ))} + + + + 주문 시 유의사항 + + + + + + + 임시저장 + + + 등록하기 + + + + ) +} + +export default RegistrationPage \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 1757510..4f1fde4 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 DetailPageScreen from '../components/Home/Market/DetailPage'; import QuotationForm from '../components/Home/Quotation/QuotationForm'; +import RegistrationPage from '../components/Home/Market/ServiceRegistration'; export type HomeStackParams = { Home: undefined; @@ -22,6 +23,7 @@ export type HomeStackParams = { id?: number; }; Quotation: undefined; + RegistrationPage: undefined; }; const HomeStack = createStackNavigator(); @@ -39,6 +41,7 @@ const HomeScreen = ({ + ); }; @@ -59,6 +62,9 @@ const HomeMainScreen = ({ navigation.navigate('Quotation')}> 견적서 + navigation.navigate('RegistrationPage')}> + 상품등록 + ); };