[Feat] WTH-250: 랜딩 QA 반영

src/app/(public)/landing/page.tsx

@@ -1,10 +1,8 @@
-import { Suspense } from 'react';
 import {
   HeroSection,
   TestimonialSection,
   ClubTypesSection,
   LandingFooter,
-  BlockedToast,
 } from '@/components/landing';
 import {
   PhilosophySection,
@@ -18,9 +16,6 @@ import { USER_FEATURES, ADMIN_FEATURES } from '@/constants/landing/landing';
 export default function LandingPage() {
   return (
     <>
-      <Suspense>
-        <BlockedToast />
-      </Suspense>
       {/* TODO: showAuthButtons 추가하기 */}
       <PublicHeader />
       <main className="flex min-h-screen w-full flex-col">

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import type { ReactNode } from 'react';
 import { Toaster } from '@/components/ui';
 import { QueryProvider } from '@/providers';
@@ -14,6 +14,12 @@
   display: 'swap',
 });
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+};
+
 export const metadata: Metadata = {
   title: 'Weeth',
   description: '동아리는 우리 모두가 함께 하는 것! with, Weeth!',
@@ -36,7 +42,7 @@
           }}
         />
         {/* Google Tag Manager */}
         <script
           dangerouslySetInnerHTML={{
             __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

src/assets/icons/landing/index.ts

@@ -1,7 +1,5 @@
 export { default as LandingUserFaceIcon } from './landing_user_face.svg';
 export { default as LandingAdminFaceIcon } from './landing_admin_face.svg';
-export { default as LandingServiceBoardImage } from './landing_service_board.png';
-export { default as LandingServiceMemberImage } from './landing_service_member.png';
 export { default as LandingGuideTitle } from './landing_guide_title.svg';
 export { default as Ldquo } from './ldquo.svg';
 export { default as LdquoBack } from './ldquo_back.svg';
@@ -11,7 +9,5 @@ export { default as RunningImage } from './running.png';
 export { default as StudyImage } from './study.png';
 export { default as YogaImage } from './yoga.png';
 export { default as BicycleImage } from './bicycle.png';
-export { default as LandingMockUp } from './landing_mock_up.png';
-export { default as LandingMountingImage } from './landing_mounting.png';
 export { default as HeroSectionCardImage } from './hero_section_card.svg';
 export { default as MobileHeroSectionCardImage } from './mobile_hero_section_card.svg';

src/assets/image/landing/card/index.ts

@@ -1,10 +1,8 @@
-export { default as LandingCard1 } from './landing_card_1.svg';
-export { default as LandingCard2 } from './landing_card_2.svg';
-export { default as LandingCard3 } from './landing_card_3.svg';
-export { default as LandingCard4 } from './landing_card_4.svg';
-export { default as LandingCard5 } from './landing_card_5.svg';
-export { default as LandingCard6 } from './landing_card_6.svg';
-export { default as LandingCard7 } from './landing_card_7.svg';
-export { default as LandingCard8 } from './landing_card_8.svg';
-
-export { default as LandingHeroCard } from './landing_hero_card.svg';
+export { default as LandingCard1 } from './landing_card_1.png';
+export { default as LandingCard2 } from './landing_card_2.png';
+export { default as LandingCard3 } from './landing_card_3.png';
+export { default as LandingCard4 } from './landing_card_4.png';
+export { default as LandingCard5 } from './landing_card_5.png';
+export { default as LandingCard6 } from './landing_card_6.png';
+export { default as LandingCard7 } from './landing_card_7.png';
+export { default as LandingCard8 } from './landing_card_8.png';

src/components/landing/ClubTypesSection.tsx

@@ -63,7 +63,7 @@ function ClubTypesSection({ className }: ClubTypesSectionProps) {
         ))}
       </div>
 
-      <div className="tablet:text-[20px] desktop:text-[24px] desktop:leading-[30px] hidden px-600 text-center text-[18px] leading-[26px] font-semibold tracking-[-0.005em]">
+      <div className="tablet:text-[20px] desktop:text-[24px] tablet:flex desktop:leading-[30px] hidden px-600 text-center text-[18px] leading-[26px] font-semibold tracking-[-0.005em]">
         Weeth는 모든 동아리가 사용할 수 있는 환경을 지향합니다
       </div>
       <div className="tablet:hidden flex px-600 text-center text-[18px] leading-[26px] font-semibold tracking-[-0.005em]">

src/components/landing/HeroSectionDesktop.tsx

@@ -61,7 +61,7 @@ function HeroSectionDesktop({ className }: HeroSectionProps) {
     <section
       ref={sectionRef}
       className={cn(
-        'relative flex min-h-[calc(100vh+64px)] max-w-full flex-col overflow-hidden bg-[#D5E4FF]',
+        'relative flex min-h-[calc(100vh+64px)] max-w-full flex-col overflow-hidden bg-[#D5E4FF] pt-[96px]',
         className,
       )}
     >

src/components/landing/InquiryDialog.tsx

@@ -59,7 +59,12 @@ function InquiryDialog({ children }: InquiryDialogProps) {
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent showCloseButton={false} className="bg-background flex w-[640px] flex-col">
+      <DialogContent
+        showCloseButton={false}
+        className="bg-background flex w-[640px] flex-col"
+        onPointerDownOutside={isSubmitting ? (e) => e.preventDefault() : undefined}
+        onInteractOutside={isSubmitting ? (e) => e.preventDefault() : undefined}
+      >
         <DialogHeader
           icon={
             <Icon src={InfoCircleIcon} size={24} className="text-brand-primary" alt="정보 아이콘" />

src/components/landing/ServiceSection.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import type { StaticImageData } from 'next/image';
 import { ServiceSectionDesktop } from './ServiceSectionDesktop';
+import { ServiceSectionTablet } from './ServiceSectionTablet';
 import { ServiceSectionMobile } from './ServiceSectionMobile';
 
 interface Feature {
@@ -24,19 +25,25 @@ interface ServiceSectionProps {
   features: Feature[];
 }
 
+const TABLET_BP = 696;
 const DESKTOP_BP = 1440;
 
 function ServiceSection(props: ServiceSectionProps) {
-  const [isDesktop, setIsDesktop] = useState(false);
+  const [bp, setBp] = useState<'mobile' | 'tablet' | 'desktop'>('mobile');
 
   useEffect(() => {
-    const check = () => setIsDesktop(window.innerWidth >= DESKTOP_BP);
+    const check = () => {
+      if (window.innerWidth >= DESKTOP_BP) setBp('desktop');
+      else if (window.innerWidth >= TABLET_BP) setBp('tablet');
+      else setBp('mobile');
+    };
     check();
     window.addEventListener('resize', check);
     return () => window.removeEventListener('resize', check);
   }, []);
 
-  if (isDesktop) return <ServiceSectionDesktop {...props} />;
+  if (bp === 'desktop') return <ServiceSectionDesktop {...props} />;
+  if (bp === 'tablet') return <ServiceSectionTablet {...props} />;
   return <ServiceSectionMobile {...props} />;
 }