FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 (#22)

* FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시

* FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가

* FE-43💄 MoreOptionMenu 스타일 수정

src/apis/epigram.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosError } from 'axios';
 import { GetEpigramResponseType, GetEpigramRequestType } from '@/schema/epigram';
+import TOKEN from '@/lib/constants';
 
 const BASE_URL = 'https://fe-project-epigram-api.vercel.app/5-9';
 
@@ -12,8 +13,6 @@ const getEpigram = async (request: GetEpigramRequestType): Promise<GetEpigramRes
   }
 
   // NOTE : 임시로 테스트계정의 토큰을 변수로 선언해서 사용
-  const TOKEN =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIwODM4NTE5LCJleHAiOjE3MjA4NDAzMTksImlzcyI6InNwLWVwaWdyYW0ifQ.cPwm4T2LRi985p9NDqXrR0fSY5n-cvxzjGh8vmshoSM';
 
   try {
     const response = await axios.get(`${BASE_URL}/epigrams/${id}`, {

src/apis/user.ts

@@ -1,8 +1,13 @@
 import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user';
+import TOKEN from '@/lib/constants';
 import httpClient from '.';
 
 export const getMe = async (): Promise<GetUserResponseType> => {
-  const response = await httpClient.get('/users/me');
+  const response = await httpClient.get('/users/me', {
+    headers: {
+      Authorization: `Bearer ${TOKEN}`,
+    },
+  });
   return response.data;
 };
 

src/components/epigram/MoreOptionMenu.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+
+function MoreOptionsMenu() {
+  return (
+    <div className='relative'>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button type='button'>
+            <Image src='/meatballIcon.svg' alt='더 보기 아이콘' width={36} height={36} />
+          </button>
+        </DropdownMenuTrigger>
+        {/* NOTE: width를 조정할려면 Dropdown컴포넌트에서 min-w 수정 필요 */}
+        <DropdownMenuContent className='absolute top-[-36px] left-5 z-10 bg-white'>
+          <DropdownMenuItem className='hover:text-illust-blue cursor-pointer text-center'>수정</DropdownMenuItem>
+          <DropdownMenuItem className='hover:text-illust-blue cursor-pointer text-center'>삭제</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export default MoreOptionsMenu;

src/lib/constants.ts

@@ -0,0 +1,4 @@
+const TOKEN =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIwODc2OTg5LCJleHAiOjE3MjA4Nzg3ODksImlzcyI6InNwLWVwaWdyYW0ifQ.cKo4iplziBvVxnCVAYi0rA213R-6w2iHCu-Z9bukUhA';
+
+export default TOKEN;

src/pageLayout/Epigram/EpigramFigure.tsx

@@ -1,16 +1,21 @@
-import { GetEpigramResponseType } from '@/schema/epigram';
 import Image from 'next/image';
+import MoreOptionsMenu from '@/components/epigram/MoreOptionMenu';
+import { EpigramFigureProps } from '@/types/epigram.types';
 
-function EpigramFigure({ epigram }: { epigram: GetEpigramResponseType }) {
+function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) {
+  const isAuthor = currentUserId === epigram.writerId;
   return (
     <div className='bg-[length:100%_2.5em] bg-[linear-gradient(#eee_.1em,transparent_.1em)] w-full flex justify-center py-6'>
       <figure className='w-80 md:w-96 lg:w-[640px] flex flex-col lg: gap-8'>
-        <div className='flex gap-2'>
-          {epigram.tags.map((tag) => (
-            <p key={tag.id} className='text-gray-400 text-base lg:text-xl font-normal'>
-              #{tag.name}
-            </p>
-          ))}
+        <div className='flex justify-between'>
+          <div className='flex gap-2'>
+            {epigram.tags.map((tag) => (
+              <p key={tag.id} className='text-gray-400 text-base lg:text-xl font-normal'>
+                #{tag.name}
+              </p>
+            ))}
+          </div>
+          {isAuthor && <MoreOptionsMenu />}
         </div>
         <blockquote className=''>
           <p className='text-2xl lg:text-3xl font-normal'>{epigram.content}</p>

src/pages/epigram/[id].tsx

@@ -4,6 +4,7 @@ import CommentSection from '@/pageLayout/Epigram/EpigramComment';
 import EpigramFigure from '@/pageLayout/Epigram/EpigramFigure';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { useMeQuery } from '@/hooks/userQueryHooks';
 
 function DetailPage() {
   const router = useRouter();
@@ -12,6 +13,7 @@ function DetailPage() {
   const parsedId = GetEpigramRequestSchema.safeParse({ id });
 
   const { data: epigram, isLoading, error } = useEpigramQuery(parsedId.success ? parsedId.data : undefined, parsedId.success);
+  const { data: userData } = useMeQuery();
 
   if (isLoading) return <div>로딩 중...</div>;
   if (!parsedId.success) return <div>잘못된 Epigram ID입니다.</div>;
@@ -25,8 +27,7 @@ function DetailPage() {
         <Image src='/logo.svg' alt='Epigram 로고' width={172} height={48} />
         <Image src='/share.svg' alt='공유 버튼' width={36} height={36} />
       </nav>
-      <EpigramFigure epigram={epigram} />
-      <CommentSection />
+      <EpigramFigure epigram={epigram} currentUserId={userData?.id} /> <CommentSection />
     </div>
   );
 }

src/types/epigram.types.ts

@@ -0,0 +1,7 @@
+import { GetEpigramResponseType } from '@/schema/epigram';
+import { GetUserResponseType } from '@/schema/user';
+
+export interface EpigramFigureProps {
+  epigram: GetEpigramResponseType;
+  currentUserId: GetUserResponseType['id'] | undefined;
+}