게시글 삭제, 상세 게시글 DropDownMenu 연결

이전 게시글 생성/수정과 연계

 

 

DropDownMenu 컴포넌트에 삭제 예시

          {(userId == item.userId || role == "owner") && (
            <DeleteFeed
              renderTrigger={(onClick) => (
                <div
                  className="px-3 pt-4 pb-3.5 cursor-pointer"
                  onClick={onClick}
                >
                  게시글 삭제하기
                </div>
              )}
              feedId={item.id}
              onCompleted={onCompleted}
              setDetailDialogOpen={setDialogOpen}
            />
          )}

 

삭제 로직 예시

export default function DeleteFeed({
  renderTrigger,
  onCompleted,
  feedId,
  setDetailDialogOpen,
}: {
  renderTrigger: (onClick: () => void) => React.ReactNode;
  onCompleted?: Function;
  feedId: number;
  setDetailDialogOpen?: any;
}) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const params = useParams();

  const onClickDelete = async () => {
    setLoading(true);

    const result = await deleteFeed({
      domain: params.domain as string, // api에 맞는 domain값
      feedId,
    });

    if (result.statusCode === 200) {
      if (onCompleted) onCompleted();

      setDialogOpen(false);

      if (setDetailDialogOpen) setDetailDialogOpen(false);
    }

    toast({ description: result.message });
    setLoading(false);
  };

  return (
    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
      <DialogTrigger asChild>
        {renderTrigger(() => setDialogOpen(true))}
      </DialogTrigger>

      <DialogContent className="py-7 px-8 md:max-w-[500px]">
        <h3 className="mb-4 text-title_l md:text-subhead_s">
          게시글을 삭제할까요?
        </h3>

        <div className="mb-6 text-body_m">
          삭제할 경우 내가 작성한 게시글 내용을 복구할 수 없어요. 정말로
          삭제할까요?
        </div>

        <DialogActions>
          <div className="flex gap-2 w-full justify-between text-title_m">
            <DropdownMenuItem asChild>
              <Button
                variant="secondary"
                className="w-1/2"
                loading={loading}
                disabled={loading}
                onClick={onClickDelete}
              >
                삭제하기
              </Button>
            </DropdownMenuItem>

            <DialogClose asChild>
              <DropdownMenuItem asChild>
                <Button variant="primary" className="w-1/2">
                  나중에 할게요
                </Button>
              </DropdownMenuItem>
            </DialogClose>
          </div>
        </DialogActions>
      </DialogContent>
    </Dialog>
  );
}

 

 

 

상세 게시글에 커스텀DropDownMenu 추가

              <FeedDropDownMenu
                role={role}
                userId={user?.id}
                item={feedDetails}
                onCompleted={(updateFeedInfo: any) => {
                  setFeedDetails({
                    ...feedDetails,
                    ...updateFeedInfo,
                  });
                  onCompleted && onCompleted();
                }}
                setDialogOpen={setDialogOpen}
              />