[Feature/FE] 스타일 관련 코드 수정

frontend/src/components/Profile/ProductBar/ProductBar.tsx

@@ -1,8 +1,6 @@
 import * as S from '@/components/Profile/ProductBar/ProductBar.style';
 
-import theme from '@/style/theme';
-
-import Plus from '@/assets/plus.svg';
+// import Plus from '@/assets/plus.svg';
 
 type BarType = 'default' | 'selected' | 'add';
 
@@ -23,7 +21,7 @@ function ProductBar({ name, barType, handleClick }: Props) {
 function AddButton({ handleClick }: Pick<Props, 'handleClick'>) {
   return (
     <S.AddContainer barType={'add'} onClick={handleClick}>
-      <Plus stroke={theme.colors.gray} />
+      {/* <Plus stroke={theme.colors.gray} /> */}
     </S.AddContainer>
   );
 }

frontend/src/components/common/FloatingButton/FloatingButton.stories.tsx

@@ -2,9 +2,7 @@ import { ComponentStory } from '@storybook/react';
 
 import FloatingButton from '@/components/common/FloatingButton/FloatingButton';
 
-import theme from '@/style/theme';
-
-import Plus from '@/assets/plus.svg';
+import Writing from '@/assets/writing.svg';
 
 export default {
   component: FloatingButton,
@@ -17,10 +15,11 @@ const Template: ComponentStory<typeof FloatingButton> = (args) => (
 
 export const Default = () => (
   <Template
+    label={'리뷰 작성하기'}
     clickHandler={() => {
       alert('클릭됨');
     }}
   >
-    <Plus stroke={theme.colors.white} />
+    <Writing />
   </Template>
 );

frontend/src/components/common/FloatingButton/FloatingButton.style.tsx

@@ -1,19 +1,21 @@
 import styled, { css } from 'styled-components';
 
-export const Container = styled.section``;
+export const Container = styled.section`
+  position: fixed;
+  bottom: 120px;
+  right: 30px;
+  z-index: 1;
+`;
 
 export const Button = styled.button`
-  width: 3rem;
+  display: flex;
+  width: max-width;
+  padding: 0 1rem;
   height: 3rem;
 
-  display: flex;
   justify-content: center;
   align-items: center;
 
-  position: fixed;
-  bottom: 100px;
-  right: 30px;
-
   ${({ theme: { device } }) => css`
     @media screen and ${device.desktop} {
       right: 50px;
@@ -24,7 +26,7 @@ export const Button = styled.button`
   font-size: 2rem;
   font-weight: 600;
 
-  border-radius: 50%;
+  border-radius: 50px;
   border: none;
 
   background-color: ${({ theme }) => theme.colors.primary};

frontend/src/components/common/Modal/Modal.tsx

@@ -26,6 +26,10 @@ function Modal({
     handleClose();
   };
 
+  const preventScroll = (scrollY: number) => () => {
+    window.scrollTo(0, scrollY);
+  };
+
   const handleFocusRemove = () => {
     const root = document.querySelector<HTMLElement>('#root');
     root.setAttribute('aria-hidden', 'true');
@@ -37,15 +41,18 @@ function Modal({
   };
 
   useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    setScrollOffset(window.scrollY);
+    const scrollY = window.scrollY;
+    setScrollOffset(scrollY);
+    const preventScrollHandler = preventScroll(scrollY);
+
     handleFocusRemove();
     window.addEventListener('keydown', closeOnEscape);
+    window.addEventListener('scroll', preventScrollHandler);
 
     return () => {
-      document.body.style.overflow = 'auto';
       handleFocusRetrieve();
       window.removeEventListener('keydown', closeOnEscape);
+      window.removeEventListener('scroll', preventScrollHandler);
     };
   }, []);
 

frontend/src/pages/Product/Product.tsx

@@ -16,13 +16,12 @@ import ReviewListSection from '@/components/Review/ReviewListSection/ReviewListS
 import useAnimation from '@/hooks/useAnimation';
 import useAuth from '@/hooks/useAuth';
 import useDevice from '@/hooks/useDevice';
+import useModal from '@/hooks/useModal';
 import useProduct from '@/hooks/useProduct';
 import useReviews from '@/hooks/useReviews';
 import useStatistics from '@/hooks/useStatistics';
 
-import theme from '@/style/theme';
-
-import Plus from '@/assets/plus.svg';
+import Writing from '@/assets/writing.svg';
 
 export const PRODUCT_PAGE_REVIEW_SIZE = 6;
 
@@ -72,6 +71,12 @@ function Product() {
   const [shouldSheetRender, handleSheetUnmount, sheetAnimationTrigger] =
     useAnimation(isSheetOpen);
 
+  const { showAlert } = useModal();
+
+  const showAlertHandler = async () => {
+    await showAlert('리뷰를 작성하려면 로그인 해주세요.');
+  };
+
   useEffect(() => {
     if (!isLoggedIn) toggleSheetOpen();
   }, [isLoggedIn]);
@@ -102,11 +107,12 @@ function Product() {
         ProductDetails
       )}
       <S.ReviewListWrapper tabIndex={0} ref={reviewRef}>
-        {isLoggedIn && (
-          <FloatingButton label={'리뷰 작성하기'} clickHandler={toggleSheetOpen}>
-            <Plus stroke={theme.colors.white} />
-          </FloatingButton>
-        )}
+        <FloatingButton
+          label={'리뷰 작성하기'}
+          clickHandler={isLoggedIn ? toggleSheetOpen : showAlertHandler}
+        >
+          <Writing />
+        </FloatingButton>
         <AsyncWrapper
           fallback={<Loading />}
           isReady={isReviewReady}