플로팅 버튼 위치가 상이한 문제, 상세 컨텐츠가 잘리는 문제를 해결한다. (SWYP-team-2th#156)

YOOJS1205 · Mar 1, 2025 · 87d46e9 · 87d46e9
1 parent 5b2fac9
commit 87d46e9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/src/components/common/Dialog/DialogProvider.tsx b/src/components/common/Dialog/DialogProvider.tsx
@@ -28,7 +28,7 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
       {createPortal(
         currentDialog && (
           <Overlay onClose={closeDialog}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[430px] pr-[25px] pl-[25px]">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[430px]">
               {currentDialog}
             </div>
           </Overlay>

diff --git a/src/components/common/Layout/DefaultLayout.tsx b/src/components/common/Layout/DefaultLayout.tsx
@@ -10,18 +10,16 @@ export default function DefaultLayout() {
   };
 
   return (
-    <div className="w-full h-full mx-auto my-0 min-h-lvh desktop:w-[480px] relative">
+    <div className="relative w-full h-full mx-auto my-0 min-h-lvh max-w-[480px]">
       <Outlet />
-
-      <div className="fixed bottom-[12vh] desktop:right-[calc(50%-216px)] z-50">
-        <FloatingButton
-          onClick={handleClickFloatingButton}
-          buttonType="secondary"
-          size="large"
-        >
-          <Icon name="PlusWhite" size="large" />
-        </FloatingButton>
-      </div>
+      <FloatingButton
+        onClick={handleClickFloatingButton}
+        className="absolute bottom-25 right-6 z-50"
+        buttonType="secondary"
+        size="large"
+      >
+        <Icon name="PlusWhite" size="large" />
+      </FloatingButton>
     </div>
   );
 }
diff --git a/src/pages/Vote/VotePage.tsx b/src/pages/Vote/VotePage.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import useGetMyInfo from '@/api/useGetMyInfo';
 import Logo from '@/assets/icons/logo.svg?react';
 import { Header } from '@/components/common/Header/Header';
 import Icon from '@/components/common/Icon';
@@ -9,6 +10,11 @@ import VoteSection from '@/components/vote-detail/Vote/VoteSection';
 
 export default function VotePage() {
   const navigate = useNavigate();
+  const { data: myInfo } = useGetMyInfo();
+
+  const handleClickUserButton = () => {
+    navigate(`/user/${myInfo?.id}`);
+  };
 
   return (
     <div className="bg-gray-200 w-full h-screen flex itmes-center flex-col pt-[85px] relative">
@@ -29,11 +35,16 @@ export default function VotePage() {
           />
         }
         rightNode={
-          <Icon className="cursor-pointer" name="UserFill" size="large" />
+          <Icon
+            className="cursor-pointer"
+            onClick={handleClickUserButton}
+            name="UserFill"
+            size="large"
+          />
         }
       />
       <div
-        className="mx-[15px] px-[10px] pt-[18px] pb-3 bg-gray-100 rounded-2xl shadow-[0px_2px_20px_0px_rgba(0,0,0,0.03),0px_20px_15px_0px_rgba(0,0,0,0.02),0px_8px_25px_0px_rgba(0,0,0,0.04)] 
+        className="h-[calc(100dvh-165px)] overflow-y-auto mx-[15px] px-[10px] pt-[18px] pb-3 bg-gray-100 rounded-2xl shadow-[0px_2px_20px_0px_rgba(0,0,0,0.03),0px_20px_15px_0px_rgba(0,0,0,0.02),0px_8px_25px_0px_rgba(0,0,0,0.04)] 
         "
       >
         <VoteTopSection />