design: 홈페이지 FAB 아이콘 변경

Kernel360 · Mar 28, 2024 · 07db1a8 · 07db1a8
1 parent 7c81a93
commit 07db1a8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/frontend/public/icons/edit.svg b/frontend/public/icons/edit.svg
diff --git a/frontend/src/app/(with-header)/(home)/HomeFAB.tsx b/frontend/src/app/(with-header)/(home)/HomeFAB.tsx
@@ -2,13 +2,16 @@ import { homePopOverData } from '@/app/_components/ui/popover/constants';
 import FloatingActionButton from '@/app/_components/FloatingActionButton';
 
 import PlusIcon from '@/../public/icons/plus.svg';
+import EditIcon from '@/../public/icons/edit.svg';
 
 function OpenedFABIcon() {
-  return <PlusIcon className="w-9 h-9 rotate-45 duration-200 z-30" />;
+  return <PlusIcon className="w-9 h-9 rotate-45 z-30" />;
 }
 
 function ClosedFABIcon() {
-  return <PlusIcon className="w-9 h-9 rotate-0 duration-200" />;
+  return (
+    <EditIcon className="w-12 h-12 fill-none stroke-white stroke-[1.5px]" />
+  );
 }
 
 export default function HomeFAB() {

diff --git a/frontend/src/app/_components/FloatingActionButton.tsx b/frontend/src/app/_components/FloatingActionButton.tsx
@@ -28,8 +28,8 @@ export default function FloatingActionButton({
   return (
     <div className="w-min absolute right-24">
       <button
-        className={`fixed bottom-20 w-16 h-16 rounded-full flex justify-center items-center  ${
-          isModalOpened ? 'bg-black cursor-auto' : 'bg-blue-600'
+        className={`fixed bottom-20 w-16 h-16 rounded-full flex justify-center items-center bg-black ${
+          isModalOpened ? 'cursor-auto' : ''
         }`}
         onClick={() => setIsModalOpened(!isModalOpened)}
       >

diff --git a/frontend/src/app/_components/reaction/MoreButton.tsx b/frontend/src/app/_components/reaction/MoreButton.tsx
@@ -72,7 +72,7 @@ export default function MoreButton({
     popOverData.push(
       {
         label: '수정하기',
-        icon: <EditIcon className="w-6 h-6 fill-none" />,
+        icon: <EditIcon className="w-6 h-6 fill-none stroke-black" />,
         onClick: () => {
           setEditOrDelete('수정');
         },