feat: 서비스 소개 랜딩 페이지 구현 및 앱 시작 경로 변경

app/app/page.tsx

@@ -0,0 +1,5 @@
+import { LandingPage } from "#/pageComponents/landing";
+
+export default function AppHomePage() {
+	return <LandingPage />;
+}

app/gathering/create/page.tsx

@@ -28,7 +28,7 @@ export default function GatheringCreatePage() {
 
 	const handleBackward = () => {
 		if (isFirstStep) {
-			router.push("/");
+			router.push("/app");
 		} else {
 			back();
 		}

app/page.tsx

@@ -1,5 +1,5 @@
-import { LandingPage } from "#/pageComponents/landing";
+import { ServiceLandingPage } from "#/pageComponents/serviceLanding";
 
 export default function Home() {
-	return <LandingPage />;
+	return <ServiceLandingPage />;
 }

src/constants/gathering/opinion/index.ts

@@ -1,21 +1,20 @@
 export {
 	CATEGORY,
+	type Category,
 	CATEGORY_LABEL,
 	CATEGORY_LIST,
 	CATEGORY_VALUES,
-	type Category,
 } from "./category";
 export {
 	DISTANCE_OPTIONS,
 	DISTANCE_RANGE,
-	DISTANCE_RANGE_LABEL,
 	DISTANCE_RANGE_WALKING_MINUTES,
 	type DistanceRange,
 } from "./distance";
 export { OPINION_STEP_ORDER, OPINION_TOTAL_STEPS } from "./funnel";
 export { MOCK_MEETING_DATA } from "./meeting";
 export { RANK, RANK_LABEL, RANK_LIST, type RankKey } from "./rank";
 export { RecommendationResultStatus } from "./recommendationResultStatus";
-export { REGION, REGION_LABEL, REGION_OPTIONS, type Region } from "./region";
+export { REGION, type Region, REGION_LABEL, REGION_OPTIONS } from "./region";
 export { TIME_SLOT_LABEL } from "./timeSlot";
 export { UI_TEXT } from "./ui-text";

src/hooks/gathering/useOpinionForm.tsx

@@ -19,7 +19,8 @@ export function useOpinionForm() {
 	const router = useRouter();
 	const { accessKey } = useParams<{ accessKey: string }>();
 
-	const { refetch: refetchRecommendResult } = useGetRecommendResult(accessKey);
+	const { refetch: refetchRecommendResult } =
+		useGetRecommendResult(accessKey);
 	const { mutateAsync: createParticipant, isPending } =
 		useCreateParticipant();
 
@@ -41,7 +42,7 @@ export function useOpinionForm() {
 	const handleClickShowResultButton = async () => {
 		await refetchRecommendResult();
 		router.push(`/gathering/${accessKey}/opinion/result`);
-	}
+	};
 
 	const handleSubmit = methods.handleSubmit(async (data) => {
 		try {

src/pageComponents/gathering/opinion/form/ToastLinkButton.tsx

@@ -16,7 +16,7 @@ export const ToastLinkButton = ({ label, onClick }: ToastLinkButtonProps) => {
 			className={twJoin(
 				"ygi:ml-auto ygi:flex ygi:items-center ygi:justify-center ygi:gap-0.5",
 				"ygi:cursor-pointer ygi:body-14-sb ygi:text-palette-primary-500",
-				"ygi:text-nowrap"
+				"ygi:text-nowrap",
 			)}
 			onClick={onClick}
 		>

src/pageComponents/serviceLanding/CtaSection.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { motion } from "motion/react";
+import Link from "next/link";
+
+import { useScrollReveal } from "./useScrollReveal";
+
+export const CtaSection = () => {
+	const { ref, isInView } = useScrollReveal();
+
+	return (
+		<section
+			ref={ref}
+			className="ygi:bg-palette-gray-800 ygi:px-6 ygi:py-15.5"
+		>
+			<motion.div
+				initial={{ opacity: 0, y: 40 }}
+				animate={isInView ? { opacity: 1, y: 0 } : {}}
+				transition={{ duration: 0.6, ease: "easeOut" }}
+				className="ygi:mx-auto ygi:flex ygi:flex-col ygi:items-center ygi:gap-10 ygi:text-center"
+			>
+				<p className="ygi:heading-22-bd ygi:whitespace-pre-line ygi:text-text-inverse">
+					{"지금 바로 "}
+					<span className="ygi:text-button-secondary">요기잇</span>
+					{"으로\n맛집을 추천 받아요"}
+				</p>
+				<Link
+					href="/gathering/create"
+					className="ygi:flex ygi:cursor-pointer ygi:items-center ygi:justify-center ygi:rounded-full ygi:bg-white ygi:px-6 ygi:py-3 ygi:heading-18-bd ygi:text-text-primary ygi:transition-colors ygi:hover:bg-white/90"
+				>
+					바로 시작하기
+				</Link>
+			</motion.div>
+		</section>
+	);
+};

src/pageComponents/serviceLanding/Feature1Section.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "motion/react";
+import Image from "next/image";
+
+import { FeatureText } from "./FeatureText";
+import { useScrollReveal } from "./useScrollReveal";
+
+export const Feature1Section = () => {
+	const { ref, isInView } = useScrollReveal();
+
+	return (
+		<section
+			ref={ref}
+			className="ygi:overflow-hidden ygi:bg-palette-gray-100 ygi:px-6 ygi:pt-13.5"
+		>
+			<div className="ygi:mx-auto ygi:flex ygi:flex-col ygi:items-center">
+				<FeatureText
+					caption="모임 링크 만들기"
+					headline="우리 모임 정보 입력 한번에"
+					isDark={false}
+					isInView={isInView}
+				/>
+				{/* overflow-hidden으로 하단 overflow 초기 상태 클리핑 */}
+				<div className="ygi:relative ygi:-bottom-14">
+					<motion.div
+						initial={{ opacity: 1, y: 72, scale: 0.88 }}
+						animate={isInView ? { opacity: 1, y: 0, scale: 1 } : {}}
+						transition={{
+							duration: 0.7,
+							ease: [0.25, 0.46, 0.45, 0.94],
+						}}
+						className="ygi:flex ygi:flex-row ygi:gap-3"
+					>
+						{(
+							[
+								"feature-1-screen-a",
+								"feature-1-screen-b",
+							] as const
+						).map((name) => (
+							<Image
+								key={name}
+								src={`/images/service-landing/${name}.png`}
+								alt="모임 생성 화면"
+								width={148}
+								height={241}
+								className="ygi:rounded-[10px] ygi:shadow-lg"
+								priority
+							/>
+						))}
+					</motion.div>
+				</div>
+			</div>
+		</section>
+	);
+};

src/pageComponents/serviceLanding/Feature2Section.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "motion/react";
+import Image from "next/image";
+
+import { FeatureText } from "./FeatureText";
+import { useScrollReveal } from "./useScrollReveal";
+
+export const Feature2Section = () => {
+	const { ref, isInView } = useScrollReveal();
+
+	return (
+		<section
+			ref={ref}
+			className="ygi:overflow-hidden ygi:px-6 ygi:pt-13.5"
+			style={{ backgroundColor: "#d5dae2" }}
+		>
+			<div className="ygi:mx-auto ygi:flex ygi:flex-col ygi:items-center">
+				<FeatureText
+					caption="먹기 싫은거, 먹고 싶은거"
+					headline={
+						<>
+							{"나의 "}
+							<span className="ygi:text-button-secondary">
+								의견 입력
+							</span>
+							{" 한번에"}
+						</>
+					}
+					isDark={false}
+					isInView={isInView}
+				/>
+				{/* overflow-hidden으로 하단 overflow 초기 상태 클리핑 */}
+				<div className="ygi:relative ygi:-bottom-14">
+					<motion.div
+						initial={{ opacity: 1, y: 72, scale: 0.88 }}
+						animate={isInView ? { opacity: 1, y: 0, scale: 1 } : {}}
+						transition={{
+							duration: 0.7,
+							ease: [0.25, 0.46, 0.45, 0.94],
+						}}
+						className="ygi:flex ygi:flex-row ygi:gap-3"
+					>
+						{(
+							[
+								"feature-2-screen-a",
+								"feature-2-screen-b",
+							] as const
+						).map((name) => (
+							<Image
+								key={name}
+								src={`/images/service-landing/${name}.png`}
+								alt="의견 입력 화면"
+								width={148}
+								height={321}
+								className="ygi:rounded-[10px] ygi:shadow-lg"
+								priority
+							/>
+						))}
+					</motion.div>
+				</div>
+			</div>
+		</section>
+	);
+};

src/pageComponents/serviceLanding/Feature3Section.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { motion } from "motion/react";
+import Image from "next/image";
+
+import { FeatureText } from "./FeatureText";
+import { useScrollReveal } from "./useScrollReveal";
+
+const feature3Screens = [
+	{ name: "feature-3-screen-a", direction: -1, height: 151 },
+	{ name: "feature-3-screen-b", direction: 1, height: 146 },
+	{ name: "feature-3-screen-c", direction: -1, height: 139 },
+];
+
+export const Feature3Section = () => {
+	const { ref, isInView } = useScrollReveal();
+
+	return (
+		<section
+			ref={ref}
+			className="ygi:overflow-hidden ygi:bg-palette-gray-100 ygi:px-6 ygi:py-13.5"
+		>
+			<div className="ygi:mx-auto ygi:flex ygi:flex-col ygi:items-center ygi:gap-10">
+				<FeatureText
+					caption="친구들은 뭘 먹고 싶어 했을까?"
+					headline="투표 결과로 확인해요"
+					isDark={false}
+					isInView={isInView}
+				/>
+				<div className="ygi:flex ygi:w-full ygi:flex-col ygi:items-center ygi:gap-2.5">
+					{feature3Screens.map(
+						({ name, direction, height }, index) => (
+							<motion.div
+								key={name}
+								initial={{ opacity: 0, x: direction * 60 }}
+								animate={isInView ? { opacity: 1, x: 0 } : {}}
+								transition={{
+									duration: 0.65,
+									ease: "easeOut",
+									delay: 0.3 + index * 0.2,
+								}}
+								className="ygi:w-full ygi:max-w-57.5"
+							>
+								<Image
+									src={`/images/service-landing/${name}.png`}
+									alt={`투표 결과 화면 ${index + 1}`}
+									width={654}
+									height={height}
+									className="ygi:w-full ygi:shadow-lg"
+									priority
+								/>
+							</motion.div>
+						),
+					)}
+				</div>
+			</div>
+		</section>
+	);
+};

src/pageComponents/serviceLanding/Feature4Section.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { motion } from "motion/react";
+import Image from "next/image";
+
+import { FeatureText } from "./FeatureText";
+import { useScrollReveal } from "./useScrollReveal";
+
+export const Feature4Section = () => {
+	const { ref, isInView } = useScrollReveal();
+
+	return (
+		<section
+			ref={ref}
+			className="ygi:overflow-hidden ygi:bg-palette-gray-700 ygi:px-6 ygi:pt-13.5"
+		>
+			<div className="ygi:mx-auto ygi:flex ygi:max-w-300 ygi:flex-col ygi:items-center">
+				<FeatureText
+					caption="투표 결과에 따라"
+					headline="모임에 맞게 맛집 추천해요"
+					isDark={true}
+					isInView={isInView}
+				/>
+				<div className="ygi:relative ygi:-bottom-8 ygi:flex ygi:flex-col ygi:items-center ygi:gap-4">
+					{/* 투표 필터 요약 카드 - 아래에서 위로 fade + scale */}
+					<motion.div
+						initial={{ opacity: 0, y: 40, scale: 0.5 }}
+						animate={isInView ? { opacity: 1, y: 0, scale: 1 } : {}}
+						transition={{
+							duration: 0.45,
+							ease: [0.25, 0.46, 0.45, 0.94],
+							delay: 0.2,
+						}}
+						className="ygi:mx-auto ygi:w-full ygi:max-w-55.25"
+					>
+						<Image
+							src="/images/service-landing/feature-4-tooltip.png"
+							alt="투표 결과 요약"
+							width={654}
+							height={247}
+							className="ygi:w-full"
+							priority
+						/>
+					</motion.div>
+					{/* 맛집 추천 리스트 - bottom overflow + scale 등장 */}
+					<div className="ygi:relative">
+						<motion.div
+							initial={{ opacity: 1, y: 80, scale: 0.88 }}
+							animate={
+								isInView ? { opacity: 1, y: 0, scale: 1 } : {}
+							}
+							transition={{
+								duration: 0.75,
+								ease: [0.25, 0.46, 0.45, 0.94],
+								delay: 0.4,
+							}}
+							className="ygi:w-full ygi:max-w-65.5"
+						>
+							<Image
+								src="/images/service-landing/feature-4-screen.png"
+								alt="맛집 추천 화면"
+								width={654}
+								height={752}
+								className="ygi:w-full  ygi:shadow-2xl"
+								priority
+							/>
+						</motion.div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};