#14 feat : detail page comment (#21)

sdp-tech · Jan 29, 2024 · bf4e8fd · bf4e8fd
1 parent 4b1b96b
commit bf4e8fd
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git a/src/components/Home/Market/DetailBox.tsx b/src/components/Home/Market/DetailBox.tsx
@@ -21,7 +21,7 @@ const DetailBoxPage = () => {
         return (
           <InfoSection>
             <Body16B>{item.label}</Body16B>
-            <Body14R style={{marginLeft:10}}>{item.data}</Body14R>
+            <Body14R>{item.data}</Body14R>
           </InfoSection>
         )
       } }

diff --git a/src/components/Home/Market/DetailComment.tsx b/src/components/Home/Market/DetailComment.tsx
@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import { View, SafeAreaView, FlatList, Text, ScrollView } from 'react-native';
+import styled from 'styled-components/native';
+import { Body14R, Body16B } from '../../../styles/GlobalText';
+
+
+const DetailComment = () => {
+  const data = [
+    { nickname: '닉네임', date: '2024-01-06', score:'⭐⭐⭐⭐⭐', description: "후기글 어쩌고 저쩌고"},
+    { nickname: '닉네임2', date: '2024-01-06', score:'⭐⭐⭐⭐⭐', description: "후기글 어쩌고 저쩌고"},
+    { nickname: '닉네임3', date: '2024-01-06', score:'⭐⭐⭐⭐⭐', description: "후기글 어쩌고 저쩌고"},
+  ]
+
+  return (
+    <SafeAreaView>
+      <View style={{alignItems:'center', borderBottomWidth: 5, borderColor: '#DFDFDF'}}>
+        <Body16B>후기 ({data.length})</Body16B>
+      </View>
+      <FlatList
+        data={data}
+        renderItem={({item}:any) => {
+          return (
+            <InfoSection>
+              <View style={{flexDirection: 'row', justifyContent:'space-between'}}>
+                <Body16B>{item.nickname} | {item.date}</Body16B>
+                <Body16B>{item.score}</Body16B>
+              </View>
+              <Body14R>{item.description}</Body14R>
+            </InfoSection>
+          )
+        } }
+      />
+    </SafeAreaView>
+  )
+}
+
+const InfoSection = styled.View`
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom-width: 1px;
+  border-color: #DFDFDF;
+`
+
+export default DetailComment;
diff --git a/src/components/Home/Market/DetailPage.tsx b/src/components/Home/Market/DetailPage.tsx
@@ -12,6 +12,7 @@ import OptionBox from './OptionBox';
 import CardView from '../../../common/CardView';
 import Footer from '../../../common/Footer';
 import { TabBar, TabView } from 'react-native-tab-view';
+import DetailComment from './DetailComment';
 
 const { width, height } = Dimensions.get("window");
 
@@ -74,12 +75,14 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackPa
           // />
         )}
       />
+        {/* 컴포넌트로 변경 예정 */}
         <View style={TextStyles.borderBottom}>
           <Text style={TextStyles.Title}>서비스 이름</Text>
           <Text style={TextStyles.Sub}>#키워드 #키워드 # 키워드</Text>
           <Text style={TextStyles.PriceInfo}>기본: <Text style={TextStyles.Price}>가격</Text></Text>
           <Text style={TextStyles.PriceInfo}>최대: <Text style={TextStyles.Price}>가격</Text></Text>
         </View>
+        {/* 컴포넌트로 변경 예정 */}
         <View style={{...TextStyles.borderBottom, justifyContent: 'space-between'}}>
           <View style={{ padding:15, flexDirection:'row'}}>
             <View style={{backgroundColor:"gray", width:50, height:50, borderRadius:25}}></View>
@@ -115,9 +118,7 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackPa
           />
         )}
       />
-        <View style={{...TextStyles.borderBottom,borderBottomWidth:1, alignItems: 'center'}}>
-          <Text style={{...TextStyles.Price}}>후기(3)</Text>
-        </View>
+      <DetailComment/>
       <Footer/>
     </SafeAreaView>
   )