feat: 리뷰조회 및 작성

#68
EFUB-ZEJE · Sep 12, 2022 · 6548bc8 · 6548bc8
1 parent 96532f0
commit 6548bc8
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 10 deletions.
diff --git a/src/components/Around/Reviews.js b/src/components/Around/Reviews.js
@@ -1,13 +1,20 @@
 import {View, Text} from 'react-native';
 import React, {useState} from 'react';
 import styled from 'styled-components';
-import {Subhead2, Caption} from '../../styles/font';
+import {Subhead2, Caption, Body2} from '../../styles/font';
 import {palette} from '../../styles/theme';
 import SizedBox from '../common/SizedBox';
 import Profile from '../home/MyPage/Profile';
 import {Rating} from 'react-native-ratings';
 
 export default function Reviews({reviews}) {
+  if (reviews.length == 0) {
+    return (
+      <View style={{marginLeft: 10}}>
+        <Body2 color={palette.gray350}>아직 작성된 후기가 없습니다.</Body2>
+      </View>
+    );
+  }
   return (
     <>
       {reviews.map(review => {
@@ -19,6 +26,7 @@ export default function Reviews({reviews}) {
 
         return (
           <Review
+            key={review.reviewId}
             userId={review.userId}
             createdDate={deconstructed_date}
             content={review.content}
@@ -38,7 +46,7 @@ function Review({createdDate, userId, content, image, score}) {
 
   return (
     <Container>
-      <Profile uri={image} type="view" size="xs" />
+      <Profile uri={null} type="view" size="xs" />
       <SizedBox width={8} />
       <SubContainer>
         <RatingContainer>

diff --git a/src/screens/Around/TourDetailScreen.js b/src/screens/Around/TourDetailScreen.js
@@ -2,9 +2,9 @@ import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
 import {Text, TouchableOpacity} from 'react-native';
 import font from '../../styles/font.js';
-import {theme} from '../../styles/theme.js';
+import {palette, theme} from '../../styles/theme.js';
 import Reviews from '../../components/Around/Reviews.js';
-import {Subhead3} from '../../styles/font.js';
+import {Subhead3, Caption} from '../../styles/font.js';
 import ModalButton from '../../components/home/ModalButton.js';
 
 import {
@@ -83,6 +83,16 @@ export default function TourDetailScreen({route, navigation}) {
         console.error('TourList error', err);
       });
   }, [spotId]);
+
+  useEffect(() => {
+    AroundService.getReviews(spotId).then(res => {
+      if (res.status == 200) {
+        setReviews(res.data);
+      } else {
+        console.log('리뷰를 가져오지 못했습니다');
+      }
+    });
+  });
   return (
     <>
       <ScreenHeader
@@ -103,14 +113,18 @@ export default function TourDetailScreen({route, navigation}) {
         <font.title.Subhead3>{data.name}</font.title.Subhead3>
         <SizedBox height={4} />
         <font.body.Body1>{data.location}</font.body.Body1>
+        <SizedBox height={16} />
+        <Caption color={palette.gray400}>{data.description}</Caption>
+        <SizedBox height={24} />
 
-        <SizedBox height={48} />
         <ReviewContainer>
           <Subhead3>후기 </Subhead3>
-          <TouchableOpacity onPress={() => navigation.navigate('WriteReview')}>
+          <TouchableOpacity
+            onPress={() => navigation.navigate('WriteReview', data.spotId)}>
             <SvgIcon name="Write" />
           </TouchableOpacity>
         </ReviewContainer>
+
         <Reviews reviews={reviews} />
       </ScreenContainer>
     </>

diff --git a/src/screens/Around/WriteReviewScreen.js b/src/screens/Around/WriteReviewScreen.js
@@ -19,9 +19,45 @@ import ModalButton from '../../components/home/ModalButton';
 import {CommonBanner} from '../../components';
 import {Alert} from 'react-native';
 import {Rating} from 'react-native-ratings';
+import {AroundService} from '../../services/AroundService';
+export default function WriteReviewScreen({navigation, route}) {
+  const spotId = route.params;
+  const [ratingCount, setRatingCount] = useState(3);
+  const [content, setContent] = useState('');
 
-export default function WriteReviewScreen({navigation}) {
-  const [ratingCount, setRatingCount] = useState(0);
+  const _onSubmitReview = () => {
+    var body = new FormData();
+    body.append('spotId', spotId);
+    body.append('score', ratingCount);
+    body.append('content', content);
+    body.append('image', null);
+
+    AroundService.writeReview(body)
+      .then(res => {
+        console.log(res.status);
+        if (res.status == 201) {
+          Alert.alert('알림', '후기가 등록완료되었습니다 :)', [
+            {
+              text: '확인',
+              style: 'default',
+            },
+          ]);
+          setContent('');
+        } else {
+          Alert.alert(
+            '알림',
+            '후기가 등록에 실패했습니다 :( 다시 시도해주세요! ',
+            [
+              {
+                text: '확인',
+                style: 'default',
+              },
+            ],
+          );
+        }
+      })
+      .catch(err => console.log(err));
+  };
   return (
     <>
       <ScreenHeader
@@ -37,6 +73,7 @@ export default function WriteReviewScreen({navigation}) {
             onFinishRating={score => setRatingCount(score)}
             style={{paddingVertical: 10, margin: 'auto'}}
             imageSize={30}
+            startingValue={3}
           />
           <Caption color={palette.gray600}>
             별표를 스와이프하여 평점을 매겨주세요 :)
@@ -50,11 +87,14 @@ export default function WriteReviewScreen({navigation}) {
           placeholderTextColor={palette.gray350}
           textAlignVertical="top"
           multiline={true}
+          value={content}
+          onChangeText={text => setContent(text)}
           numberOfLines={9}
           maxLength={300}
         />
+
         <SizedBox height={16} />
-        <ModalButton text={'제출하기'} onPress={() => console.log('제출')} />
+        <ModalButton text={'제출하기'} onPress={_onSubmitReview} />
       </ScreenContainer>
     </>
   );
@@ -70,7 +110,7 @@ const TextInput = css`
   color: ${palette.gray350};
   background-color: ${theme.colors.search};
   border-radius: 10px;
-  line-height: 10px;
+  line-height: 18px;
   // margin-top: 8px;
 `;
 const BodyInput = styled.TextInput`

diff --git a/src/services/AroundService.js b/src/services/AroundService.js
@@ -36,4 +36,15 @@ export const AroundService = {
         headers: {'X-AUTH-TOKEN': await getData(ACCESS_TOKEN)},
       },
     ),
+  writeReview: async body =>
+    API.post('/reviews', body, {
+      headers: {
+        'X-AUTH-TOKEN': await getData(ACCESS_TOKEN),
+        'content-type': 'multipart/form-data',
+      },
+    }),
+  getReviews: async spotId =>
+    API.get(`/reviews/spots/${spotId}`, {
+      headers: {'X-AUTH-TOKEN': await getData(ACCESS_TOKEN)},
+    }),
 };