Develop

.gitignore

@@ -33,6 +33,9 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 
+# npm config (contains sensitive tokens)
+.npmrc
+
 # vercel
 .vercel
 

app/(default)/_hooks/useCarousel.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface UseCarouselOptions<T> {
+	items: T[];
+	onSelect?: (item: T) => void;
+}
+
+export function useCarousel<T extends { id: string }>({
+	items,
+	onSelect,
+}: UseCarouselOptions<T>) {
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const onSelectRef = useRef(onSelect);
+	const isInitialMount = useRef(true);
+
+	// onSelect의 최신 값을 ref에 저장
+	useEffect(() => {
+		onSelectRef.current = onSelect;
+	}, [onSelect]);
+
+	const currentItem = items?.[currentIndex];
+
+	// currentIndex가 변경될 때만 상위로 전달 (초기 마운트 제외)
+	useEffect(() => {
+		// 초기 마운트 시에는 실행하지 않음
+		if (isInitialMount.current) {
+			isInitialMount.current = false;
+			return;
+		}
+
+		if (currentItem && onSelectRef.current) {
+			onSelectRef.current(currentItem);
+		}
+	}, [currentItem]);
+
+	const handlePrevious = () => {
+		setCurrentIndex((prev) => {
+			const newIndex = prev === 0 ? items.length - 1 : prev - 1;
+			const newItem = items[newIndex];
+			if (newItem) {
+				onSelect?.(newItem);
+			}
+			return newIndex;
+		});
+	};
+
+	const handleNext = () => {
+		setCurrentIndex((prev) => {
+			const newIndex = prev === items.length - 1 ? 0 : prev + 1;
+			const newItem = items[newIndex];
+			if (newItem) {
+				onSelect?.(newItem);
+			}
+			return newIndex;
+		});
+	};
+
+	const handleDotClick = (index: number) => {
+		setCurrentIndex(index);
+		const item = items[index];
+		if (item) {
+			onSelect?.(item);
+		}
+	};
+
+	return {
+		currentIndex,
+		currentItem,
+		handlePrevious,
+		handleNext,
+		handleDotClick,
+	};
+}

app/(default)/_hooks/useRandomPractice.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import {
+	detailSituations,
+	type SituationId,
+} from "../practice/_constants/detailSituations";
+
+export function useRandomPractice() {
+	const router = useRouter();
+
+	const getRandomSituation = () => {
+		// 모든 상세상황을 평탄화하여 배열로 만들기
+		const allDetailSituations: Array<{
+			situationId: SituationId;
+			detailId: string;
+		}> = [];
+
+		(Object.keys(detailSituations) as SituationId[]).forEach((situationId) => {
+			detailSituations[situationId].forEach((detail) => {
+				allDetailSituations.push({
+					situationId,
+					detailId: detail.id,
+				});
+			});
+		});
+
+		// 랜덤으로 하나 선택
+		const randomIndex = Math.floor(Math.random() * allDetailSituations.length);
+		return allDetailSituations[randomIndex];
+	};
+
+	const navigateToRandomPractice = () => {
+		const selected = getRandomSituation();
+		router.push(`/practice/${selected.situationId}/${selected.detailId}/dial`);
+	};
+
+	return {
+		navigateToRandomPractice,
+	};
+}

app/(default)/components/EmergencySituationCarousel.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { IconWrapper } from "@/components/icons/IconWrapper";
-import type { CarouselItem } from "../constants/practiceItems";
+import { useCarousel } from "../_hooks/useCarousel";
+import type { CarouselItem } from "../practice/_constants/practiceItems";
 
 interface EmergencySituationCarouselProps {
 	items: CarouselItem[];
@@ -13,41 +13,24 @@ export function EmergencySituationCarousel({
 	items,
 	onSelect,
 }: EmergencySituationCarouselProps) {
-	const [currentIndex, setCurrentIndex] = useState(0);
-
-	const currentItem = items?.[currentIndex];
-
-	// 초기 선택된 항목을 상위로 전달 (훅은 early return 전에 호출되어야 함)
-	useEffect(() => {
-		if (currentItem && onSelect) {
-			onSelect(currentItem.id);
-		}
-	}, [currentItem, onSelect]);
+	const {
+		currentIndex,
+		currentItem,
+		handlePrevious,
+		handleNext,
+		handleDotClick,
+	} = useCarousel({
+		items,
+		onSelect: onSelect
+			? (item) => {
+					onSelect(item.id);
+				}
+			: undefined,
+	});
 
 	// 안전장치: items가 비어있으면 렌더링 X
 	if (!items || items.length === 0) return null;
 
-	const handlePrevious = () => {
-		setCurrentIndex((prev) => {
-			const newIndex = prev === 0 ? items.length - 1 : prev - 1;
-			onSelect?.(items[newIndex].id);
-			return newIndex;
-		});
-	};
-
-	const handleNext = () => {
-		setCurrentIndex((prev) => {
-			const newIndex = prev === items.length - 1 ? 0 : prev + 1;
-			onSelect?.(items[newIndex].id);
-			return newIndex;
-		});
-	};
-
-	const handleDotClick = (index: number) => {
-		setCurrentIndex(index);
-		onSelect?.(items[index].id);
-	};
-
 	return (
 		<div className="w-full flex flex-col flex-1 min-h-0">
 			{/* 캐러셀 영역(남는 세로 공간을 카드가 먹는 영역) */}

app/(default)/components/RandomPracticeCTA.tsx

@@ -1,45 +1,17 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import { IconWrapper } from "@/components/icons/IconWrapper";
-import {
-	detailSituations,
-	type SituationId,
-} from "../constants/detailSituations";
+import { useRandomPractice } from "../_hooks/useRandomPractice";
 import { PhoneIcon } from "./PhoneIcon";
 
 export function RandomPracticeCTA() {
-	const router = useRouter();
-
-	const handleClick = () => {
-		// 모든 상세상황을 평탄화하여 배열로 만들기
-		const allDetailSituations: Array<{
-			situationId: SituationId;
-			detailId: string;
-		}> = [];
-
-		(Object.keys(detailSituations) as SituationId[]).forEach((situationId) => {
-			detailSituations[situationId].forEach((detail) => {
-				allDetailSituations.push({
-					situationId,
-					detailId: detail.id,
-				});
-			});
-		});
-
-		// 랜덤으로 하나 선택
-		const randomIndex = Math.floor(Math.random() * allDetailSituations.length);
-		const selected = allDetailSituations[randomIndex];
-
-		// 다이얼 페이지로 이동
-		router.push(`/practice/${selected.situationId}/${selected.detailId}/dial`);
-	};
+	const { navigateToRandomPractice } = useRandomPractice();
 
 	return (
 		<div className="pt-6 px-5 flex-11 flex items-center justify-center">
 			<button
 				type="button"
-				onClick={handleClick}
+				onClick={navigateToRandomPractice}
 				className="bg-white w-full rounded-2xl flex gap-3 p-4 items-center max-w-[280px]"
 			>
 				<div className="bg-primary-400 rounded-full w-8 h-8 flex justify-center items-center shrink-0">

app/(default)/page.tsx

@@ -5,7 +5,7 @@ import { EmergencySituationCarousel } from "./components/EmergencySituationCarou
 import { PracticeSectionHeader } from "./components/PracticeSectionHeader";
 import { RandomPracticeCTA } from "./components/RandomPracticeCTA";
 import { StartPracticeButton } from "./components/StartPracticeButton";
-import { practiceItems } from "./constants/practiceItems";
+import { practiceItems } from "./practice/_constants/practiceItems";
 
 export default function HomePage() {
 	const [selectedSituationId, setSelectedSituationId] = useState<string>(

app/(default)/practice/[situationId]/[detailId]/components/PracticeOptionButton.tsx → app/(default)/practice/[situationId]/[detailId]/[pageNumber]/components/PracticeOptionButton.tsx

@@ -3,7 +3,7 @@
 import { Button, Modal } from "@team-numberone/daepiro-design-system";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { LottieAnimation } from "../../../../components/LottieAnimation";
+import { LottieAnimation } from "./LottieAnimation";
 
 interface PracticeOptionButtonProps {
 	children: React.ReactNode;

app/(default)/practice/[situationId]/[detailId]/[pageNumber]/page.tsx

@@ -2,10 +2,10 @@ import { notFound } from "next/navigation";
 import {
 	detailSituations,
 	type SituationId,
-} from "../../../../constants/detailSituations";
-import { practiceQuestions } from "../../../../constants/practiceQuestions";
-import { getSituationImagePath } from "../../../../utils/situationImage";
-import { PracticeOptionButton } from "../components/PracticeOptionButton";
+} from "../../../_constants/detailSituations";
+import { practiceQuestions } from "../../../_constants/practiceQuestions";
+import { getSituationImagePath } from "../../../_utils/situationImage";
+import { PracticeOptionButton } from "./components/PracticeOptionButton";
 
 interface PracticeQuestionPageProps {
 	params: Promise<{
@@ -47,7 +47,7 @@ export default async function PracticeQuestionPage({
 	}
 
 	// 이미지 경로 가져오기 (상황별로 동일한 이미지 사용)
-	const imagePath = getSituationImagePath(situationId, pageIndex);
+	const imagePath = getSituationImagePath(situationId, detailId, pageIndex);
 
 	return (
 		<div className="h-full overflow-hidden flex flex-col gap-[28px]">

app/(default)/practice/[situationId]/[detailId]/components/PracticeQuestionContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { PracticeQuestion } from "../../../../constants/practiceQuestions";
+import type { PracticeQuestion } from "../../../_constants/practiceQuestions";
 
 interface PracticeQuestionContentProps {
 	question: PracticeQuestion;
@@ -21,7 +21,6 @@ export function PracticeQuestionContent({
 				<div className="w-full bg-white rounded-[20px] p-6 flex flex-col gap-4">
 					{/* 질문 */}
 					<div className="text-center">
-						<h2 className="text-h5 text-gray-700 mb-3">어떤 상황이야?</h2>
 						<p className="text-body-1 text-gray-600">{question.situation}</p>
 					</div>