FE-43💄 MoreOptionMenu 스타일 수정

epigram5-9 · Jul 14, 2024 · 4fa679c · 4fa679c
1 parent 8cde498
commit 4fa679c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -1,6 +1,6 @@
 import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user';
-import httpClient from '.';
 import TOKEN from '@/lib/constants';
+import httpClient from '.';
 
 export const getMe = async (): Promise<GetUserResponseType> => {
   const response = await httpClient.get('/users/me', {

diff --git a/src/components/epigram/MoreOptionMenu.tsx b/src/components/epigram/MoreOptionMenu.tsx
@@ -3,17 +3,20 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 
 function MoreOptionsMenu() {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button type='button'>
-          <Image src='/meatballIcon.svg' alt='더 보기 아이콘' width={36} height={36} />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem>수정</DropdownMenuItem>
-        <DropdownMenuItem>삭제</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <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>
   );
 }
 

diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx
@@ -7,12 +7,14 @@ function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) {
   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=''>