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')}>
+ 상품등록
+
);
};