diff --git a/src/assets/common/Star.svg b/src/assets/common/Star.svg
new file mode 100644
index 0000000..86d5d27
--- /dev/null
+++ b/src/assets/common/Star.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/common/Carousel.tsx b/src/common/Carousel.tsx
index f017627..5aa68cd 100644
--- a/src/common/Carousel.tsx
+++ b/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(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;
\ No newline at end of file
diff --git a/src/common/StarRating.tsx b/src/common/StarRating.tsx
new file mode 100644
index 0000000..fa7d300
--- /dev/null
+++ b/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 (
+ onPress(index)}>
+
+
+ );
+};
+
+const StarRating = () => {
+ const [rating, setRating] = useState(0);
+
+ return (
+ (
+ setRating(index+1)} />
+ )}
+ keyExtractor={(item, index) => index.toString()}
+ />
+ );
+};
+
+export default StarRating;
\ No newline at end of file
diff --git a/src/components/Home/components/ReviewComment.tsx b/src/components/Home/components/ReviewComment.tsx
new file mode 100644
index 0000000..323f472
--- /dev/null
+++ b/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 (
+
+ {value}
+
+ )
+}
+
+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;
\ No newline at end of file
diff --git a/src/components/Home/components/ReviewItem.tsx b/src/components/Home/components/ReviewItem.tsx
new file mode 100644
index 0000000..3dd6146
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ 닉네임
+ 2024-01-01
+
+
+
+
+ {
+ return (
+
+ {item.map((subItem: any) => (
+
+
+
+ ))}
+
+ )
+ }}
+ slider
+ />
+
+ 거래
+
+
+
+ 디자인
+
+
+ 후기 내용이 들어가는 칸입니다 옷이 친절하고 사장님이 멋있어요 어쩌고저쩌고
+
+ )
+}
+
+const ItemContainer = styled.View`
+ display: flex;
+ flex-direction: row;
+ padding: 5px 20px;
+`
+
+export default ReviewItem;
\ No newline at end of file
diff --git a/src/styles/GlobalColor.tsx b/src/styles/GlobalColor.tsx
index 3b8b79b..f5eec5a 100644
--- a/src/styles/GlobalColor.tsx
+++ b/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';
\ No newline at end of file
diff --git a/src/styles/GlobalText.tsx b/src/styles/GlobalText.tsx
index 9009d43..44c3053 100644
--- a/src/styles/GlobalText.tsx
+++ b/src/styles/GlobalText.tsx
@@ -1,8 +1,10 @@
import { Text } from 'react-native';
+import { BLACK } from './GlobalColor';
export const Title20B = ({ children, style }: any) => {
return (
{
export const Subtitle18B = ({ children, style }: any) => {
return (
{
export const Subtitle18M = ({ children, style }: any) => {
return (
{
export const Subtitle16B = ({ children, style }: any) => {
return (
{
export const Subtitle16M = ({ children, style }: any) => {
return (
{
export const Body16B = ({ children, style }: any) => {
return (
{
export const Body16M = ({ children, style }: any) => {
return (
{
export const Body16R = ({ children, style }: any) => {
return (
{
export const Body14B = ({ children, style }: any) => {
return (
{
export const Body14M = ({ children, style }: any) => {
return (
{
export const Body14R = ({ children, style }: any) => {
return (
{
export const Caption12M = ({ children, style }: any) => {
return (
{
export const Caption11M = ({ children, style }: any) => {
return (