Skip to content

Commit

Permalink
#14 feat : product detail page with tabview (#20)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youngsikkk
youngsikkk authored Jan 29, 2024
1 parent 5807566 commit 4b1b96b
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 74 deletions.
41 changes: 41 additions & 0 deletions src/components/Home/Market/DetailBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { useState, useEffect } from 'react';
import { View, SafeAreaView, FlatList, Text } from 'react-native';
import styled from 'styled-components/native';
import { Body14R, Body16B } from '../../../styles/GlobalText';


const DetailBoxPage = () => {
const data = [
{ label: '카테고리', data: '아우터'},
{ label: '재질', data: '데님'},
{ label: '스타일', data: '빈티지'},
{ label: '핏', data: '노멀'},
{ label: '제작 기간', data: '3주'},
{ label: '서비스 상세', data: '자유 양식'},
]

return (
<FlatList
data={data}
renderItem={({item}:any) => {
return (
<InfoSection>
<Body16B>{item.label}</Body16B>
<Body14R style={{marginLeft:10}}>{item.data}</Body14R>
</InfoSection>
)
} }
/>
)
}

const InfoSection = styled.View`
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 16px;
border-bottom-width: 1px;
border-color: #DFDFDF;
`

export default DetailBoxPage;
136 changes: 62 additions & 74 deletions src/components/Home/Market/DetailPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dimensions, SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View, StyleSheet } from 'react-native';
import { Dimensions, SafeAreaView, ScrollView, Text, TouchableOpacity, View, StyleSheet, useWindowDimensions } from 'react-native';
import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
import { HomeStackParams } from '../../../pages/Home';
import Arrow from '../../../assets/common/Arrow.svg';
Expand All @@ -7,34 +7,14 @@ import Search from '../../../assets/common/Search.svg';
import styled from "styled-components/native";
import { useRef, useState } from 'react';
import CustomHeader from '../../../common/CustomHeader';
import DetailBox from './DetailBox';
import OptionBox from './OptionBox';
import CardView from '../../../common/CardView';
import Footer from '../../../common/Footer';
import { TabBar, TabView } from 'react-native-tab-view';

const { width, height } = Dimensions.get("window");

const SearchWrapper = styled.View`
display: flex;
width: 80%;
margin: 0 auto;
height: 36px;
flex-direction: row;
border-radius: 12px;
`;
const StyledInput = styled.TextInput`
width: 100%;
padding: 0 5%;
font-family: Pretendard Variable;
`;
const ResetButton = styled.TouchableOpacity`
position: absolute;
height: 100%;
right: 0px;
top: 0px;
width: 15%;
display: flex;
align-items: center;
justify-content: center;
`;

export type DetailPageStackParams = {
DetailPage: undefined;
}
Expand All @@ -53,45 +33,47 @@ const DetailPageScreen = ({ navigation, route }: StackScreenProps<HomeStackParam
};

const DetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackParams, 'DetailPage'>) => {
const [search, setSearch] = useState<string>("");
const [isInfo, setIsInfo] = useState<boolean>(true);
const inputRef = useRef<TextInput>(null);
const layout = useWindowDimensions();
const [index, setIndex] = useState<number>(0);
const [data, setData] = useState([]);
const [routes] = useState([
{ key: 'detail', title: '상세설명'},
{ key: 'option', title: '옵션 및 유의사항' }
]);

const isDetail = () => setIsInfo(true);
const isOption = () => setIsInfo(false);
const renderScene = ({ route }: any) => {
switch (route.key) {
case 'detail':
return <DetailBox/>;
case 'option':
return <OptionBox />;
}
}

return (
<SafeAreaView>
<CustomHeader
onSearch={() => {
// navigation.navigate("Search");
}}
onAlarm={() => {}}
/>
<SafeAreaView style={{flex:1}}>
<View style={{flexDirection: "row", height: 50, alignItems: 'center'}}>
<TouchableOpacity onPress={() => {
navigation.goBack();
}}>
<Arrow/>
</TouchableOpacity>
</View>
<ScrollView>
<CardView // 데이터 들어오면 렌더링
gap={0}
offset={0}
data={data}
pageWidth={width}
dot={true}
renderItem={({ item }: any) => (
<View style={{width: width, height: height * 0.4}}><UnFilledLike color={'black'}/></View>
// <CurationItemCard
// rep={true}
// data={item}
// style={{ width: width, height: height * 0.4 }}
// />
)}
/>
<CardView // 데이터 들어오면 렌더링
gap={0}
offset={0}
data={data}
pageWidth={width}
dot={true}
renderItem={({ item }: any) => (
<View style={{width: width, height: height * 0.4}}><UnFilledLike color={'black'}/></View>
// <CurationItemCard
// rep={true}
// data={item}
// style={{ width: width, height: height * 0.4 }}
// />
)}
/>
<View style={TextStyles.borderBottom}>
<Text style={TextStyles.Title}>서비스 이름</Text>
<Text style={TextStyles.Sub}>#키워드 #키워드 # 키워드</Text>
Expand All @@ -107,30 +89,36 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackPa
</View>
</View>
</View>
<View style={{flexDirection:'row', justifyContent:"space-around", borderBottomWidth:1, borderBottomColor:"black"}}>
<TouchableOpacity onPress={isDetail}><Text style={{...TextStyles.Price, color: isInfo ? "black":"#dcdcdc", borderBottomWidth: isInfo ? 3:0}}>상세설명</Text></TouchableOpacity>
<TouchableOpacity onPress={isOption}><Text style={{...TextStyles.Price, color: isInfo ? "#dcdcdc" : "black", borderBottomWidth: isInfo ? 0:3}}>옵션 및 유의사항</Text></TouchableOpacity>
</View>
<View style={TextStyles.borderBottom}>
<View style={{flexDirection:'row'}}>
<Text style={TextStyles.Price}>제작 기간</Text>
<Text style={TextStyles.PriceInfo}>3주</Text>
</View>
<Text style={TextStyles.Price}>서비스 상세</Text>
<View style={{backgroundColor:"gray", height:150, width:150}}></View>
</View>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width, height: layout.height}}
renderTabBar={props => (
<TabBar
{...props}
indicatorContainerStyle={{
borderBottomColor: '#DFDFDF',
borderBottomWidth: 1
}}
indicatorStyle={{
backgroundColor: '#BDBDBD',
height: 2
}}
style={{
backgroundColor: 'white',
}}
labelStyle={{
color: 'black'
}}
pressColor='black'
/>
)}
/>
<View style={{...TextStyles.borderBottom,borderBottomWidth:1, alignItems: 'center'}}>
<Text style={{...TextStyles.Price}}>후기(3)</Text>
</View>
<View style={{ height:50, display: 'flex', flexDirection:"row", justifyContent:"space-around", alignItems:'center'}}>
<UnFilledLike color={'black'}/>
<TouchableOpacity style={{backgroundColor:"#000", flex:0.5, height:30, justifyContent:"center"}}>
<Text style={{color: '#FFF', fontWeight:"bold", textAlign:'center' }}>
견적서 보내기
</Text>
</TouchableOpacity>
</View>
</ScrollView>
<Footer/>
</SafeAreaView>
)
}
Expand Down
40 changes: 40 additions & 0 deletions src/components/Home/Market/OptionBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useState, useEffect } from 'react';
import { View, SafeAreaView, FlatList, Text } from 'react-native';
import styled from 'styled-components/native';
import { Body14R, Body16B } from '../../../styles/GlobalText';


const OptionPage = () => {
const data = [
{ label: '옵션명1',price:'1000원', data: '상세설명, 사진첨부 가능'},
{ label: '옵션명2',price:'2000원', data: '상세설명, 사진첨부 가능'}
]

return (
<View>
<Text style={{padding:16, fontWeight:'700', color: 'black'}}>옵션별 추가 금액</Text>
<FlatList
data={data}
renderItem={({item}:any) => {
return (
<InfoSection>
<Body16B>{item.label}</Body16B>
<Body14R style={{textAlign: 'right'}}>{item.price}</Body14R>
<Body14R style={{textAlign: 'center'}}>{item.data}</Body14R>
</InfoSection>
)
} }
/>
<Text>주문 시 유의사항</Text>
</View>
)
}

const InfoSection = styled.View`
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 16px;
`

export default OptionPage;

0 comments on commit 4b1b96b

Please sign in to comment.