refactor: .bottom-fixed 유틸 스타일을 제거한다

dnd-side-project · Aug 13, 2024 · c5b5b75 · c5b5b75
1 parent 300c235
commit c5b5b75
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 12 deletions.
diff --git a/src/app/(Main)/talk/TalkSection.tsx b/src/app/(Main)/talk/TalkSection.tsx
@@ -32,11 +32,11 @@ export default function TalkWordSection() {
 
   return (
     <section className="flex flex-col items-center">
-      <h1 className="h-100 max-w-310 items-center break-keep text-center">{talkWord}</h1>
+      <h1 className="items-center text-center h-100 max-w-310 break-keep">{talkWord}</h1>
 
       <Spacing size={10} />
 
-      <div className="flex h-300 justify-center">
+      <div className="flex justify-center h-300">
         {!isWordLoaded && isLoading && <Lottie loop animationData={lottieTalkBeforeClick} play />}
         {isWordLoaded && isLoading && (
           <Lottie loop animationData={lottieTalkAfterClick} play speed={1.2} className="w-500" />
@@ -47,7 +47,7 @@ export default function TalkWordSection() {
       </div>
 
       <BottomFixedDiv>
-        <PrimaryButton onClick={handleTalkClick} text="제시어 뽑기" />
+        <PrimaryButton className="w-full" onClick={handleTalkClick} text="제시어 뽑기" />
       </BottomFixedDiv>
     </section>
   );

diff --git a/src/app/(Main)/talk/TitleSection.tsx b/src/app/(Main)/talk/TitleSection.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import TalkToolTip from './TalkToolTip';
 import { Icon } from '@/components/Button/Icon';
 import { Spacing } from '@/components/Spacing';
-import { ICON, COOKIE_IS_TOOLTIP_OPEN } from '@/constants';
+import { COOKIE_IS_TOOLTIP_OPEN, ICON } from '@/constants';
 import { setClientCookie } from '@/utils';
 
 interface TitleSectionProps {

diff --git a/src/app/(Main)/talk/page.tsx b/src/app/(Main)/talk/page.tsx
@@ -1,12 +1,13 @@
 import TalkWordSection from './TalkSection';
 import TalkTitleSection from './TitleSection';
+import { COOKIE_IS_TOOLTIP_OPEN } from '@/constants';
 import { getServerCookie } from '@/utils';
 
 export default async function Talk() {
-  const isToolTipOpen = (await getServerCookie('tooltipIsOpen')) === 'true';
+  const isToolTipOpen = (await getServerCookie(COOKIE_IS_TOOLTIP_OPEN)) === 'true';
 
   return (
-    <div className="flex flex-col items-center justify-center flex-1">
+    <div className="flex flex-1 flex-col items-center justify-center">
       <TalkTitleSection isInitialToolTipOpen={isToolTipOpen} />
       <TalkWordSection />
     </div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -28,12 +28,6 @@ body {
   }
 }
 
-@layer base {
-  .bottom-fixed {
-    @apply fixed inset-x-0 bottom-0 z-30;
-  }
-}
-
 /*PWA*/
 @media all and (display-mode: standalone) {
   #ios-banner {