FESI1-105: 각 페이지 디자인 통일 작업

src/app/gathering/[id]/page.tsx

@@ -37,7 +37,7 @@ export default function GatheringDetail({
 
   return (
     <div className="mx-auto max-w-screen-xl px-4">
-      <div className="mt-36">
+      <div className="mt-24 md:mt-32">
         <div className="flex flex-col gap-6 md:flex-row">
           <div className="flex-1">
             <GatheringMainSection {...gatheringData} />

src/app/recommend/page.tsx

@@ -47,19 +47,19 @@ export default function Recommend() {
   return (
     <div className="mx-auto flex h-dvh max-w-[1166px] flex-col px-4 md:px-6 xl:px-0">
       <header
-        className={`relative flex w-full items-center justify-center  ${
-          surveyResult ? 'mt-[50px] md:mt-20 xl:mt-16' : 'mt-32 md:mt-24'
+        className={`relative ml-8 flex w-full items-center md:ml-16 xl:ml-28  ${
+          surveyResult ? 'mt-[50px] md:mt-20 xl:mt-16' : 'mt-24 md:mt-24'
         }`}
       >
-        <div className="flex gap-2">
+        <div className="flex gap-4 md:gap-12 xl:gap-24">
           {!surveyResult ? (
             <Image
               src="/images/puzzle_wow.png"
               alt="방탈출 추천 퍼즐 캐릭터"
               width={152}
               height={152}
               quality={100}
-              className="static mt-auto h-16 w-16 md:absolute md:bottom-0 md:left-1/5 md:h-32 md:w-32 xl:h-[152px] xl:w-[152px]"
+              className="static mt-auto h-16 w-16 md:h-32 md:w-32 xl:h-[152px] xl:w-[152px]"
             />
           ) : (
             <FadeInMotion>
@@ -69,11 +69,11 @@ export default function Recommend() {
                 width={154}
                 height={168}
                 quality={100}
-                className="static mt-auto h-[97px] w-[89px] md:absolute md:bottom-0 md:left-1/5 md:h-[148px] md:w-[136px] xl:h-[168px] xl:w-[154px]"
+                className="static mt-auto h-[97px] w-[89px] md:h-[148px] md:w-[136px] xl:h-[168px] xl:w-[154px]"
               />
             </FadeInMotion>
           )}
-          <h1 className="my-auto text-lg font-semibold md:py-12 md:text-2xl xl:py-16">
+          <h1 className="my-auto mr-4 text-lg font-semibold md:mr-0 md:py-12 md:text-2xl xl:py-16">
             방탈출 취향 테스트
           </h1>
         </div>

src/components/@shared/Header.tsx

@@ -143,7 +143,7 @@ export default function Header() {
                     />
                   </button>
                   {isMenuOpen && (
-                    <ul className="absolute -right-12 z-50 mt-8 w-32 rounded-md bg-secondary-80 text-[16px] font-normal shadow-md md:top-3">
+                    <ul className="absolute right-0 z-50 mt-8 w-32 rounded-md bg-secondary-80 text-[16px] font-normal shadow-md md:top-3 xl:left-0">
                       <li>
                         <Link href="/mypage" onClick={closeDropdown}>
                           <button

src/components/@shared/HeaderNavbar.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable prettier/prettier */
-
 import Link from 'next/link';
 
 export default function HeaderNavBar({ onClose }: { onClose: () => void }) {
@@ -10,15 +9,19 @@ export default function HeaderNavBar({ onClose }: { onClose: () => void }) {
   ];
 
   return (
-    <div className="bg-secondary-bg fixed inset-0 z-20 flex flex-col">
+    <div className="fixed inset-0 z-20 flex flex-col bg-secondary-bg">
       <div className="mt-16 flex flex-col">
         {navLinks.map((link) => (
           <Link
             key={link.href}
             href={link.href}
-            className="hover:bg-primary-40 mb-4 rounded-xl px-7 py-4 text-xl font-bold transition duration-300"
+            className="mx-3 mb-4 rounded-xl px-7 py-4 text-xl font-bold transition duration-300 hover:bg-primary-40"
           >
-            <button onClick={onClose} type="button">
+            <button
+              onClick={onClose}
+              type="button"
+              className="w-full text-left"
+            >
               {link.label}
             </button>
           </Link>

src/components/@shared/Modal.tsx

@@ -1,5 +1,5 @@
-import DeleteIcon from '@/public/icons/delete.svg';
 import { ReactNode, useEffect, useRef } from 'react';
+import DeleteIcon from '@/public/icons/delete.svg';
 
 interface ModalProps {
   children: ReactNode;
@@ -53,7 +53,7 @@ export default function Modal({
       )}
       <dialog
         ref={dialogRef}
-        className={`fixed inset-0 z-50 rounded-lg bg-white p-6 shadow-lg ${customDimStyle}`}
+        className={`fixed inset-0 z-50 rounded-lg bg-white p-6 shadow-lg ${customDimStyle} slide-up`}
       >
         {children}
         <button

src/components/@shared/PageContainer.tsx

@@ -6,7 +6,7 @@ interface PageContainerProps {
 
 export default function PageContainer({ children }: PageContainerProps) {
   return (
-    <main className="relative mx-4 mb-5 mt-32 h-full md:mx-6 xl:mx-auto xl:w-[1166px]">
+    <main className="relative mx-4 mb-5 mt-24 h-full md:mx-6 xl:mx-auto xl:w-[1166px]">
       {children}
     </main>
   );

src/components/@shared/Toast.tsx

@@ -18,9 +18,9 @@ export default function Toast({ message, type }: ToastProps) {
   return (
     <aside
       role="alert"
-      className="fixed bottom-28 left-1/2 z-100 block -translate-x-1/2 translate-y-full transform rounded-lg bg-default-tertiary p-4 shadow-lg transition-transform duration-300 ease-in-out"
+      className="fixed bottom-28 left-1/2 z-100 w-11/12 -translate-x-1/2 translate-y-full transform rounded-lg border-2 border-primary-5 bg-default-tertiary p-4 shadow-lg transition-transform duration-300 ease-in-out md:w-fit"
     >
-      <div className="flex gap-2">
+      <div className="flex justify-center gap-2">
         {type === 'success' ? <CheckBox /> : <Warning />}
         <span className={textColor}>{message}</span>
       </div>

src/components/@shared/animation/CardMotion.tsx

@@ -5,11 +5,13 @@ interface CardMotionProps {
   children: ReactNode;
   className?: string;
   borderRadius?: string;
+  onClick?: () => void;
 }
 
 export default function CardMotion({
   children,
   className,
+  onClick,
   borderRadius = '16px',
 }: CardMotionProps) {
   return (
@@ -30,6 +32,7 @@ export default function CardMotion({
         },
       }}
       className={className}
+      onClick={onClick}
     >
       {children}
     </motion.figure>

src/components/@shared/animation/SlotMotion.tsx

@@ -15,7 +15,7 @@ export default function SlotMotion({ children, className }: SlotMotionProps) {
       }}
       whileHover={{
         borderRadius: '24px',
-        boxShadow: '0px 0px 0px 3px rgba(232, 230, 254, 1)',
+        boxShadow: '0px 0px 12px 4px rgba(102, 89, 244, 1)',
       }}
       transition={{ duration: 0.2 }}
       whileTap={{

src/components/@shared/button/IconButton.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import ButtonMotion from '@/components/@shared/animation/ButtonMotion';
 
 type IconButtonProps = {
   type?: 'button' | 'submit' | 'reset';
@@ -26,7 +27,7 @@ export default function IconButton({
   ...props
 }: IconButtonProps) {
   return (
-    <button
+    <ButtonMotion
       // eslint-disable-next-line react/button-has-type
       type={type}
       className="flex items-center justify-center gap-1 rounded-lg bg-default-tertiary px-[10px] py-[5px] text-xs text-text-default md:gap-2 md:px-4 md:py-3 md:text-sm"
@@ -35,6 +36,6 @@ export default function IconButton({
     >
       <Image src={src} width={14} height={14} alt={alt} />
       {children}
-    </button>
+    </ButtonMotion>
   );
 }

src/components/allReview/ReviewCard.tsx

@@ -1,8 +1,10 @@
+import { useState } from 'react';
+import Image from 'next/image';
+
 import { ReviewDto } from '@/types/review.types';
 import { yearMonthDay } from '@/utils/dateUtils';
-import Image from 'next/image';
 import Rating from '@/components/@shared/rating/Rating';
-import { useState } from 'react';
+import CardMotion from '@/components/@shared/animation/CardMotion';
 
 export default function ReviewCard({
   score,
@@ -23,7 +25,7 @@ export default function ReviewCard({
   };
 
   return (
-    <div
+    <CardMotion
       className="flex w-full cursor-pointer flex-col rounded-[20px] bg-secondary-100 md:flex-row"
       onClick={handleMoreReview}
     >
@@ -72,6 +74,6 @@ export default function ReviewCard({
           </p>
         </div>
       </div>
-    </div>
+    </CardMotion>
   );
 }

src/components/gatheringEdit/GatheringForm.tsx

@@ -304,7 +304,7 @@ export default function GatheringForm({
       onSubmit={handleSubmit(onSubmit)}
       className="flex w-full flex-col gap-12"
     >
-      <main className="flex h-full w-full flex-col gap-12 px-4 pb-24 pt-5 md:gap-12 md:px-6 md:pb-32 md:pt-8 xl:mx-auto xl:max-w-[1166px] xl:px-0 xl:pt-12">
+      <main className="flex h-full w-full flex-col gap-12 px-4 pb-32 pt-5 md:gap-12 md:px-6 md:pb-40 md:pt-8 xl:mx-auto xl:max-w-[1166px] xl:px-0 xl:pt-12">
         <Input
           variant="elevated"
           label="name"

src/components/mypage/myGatheringCard/myReviewNotWriteDetail.tsx

@@ -53,7 +53,7 @@ export default function MyReviewNotWriteDetail({
             onClick={openEditModal}
             style={{
               position: 'absolute',
-              right: '10px',
+              right: '18px',
             }}
             className="w-[120px]"
           >

src/components/recommend/Survey.tsx

@@ -50,14 +50,14 @@ export default function Survey({ onComplete }: SurveyProps) {
   const progressPercentage = ((currentStep - 1) / questions.length) * 100;
 
   return (
-    <div className="flex flex-col items-center gap-32 px-8 py-24 md:gap-44 md:px-14 md:py-32">
-      <section className="flex w-full flex-col gap-16">
+    <div className="flex flex-col items-center gap-32 px-8 py-12 md:gap-44 md:px-14 md:py-16 xl:py-20">
+      <section className="flex w-full flex-col gap-12 md:gap-16 xl:gap-20">
         <ProgressPuzzleBar
           bgColor="bg-secondary-80"
           progressColor="bg-primary-60"
           value={progressPercentage}
         />
-        <h2 className="flex flex-col gap-2 text-center text-base font-bold md:gap-6 md:text-2xl">
+        <h2 className="flex flex-col gap-4 text-balance text-center text-base font-bold md:gap-6 md:text-2xl">
           <span>Q.</span> <p>{questions[currentStep - 1]?.text}</p>
         </h2>
       </section>
@@ -66,7 +66,7 @@ export default function Survey({ onComplete }: SurveyProps) {
           <FadeInListMotion key={option} delay={index * 0.2} duration={0.3}>
             <Button
               type="button"
-              padding="12"
+              padding="10"
               key={option}
               onClick={() => handleAnswer(option)}
               className="w-full py-4 text-xs md:py-5 md:text-2xl"

src/components/recommend/SurveyResult.tsx

@@ -56,7 +56,7 @@ export default function SurveyResult({
   return (
     <SlideUpMotion
       distance={40}
-      className="flex flex-col items-center justify-center gap-12 px-8 pb-24 font-bold text-primary-5 md:px-14 md:pb-32"
+      className="flex flex-col items-center justify-center gap-8 px-8 pb-24 font-bold text-primary-5 md:gap-12 md:px-14 md:pb-32"
     >
       {!currentTheme || !recommendTheme || recommendTheme.length === 0 ? (
         <div className="flex w-full flex-col items-center justify-center gap-12 pt-8">

src/styles/globals.css

@@ -41,6 +41,21 @@
   }
 }
 
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-up {
+  animation: slideUp 0.35s ease forwards;
+}
+
 /* text style */
 .customUnderline,
 .customUnderlineHover {