- {keywords.slice(0, 2).map((keyword, idx) => (
+ {!showMoreKeywords &&
+ keywords.slice(0, 2).map((keyword, idx) => (
+
+ {getEmoji(keyword.content)} {keyword.content}
+
+ ))}
+ {keywords.length > 2 && !showMoreKeywords && (
- {getEmoji(keyword.content)} {keyword.content}
-
- ))}
- {keywords.length > 2 && (
-
+ className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
+ onClick={(e) => {
+ handleClickPlusButton(e);
+ }}>
+{keywords.length - 2}
)}
-
+
+ {showMoreKeywords &&
+ Array.from({ length: Math.ceil(keywords.length / 2) }).map(
+ (_, lineIdx) => (
+
+ {keywords
+ .slice(lineIdx * 2, lineIdx * 2 + 2)
+ .map((keyword, idx) => (
+
+ {getEmoji(keyword.content)} {keyword.content}
+
+ ))}
+
+ ),
+ )}
+
+
+
diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
index 1dd7cd81..0fb630b2 100644
--- a/src/components/Review/CommentItem.tsx
+++ b/src/components/Review/CommentItem.tsx
@@ -1,5 +1,9 @@
import { MoreIcon } from '@components/common/icons/Icons';
-import { isModalOpenState, titleState } from '@recoil/modal';
+import {
+ isModalOpenState,
+ titleState,
+ modalChildrenState,
+} from '@recoil/modal';
import { commentState, targetCommentIdState } from '@recoil/review';
import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -25,11 +29,14 @@ const CommentItem: React.FC
= (props: ItemProps) => {
const setTitle = useSetRecoilState(titleState);
const setTargetCommentId = useSetRecoilState(targetCommentIdState);
const setComment = useSetRecoilState(commentState);
+ const setModalChildren = useSetRecoilState(modalChildrenState);
const openModal = (title: string, commentId: number) => {
setTitle(title);
setTargetCommentId(commentId);
setComment(content);
+ setModalChildren('EditDelete');
+
setIsModalOpen(true);
};
diff --git a/src/components/Review/Review.tsx b/src/components/Review/Review.tsx
index f556f991..f761f578 100644
--- a/src/components/Review/Review.tsx
+++ b/src/components/Review/Review.tsx
@@ -9,9 +9,10 @@ import {
contentState,
isModifyingReviewState,
targetReviewIdState,
+ alertState,
} from '@recoil/review';
import { isModalOpenState } from '@recoil/modal';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useParams, useNavigate } from 'react-router-dom';
export default function Review() {
@@ -24,6 +25,8 @@ export default function Review() {
const isModifyingReview = useRecoilValue(isModifyingReviewState);
const targetReviewId = useRecoilValue(targetReviewIdState);
const [_, setIsModalOpen] = useRecoilState(isModalOpenState);
+ const setAlert = useSetRecoilState(alertState);
+
const handlePostReview = async () => {
try {
const reviewData = {
@@ -33,11 +36,19 @@ export default function Review() {
content: content,
};
if (isModifyingReview) {
- const response = await putReview(reviewData, targetReviewId);
- console.log('리뷰가 성공적으로 수정되었습니다.', response.data);
+ await putReview(reviewData, targetReviewId);
+ setAlert(() => ({
+ isAlert: true,
+ noun: '리뷰',
+ verb: '수정',
+ }));
} else {
- const response = await postReview(reviewData);
- console.log('리뷰가 성공적으로 등록되었습니다.', response.data);
+ await postReview(reviewData);
+ setAlert(() => ({
+ isAlert: true,
+ noun: '리뷰',
+ verb: '등록',
+ }));
}
setRating(0);
setKeywords([]);
diff --git a/src/components/Review/ReviewButton.tsx b/src/components/Review/ReviewButton.tsx
index 3b9cde51..e1562efb 100644
--- a/src/components/Review/ReviewButton.tsx
+++ b/src/components/Review/ReviewButton.tsx
@@ -31,7 +31,7 @@ const ReviewButton = (props: ButtonProps) => {
}, [keywords]);
return (
- <>
+
{isContentValid === false && isKeywordsValid === false && (
키워드를 선택하거나 텍스트를 10자 이상 입력해주세요
@@ -43,7 +43,7 @@ const ReviewButton = (props: ButtonProps) => {
disabled={isContentValid === false && isKeywordsValid === false}>
완료
-
+
);
};
diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
index 514cd0a0..bbcbc4b9 100644
--- a/src/components/Review/ReviewComments.tsx
+++ b/src/components/Review/ReviewComments.tsx
@@ -1,13 +1,16 @@
import { getReviewComments } from '@api/review';
import { Modal } from '@components/common/modal';
-import { isModalOpenState } from '@recoil/modal';
+import { isModalOpenState, modalChildrenState } from '@recoil/modal';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import CommentItem from './CommentItem';
// import { targetCommentIdState } from '@recoil/review';
import React, { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
+import EditDelete from '@components/common/modal/children/EditDelete';
+import DeleteAlert from '@components/common/modal/children/DeleteAlert';
+import { commentState } from '@recoil/review';
export default function ReviewComments() {
const params = useParams();
@@ -16,6 +19,8 @@ export default function ReviewComments() {
// const setTitle = useSetRecoilState(titleState);
// const setTargetCommentId = useSetRecoilState(targetCommentIdState);
const [commentDataLength, setCommentDataLength] = useState
(0);
+ const modalChildren = useRecoilValue(modalChildrenState);
+ const setComment = useSetRecoilState(commentState);
const {
data: reviewComments,
@@ -42,6 +47,7 @@ export default function ReviewComments() {
const closeModal = () => {
setIsModalOpen(false);
+ setComment('');
};
useEffect(() => {
{
@@ -93,8 +99,10 @@ export default function ReviewComments() {
})}
+
+
+ {noun}
+ {particle} {verb}되었습니다
+
+
+
리뷰 삭제
+
+ 리뷰를 삭제할까요?
+
+
+ {
+ setIsModalOpen(false);
+ }}
+ className="text-xs">
+ 취소
+
+
+ 삭제
+
+
+
+
{title}
+
+
+
+
+
diff --git a/src/recoil/modal.ts b/src/recoil/modal.ts
index fad2b26a..eecef4b1 100644
--- a/src/recoil/modal.ts
+++ b/src/recoil/modal.ts
@@ -9,3 +9,8 @@ export const titleState = atom({
key: 'titleState',
default: '',
});
+
+export const modalChildrenState = atom({
+ key: 'modalChildrenState',
+ default: '',
+});
diff --git a/src/recoil/review.ts b/src/recoil/review.ts
index ef2c7254..d2764b1b 100644
--- a/src/recoil/review.ts
+++ b/src/recoil/review.ts
@@ -75,3 +75,11 @@ export const contentTypeIdState = atom({
key: 'contentTypeIdState',
default: 0,
});
+export const alertState = atom({
+ key: 'alertState',
+ default: {
+ isAlert: false,
+ noun: '',
+ verb: '',
+ },
+});