-
Notifications
You must be signed in to change notification settings - Fork 2
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
29 changed files
with
793 additions
and
1,190 deletions.
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
5 changes: 2 additions & 3 deletions
5
components/diaries/detail/add-comment/diary-detail-add-comment.tsx
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
120 changes: 60 additions & 60 deletions
120
components/diaries/diary-content/comment/diary-comment-reply.tsx
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 |
|---|---|---|
| @@ -1,60 +1,60 @@ | ||
| import DropdownMenu from '@/components/kebab/kebab'; | ||
| import styles from './diary-comment-reply.module.scss'; | ||
| import useToggle from '@/hooks/use-toggle'; | ||
| import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile'; | ||
| import { Child } from '@/api/diaries'; | ||
| import useChildCommentMutation from '@/hooks/queries/diary/use-child-comment-mutation'; | ||
| import { useState } from 'react'; | ||
| import DiaryCommentEdit from './diary-comment-edit'; | ||
| import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation'; | ||
|
|
||
| interface DiaryCommentReplyProps { | ||
| comment: Child; | ||
| diaryId: string; | ||
| } | ||
|
|
||
| export default function DiaryCommentReply({ comment, diaryId }: DiaryCommentReplyProps) { | ||
| const [isEditing, setIsEditing] = useState(false); | ||
|
|
||
| const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle(); | ||
|
|
||
| const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId); | ||
| const childCommentMutation = useChildCommentMutation(diaryId, comment.commentId); | ||
|
|
||
| const handleEdit = () => { | ||
| setIsEditing(true); | ||
| onCloseToggle(); | ||
| }; | ||
|
|
||
| const handleCancel = () => setIsEditing(false); | ||
|
|
||
| const handleDelete = () => childCommentMutation.mutate(); | ||
|
|
||
| return ( | ||
| <div className={styles.outer} key={comment.commentId}> | ||
| <div className={styles.commentProfile}> | ||
| <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} /> | ||
| {comment.isMyComment && ( | ||
| <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}> | ||
| <DropdownMenu.Kebab /> | ||
| <DropdownMenu.Content> | ||
| <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item> | ||
| <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item> | ||
| </DropdownMenu.Content> | ||
| </DropdownMenu> | ||
| )} | ||
| </div> | ||
|
|
||
| <p className={styles.commentDate}>{comment.date}</p> | ||
| {isEditing ? ( | ||
| <DiaryCommentEdit | ||
| defaultValue={comment.comment} | ||
| mutationFn={commentPutMutation.mutate} | ||
| onCancel={handleCancel} | ||
| /> | ||
| ) : ( | ||
| <p className={styles.commentContent}>{comment.comment}</p> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| // import DropdownMenu from '@/components/kebab/kebab'; | ||
| // import styles from './diary-comment-reply.module.scss'; | ||
| // import useToggle from '@/hooks/use-toggle'; | ||
| // import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile'; | ||
| // import { Child } from '@/api/diaries'; | ||
| // import useChildCommentMutation from '@/hooks/queries/diary/use-child-comment-mutation'; | ||
| // import { useState } from 'react'; | ||
| // import DiaryCommentEdit from './diary-comment-edit'; | ||
| // import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation'; | ||
|
|
||
| // interface DiaryCommentReplyProps { | ||
| // comment: Child; | ||
| // diaryId: string; | ||
| // } | ||
|
|
||
| // export default function DiaryCommentReply({ comment, diaryId }: DiaryCommentReplyProps) { | ||
| // const [isEditing, setIsEditing] = useState(false); | ||
|
|
||
| // const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle(); | ||
|
|
||
| // const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId); | ||
| // const childCommentMutation = useChildCommentMutation(diaryId, comment.commentId); | ||
|
|
||
| // const handleEdit = () => { | ||
| // setIsEditing(true); | ||
| // onCloseToggle(); | ||
| // }; | ||
|
|
||
| // const handleCancel = () => setIsEditing(false); | ||
|
|
||
| // const handleDelete = () => childCommentMutation.mutate(); | ||
|
|
||
| // return ( | ||
| // <div className={styles.outer} key={comment.commentId}> | ||
| // <div className={styles.commentProfile}> | ||
| // <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} /> | ||
| // {comment.isMyComment && ( | ||
| // <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}> | ||
| // <DropdownMenu.Kebab /> | ||
| // <DropdownMenu.Content> | ||
| // <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item> | ||
| // <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item> | ||
| // </DropdownMenu.Content> | ||
| // </DropdownMenu> | ||
| // )} | ||
| // </div> | ||
|
|
||
| // <p className={styles.commentDate}>{comment.date}</p> | ||
| // {isEditing ? ( | ||
| // <DiaryCommentEdit | ||
| // defaultValue={comment.comment} | ||
| // mutationFn={commentPutMutation.mutate} | ||
| // onCancel={handleCancel} | ||
| // /> | ||
| // ) : ( | ||
| // <p className={styles.commentContent}>{comment.comment}</p> | ||
| // )} | ||
| // </div> | ||
| // ); | ||
| // } |
154 changes: 77 additions & 77 deletions
154
components/diaries/diary-content/comment/diary-comment.tsx
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 |
|---|---|---|
| @@ -1,84 +1,84 @@ | ||
| import DropdownMenu from '@/components/kebab/kebab'; | ||
| import styles from './diary-comment.module.scss'; | ||
| import useToggle from '@/hooks/use-toggle'; | ||
| import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile'; | ||
| import { Comment } from '@/api/diaries'; | ||
| import useParentCommentMutation from '@/hooks/queries/diary/use-parent-comment-mutation'; | ||
| import { useState } from 'react'; | ||
| import DiaryCommentForm from './diary-comment-form'; | ||
| import DiaryCommentReply from './diary-comment-reply'; | ||
| import useCommentPostMutation from '@/hooks/queries/diary/use-comment-post-mutation'; | ||
| import DiaryCommentEdit from './diary-comment-edit'; | ||
| import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation'; | ||
| // import DropdownMenu from '@/components/kebab/kebab'; | ||
| // import styles from './diary-comment.module.scss'; | ||
| // import useToggle from '@/hooks/use-toggle'; | ||
| // import CalendarTodoProfile from '@/components/calendar-monthly/calendar-todo-profile'; | ||
| // import { Comment } from '@/api/diaries'; | ||
| // import useParentCommentMutation from '@/hooks/queries/diary/use-parent-comment-mutation'; | ||
| // import { useState } from 'react'; | ||
| // import DiaryCommentForm from './diary-comment-form'; | ||
| // import DiaryCommentReply from './diary-comment-reply'; | ||
| // import useCommentPostMutation from '@/hooks/queries/diary/use-comment-post-mutation'; | ||
| // import DiaryCommentEdit from './diary-comment-edit'; | ||
| // import useCommentPutMutation from '@/hooks/queries/diary/use-comment-put-mutation'; | ||
|
|
||
| interface DiaryCommentProps { | ||
| comment: Comment; | ||
| diaryId: string; | ||
| } | ||
| // interface DiaryCommentProps { | ||
| // comment: Comment; | ||
| // diaryId: string; | ||
| // } | ||
|
|
||
| export default function DiaryComment({ comment, diaryId }: DiaryCommentProps) { | ||
| const [isReplying, setIsReplying] = useState(false); | ||
| const [isEditing, setIsEditing] = useState(false); | ||
| // export default function DiaryComment({ comment, diaryId }: DiaryCommentProps) { | ||
| // const [isReplying, setIsReplying] = useState(false); | ||
| // const [isEditing, setIsEditing] = useState(false); | ||
|
|
||
| const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle(); | ||
| // const { isToggle: isOpen, handleCloseToggle: onCloseToggle, handleOpenToggle: onOpenToggle } = useToggle(); | ||
|
|
||
| const commentPostMutation = useCommentPostMutation(diaryId); | ||
| const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId); | ||
| const parentCommentMutation = useParentCommentMutation(diaryId, comment.commentId); | ||
| // const commentPostMutation = useCommentPostMutation(diaryId); | ||
| // const commentPutMutation = useCommentPutMutation(diaryId, comment.commentId); | ||
| // const parentCommentMutation = useParentCommentMutation(diaryId, comment.commentId); | ||
|
|
||
| const handleDelete = () => parentCommentMutation.mutate(); | ||
| const handleEdit = () => { | ||
| setIsEditing(true); | ||
| onCloseToggle(); | ||
| }; | ||
| const handleCancel = () => setIsEditing(false); | ||
| // const handleDelete = () => parentCommentMutation.mutate(); | ||
| // const handleEdit = () => { | ||
| // setIsEditing(true); | ||
| // onCloseToggle(); | ||
| // }; | ||
| // const handleCancel = () => setIsEditing(false); | ||
|
|
||
| const handleClickReply = () => { | ||
| setIsReplying(!isReplying); | ||
| }; | ||
| // const handleClickReply = () => { | ||
| // setIsReplying(!isReplying); | ||
| // }; | ||
|
|
||
| return ( | ||
| <div className={styles.outer} key={comment.commentId}> | ||
| <div className={styles.commentProfile}> | ||
| <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} /> | ||
| {comment.isMyComment && ( | ||
| <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}> | ||
| <DropdownMenu.Kebab /> | ||
| <div style={{ position: 'relative', right: '2px' }}> | ||
| <DropdownMenu.Content> | ||
| <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item> | ||
| <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item> | ||
| </DropdownMenu.Content> | ||
| </div> | ||
| </DropdownMenu> | ||
| )} | ||
| </div> | ||
| <p className={styles.commentDate}>{comment.date}</p> | ||
| {isEditing ? ( | ||
| <DiaryCommentEdit | ||
| defaultValue={comment.comment} | ||
| mutationFn={commentPutMutation.mutate} | ||
| onCancel={handleCancel} | ||
| /> | ||
| ) : ( | ||
| <p className={styles.commentContent}>{comment.comment}</p> | ||
| )} | ||
| <button onClick={handleClickReply} className={styles.commentReply}> | ||
| 답글 {comment.children.length}개 | ||
| </button> | ||
| {isReplying && ( | ||
| <> | ||
| {comment.children.map((child) => ( | ||
| <DiaryCommentReply key={child.commentId} comment={child} diaryId={diaryId} /> | ||
| ))} | ||
| <div style={{ width: '100%', marginBottom: '10px' }}></div> | ||
| <DiaryCommentForm | ||
| mutateFn={commentPostMutation.mutate} | ||
| placeholder="답글 입력..." | ||
| parentCommentId={comment.commentId} | ||
| /> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| // return ( | ||
| // <div className={styles.outer} key={comment.commentId}> | ||
| // <div className={styles.commentProfile}> | ||
| // <CalendarTodoProfile name={comment.commentAuthor} src={comment.commentAuthorImage} /> | ||
| // {comment.isMyComment && ( | ||
| // <DropdownMenu value={{ isOpen, onCloseToggle, onOpenToggle }}> | ||
| // <DropdownMenu.Kebab /> | ||
| // <div style={{ position: 'relative', right: '2px' }}> | ||
| // <DropdownMenu.Content> | ||
| // <DropdownMenu.Item onClick={handleEdit}>수정</DropdownMenu.Item> | ||
| // <DropdownMenu.Item onClick={handleDelete}>삭제</DropdownMenu.Item> | ||
| // </DropdownMenu.Content> | ||
| // </div> | ||
| // </DropdownMenu> | ||
| // )} | ||
| // </div> | ||
| // <p className={styles.commentDate}>{comment.date}</p> | ||
| // {isEditing ? ( | ||
| // <DiaryCommentEdit | ||
| // defaultValue={comment.comment} | ||
| // mutationFn={commentPutMutation.mutate} | ||
| // onCancel={handleCancel} | ||
| // /> | ||
| // ) : ( | ||
| // <p className={styles.commentContent}>{comment.comment}</p> | ||
| // )} | ||
| // <button onClick={handleClickReply} className={styles.commentReply}> | ||
| // 답글 {comment.children.length}개 | ||
| // </button> | ||
| // {isReplying && ( | ||
| // <> | ||
| // {comment.children.map((child) => ( | ||
| // <DiaryCommentReply key={child.commentId} comment={child} diaryId={diaryId} /> | ||
| // ))} | ||
| // <div style={{ width: '100%', marginBottom: '10px' }}></div> | ||
| // <DiaryCommentForm | ||
| // mutateFn={commentPostMutation.mutate} | ||
| // placeholder="답글 입력..." | ||
| // parentCommentId={comment.commentId} | ||
| // /> | ||
| // </> | ||
| // )} | ||
| // </div> | ||
| // ); | ||
| // } |
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
Oops, something went wrong.