refactor: 네이밍을 MainFooter로 수정한다

src/components/Button/BottomFixedDiv.tsx → src/app/(Main)/MainFooter.tsx

@@ -1,12 +1,12 @@
-import AppDownloadBanner from '../Header/AppDownloadBanner';
+import AppDownloadBanner from '../../components/Header/AppDownloadBanner';
 import { StrictPropsWithChildren } from '@/types';
 import { isIOS } from '@/utils';
 
-export function BottomFixedDiv({ children }: StrictPropsWithChildren) {
+export function MainFooter({ children }: StrictPropsWithChildren) {
   return (
     <>
       <div className="fixed inset-x-0 bottom-0 z-30">
-        <div className="px-20 pt-10 pb-24 mx-auto bg-white max-w-layout">
+        <div className="mx-auto max-w-layout bg-white px-20 pb-24 pt-10">
           <div className="flex gap-8 [&>*]:flex-1 [&>*]:grow">{children}</div>
         </div>
         {isIOS() && <AppDownloadBanner />}

src/app/(Main)/pick/PickComponent.tsx

@@ -5,8 +5,9 @@ import { useState } from 'react';
 import Lottie from 'react-lottie-player';
 
 import lottiePick from '#/lotties/pick.json';
+import { MainFooter } from '../MainFooter';
 import { usePosePickQuery } from '@/apis';
-import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
+import { PrimaryButton } from '@/components/Button';
 import PoseImage from '@/components/Modal/PoseImage';
 import { SelectionBasic } from '@/components/Selection';
 import { PEOPLE_COUNT_LIST } from '@/constants';
@@ -51,12 +52,12 @@ export default function PickComponent() {
           <PoseImage src={imageSrc} />
         </div>
       </div>
-      <BottomFixedDiv>
+      <MainFooter>
         <PrimaryButton
           text={!!imageSrc ? `${countState}인 포즈 뽑기` : '인원수 선택하고 포즈 뽑기'}
           onClick={handlePickClick}
         />
-      </BottomFixedDiv>
+      </MainFooter>
     </>
   );
 }

src/app/(Main)/talk/TalkSection.tsx

@@ -6,8 +6,9 @@ import Lottie from 'react-lottie-player';
 
 import lottieTalkAfterClick from '#/lotties/talk_after_click.json';
 import lottieTalkBeforeClick from '#/lotties/talk_before_click.json';
+import { MainFooter } from '../MainFooter';
 import { usePoseTalkQuery } from '@/apis';
-import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
+import { PrimaryButton } from '@/components/Button';
 import { Spacing } from '@/components/Spacing';
 
 const INITIAL_TALK_WORD = `제시어에 맞춰 포즈를 취해요!`;
@@ -46,9 +47,9 @@ export default function TalkWordSection() {
         )}
       </div>
 
-      <BottomFixedDiv>
+      <MainFooter>
         <PrimaryButton className="w-full" onClick={handleTalkClick} text="제시어 뽑기" />
-      </BottomFixedDiv>
+      </MainFooter>
     </section>
   );
 }

src/app/(Sub)/detail/[id]/DetailSection.tsx

@@ -6,7 +6,8 @@ import { useState } from 'react';
 import Source from './Source';
 import TagButton from './TagButton';
 import { usePoseDetailQuery } from '@/apis';
-import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
+import { MainFooter } from '@/app/(Main)/MainFooter';
+import { PrimaryButton } from '@/components/Button';
 import { Popup } from '@/components/Modal';
 import PoseImage from '@/components/Modal/PoseImage';
 import { useOverlay } from '@/components/Overlay/useOverlay';
@@ -50,15 +51,15 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
         <TagButton type="frame" value={frameCount} name={`${frameCount}컷`} />
         {tagAttributes?.split(',').map((tag, index) => <TagButton key={index} name={tag} />)}
       </div>
-      <BottomFixedDiv>
+      <MainFooter>
         <PrimaryButton
           text="링크 공유"
           onClick={handleShareLink}
           variant="secondary"
           className="border border-border-default"
         />
         <PrimaryButton text="카카오 공유" onClick={() => shareKakao(poseId)} />
-      </BottomFixedDiv>
+      </MainFooter>
     </div>
   );
 }

src/app/(Sub)/menu/withdraw/page.tsx

@@ -3,7 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
-import { BottomFixedDiv, PrimaryButton } from '@/components/Button';
+import { MainFooter } from '@/app/(Main)/MainFooter';
+import { PrimaryButton } from '@/components/Button';
 import Header from '@/components/Header';
 import { Popup } from '@/components/Modal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
@@ -84,14 +85,14 @@ export default function Page() {
           />
         )}
       </div>
-      <BottomFixedDiv>
+      <MainFooter>
         <PrimaryButton text="계속 쓸래요" variant="outline" onClick={() => router.back()} />
         {withdrawalReason ? (
           <PrimaryButton text="탈퇴할래요" variant="fill" onClick={handleWithdraw} />
         ) : (
           <PrimaryButton text="탈퇴할래요" variant="secondary" />
         )}
-      </BottomFixedDiv>
+      </MainFooter>
     </>
   );
 }

src/components/Button/index.ts

@@ -1,3 +1,2 @@
-export { BottomFixedDiv, ButtonList, BottomDiv } from './BottomFixedDiv';
 export { Icon, IconButton } from './Icon';
 export { default as PrimaryButton } from './PrimaryButton';