diff --git a/public/meatballIcon.svg b/public/meatballIcon.svg new file mode 100644 index 00000000..49a9368e --- /dev/null +++ b/public/meatballIcon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/apis/epigram.ts b/src/apis/epigram.ts index e132461f..d7b962df 100644 --- a/src/apis/epigram.ts +++ b/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 => { - const response = await httpClient.get('/users/me'); + const response = await httpClient.get('/users/me', { + headers: { + Authorization: `Bearer ${TOKEN}`, + }, + }); return response.data; }; diff --git a/src/components/epigram/MoreOptionMenu.tsx b/src/components/epigram/MoreOptionMenu.tsx new file mode 100644 index 00000000..ad4d4778 --- /dev/null +++ b/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 ( +
+ + + + + {/* NOTE: width를 조정할려면 Dropdown컴포넌트에서 min-w 수정 필요 */} + + 수정 + 삭제 + + +
+ ); +} + +export default MoreOptionsMenu; diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 00000000..415bd875 --- /dev/null +++ b/src/lib/constants.ts @@ -0,0 +1,4 @@ +const TOKEN = + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIwODc2OTg5LCJleHAiOjE3MjA4Nzg3ODksImlzcyI6InNwLWVwaWdyYW0ifQ.cKo4iplziBvVxnCVAYi0rA213R-6w2iHCu-Z9bukUhA'; + +export default TOKEN; diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx index a82eff5e..f93dabe6 100644 --- a/src/pageLayout/Epigram/EpigramFigure.tsx +++ b/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 (
-
- {epigram.tags.map((tag) => ( -

- #{tag.name} -

- ))} +
+
+ {epigram.tags.map((tag) => ( +

+ #{tag.name} +

+ ))} +
+ {isAuthor && }

{epigram.content}

diff --git a/src/pages/epigram/[id].tsx b/src/pages/epigram/[id].tsx index bb517614..c947b12b 100644 --- a/src/pages/epigram/[id].tsx +++ b/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
로딩 중...
; if (!parsedId.success) return
잘못된 Epigram ID입니다.
; @@ -25,8 +27,7 @@ function DetailPage() { Epigram 로고 공유 버튼 - - +
); } diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts new file mode 100644 index 00000000..4c6939b1 --- /dev/null +++ b/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; +}