From 962665884e6e25ccae7b736d196ae8bc7907cfea Mon Sep 17 00:00:00 2001 From: Jiseok Woo <115205098+jisurk@users.noreply.github.com> Date: Mon, 15 Jul 2024 09:42:00 +0900 Subject: [PATCH] =?UTF-8?q?FE-43=E2=9C=A8=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?ID=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=AF=B8=ED=8A=B8=EB=B3=BC?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=91=9C=EC=8B=9C=20(#22)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 * FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가 * FE-43💄 MoreOptionMenu 스타일 수정 --- public/meatballIcon.svg | 5 +++++ src/apis/epigram.ts | 3 +-- src/apis/user.ts | 7 ++++++- src/components/epigram/MoreOptionMenu.tsx | 23 +++++++++++++++++++++++ src/lib/constants.ts | 4 ++++ src/pageLayout/Epigram/EpigramFigure.tsx | 21 +++++++++++++-------- src/pages/epigram/[id].tsx | 5 +++-- src/types/epigram.types.ts | 7 +++++++ 8 files changed, 62 insertions(+), 13 deletions(-) create mode 100644 public/meatballIcon.svg create mode 100644 src/components/epigram/MoreOptionMenu.tsx create mode 100644 src/lib/constants.ts create mode 100644 src/types/epigram.types.ts 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; +}