Skip to content

Commit d64b2a5

Browse files
Jeon-suhyeonJeon-suhyeon
committed
fix: review
1 parent a35b4b8 commit d64b2a5

File tree

7 files changed

+67
-47
lines changed

7 files changed

+67
-47
lines changed

‎src/app/reviews/_components/CompletedReview.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -96,23 +96,23 @@ const CompletedReview = ({ review, offSeparator }: CompletedReviewProps) => {
9696
<div className="flex justify-between">
9797
<div className="flex items-center gap-2.5">
9898
{menuImageErrors[review.reviewId] || !review.menuImage ? (
99-
<div className="mt-1 flex size-[72px] items-center justify-center rounded-sm bg-primary/15 text-xl font-extrabold text-primary">
99+
<div className="mt-1 flex size-[80px] items-center justify-center rounded-sm bg-primary/15 text-xl font-extrabold text-primary">
100100
{review.storeName.slice(0, 3)}
101101
</div>
102102
) : (
103103
<Image
104104
src={review.menuImage}
105105
alt="pending-review "
106-
width={72}
107-
height={72}
108-
className="mt-1 size-[72px] rounded-sm"
106+
width={80}
107+
height={80}
108+
className="mt-1 size-[80px] rounded-sm"
109109
onError={() => {
110110
setMenuImageErrors((prev) => ({ ...prev, [review.reviewId]: true }))
111111
}}
112112
/>
113113
)}
114114
<div className="flex flex-col gap-1">
115-
<div>{review.menuName}</div>
115+
<div className="text-base font-medium">{review.menuName}</div>
116116
<TotalRating score={review.totalScore} />
117117
<div className="flex gap-2.5">
118118
<div className="flex gap-1 text-xs font-extrabold">
@@ -154,7 +154,7 @@ const CompletedReview = ({ review, offSeparator }: CompletedReviewProps) => {
154154
)}
155155
</div>
156156
{/* 리뷰 내용 */}
157-
<div className="whitespace-pre-line">{review.clientReviewContent}</div>
157+
<div className="whitespace-pre-line text-base">{review.clientReviewContent}</div>
158158
{/* 리뷰 수정 기간 */}
159159
{isEditable && (
160160
<>

‎src/app/reviews/_components/NoWritableReview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Icon from '@/components/Icon'
22

33
const NoWritableReview = () => (
4-
<div className="flex h-[calc(100vh-190px)] flex-col items-center justify-center gap-6">
4+
<div className="flex h-full flex-col items-center justify-center gap-6">
55
<Icon name="UtensilsCrossed" size="96px" className="text-gray-400" />
66
<div className="font-medium text-gray-400">주문 후 리뷰를 작성해주세요!</div>
77
</div>

‎src/app/reviews/_components/Review.tsx‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,24 @@ import WritableReview from '@/app/reviews/_components/WritableReview'
1010
import WritableReviewSkeleton from '@/app/reviews/_components/WritableReviewSkeleton'
1111
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
1212
import { motion } from 'motion/react'
13-
import { useState } from 'react'
13+
import { useRouter, useSearchParams } from 'next/navigation'
14+
import { useRef, useState } from 'react'
1415

1516
export type ReviewTabType = '작성가능' | '작성완료'
1617

1718
const Review = () => {
18-
const [tab, setTab] = useState<ReviewTabType>('작성가능')
19+
const searchParams = useSearchParams()
20+
const [tab, setTab] = useState<ReviewTabType>(
21+
searchParams.get('tab')
22+
? searchParams.get('tab') === '1'
23+
? '작성가능'
24+
: '작성완료'
25+
: '작성가능'
26+
)
27+
const router = useRouter()
1928

2029
const { data: writableReviews, isLoading } = useGetWritableReviews()
30+
const scrollRef = useRef<HTMLDivElement>(null)
2131

2232
const {
2333
data: completedReviews,
@@ -32,10 +42,11 @@ const Review = () => {
3242

3343
const handleChangeTab = (tab: ReviewTabType) => {
3444
setTab(tab)
45+
router.push(`/reviews?tab=${tab === '작성가능' ? '1' : '2'}`)
3546
}
3647

3748
return (
38-
<section>
49+
<section className="pt-4">
3950
<div className="px-mobile_safe">
4051
<ReviewTab
4152
tab={tab}
@@ -44,23 +55,24 @@ const Review = () => {
4455
completedReviewsCount={completedReviewsCount ?? 0}
4556
/>
4657
</div>
47-
<div className="relative mt-2">
58+
<div
59+
ref={scrollRef}
60+
className="relative mt-2 h-[calc(100dvh-40px-85px-56px-1rem-0.75rem-0.5rem)] w-dvw overflow-hidden"
61+
>
4862
<motion.div
4963
initial={{ x: 0 }}
5064
animate={{
51-
x: tab === '작성가능' ? 0 : '-110%',
65+
x: tab === '작성가능' ? 0 : -window.innerWidth,
5266
}}
53-
transition={{ duration: 0.3 }}
67+
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
5468
className="absolute w-full overflow-y-auto overflow-x-hidden"
55-
style={{
56-
height: 'calc(100vh - 190px)',
57-
}}
69+
style={{ height: '100%' }}
5870
>
5971
{isLoading ? (
6072
Array.from({ length: 5 }).map((_, i) => (
6173
<WritableReviewSkeleton key={i} offSeparator={i === 4} />
6274
))
63-
) : writableReviews ? (
75+
) : writableReviews && writableReviews.length > 0 ? (
6476
writableReviews.map((review, index) => (
6577
<WritableReview
6678
key={review.orderId}
@@ -74,15 +86,13 @@ const Review = () => {
7486
</motion.div>
7587

7688
<motion.div
77-
initial={{ x: '110%' }}
89+
initial={{ x: window.innerWidth }}
7890
animate={{
79-
x: tab === '작성가능' ? '110%' : 0,
91+
x: tab === '작성가능' ? window.innerWidth : 0,
8092
}}
81-
transition={{ duration: 0.3 }}
93+
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
8294
className="absolute w-full overflow-y-auto overflow-x-hidden"
83-
style={{
84-
height: 'calc(100vh - 190px)',
85-
}}
95+
style={{ height: '100%' }}
8696
>
8797
{completedReviews?.map((review, index) => (
8898
<CompletedReview

‎src/app/reviews/_components/ReviewEditorModal.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import Loading from '@/components/Loading'
88
import { useToast } from '@/hooks/useToast'
99
import { cn } from '@/lib/utils'
1010
import { modalStore } from '@/store/modal'
11+
import { ROUTE_PATHS } from '@/utils/routes'
12+
import { useQueryClient } from '@tanstack/react-query'
1113
import Image from 'next/image'
14+
import { useRouter } from 'next/navigation'
1215
import { useState } from 'react'
1316
import { useForm } from 'react-hook-form'
1417

@@ -51,7 +54,7 @@ const ReviewEditorModal = ({
5154
content: prevData?.clientReviewContent || '',
5255
deliveryQuality: prevData?.deliveryQuality || '',
5356
image: null,
54-
imagePreview: prevData?.representativeImageUri + `?v=${Date.now()}` || null,
57+
imagePreview: prevData?.representativeImageUri,
5558
isImageChanged: false,
5659
},
5760
})
@@ -71,6 +74,9 @@ const ReviewEditorModal = ({
7174
(deliveryQuality === 'GOOD' || deliveryQuality === 'BAD')
7275
const [isContentValid, setIsContentValid] = useState(true)
7376

77+
const router = useRouter()
78+
const queryClient = useQueryClient()
79+
7480
const handleBlurContent = () => {
7581
if (content.length < 5) {
7682
setIsContentValid(false)
@@ -110,7 +116,10 @@ const ReviewEditorModal = ({
110116
},
111117
{
112118
onSuccess: () => {
119+
queryClient.invalidateQueries({ queryKey: ['completed-reviews'] })
113120
hideModal()
121+
router.push(`${ROUTE_PATHS.REVIEW}?tab=2`)
122+
114123
toast({
115124
title: '리뷰가 등록되었어요.',
116125
position: 'center',
@@ -141,6 +150,7 @@ const ReviewEditorModal = ({
141150
},
142151
{
143152
onSuccess: () => {
153+
queryClient.invalidateQueries({ queryKey: ['completed-reviews'] })
144154
hideModal()
145155
toast({
146156
title: '리뷰가 수정되었어요.',

‎src/app/reviews/_components/ReviewTab.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,23 @@ const ReviewTab = ({
1919
}
2020

2121
return (
22-
<div className="relative flex h-10 justify-center rounded-sm bg-primary/15 text-sm font-medium">
22+
<div className="relative flex h-12 justify-center rounded-sm bg-primary/15 text-base font-medium">
2323
<button
2424
onClick={handleClickTab}
2525
value="작성가능"
26-
className={`z-10 w-1/2 ${tab === '작성가능' ? 'text-white' : 'text-gray-700'}`}
26+
className={`z-10 h-full w-1/2 ${tab === '작성가능' ? 'text-white' : 'text-gray-700'}`}
2727
>
2828
{`작성 가능한 리뷰 (${writableReviewsCount})`}
2929
</button>
3030
<button
3131
onClick={handleClickTab}
3232
value="작성완료"
33-
className={`z-10 w-1/2 ${tab === '작성완료' ? 'text-white' : 'text-gray-700'}`}
33+
className={`z-10 h-full w-1/2 ${tab === '작성완료' ? 'text-white' : 'text-gray-700'}`}
3434
>
3535
{`작성한 리뷰 (${completedReviewsCount})`}
3636
</button>
3737
<motion.div
38-
className="absolute left-1 top-1 z-0 h-[32px] w-[calc(50%-4px)] rounded-sm bg-primary"
38+
className="absolute left-1 top-1 z-0 h-10 w-[calc(50%-4px)] rounded-lg bg-primary"
3939
animate={{
4040
x: tab === '작성가능' ? '0%' : '100%',
4141
}}

‎src/app/reviews/_components/WritableReview.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const WritableReview = ({ review, offSeparator = false }: WritableReviewProps) =
1515
const { showModal } = modalStore()
1616
const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({})
1717
const handleClickReviewButton = () => {
18+
console.log(review)
1819
showModal({
1920
content: (
2021
<ReviewEditorModal
@@ -32,35 +33,37 @@ const WritableReview = ({ review, offSeparator = false }: WritableReviewProps) =
3233
<>
3334
<div className="flex gap-3 px-mobile_safe py-5">
3435
{imageErrors[review.orderId] || !review.storeImageThumbnail ? (
35-
<div className="mt-1 flex size-[72px] items-center justify-center rounded-sm bg-primary/15 text-xl font-extrabold text-primary">
36+
<div className="mt-1 flex size-[80px] items-center justify-center rounded-sm bg-primary/15 text-xl font-extrabold text-primary">
3637
{review.storeName.slice(0, 3)}
3738
</div>
3839
) : (
3940
<Image
4041
src={review.storeImageThumbnail}
4142
alt="pending-review "
42-
width={72}
43-
height={72}
44-
className="mt-1 size-[72px] rounded-sm"
43+
width={80}
44+
height={80}
45+
className="mt-1 size-[80px] rounded-sm"
4546
onError={() => {
4647
setImageErrors((prev) => ({ ...prev, [review.orderId]: true }))
4748
}}
4849
/>
4950
)}
5051

51-
<div className="flex flex-col justify-between py-0.5 text-sm">
52-
<div>
53-
<div className="font-semibold">{review.storeName}</div>
54-
<ul className="whitespace-pre-wrap">{review.orderSummary}</ul>
52+
<div className="flex flex-col justify-between gap-2">
53+
<div className="flex flex-col gap-1">
54+
<div className="text-base font-bold">{review.storeName}</div>
55+
<ul className="whitespace-pre-wrap text-sm text-gray-700">{review.orderSummary}</ul>
56+
</div>
57+
<div className="flex flex-1">
58+
<Button
59+
variant="primaryFit"
60+
size="s"
61+
className="h-full w-fit rounded-sm"
62+
onClick={handleClickReviewButton}
63+
>
64+
리뷰 쓰기
65+
</Button>
5566
</div>
56-
<Button
57-
variant="primaryFit"
58-
size="s"
59-
className="size-fit py-0.5"
60-
onClick={handleClickReviewButton}
61-
>
62-
리뷰 작성
63-
</Button>
6467
</div>
6568
</div>
6669
{!offSeparator && <Separator ignoreMobileSafe className="h-2" />}

‎src/constants/navigationProps.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,6 @@ const NAVIGATION_PROPS: Record<string, NavigationProps> = {
3939
[ROUTE_PATHS.ORDERS]: {
4040
title: '주문내역',
4141
},
42-
[ROUTE_PATHS.ORDERS_DETAIL]: {
43-
title: '주문상세',
44-
},
4542
[ROUTE_PATHS.FAVORITES]: {
4643
title: '찜',
4744
},

0 commit comments

Comments
 (0)