8.Message Menu

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s

를 보며 실습하며 정리하는 글

---

메세지를 수정하거나 삭제하는 등을 할 수 있게끔 해보자. 

가장 먼저 수정/삭제등의 버튼이 있어야겠지.

... 표시를 누르면 수정 삭제등의 버튼이 모달?로 나와서 수정 및 삭제할 수 있게해주는 걸 우선 만들어보자.

shadCn에서 dropdown menu를 검색해 인스톨해준다.

https://ui.shadcn.com/docs/components/dropdown-menu

Dropdown Menu

npx shadcn-ui@latest add dropdown-menu

 

lucide.dev에서 쓸만한 메뉴 아이콘을 찾아서 넣어줄거다.

 https://lucide.dev/icons/ellipsis  이 아이콘으로 해주겠다.

shadCn을 설치할때  lucide-react가 같이 설치되어 있기 때문에, 원하는 모양을 찾고, 태그만 복사해오면 된다.

이제 Message.tsx에 들어가서 dropdown menu를 만들어주자.

 

import { IMessage } from "@/lib/store/messages";
import Image from "next/image";
import React from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Ellipsis } from "lucide-react";
import { useUser } from "@/lib/store/user";

const MessageMenu = () => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Ellipsis />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Action</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

const Message = ({ message }: { message: IMessage }) => {
  const user = useUser((state) => state.user); // 유저 정보 가져오기

  return (
    <div className="flex gap-2">
      <div>
        <Image
          src={message.users?.avatar_url!}
          alt={message.users?.display_name!}
          width={40}
          height={40}
          className="rounded-full right-2"
        />
      </div>

      <div className="flex-1">
        <div className="flex items-center  justify-between">
          <div className="flex items-center gap-1">
            <h1 className="font-bold">{message.users?.display_name}</h1>
            <h1 className="text-sm text-gray-400">
              {new Date(message.created_at).toDateString()}
            </h1>
          </div>
          {/* 현재 로그인되어있는 유저와 메세지 작성자 유저의 아이디가 같을때만 수정메뉴가 보일 수 있도록. */}
          {message.users?.id === user?.id && <MessageMenu />}
        </div>
        <p className="text-gray-300">{message.text}</p>
      </div>
    </div>
  );
};

export default Message;

 

설명할 부분이 많이 없어서 그냥 코드를 넣었는데, 

DropDown 메뉴 만드는 건 Shadcn에도 설명이 잘되어있기도 하고, 어렵지않다.

그냥 위처럼 하면 된다.

또, 봐줄만한 부분이 user 정보를 가져와서 (zustand state management에서) 

글을 작성한 유저와 현재 로그인 되어있는 유저의 아이디가 같을때만 수정 메뉴가 보일 수 있도록 했다.

 

 

github : https://github.com/Wunhyeon/Next-Supabase-Chat/tree/8.MessageMenu

GitHub - Wunhyeon/Next-Supabase-Chat