diff --git a/src/components/epigram/Comment/CommentItem.tsx b/src/components/epigram/Comment/CommentItem.tsx
index e6ca9503..959b3d9e 100644
--- a/src/components/epigram/Comment/CommentItem.tsx
+++ b/src/components/epigram/Comment/CommentItem.tsx
@@ -6,6 +6,7 @@ import getCustomRelativeTime from '@/lib/dateUtils';
import { Button } from '@/components/ui/button';
import useDeleteCommentMutation from '@/hooks/useDeleteCommentHook';
import UserProfileModal from '@/components/Card/UserProfileModal';
+import { sampleImage } from '@/user/utill/constants';
import DeleteAlertModal from '../DeleteAlertModal';
import CommentTextarea from './CommentTextarea';
@@ -46,7 +47,7 @@ function CommentItem({ comment, status, onEditComment, isEditing, epigramId }: C
@@ -79,7 +80,7 @@ function CommentItem({ comment, status, onEditComment, isEditing, epigramId }: C
)}
{comment.content}
diff --git a/src/components/epigram/EditEpigram.tsx b/src/components/epigram/EditEpigram.tsx
index 8079b5e7..749faeb2 100644
--- a/src/components/epigram/EditEpigram.tsx
+++ b/src/components/epigram/EditEpigram.tsx
@@ -24,6 +24,7 @@ function EditEpigram({ epigram }: EditEpigramProps) {
const router = useRouter();
const [isAlertOpen, setIsAlertOpen] = useState(false);
const [alertContent, setAlertContent] = useState({ title: '', description: '' });
+ const [textCount, setTextCount] = useState(epigram.content.length);
const form = useForm({
resolver: zodResolver(AddEpigramFormSchema),
@@ -53,6 +54,15 @@ function EditEpigram({ epigram }: EditEpigramProps) {
}
}, [epigram, form]);
+ useEffect(() => {
+ const subscription = form.watch((value, { name }) => {
+ if (name === 'content') {
+ setTextCount(value.content?.length || 0);
+ }
+ });
+ return () => subscription.unsubscribe();
+ }, [form]);
+
const { currentTag, setCurrentTag, handleAddTag, handleRemoveTag } = useTagManagement({
setValue: form.setValue,
getValues: form.getValues,
@@ -134,7 +144,16 @@ function EditEpigram({ epigram }: EditEpigramProps) {
내용
-
+
diff --git a/src/components/epigram/MoreOptionMenu.tsx b/src/components/epigram/MoreOptionMenu.tsx
index 4743c9e2..199a1545 100644
--- a/src/components/epigram/MoreOptionMenu.tsx
+++ b/src/components/epigram/MoreOptionMenu.tsx
@@ -21,7 +21,7 @@ function MoreOptionsMenu({ epigram }: MoreOptionsMenuProps) {
title: '삭제 완료',
description: `에피그램 ${data.id}가 성공적으로 삭제되었습니다.`,
});
- router.push('/');
+ router.push('/epigrams');
},
onError: () => {
toast({
diff --git a/src/hooks/useEpigramCommentsQueryHook.ts b/src/hooks/useEpigramCommentsQueryHook.ts
index f1db908b..a382c0cc 100644
--- a/src/hooks/useEpigramCommentsQueryHook.ts
+++ b/src/hooks/useEpigramCommentsQueryHook.ts
@@ -1,6 +1,6 @@
import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
-import { CommentResponseType } from '@/schema/comment';
import queries from '@/apis/queries';
+import { CommentResponseType } from '@/schema/comment';
const useEpigramCommentsQuery = (epigramId: number) =>
useInfiniteQuery>({
diff --git a/src/hooks/useTagManagementHook.ts b/src/hooks/useTagManagementHook.ts
index dd0082de..df80913a 100644
--- a/src/hooks/useTagManagementHook.ts
+++ b/src/hooks/useTagManagementHook.ts
@@ -21,6 +21,7 @@ const useTagManagement = ({
const currentTags = getValues('tags') || [];
if (currentTags.length >= 3) {
+ setError('tags', { type: 'manual', message: '태그는 3개까지 저장할 수 있습니다.' });
return;
}
if (currentTags.includes(currentTag)) {
diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
index c965f683..5bcfe0a8 100644
--- a/src/pageLayout/Epigram/AddEpigram.tsx
+++ b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -19,7 +19,7 @@ function AddEpigram() {
const [isAlertOpen, setIsAlertOpen] = useState(false);
const [alertContent, setAlertContent] = useState({ title: '', description: '' });
const [isFormValid, setIsFormValid] = useState(false);
-
+ const [textCount, setTextCount] = useState(0);
const form = useForm({
resolver: zodResolver(AddEpigramFormSchema),
defaultValues: {
@@ -51,6 +51,15 @@ function AddEpigram() {
return () => subscription.unsubscribe();
}, [form, watchForm]);
+ useEffect(() => {
+ const subscription = form.watch((value, { name }) => {
+ if (name === 'content') {
+ setTextCount(value.content?.length || 0);
+ }
+ });
+ return () => subscription.unsubscribe();
+ }, [form]);
+
const { currentTag, setCurrentTag, handleAddTag, handleRemoveTag } = useTagManagement({
setValue: form.setValue,
getValues: form.getValues,
@@ -120,7 +129,16 @@ function AddEpigram() {
*
-
+
@@ -232,7 +250,7 @@ function AddEpigram() {
type='button'
className='absolute right-2 top-1/2 transform -translate-y-1/2 h-8 px-3 bg-blue-500 text-white rounded'
onClick={handleAddTag}
- disabled={field.value.length >= 3 || currentTag.length === 0}
+ disabled={currentTag.length === 0}
>
저장
diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx
index 2fb0435d..cb23b02b 100644
--- a/src/pageLayout/Epigram/EpigramComment.tsx
+++ b/src/pageLayout/Epigram/EpigramComment.tsx
@@ -4,6 +4,7 @@ import CommentTextarea from '@/components/epigram/Comment/CommentTextarea';
import { paddingStyles } from '@/styles/CommentCardStyles';
import { EpigramCommentProps } from '@/types/epigram.types';
import Image from 'next/image';
+import { sampleImage } from '@/user/utill/constants';
function EpigramComment({ epigramId, currentUserId, userImage }: EpigramCommentProps) {
// NOTE: 수정상태를 수정중인 댓글의 ID로 변경
@@ -16,12 +17,8 @@ function EpigramComment({ epigramId, currentUserId, userImage }: EpigramCommentP
댓글 작성
-
- {userImage ? (
-
- ) : (
-
- )}
+
+
{/* NOTE: editingCommentId을 null로 바꿈으로써 수정중인 상태가 아니라는걸 알림 */}
setEditingCommentId(null)} />