[FEAT] 메인 페이지 디자인 변경 및 토론 템플릿 섹션 추가

src/constants/urls.ts

@@ -4,4 +4,5 @@ export const LANDING_URLS = {
     'https://bustling-bathtub-b3a.notion.site/2071550c60cf80f18395e03440fba80a?source=copy_link',
   TERMS_OF_SERVICE_URL:
     'https://bustling-bathtub-b3a.notion.site/1b01550c60cf8020b34adff2d40cf605?source=copy_link',
+  TEMPLATE_REGISTER_URL: 'https://forms.gle/471ojcPqSdkWqVCaA',
 } as const;

src/page/LandingPage/LandingPage.tsx

@@ -6,7 +6,8 @@ import TableSection from './components/TableSection';
 import ReviewSection from './components/ReviewSection';
 import ReportSection from './components/ReportSection';
 import useLandingPageHandlers from './hooks/useLandingPageHandlers';
-
+import TemplateSelection from './components/TemplateSelection';
+import ScrollHint from './components/ScrollHint';
 export default function LandingPage() {
   const {
     handleStartWithoutLogin,
@@ -28,6 +29,10 @@ export default function LandingPage() {
             onStartWithoutLogin={handleStartWithoutLogin}
             onDashboardButtonClicked={handleDashboardButtonClick}
           />
+          <ScrollHint />
+          {/*템플릿 선택 화면 */}
+          <TemplateSelection />
+
           {/* 시간표 설정화면 */}
           <TimeTableSection />
         </div>
@@ -42,8 +47,12 @@ export default function LandingPage() {
         <div className="flex w-[95%] max-w-[1226px] flex-col gap-96 py-48 md:w-[64%]">
           {/* 홈 설정 */}
           <TableSection onLogin={handleTableSectionLoginButtonClick} />
+        </div>
+        <div className="flex w-full flex-col items-center bg-black py-48">
           {/* 리뷰 */}
           <ReviewSection onStartWithoutLogin={handleStartWithoutLogin} />
+        </div>
+        <div className="flex w-[95%] max-w-[1226px] flex-col gap-96 py-48 md:w-[64%]">
           {/* 버그 및 불편사항 제보 */}
           <ReportSection />
         </div>

src/page/LandingPage/components/ReviewSection.tsx

@@ -9,8 +9,11 @@ export default function ReviewSection({
   onStartWithoutLogin,
 }: ReviewSectionProps) {
   return (
-    <section id="section4" className="flex flex-col items-center gap-24">
-      <div className="flex flex-col items-center justify-center gap-1 text-[min(max(1.4rem,3vw),2.8rem)] font-bold">
+    <section
+      id="section4"
+      className="flex w-[95%] max-w-[1226px] flex-col gap-24 md:w-[64%]"
+    >
+      <div className="flex flex-col items-center justify-center gap-1 text-[min(max(1.4rem,3vw),2.8rem)] font-bold text-neutral-100">
         <h1>이미 많은 사람들이 디베이트 타이머로</h1>
         <h1>더 나은 토론환경을 만들고 있어요.</h1>
       </div>
@@ -19,12 +22,14 @@ export default function ReviewSection({
           <ReviewCard key={review.user} {...review} />
         ))}
       </div>
-      <button
-        className="rounded-full border border-neutral-300 bg-brand px-20 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-semantic-table hover:text-default-white"
-        onClick={onStartWithoutLogin}
-      >
-        비회원으로 시작하기
-      </button>
+      <div className="flex w-full justify-center">
+        <button
+          className="rounded-full border border-neutral-300 bg-brand px-20 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-semantic-table hover:text-default-white"
+          onClick={onStartWithoutLogin}
+        >
+          비회원으로 시작하기
+        </button>
+      </div>
     </section>
   );
 }

src/page/LandingPage/components/ScrollHint.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import arrowDown from '../../../assets/landing/bottom_arrow.png';
+type ScrollHintProps = {
+  topThreshold?: number; //최상단 판정 임계값 (px)
+};
+
+export default function ScrollHint({ topThreshold = 10 }: ScrollHintProps) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const atTop = window.scrollY <= topThreshold;
+      // 최상단이면 보이고, 아니면 숨김
+      setVisible(atTop);
+    };
+    onScroll();
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [topThreshold]);
+
+  return (
+    <div
+      className={`
+        pointer-events-none fixed inset-x-0 bottom-10 flex justify-center
+        transition-all duration-300
+        ${visible ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}
+      `}
+      aria-hidden={!visible}
+    >
+      <div
+        className={`
+          pointer-events-auto flex items-center gap-2 rounded-full
+          bg-default-white/90 px-4 py-2 text-[min(max(0.85rem,1.2vw),1rem)] font-medium shadow-[0_6px_18px_rgba(0,0,0,0.12)]
+          ring-1
+          ring-black/5 backdrop-blur
+          transition-colors hover:bg-default-white
+        `}
+      >
+        <img
+          src={arrowDown}
+          alt="아래로 스크롤"
+          className="pointer-events-auto h-4 w-20 animate-bounce"
+        />
+      </div>
+    </div>
+  );
+}

src/page/LandingPage/components/TableSection.tsx

@@ -1,5 +1,5 @@
-import section301 from '../../../assets/landing/section3-1.png';
-import section302 from '../../../assets/landing/section3-2.png';
+import section301 from '../../../assets/landing/debate_info_setting.png';
+import section302 from '../../../assets/landing/table_list.png';
 
 interface TableSectionProps {
   onLogin: () => void;
@@ -14,21 +14,23 @@ export default function TableSection({ onLogin }: TableSectionProps) {
           <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand/70"></span>
         </div>
         <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
-          토론 정보 관리 및 기록
+          토론 정보 <br />
+          관리 및 기록
         </h2>
       </div>
       <div className="flex flex-row items-center justify-center gap-8 px-4">
-        <img src={section301} alt="section301" className="flex w-1/2" />
         <div className="flex w-1/2 flex-col items-center gap-4">
           <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
-            종소리 설정
+            토론 기본 정보 설정
           </h3>
           <p className="text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-            원하는 종소리만 골라서 설정할 수 있어요.
+            시간표 이름부터 주제까지!
           </p>
         </div>
+        <img src={section301} alt="section301" className="flex w-1/2" />
       </div>
       <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={section302} alt="section302" className="flex w-1/2" />
         <div className="flex w-1/2 flex-col items-center gap-4">
           <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
             시간표 목록
@@ -37,12 +39,11 @@ export default function TableSection({ onLogin }: TableSectionProps) {
             내가 만든 시간표를 저장하고 싶나요?
           </p>
         </div>
-        <img src={section302} alt="section302" className="flex w-1/2" />
       </div>
 
       <div className="flex flex-col items-center justify-center gap-1 text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
         <p>시간표를 저장하려면,</p>
-        <p>디베이트 타이머에 로그인해보세요!</p>
+        <p>디베이트 타이머에 로그인해 보세요!</p>
         <button
           className="mt-14 rounded-full border border-neutral-300 bg-brand px-5 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-semantic-table hover:text-default-white"
           onClick={onLogin}

src/page/LandingPage/components/TemplateApplicationSection.tsx

@@ -0,0 +1,30 @@
+import section501 from '../../../assets/landing/section5-1.png';
+import { LANDING_URLS } from '../../../constants/urls';
+
+export default function TemplateApplicationSection() {
+  return (
+    <section className="flex flex-row justify-between gap-1">
+      <div className="flex flex-col items-start justify-center gap-4">
+        <p className="text-[min(max(1.2rem,2vw),2.3rem)] font-semibold">
+          템플릿 신청하기
+        </p>
+        <p className="text-[min(max(0.875rem,1.25vw),1.2rem)] text-neutral-400">
+          새로운 템플릿도 신청해 볼까요?
+        </p>
+        <button
+          onClick={() =>
+            window.open(
+              LANDING_URLS.TEMPLATE_REGISTER_URL,
+              '_blank',
+              'noopener,noreferrer',
+            )
+          }
+          className="rounded-full border border-neutral-300 bg-neutral-200 px-9 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-brand"
+        >
+          신청하기
+        </button>
+      </div>
+      <img src={section501} alt="section501" className="w-[30%]" />
+    </section>
+  );
+}

src/page/LandingPage/components/TemplateCard.tsx

@@ -0,0 +1,63 @@
+import { DebateTemplate } from '../../../type/type';
+import clsx from 'clsx';
+
+export default function TemplateCard({
+  title,
+  subtitle,
+  logoSrc,
+  actions,
+  className,
+}: DebateTemplate) {
+  return (
+    <article
+      className={clsx(
+        'flex flex-col rounded-3xl border-4 border-white bg-gradient-to-b from-default-white to-brand',
+        'ring-3 ring-brand/20',
+        'p-6 shadow-[0_0_32px_rgba(255,165,0,0.1)] md:p-7',
+        className,
+      )}
+    >
+      {/* 헤더 */}
+      <div className="flex justify-between">
+        <div className="flex flex-col gap-2">
+          <h3 className="text-[min(max(0.9rem,1.4vw),1.1rem)] font-semibold leading-tight">
+            {title}
+          </h3>
+          <p className="mt-1 min-h-[1.25rem] text-[min(max(0.75rem,1.1vw),0.9rem)] text-neutral-700">
+            {subtitle ?? ''}
+          </p>
+        </div>
+
+        {/* 로고 */}
+        {logoSrc && (
+          <img
+            src={logoSrc}
+            alt={`${title} 로고`}
+            className="h-12 w-12 shrink-0 rounded-full object-contain"
+          />
+        )}
+      </div>
+
+      {/* 액션 리스트 */}
+      <ul className="mt-5 flex flex-col gap-1">
+        {actions.map((action, index) => (
+          <li key={`${action.label}-${index}`}>
+            <div className="flex items-center justify-between gap-3 rounded-md bg-white px-3 py-2">
+              <span className="truncate text-[min(max(0.75rem,1.1vw),0.9rem)] font-medium text-neutral-800">
+                {action.label}
+              </span>
+
+              <a
+                href={action.href}
+                className="shrink-0 rounded-full border border-neutral-300 bg-brand px-4 py-1.5 text-[min(max(0.75rem,1.1vw),0.9rem)] font-medium text-default-black transition-colors duration-100 hover:bg-semantic-table hover:text-white"
+                aria-label={`${action.label} 토론하기`}
+              >
+                토론하기
+              </a>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </article>
+  );
+}

src/page/LandingPage/components/TemplateList.tsx

@@ -0,0 +1,17 @@
+import { DebateTemplate } from '../../../type/type';
+import TemplateCard from './TemplateCard';
+
+interface TemplateListProps {
+  data: DebateTemplate[];
+}
+export default function TemplateList({ data }: TemplateListProps) {
+  return (
+    <div
+      className={'grid grid-cols-2 gap-5 lg:grid-cols-3'} // 2열, lg에서 3열
+    >
+      {data.map((template) => (
+        <TemplateCard key={template.title} {...template} />
+      ))}
+    </div>
+  );
+}

src/page/LandingPage/components/TemplateSelection.tsx

@@ -0,0 +1,21 @@
+import { DEBATE_TEMPLATE } from '../../../constants/debate_template';
+import TemplateApplicationSection from './TemplateApplicationSection';
+import TemplateList from './TemplateList';
+
+export default function TemplateSelection() {
+  return (
+    <section id="template-selection" className="flex flex-col gap-12">
+      <div>
+        <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          다양한 토론 템플릿을 원클릭으로 만나보세요!
+        </h2>
+      </div>
+      <TemplateList data={DEBATE_TEMPLATE.ONE} />
+      <div className="mx-auto h-px w-11/12 bg-neutral-200" /> {/* 구분선 */}
+      <TemplateList data={DEBATE_TEMPLATE.TWO} />
+      <div className="mx-auto h-px w-11/12 bg-neutral-200" />
+      <TemplateList data={DEBATE_TEMPLATE.THREE} />
+      <TemplateApplicationSection />
+    </section>
+  );
+}

src/page/LandingPage/components/TimeTableSection.tsx

@@ -1,32 +1,59 @@
-import section101 from '../../../assets/landing/section1-1.png';
-import section102 from '../../../assets/landing/section1-2.png';
-
+import timeboxStep from '../../../assets/landing/timebox_step.png';
+import timeboxButtons from '../../../assets/landing/timebox_step_button.png';
+import bellSetting from '../../../assets/landing/bell_setting.png';
+import twoTimer from '../../../assets/landing/two_timer.png';
+import timeboxAddButton from '../../../assets/landing/timebox_add_button.png';
 export default function TimeTableSection() {
   return (
     <section id="section1" className="flex flex-col gap-24">
       <div>
         <div className="relative inline-block text-[min(max(0.875rem,1.5vw),1.4rem)] font-semibold">
-          <span className="relative z-10">시간표 설정 화면</span>
+          <span className="relative z-10">시간표 설정화면</span>
           <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand/70"></span>
         </div>
-        <h1 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
-          드래그 앤 드롭으로
-          <br /> 간편하게 시간표 구성
-        </h1>
+        <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          간편한 시간표 구성
+        </h2>
       </div>
-
-      <img src={section101} alt="section101" className="w-full" />
-      <img src={section102} alt="section102" className="mt-5 w-full" />
-      <div className="flex flex-col items-center gap-1">
-        <p className="mb-2 text-center text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
-          두 가지 타이머
-        </p>
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-          일반형과 자유토론형 타이머로,
-        </p>
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-          다양한 토론 방식을 지원해요.
-        </p>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={timeboxStep} alt="section301" className="flex w-1/2" />
+        <img src={timeboxButtons} alt="section301" className="flex w-1/3" />
+      </div>
+      <div className="mt-4 flex items-center gap-4">
+        <h2 className="text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          시간표 추가
+        </h2>
+        <img
+          src={timeboxAddButton}
+          alt="시간표 추가 버튼"
+          className="h-[min(max(1.7rem,3vw),2.7rem)] w-auto"
+        />
+      </div>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={twoTimer} alt="section302" className="flex w-1/2" />
+        <div className="flex w-1/2 flex-col items-center gap-4">
+          <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
+            두가지 타이머
+          </h3>
+          <p className="text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
+            일반형과 자유토론형 타이머로,
+            <br />
+            다양한 토론 방식을 지원해요.
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <div className="flex w-1/2 flex-col items-center gap-4">
+          <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
+            종소리 설정
+          </h3>
+          <p className="text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
+            시간에 따른 종소리를 내마음대로
+            <br />
+            커스터마이징 할 수 있어요.
+          </p>
+        </div>
+        <img src={bellSetting} alt="section302" className="flex w-1/2" />
       </div>
     </section>
   );