Skip to content

Commit 6316308

Browse files
jstar000jstar000
authored
Merge pull request #71 from SOPT-all/feat/product-review-page/#69
[feat/#69] 사용자 후기 페이지 구현
2 parents ee5c6b1 + 3573774 commit 6316308

File tree

16 files changed

+176
-48
lines changed

16 files changed

+176
-48
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { ProductInfo } from "./pages/product-info/product-info";
1+
import { ProductReview } from "./pages/product-review/product-review";
22
import * as styles from "./test.css";
33

44
function App() {
55
return (
66
<div className={styles.test}>
7-
<ProductInfo />
7+
<ProductReview />
88
</div>
99
);
1010
}

src/pages/product-review/review-card.css.ts renamed to src/pages/product-review/components/review-card/review-card.css.ts

File renamed without changes.

src/pages/product-review/review-card.tsx renamed to src/pages/product-review/components/review-card/review-card.tsx

File renamed without changes.

src/pages/product-review/review-list.css.ts renamed to src/pages/product-review/components/review-card/review-list.css.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,19 @@ export const reviewListSection = style({
66
"@layer": {
77
[components]: {
88
padding: "1.2rem 1.6rem 0",
9+
display: "flex",
10+
flexDirection: "column",
11+
rowGap: "0.4rem",
12+
},
13+
},
14+
});
15+
16+
export const loadMoreWrapper = style({
17+
"@layer": {
18+
[components]: {
19+
display: "flex",
20+
justifyContent: "center",
21+
padding: "1.6rem 0",
922
},
1023
},
1124
});

‎src/pages/product-review/components/review-card/review-list.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { useState } from "react";
2+
import LargeButton from "@/shared/components/button/large-button/large-button";
3+
import { LARGE_BUTTON_VARIANTS } from "@/shared/constants/button";
4+
import { mockReviews } from "../../constants/review-list.mock";
5+
import { ReviewCard } from "./review-card";
6+
import * as styles from "./review-list.css";
7+
8+
export const ReviewList = () => {
9+
const [reviews, setReviews] = useState(mockReviews);
10+
11+
const handleLoadMore = () => {
12+
setReviews((prev) => [
13+
...prev,
14+
...mockReviews.map((review, index) => ({
15+
...review,
16+
reviewId: prev.length + index + 1,
17+
})),
18+
]);
19+
};
20+
21+
return (
22+
<section className={styles.reviewListSection}>
23+
{reviews.map((review) => (
24+
<ReviewCard
25+
key={review.reviewId}
26+
nickname={review.nickname}
27+
createdAt={review.createdAt}
28+
score={review.score}
29+
content={review.content}
30+
/>
31+
))}
32+
33+
<div className={styles.loadMoreWrapper}>
34+
<LargeButton
35+
type="button"
36+
variant={LARGE_BUTTON_VARIANTS.DEFAULT}
37+
hasArrow
38+
onClick={handleLoadMore}
39+
aria-label="작품 구매 후기 더보기">
40+
작품 구매 후기 더보기
41+
</LargeButton>
42+
</div>
43+
</section>
44+
);
45+
};

src/pages/review-summary/review-summary.css.ts renamed to src/pages/product-review/components/review-summary/review-summary.css.ts

File renamed without changes.

src/pages/review-summary/review-summary.tsx renamed to src/pages/product-review/components/review-summary/review-summary.tsx

File renamed without changes.

src/pages/product-review/review-list.tsx renamed to src/pages/product-review/constants/review-list.mock.ts

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { ReviewCard, type ReviewCardProps } from "./review-card";
2-
import * as styles from "./review-list.css";
1+
import { type ReviewCardProps } from "../components/review-card/review-card";
32

4-
type Review = ReviewCardProps & {
3+
export type Review = ReviewCardProps & {
54
reviewId: number;
65
};
76

8-
const mockReviews: Review[] = [
7+
export const mockReviews: Review[] = [
98
{
109
reviewId: 1,
1110
nickname: "임지성",
@@ -40,27 +39,10 @@ const mockReviews: Review[] = [
4039
},
4140
{
4241
reviewId: 5,
43-
nickname: "배",
42+
nickname: "닉네임",
4443
createdAt: "2024.11.25",
4544
score: 4.0,
4645
content:
4746
"여자친구 생일에 특별한 편지를 주고싶어서 찾아보다가 이쁜 카세트로 목소리를 녹음해서 줄수있는게 있길래 한번 구매해봤어요 아직 전달을 하지는 못했지만 사진도 정말 이쁘게 들어가있고 문구와 디자인도 너무 이쁜것 같아요 새로운 감동을 줄 수 있을것 같습니다 대만족이에요!",
4847
},
4948
];
50-
51-
export const ReviewList = () => {
52-
return (
53-
// 후기 리스트 전체를 감싸는 컨테이너
54-
<section className={styles.reviewListSection}>
55-
{mockReviews.map((review) => (
56-
<ReviewCard
57-
key={review.reviewId}
58-
nickname={review.nickname}
59-
createdAt={review.createdAt}
60-
score={review.score}
61-
content={review.content}
62-
/>
63-
))}
64-
</section>
65-
);
66-
};

‎src/pages/product-review/constants/review-summary.mock.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Product01 from "@/assets/img/product-01.png";
2+
3+
export const DUMMY_AVERAGE_SCORE = 4.8;
4+
export const DUMMY_REVIEW_COUNT = 634;
5+
export const DUMMY_THUMBNAILS: { reviewId: number; imageUrl: string }[] =
6+
Array.from({ length: 6 }, (_, index) => ({
7+
reviewId: index + 1,
8+
imageUrl: Product01,
9+
}));
10+
11+
export const DUMMY_AI_SUMMARY =
12+
"작가님의 작품은 정말 특별하고신선해요! 포장도 꼼꼼하고 배송도 빠르네요. 친구나 소중한 분께 선물하기에 딱 좋습니다. 정성스럽게 만들어주셔서 감사합니다!";

‎src/pages/product-review/product-review.css.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { style } from "@vanilla-extract/css";
2+
3+
export const container = style({
4+
display: "flex",
5+
flexDirection: "column",
6+
});

0 commit comments

Comments
 (0)