-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
460 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { UpCircleOutlined } from '@ant-design/icons'; | ||
import styled from 'styled-components'; | ||
|
||
const RightDownButton = styled.div` | ||
position: fixed; | ||
bottom: 100px; | ||
right: 100px; | ||
font-size: 40px; | ||
cursor: pointer; | ||
`; | ||
|
||
export default function ScrollUpButton() { | ||
const scrollUp = () => { | ||
window.scrollTo({ top: 0, behavior: 'smooth' }); | ||
}; | ||
|
||
return ( | ||
<RightDownButton onClick={scrollUp}> | ||
<UpCircleOutlined /> | ||
</RightDownButton> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
export interface ReviewListResponse { | ||
total_count: number, | ||
current_count: number, | ||
current_page: number, | ||
reviews: ReviewContent[] | ||
} | ||
|
||
export interface ReviewContent { | ||
reviewId: number, | ||
rating: number, | ||
nickName: string, | ||
content: string, | ||
imageUrls: string[], | ||
menuNames: string[], | ||
isModified: boolean, | ||
isHaveUnhandledReport: boolean, | ||
createdAt: string, | ||
reports: ReportedReviewContent[] | ||
shop: { | ||
shopId: number, | ||
shopName: string, | ||
} | ||
} | ||
|
||
export interface ReportedReviewContent { | ||
reportId: number, | ||
title: string, | ||
content: string, | ||
nickName: string, | ||
status: string, | ||
} | ||
|
||
export interface GetReviewListParam { | ||
page: number; | ||
limit: number; | ||
isReported: boolean; | ||
} | ||
|
||
export interface SetReviewParam { | ||
id: number; | ||
page: number; | ||
body: { | ||
report_status: string | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import styled from 'styled-components'; | ||
|
||
export const Shortcut = styled.a` | ||
color: '#cacaca'; | ||
text-decoration: none; | ||
`; | ||
|
||
export const Container = styled.div<{ isHandle: boolean }>` | ||
display: flex; | ||
flex-direction: column; | ||
padding: 10px 15px; | ||
background: ${(props) => (props.isHandle ? '#ff000050' : '#00BFFF10')}; | ||
border-radius: 10px; | ||
transition: scale 0.3s, height 0.3s; | ||
width: 100%; | ||
gap: 10px; | ||
`; | ||
|
||
export const Row = styled.div` | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
`; | ||
|
||
export const RowItem = styled.div` | ||
display: flex; | ||
align-items: center; | ||
gap: 20px; | ||
`; | ||
|
||
export const Item = styled.div` | ||
width: 150px; | ||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
`; | ||
|
||
export const ToggleButton = styled.button` | ||
background: transparent; | ||
border: none; | ||
cursor: pointer; | ||
height: 30px; | ||
`; | ||
|
||
export const MenuImage = styled.img` | ||
width: 250px; | ||
height: 250px; | ||
object-fit: cover; | ||
border-radius: 10px; | ||
`; | ||
|
||
export const AroundRow = styled.div` | ||
width: 100%; | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,193 @@ | ||
import { ReviewContent } from 'model/review.model'; | ||
import { Button, message, Modal } from 'antd'; | ||
import { useState } from 'react'; | ||
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; | ||
import { useDeleteReviewMutation, useSetReviewDismissedMutation } from 'store/api/review'; | ||
import { KOIN_URL } from 'constant'; | ||
import * as S from './ReviewCard.style'; | ||
|
||
interface Props { | ||
review: ReviewContent; | ||
currentPage: number; | ||
} | ||
|
||
export default function ReviewCard({ review, currentPage }: Props) { | ||
const [isOpen, setIsOpen] = useState<boolean>(false); | ||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false); | ||
const [isReportOpen, setIsReportOpen] = useState<boolean>(false); | ||
const toggle = () => { | ||
setIsOpen((prev) => !prev); | ||
}; | ||
|
||
const [deleteReview, { | ||
isLoading: isDeleteLoading, | ||
isError: isDeleteError, | ||
}] = useDeleteReviewMutation(); | ||
const [dismissReview, { | ||
isLoading: isDismissLoading, | ||
isError: isDismissError, | ||
}] = useSetReviewDismissedMutation(); | ||
|
||
if (isDeleteError) { | ||
message.error('리뷰 삭제에 실패했습니다'); | ||
} | ||
if (isDismissError) { | ||
message.error('리뷰 상태 변경에 실패했습니다.'); | ||
} | ||
|
||
const deleteSpecificReview = () => { | ||
deleteReview({ | ||
id: review.reviewId, | ||
page: currentPage, | ||
}); | ||
}; | ||
|
||
const dismissSpecificReview = () => { | ||
dismissReview({ | ||
id: review.reviewId, | ||
page: currentPage, | ||
body: { | ||
report_status: 'DISMISSED', | ||
}, | ||
}); | ||
}; | ||
|
||
return ( | ||
<S.Container isHandle={review.isHaveUnhandledReport}> | ||
<S.Row> | ||
<S.RowItem> | ||
<S.Item> | ||
{review.shop.shopName} | ||
</S.Item> | ||
<S.Item> | ||
{review.createdAt} | ||
</S.Item> | ||
</S.RowItem> | ||
<S.RowItem> | ||
<S.Item> | ||
<S.Shortcut href={`${KOIN_URL}/store/${review.shop.shopId}?state=리뷰`} target="_blank" rel="noreferrer">식당 페이지 바로가기</S.Shortcut> | ||
</S.Item> | ||
<S.Item> | ||
<Button | ||
danger | ||
disabled={isDeleteLoading} | ||
onClick={() => setIsModalOpen(true)} | ||
> | ||
삭제하기 | ||
</Button> | ||
</S.Item> | ||
</S.RowItem> | ||
</S.Row> | ||
<S.Row> | ||
<S.RowItem> | ||
<S.Item> | ||
별점: | ||
{' '} | ||
{review.rating} | ||
</S.Item> | ||
{!isOpen && ( | ||
<S.Item> | ||
{review.content} | ||
</S.Item> | ||
)} | ||
</S.RowItem> | ||
</S.Row> | ||
{isOpen && ( | ||
<> | ||
<S.Row> | ||
<div> | ||
리뷰 내용: | ||
{' '} | ||
{review.content} | ||
</div> | ||
</S.Row> | ||
<S.Row> | ||
<div> | ||
사진: | ||
{' '} | ||
{review.imageUrls.length > 0 ? review.imageUrls.map((image) => ( | ||
<S.MenuImage | ||
src={image} | ||
key={image} | ||
loading="lazy" | ||
alt="리뷰 이미지" | ||
/> | ||
)) : '없음'} | ||
</div> | ||
</S.Row> | ||
<S.Row> | ||
<div> | ||
이용 메뉴: | ||
{' '} | ||
{review.menuNames.length > 0 ? review.menuNames.map((menu) => <div key={menu}>{menu}</div>) : '미기재'} | ||
</div> | ||
</S.Row> | ||
<S.Row> | ||
<div> | ||
수정이력: | ||
{' '} | ||
{review.isModified ? 'O' : 'X'} | ||
</div> | ||
</S.Row> | ||
<S.AroundRow> | ||
<S.Item> | ||
{review.isHaveUnhandledReport ? '신고정보' : '신고이력'} | ||
</S.Item> | ||
</S.AroundRow> | ||
{review.reports.length > 0 | ||
? ( | ||
<S.Row> | ||
<S.Item> | ||
<Button onClick={() => setIsReportOpen(true)}>확인하기</Button> | ||
</S.Item> | ||
{review.isHaveUnhandledReport | ||
&& ( | ||
<S.Item> | ||
<Button | ||
onClick={dismissSpecificReview} | ||
disabled={isDismissLoading} | ||
> | ||
유지하기 | ||
</Button> | ||
</S.Item> | ||
)} | ||
</S.Row> | ||
|
||
) : '없음'} | ||
</> | ||
)} | ||
<S.ToggleButton type="button" onClick={toggle}> | ||
{isOpen ? <CaretUpOutlined /> : <CaretDownOutlined />} | ||
</S.ToggleButton> | ||
<Modal open={isModalOpen} footer={null} onCancel={() => setIsModalOpen(false)}> | ||
<S.AroundRow> | ||
정말로 삭제하시겠습니까? | ||
<S.Item> | ||
<Button | ||
danger | ||
onClick={() => { | ||
deleteSpecificReview(); | ||
setIsModalOpen(false); | ||
}} | ||
> | ||
삭제 | ||
</Button> | ||
<Button onClick={() => setIsModalOpen(false)}>취소</Button> | ||
</S.Item> | ||
</S.AroundRow> | ||
</Modal> | ||
<Modal open={isReportOpen} onCancel={() => setIsReportOpen(false)} footer={null}> | ||
{review.reports.map((report, idx) => ( | ||
<S.Row | ||
key={report.reportId} | ||
> | ||
{idx + 1} | ||
. | ||
{' '} | ||
{report.content} | ||
</S.Row> | ||
))} | ||
</Modal> | ||
</S.Container> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import styled from 'styled-components'; | ||
|
||
export const Container = styled.div` | ||
height: 100vh; | ||
min-width: 1000px; | ||
display: flex; | ||
flex-direction: column; | ||
box-sizing: border-box; | ||
gap: 30px; | ||
position: relative; | ||
`; | ||
|
||
export const Filter = styled.div` | ||
display: flex; | ||
align-items: center; | ||
gap: 15px; | ||
`; | ||
|
||
export const DataContainer = styled.div` | ||
display: flex; | ||
align-items: center; | ||
flex-direction: column; | ||
gap: 15px; | ||
width: 100%; | ||
margin-bottom: 30px; | ||
`; |
Oops, something went wrong.