From 4b1b96bc6234cb37cb3bd3d24481692834015e0e Mon Sep 17 00:00:00 2001
From: YoungSik <126939845+youngsikkk@users.noreply.github.com>
Date: Mon, 29 Jan 2024 09:40:33 +0900
Subject: [PATCH] sdp-tech#14 feat : product detail page with tabview (#20)

---
 src/components/Home/Market/DetailBox.tsx  |  41 +++++++
 src/components/Home/Market/DetailPage.tsx | 136 ++++++++++------------
 src/components/Home/Market/OptionBox.tsx  |  40 +++++++
 3 files changed, 143 insertions(+), 74 deletions(-)
 create mode 100644 src/components/Home/Market/DetailBox.tsx
 create mode 100644 src/components/Home/Market/OptionBox.tsx

diff --git a/src/components/Home/Market/DetailBox.tsx b/src/components/Home/Market/DetailBox.tsx
new file mode 100644
index 0000000..0f177bd
--- /dev/null
+++ b/src/components/Home/Market/DetailBox.tsx
@@ -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;
\ No newline at end of file
diff --git a/src/components/Home/Market/DetailPage.tsx b/src/components/Home/Market/DetailPage.tsx
index b3a2bc9..a0525ff 100644
--- a/src/components/Home/Market/DetailPage.tsx
+++ b/src/components/Home/Market/DetailPage.tsx
@@ -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';
@@ -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;
 }
@@ -53,22 +33,25 @@ 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();
@@ -76,22 +59,21 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackPa
           <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>
@@ -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>
   )
 }
diff --git a/src/components/Home/Market/OptionBox.tsx b/src/components/Home/Market/OptionBox.tsx
new file mode 100644
index 0000000..5d52d62
--- /dev/null
+++ b/src/components/Home/Market/OptionBox.tsx
@@ -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;
\ No newline at end of file