style: 메인페이지 편집 부분 스타일 수정

components/Home/CategoryFolderList/CategoryFolderList.tsx

@@ -11,14 +11,16 @@ const CategoryFolderList = ({ list }: CategoryFolderListProps): React.ReactEleme
   return (
     <>
       {list.map((folder: CategoryFolder) => (
-        <Link key={folder.categoryId} href={`/posts?categoryId=${folder.categoryId}`}>
-          <HomeFolder
-            folderId={folder.categoryId}
-            folderName={folder.description}
-            count={folder.count}
-            coverImage={folder.image}
-            isEditMode={false}
-          />
+        <Link key={folder.categoryId} href={`/posts?categoryId=${folder.categoryId}`} passHref>
+          <a>
+            <HomeFolder
+              folderId={folder.categoryId}
+              folderName={folder.description}
+              count={folder.count}
+              coverImage={folder.image}
+              isEditMode={false}
+            />
+          </a>
         </Link>
       ))}
     </>

components/Home/FloatingButtonGroup/FloatingButtonGroup.tsx

@@ -9,20 +9,14 @@ interface FloatingButtonGroupProps {
 
 const FloatingButtonGroup = ({ hasIncompletedPosts }: FloatingButtonGroupProps) => {
   const [isScrollOnTop, setIsScrollOnTop] = useState(true);
-  const [isScrollAfterBanner, setIsScrollAfterBanner] = useState(false);
 
   const handleScrollOnTop = () => {
     setIsScrollOnTop(window.scrollY === 0);
   };
 
-  const handleScrollAfterBanner = () => {
-    setIsScrollAfterBanner(window.scrollY >= 256);
-  };
-
   useEffect(() => {
     const handleScroll = () => {
       handleScrollOnTop();
-      handleScrollAfterBanner();
     };
 
     window.addEventListener('scroll', handleScroll, { passive: true });
@@ -34,7 +28,9 @@ const FloatingButtonGroup = ({ hasIncompletedPosts }: FloatingButtonGroupProps)
     <>
       {hasIncompletedPosts && <HomeFloatingButton isScrollOnTop={isScrollOnTop} />}
       <FloatingContainer>
-        <ButtonContainer>{isScrollAfterBanner && <CommonWritingButton />}</ButtonContainer>
+        <ButtonContainer>
+          <CommonWritingButton />
+        </ButtonContainer>
       </FloatingContainer>
     </>
   );

components/Home/FolderList/FolderList.tsx

@@ -56,7 +56,7 @@ const FolderList = ({
               onDelete={onDelete}
             />
           ) : (
-            <Link key={folder.folderId} href={`/posts?folderId=${folder.folderId}`}>
+            <Link key={folder.folderId} href={`/posts?folderId=${folder.folderId}`} passHref>
               <a>
                 <HomeFolder
                   supportsEmptyImg={supportsCollectedFolder}

components/Home/Header/Header.styles.ts

@@ -32,3 +32,8 @@ export const Title = styled.h1`
 export const Button = styled.button`
   height: 2.4rem;
 `;
+
+export const ButtonWrapper = styled.a`
+  display: flex;
+  align-items: center;
+`;

components/Home/Header/Header.tsx

@@ -3,11 +3,10 @@ import Image from 'next/image';
 import { useSetRecoilState } from 'recoil';
 import Link from 'next/link';
 import { dropdownStateAtom } from '@/store/dropdown/atom';
-import { HeaderWrapper, TitleWrapper, LogoContainer, Title } from './Header.styles';
+import { HeaderWrapper, TitleWrapper, LogoContainer, Title, ButtonWrapper } from './Header.styles';
 import CaretDownPrimary from 'public/svgs/caretdown-primary.svg';
 import { CommonIconButton } from '@/components/Common';
 import Logo from 'public/images/logo.png';
-import styled from 'styled-components';
 
 interface HeaderProps {
   hasOnlyTitle?: boolean;
@@ -32,9 +31,9 @@ const Header = ({ hasOnlyTitle = false }: HeaderProps) => {
         </TitleWrapper>
         {!hasOnlyTitle && (
           <Link href="/search">
-            <ATagForA11y>
+            <ButtonWrapper>
               <CommonIconButton iconName="magnifyingglass" />
-            </ATagForA11y>
+            </ButtonWrapper>
           </Link>
         )}
       </HeaderWrapper>
@@ -43,7 +42,3 @@ const Header = ({ hasOnlyTitle = false }: HeaderProps) => {
 };
 
 export default Header;
-
-export const ATagForA11y = styled.a`
-  display: flex;
-`;

components/Home/HomeScreenButtonSheet/HomeScreenButtonSheet.tsx

@@ -1,37 +1,34 @@
 import React from 'react';
 import styled from 'styled-components';
-import { CommonBottomSheetContainer, CommonButton, CommonIconButton } from '@/components/Common';
+import { CommonButton, CommonIconButton } from '@/components/Common';
 import theme from '@/styles/theme';
 import Image from 'next/image';
 import AppIcon from '/public/icon-512x512.png';
 
 export interface ScreenButtonSheetProps {
   onClick: () => void;
   onClose: () => void;
-  toggleSheet: () => void;
 }
 
-const HomeScreenButtonSheet = ({ onClick, onClose, toggleSheet }: ScreenButtonSheetProps): React.ReactElement => {
+const HomeScreenButtonSheet = ({ onClick, onClose }: ScreenButtonSheetProps): React.ReactElement => {
   return (
-    <CommonBottomSheetContainer onClose={toggleSheet} bottomSheetHeight={463}>
-      <SheetContainer>
-        <ButtonContainer>
-          <CommonIconButton iconName="close" onClick={onClose} />
-        </ButtonContainer>
-        <SheetTitle>홈 화면에 추가</SheetTitle>
-        <SheetImage>
-          <Image src={AppIcon} alt="무드픽" />
-        </SheetImage>
-        <SheetContents>
-          더 편하고 빠르게 무드픽으로 진입해
-          <br />
-          감정을 기록할 수 있어요.
-        </SheetContents>
-        <CommonButton size="large" onClick={onClick}>
-          추가
-        </CommonButton>
-      </SheetContainer>
-    </CommonBottomSheetContainer>
+    <SheetContainer>
+      <ButtonContainer>
+        <CommonIconButton iconName="close" onClick={onClose} />
+      </ButtonContainer>
+      <SheetTitle>홈 화면에 추가</SheetTitle>
+      <SheetImage>
+        <Image src={AppIcon} alt="무드픽" />
+      </SheetImage>
+      <SheetContents>
+        더 편하고 빠르게 무드픽으로 진입해
+        <br />
+        감정을 기록할 수 있어요.
+      </SheetContents>
+      <CommonButton size="large" onClick={onClick}>
+        추가
+      </CommonButton>
+    </SheetContainer>
   );
 };
 

components/Home/HomeScreenGuide/HomeScreenGuide.tsx

@@ -1,41 +1,38 @@
 import React from 'react';
 import styled from 'styled-components';
-import { CommonBottomSheetContainer, CommonIconButton } from '@/components/Common';
+import { CommonIconButton } from '@/components/Common';
 import theme from '@/styles/theme';
 import Image from 'next/image';
 import AppIcon from '/public/icon-512x512.png';
 import AddWhiteIcon from '/public/svgs/add-white.svg';
 import DownloadSafariIcon from '/public/svgs/download-safari.svg';
 
 export interface ScreenGuideProps {
-  toggleSheet: () => void;
   onClose: () => void;
 }
 
-const HomeScreenGuide = ({ toggleSheet, onClose }: ScreenGuideProps): React.ReactElement => {
+const HomeScreenGuide = ({ onClose }: ScreenGuideProps): React.ReactElement => {
   return (
-    <CommonBottomSheetContainer onClose={toggleSheet} bottomSheetHeight={390}>
-      <GuideContainer>
-        <ButtonContainer>
-          <CommonIconButton iconName="close" onClick={onClose} />
-        </ButtonContainer>
-        <GuideImage>
-          <Image src={AppIcon} alt="무드픽" />
-        </GuideImage>
-        <GuideContents>
-          더 편하고 빠르게 무드픽으로 진입해
-          <br />
-          감정을 기록할 수 있어요.
-        </GuideContents>
-        <GuideTooltip>
-          <span>홈 화면에 추가</span>
-          <Image src={AddWhiteIcon} alt="" width={18} height={18} />
-        </GuideTooltip>
-        <IconContainer>
-          <Image src={DownloadSafariIcon} alt="홈 화면에 추가" width={19} height={25} />
-        </IconContainer>
-      </GuideContainer>
-    </CommonBottomSheetContainer>
+    <GuideContainer>
+      <ButtonContainer>
+        <CommonIconButton iconName="close" onClick={onClose} />
+      </ButtonContainer>
+      <GuideImage>
+        <Image src={AppIcon} alt="무드픽" />
+      </GuideImage>
+      <GuideContents>
+        더 편하고 빠르게 무드픽으로 진입해
+        <br />
+        감정을 기록할 수 있어요.
+      </GuideContents>
+      <GuideTooltip>
+        <span>홈 화면에 추가</span>
+        <Image src={AddWhiteIcon} alt="" width={18} height={18} />
+      </GuideTooltip>
+      <IconContainer>
+        <Image src={DownloadSafariIcon} alt="홈 화면에 추가" width={19} height={25} />
+      </IconContainer>
+    </GuideContainer>
   );
 };