sdp-tech#11 feat: add review item

src/common/Carousel.tsx

@@ -12,8 +12,9 @@ interface CarouselProps {
   slider?: boolean;
 }
 
+const { width } = Dimensions.get('window');
+
 const Carousel = ({ data, renderItem, dot, slider }: CarouselProps) => {
-  const { width } = Dimensions.get('window');
   const [page, setPage] = useState<number>(0);
   return (
     <>
@@ -59,7 +60,7 @@ const DotContainer = styled.View`
 
 const SliderContainer = styled.View`
   display: flex;
-  padding: 5px 20px;
+  padding: 0px 20px;
 `
 
 export default Carousel;

src/common/StarRating.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { View, FlatList, TouchableOpacity } from 'react-native';
+import StarIcon from '../assets/common/Star.svg';
+import { LIGHTGRAY, PURPLE } from '../styles/GlobalColor';
+
+interface StarProps {
+  index: number;
+  pressed: boolean;
+  onPress: (index: number) => void;
+}
+
+const Star = ({ index, pressed, onPress }: StarProps) => {
+  return (
+    <TouchableOpacity onPress={() => onPress(index)}>
+      <StarIcon color={pressed ? PURPLE : LIGHTGRAY} />
+    </TouchableOpacity>
+  );
+};
+
+const StarRating = () => {
+  const [rating, setRating] = useState<number>(0);
+
+  return (
+    <FlatList
+      horizontal
+      scrollEnabled={false}
+      data={[...new Array(5).keys()]}
+      renderItem={({ item, index }) => (
+        <Star index={index} pressed={index < rating} onPress={() => setRating(index+1)} />
+      )}
+      keyExtractor={(item, index) => index.toString()}
+    />
+  );
+};
+
+export default StarRating;

src/components/Home/components/ReviewComment.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components/native';
+import { GREEN } from '../../../styles/GlobalColor';
+import { Caption11M } from '../../../styles/GlobalText';
+
+interface ReviewCommentProps {
+  value: string;
+}
+
+const ReviewComment = ({ value }: ReviewCommentProps) => {
+  return (
+    <ReviewContainer>
+      <Caption11M>{value}</Caption11M>
+    </ReviewContainer>
+  )
+}
+
+const ReviewContainer = styled.View`
+  display: flex;
+  padding: 5px 12px;
+  margin: 0px 5px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  background: ${GREEN};
+`
+
+export default ReviewComment;

src/components/Home/components/ReviewItem.tsx

@@ -0,0 +1,76 @@
+import { View, Image, ImageBackground } from 'react-native';
+import Carousel from '../../../common/Carousel';
+import StarRating from '../../../common/StarRating';
+import ReviewComment from './ReviewComment';
+import { BLACK2, GRAY, LIGHTGRAY } from '../../../styles/GlobalColor';
+import styled from 'styled-components/native';
+import { Body14B, Body14R, Body16M, Caption11M } from '../../../styles/GlobalText';
+
+interface ReviewItemProps {
+  onPress: () => void;
+}
+
+const ReviewItem = ({ onPress }: ReviewItemProps) => {
+  // 한 줄에 2개씩 아이템 배치
+  const product = [...new Array(6).keys()]
+  const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
+    return arr.reduce((result, item, index) => {
+      if (index % pairSize === 0) {
+        result.push([]);
+      }
+      result[result.length - 1].push(item);
+      return result;
+    }, []);
+  };
+  const splitProduct = splitArrayIntoPairs(product, 2);
+  return (
+    <View style={{ borderBottomWidth: 1, borderBottomColor: LIGHTGRAY }}>
+      <ItemContainer style={{marginVertical: 10}}>
+        <View style={{width: 40, height: 40, backgroundColor: GRAY, borderRadius: 180, marginRight: 10}} />
+        <View>
+          <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
+            <Body16M>닉네임</Body16M>
+            <Caption11M style={{color: BLACK2, marginLeft: 5}}>2024-01-01</Caption11M>
+          </View>
+          <StarRating />
+        </View>
+      </ItemContainer>
+      <Carousel
+        data={splitProduct}
+        renderItem={({item}: any) => {
+          return (
+            <View style={{ flexDirection: 'row' }}>
+              {item.map((subItem: any) => (
+                <View style={{width: '50%', paddingHorizontal: 20}}>
+                  <ImageBackground
+                    key={subItem.id} 
+                    source={{uri:'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp'}}
+                    style={{width: '100%', height: 170 }}
+                  />
+                </View>
+              ))}
+            </View>
+          )
+        }}
+        slider
+      />
+      <ItemContainer style={{marginTop: 10}}>
+        <Body14B>거래</Body14B>
+        <ReviewComment value='약속을 잘 지켜요' />
+      </ItemContainer>
+      <ItemContainer style={{marginTop: 5}}>
+        <Body14B>디자인</Body14B>
+        <ReviewComment value='마무리가 꼼꼼해요' />
+      </ItemContainer>
+      <Body14R style={{paddingHorizontal: 20, paddingVertical: 10}}>후기 내용이 들어가는 칸입니다 옷이 친절하고 사장님이 멋있어요 어쩌고저쩌고</Body14R>
+    </View>
+  )
+}
+
+const ItemContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  padding: 5px 20px;
+`
+
+export default ReviewItem;

src/styles/GlobalColor.tsx

@@ -4,4 +4,5 @@ export const PURPLE3 = '#E7E0FD';
 export const GREEN = '#DBFC72';
 export const BLACK = '#222222';
 export const BLACK2 = '#929292';
+export const GRAY = '#BDBDBD';
 export const LIGHTGRAY = '#DFDFDF';

src/styles/GlobalText.tsx

@@ -1,8 +1,10 @@
 import { Text } from 'react-native';
+import { BLACK } from './GlobalColor';
 
 export const Title20B = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 20,
       fontWeight: '700',
       lineHeight: 24,
@@ -16,6 +18,7 @@ export const Title20B = ({ children, style }: any) => {
 export const Subtitle18B = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 18,
       fontWeight: '700',
       lineHeight: 24,
@@ -29,6 +32,7 @@ export const Subtitle18B = ({ children, style }: any) => {
 export const Subtitle18M = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 18,
       fontWeight: '500',
       lineHeight: 24,
@@ -42,6 +46,7 @@ export const Subtitle18M = ({ children, style }: any) => {
 export const Subtitle16B = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 16,
       fontWeight: '700',
       lineHeight: 24,
@@ -55,6 +60,7 @@ export const Subtitle16B = ({ children, style }: any) => {
 export const Subtitle16M = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 16,
       fontWeight: '500',
       lineHeight: 24,
@@ -68,6 +74,7 @@ export const Subtitle16M = ({ children, style }: any) => {
 export const Body16B = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 16,
       fontWeight: '700',
       lineHeight: 24,
@@ -81,6 +88,7 @@ export const Body16B = ({ children, style }: any) => {
 export const Body16M = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 16,
       fontWeight: '500',
       lineHeight: 24,
@@ -94,6 +102,7 @@ export const Body16M = ({ children, style }: any) => {
 export const Body16R = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 16,
       fontWeight: '400',
       lineHeight: 24,
@@ -107,6 +116,7 @@ export const Body16R = ({ children, style }: any) => {
 export const Body14B = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 14,
       fontWeight: '700',
       lineHeight: 24,
@@ -120,6 +130,7 @@ export const Body14B = ({ children, style }: any) => {
 export const Body14M = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 14,
       fontWeight: '500',
       lineHeight: 24,
@@ -132,6 +143,7 @@ export const Body14M = ({ children, style }: any) => {
 export const Body14R = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 14,
       fontWeight: '400',
       lineHeight: 24,
@@ -145,6 +157,7 @@ export const Body14R = ({ children, style }: any) => {
 export const Caption12M = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 12,
       fontWeight: '500',
       ...style
@@ -157,6 +170,7 @@ export const Caption12M = ({ children, style }: any) => {
 export const Caption11M = ({ children, style }: any) => {
   return (
     <Text style={{
+      color: BLACK,
       fontSize: 11,
       fontWeight: '500',
       ...style