게시글 생성/수정 ( defaultValues로 관리 )

게시글 작성/수정을 하나의 컴포넌트에서 defaultValues 값 유무에따라 관리

  const defaultValues: Partial<FeedFormValues> = {
    title: defaultValue?.title || "",
    description: defaultValue?.description || "",
    tags: defaultValue?.tags || [],
  };

 

게시글 작성

 

게시글 수정

 

모달 on/off 상태 관리

  const [dialogOpen, setDialogOpen] = useState(false);

 

모달 동작을 위해 DropDownMenu 컴포넌트 활용

          <FeedDropDownMenu
            role={role}
            userId={user?.id}
            item={item}
            onCompleted={onCompleted}
          />

 

DropDownMenu 커스텀 정의 예시

import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import * as React from "react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="w-4 h-4 ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

 

커스텀 DropDownMenu 컴포넌트 예시

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
} from "@/components/ui/dropdown-menu";
import { toast } from "@/components/ui/use-toast";
import WriteFeed from "./WriteFeed";
import DeleteFeed from "./DeleteFeed";
import { MoreVertical } from "lucide-react";

export default function FeedDropDownMenu({
  role,
  userId,
  item,
  onCompleted,
  setDialogOpen,
}: {
  role: string;
  userId?: number;
  item: IFeedItem;
  onCompleted?: Function;
  setDialogOpen?: any;
})


  return (
    <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
      <DropdownMenuTrigger asChild>
        <MoreVertical className="w-6 h-6 top-1 right-3 cursor-pointer text-icon-secondary" />
      </DropdownMenuTrigger>

      <DropdownMenuContent
        onPointerDownOutside={() => setDropdownOpen(false)}
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
      
                {userId == item.userId && (
            <WriteFeed
              renderTrigger={(onClick) => (
                <div
                  className="px-3 pt-4 pb-3.5 cursor-pointer"
                  onClick={onClick}
                >
                  게시글 수정하기
                </div>
              )}
              defaultValue={item}
              onCompleted={(feedInfo: any) => {
                onCompleted && onCompleted(feedInfo);
                setTimeout(() => {
                  setDropdownOpen(false);
                }, 150);
              }}
            />
          )}
      
        );
}