diff --git a/app/baby/page.tsx b/app/baby/page.tsx
index 3c24e6c..f78b72c 100644
--- a/app/baby/page.tsx
+++ b/app/baby/page.tsx
@@ -12,42 +12,36 @@ import {
 } from "../auth/index"
 import { 
   getEmotionColor, 
-  fetchEmotionType, 
-  EmotionTypeData 
+  fetchEmotionType
 } from "../utils/emotionUtils"
 import Calendar from "../components/Calendar"
-import HeaderBar from "../components/HeaderBar"
-
-// 감정 타입 인터페이스 (공통 유틸리티 사용)
-type EmotionType = EmotionTypeData;
-
-// 시간대별 일기 데이터 구조 (타입 정의만 유지)
-interface DiaryData {
-  morning?: {
-    predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-    predictedText: string;
-    actualEmotions: Array<{emotion: string, category: string, color: string}>;
-    actualText: string;
-  };
-  afternoon?: {
-    predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-    predictedText: string;
-    actualEmotions: Array<{emotion: string, category: string, color: string}>;
-    actualText: string;
-  };
-  evening?: {
-    predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-    predictedText: string;
-    actualEmotions: Array<{emotion: string, category: string, color: string}>;
-    actualText: string;
-  };
-}
+import PageHeader from "../components/PageHeader"
+import { 
+  DiaryData, 
+  DiaryTimeData, 
+  TimeSlot,
+  TIME_PERIODS
+} from "../types/common"
+import { 
+  formatDate, 
+  isToday, 
+  isPastDate, 
+  isCurrentMonth, 
+  generateCalendarDays 
+} from "../utils/dateUtils"
+import LoadingSpinner from "../components/LoadingSpinner"
+import ErrorMessage from "../components/ErrorMessage"
+import EmptyState from "../components/EmptyState"
+import TimeSlotSelector from "../components/TimeSlotSelector"
+import DiaryCard from "../components/DiaryCard"
+
+// 공통 타입 사용
 
 export default function Present() {
   const router = useRouter()
   const { selectedChild, isLoading } = useChild()
   const [selectedDate, setSelectedDate] = useState<string | null>(null)
-  const [selectedTimeSlot, setSelectedTimeSlot] = useState<'morning' | 'afternoon' | 'evening'>('morning')
+  const [selectedTimeSlot, setSelectedTimeSlot] = useState<TimeSlot>('morning')
   const [currentMonth, setCurrentMonth] = useState(new Date())
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -55,32 +49,12 @@ export default function Present() {
 
 
 
-  const formatDate = (date: Date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
-
-  const isToday = (date: Date) => {
-    const today = new Date();
-    return date.toDateString() === today.toDateString();
-  };
-
   const isTomorrow = (date: Date) => {
     const tomorrow = new Date();
     tomorrow.setDate(tomorrow.getDate() + 1);
     return date.toDateString() === tomorrow.toDateString();
   };
 
-  const isPastDate = (date: Date) => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const compareDate = new Date(date);
-    compareDate.setHours(0, 0, 0, 0);
-    return compareDate < today;
-  };
-
   const isMoreThanTwoDaysLater = (date: Date) => {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
@@ -94,10 +68,6 @@ export default function Present() {
     return compareDate >= twoDaysLater;
   };
 
-  const isCurrentMonth = (date: Date) => {
-    return date.getMonth() === currentMonth.getMonth();
-  };
-
   const hasDiary = (date: Date) => {
     const dateStr = formatDate(date);
     const diaryData = forecastData[dateStr];
@@ -259,7 +229,7 @@ export default function Present() {
     };
   };
 
-  // 현재 달의 과거 날짜들에 대한 데이터 미리 로드
+  // 현재 달의 과거 날짜들과 오늘 날짜에 대한 데이터 미리 로드
   useEffect(() => {
     if (selectedChild?.id && !isLoading) {
       const today = new Date();
@@ -269,7 +239,7 @@ export default function Present() {
       const lastDay = new Date(year, month + 1, 0);
       
       for (let date = new Date(firstDay); date <= lastDay; date.setDate(date.getDate() + 1)) {
-        if (isPastDate(date)) {
+        if (isPastDate(date) || isToday(date)) {
           const dateStr = formatDate(date);
           if (!forecastData[dateStr]) {
             loadForecastData(dateStr);
@@ -293,14 +263,7 @@ export default function Present() {
     <Container>
       <div className="flex flex-col items-start justify-start flex-grow w-full max-w-sm mx-auto mt-4">
         {/* 상단바 */}
-        <div className="flex items-end justify-between w-full rounded-lg px-2 mb-6">
-          <HeaderBar 
-            childName={selectedChild?.name || ''}
-            inviteCode={selectedChild?.inviteCode}
-            showChildListButton={false}
-            showSettingsButton={true}
-          />
-        </div>
+        <PageHeader showLogo={true} />
 
         {/* 달력 컴포넌트 */}
         <Calendar
diff --git a/app/childList/edit-child/page.tsx b/app/childList/edit-child/page.tsx
index ffe3817..8bbdafa 100644
--- a/app/childList/edit-child/page.tsx
+++ b/app/childList/edit-child/page.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, Suspense } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
-import { motion, AnimatePresence } from "framer-motion"
 import Container from "../../components/Container"
 import Toast from "../../components/Toast"
 
@@ -24,7 +23,6 @@ function EditChildPageContent() {
   const searchParams = useSearchParams();
   const childId = searchParams.get('id');
 
-  const [currentDisplayStep, setCurrentDisplayStep] = useState(1);
   const [name, setName] = useState('');
   const [dob, setDob] = useState('');
   const [gender, setGender] = useState('');
@@ -45,7 +43,6 @@ function EditChildPageContent() {
   const nameRef = useRef<HTMLInputElement>(null);
   const dobRef = useRef<HTMLInputElement>(null);
   const healthStatusRef = useRef<HTMLInputElement>(null);
-  const nameAdvanceTimeout = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     const fetchChildData = async () => {
@@ -95,24 +92,6 @@ function EditChildPageContent() {
     fetchChildData();
   }, [childId]);
 
-  useEffect(() => {
-    switch (currentDisplayStep) {
-      case 1:
-        nameRef.current?.focus();
-        break;
-      case 2:
-        dobRef.current?.focus();
-        break;
-      case 3:
-        break;
-      case 4:
-        healthStatusRef.current?.focus();
-        break;
-      default:
-        break;
-    }
-  }, [currentDisplayStep]);
-
   const showToast = (message: string, type: 'success' | 'error') => {
     setToast({
       message,
@@ -125,14 +104,6 @@ function EditChildPageContent() {
     setToast(prev => ({ ...prev, isVisible: false }));
   };
 
-  const advanceStep = () => {
-    if (currentDisplayStep < 4) {
-      setCurrentDisplayStep(prevStep => prevStep + 1);
-    } else {
-      handleSave();
-    }
-  };
-
   const handleSave = async () => {
     if (!childId) return;
 
@@ -162,6 +133,7 @@ function EditChildPageContent() {
       }
 
       showToast('아이 정보가 성공적으로 수정되었습니다!', 'success');
+      setIsSaving(false);
       
       // 성공 후 잠시 대기 후 페이지 이동
       setTimeout(() => {
@@ -170,40 +142,16 @@ function EditChildPageContent() {
     } catch (error) {
       console.error("수정 실패:", error);
       showToast('아이 정보 수정에 실패했습니다. 다시 시도해주세요.', 'error');
-    } finally {
       setIsSaving(false);
     }
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-
-      if (currentDisplayStep === 1 && name.trim() === '') return;
-      if (currentDisplayStep === 2 && dob.trim() === '') return;
-      if (currentDisplayStep === 4 && healthStatus.trim() === '') return;
-
-      advanceStep();
-    }
-  };
-
   const handleGenderSelect = (selectedGender: string) => {
     setGender(selectedGender);
-    advanceStep();
   };
 
   const handleBack = () => {
-    if (currentDisplayStep === 1) {
-      router.push('/childList');
-    } else {
-      setCurrentDisplayStep(prev => Math.max(1, prev - 1));
-    }
-  };
-
-  const fadeInOutVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
-    exit: { opacity: 0, y: -10, transition: { duration: 0.3 } },
+    router.push('/childList');
   };
 
   if (isLoading) {
@@ -281,181 +229,121 @@ function EditChildPageContent() {
           <p className="text-sm text-gray-600">아이의 정보를 수정해주세요</p>
         </div>
         
-        <AnimatePresence mode="wait" initial={false}>
-          {currentDisplayStep >= 1 && (
-            <motion.div
-              key="step1-name"
-              initial="hidden"
-              animate="visible"
-              exit="exit"
-              variants={fadeInOutVariants}
-              className="w-full mb-12"
-            >
-              <label htmlFor="name" className="text-gray-500 text-sm font-semibold mb-2 block">
-                이름 <span className="text-red-500">*</span>
-              </label>
-              <div className="w-full border-b-2 border-gray-300 pb-2">
-                <input
-                  type="text"
-                  id="name"
-                  ref={nameRef}
-                  className="w-full text-xl focus:outline-none placeholder-gray-400"
-                  placeholder="이름을 입력해주세요."
-                  value={name}
-                  onChange={(e) => {
-                    setName(e.target.value);
-                    const koreanCharCount = e.target.value.match(/[\uAC00-\uD7A3]/g)?.length || 0;
-                    if (nameAdvanceTimeout.current) {
-                      clearTimeout(nameAdvanceTimeout.current);
-                    }
-                    if (currentDisplayStep === 1 && koreanCharCount === 3) {
-                      nameAdvanceTimeout.current = setTimeout(() => {
-                        advanceStep();
-                      }, 500);
-                    }
-                  }}
-                  onKeyDown={handleKeyDown}
-                />
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AnimatePresence mode="wait" initial={false}>
-          {currentDisplayStep >= 2 && (
-            <motion.div
-              key="step2-dob"
-              initial="hidden"
-              animate="visible"
-              exit="exit"
-              variants={fadeInOutVariants}
-              className="w-full mb-12"
-            >
-              <label htmlFor="dob" className="text-gray-500 text-sm font-semibold mb-2 block">
-                생년월일 <span className="text-red-500">*</span>
-              </label>
-              <div className="w-full border-b-2 border-gray-300 pb-2">
-                <input
-                  type="text"
-                  id="dob"
-                  ref={dobRef}
-                  className="w-full text-xl focus:outline-none placeholder-gray-400"
-                  placeholder="생년월일을 입력해주세요."
-                  value={dob}
-                  onChange={(e) => {
-                    let value = e.target.value.replace(/[^0-9]/g, '');
-                    if (value.length > 8) value = value.slice(0, 8);
-                    let formatted = value;
-                    if (value.length > 4) {
-                      formatted = value.slice(0, 4) + '-' + value.slice(4);
-                    }
-                    if (value.length > 6) {
-                      formatted = value.slice(0, 4) + '-' + value.slice(4, 6) + '-' + value.slice(6);
-                    }
-                    setDob(formatted);
-                    if (currentDisplayStep === 2 && value.length === 8) {
-                      advanceStep();
-                    }
-                  }}
-                  onKeyDown={handleKeyDown}
-                />
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AnimatePresence mode="wait" initial={false}>
-          {currentDisplayStep >= 3 && (
-            <motion.div
-              key="step3-gender"
-              initial="hidden"
-              animate="visible"
-              exit="exit"
-              variants={fadeInOutVariants}
-              className="w-full mb-12"
-            >
-              <label htmlFor="gender" className="text-gray-500 text-sm font-semibold mb-2 block">
-                성별 <span className="text-red-500">*</span>
-              </label>
-              <div className="flex flex-row space-x-8 mt-2">
-                <label className="flex items-center space-x-3">
-                  <input
-                    type="radio"
-                    name="gender"
-                    value="male"
-                    checked={gender === 'male'}
-                    onChange={() => handleGenderSelect('male')}
-                    className="form-radio h-5 w-5 text-[#FF6F71] focus:ring-[#FF6F71]"
-                  />
-                  <span className="text-black text-xl font-medium">남자</span>
-                </label>
-                <label className="flex items-center space-x-3">
-                  <input
-                    type="radio"
-                    name="gender"
-                    value="female"
-                    checked={gender === 'female'}
-                    onChange={() => handleGenderSelect('female')}
-                    className="form-radio h-5 w-5 text-[#FF6F71] focus:ring-[#FF6F71]"
-                  />
-                  <span className="text-black text-xl font-medium">여자</span>
-                </label>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AnimatePresence mode="wait" initial={false}>
-          {currentDisplayStep >= 4 && (
-            <motion.div
-              key="step4-health"
-              initial="hidden"
-              animate="visible"
-              exit="exit"
-              variants={fadeInOutVariants}
-              className="w-full mb-12"
-            >
-              <label htmlFor="healthStatus" className="text-gray-500 text-sm font-semibold mb-2 block">건강 상태</label>
-              <div className="w-full border-b-2 border-gray-300 pb-2">
-                <input
-                  type="text"
-                  id="healthStatus"
-                  ref={healthStatusRef}
-                  className="w-full text-xl focus:outline-none placeholder-gray-400"
-                  placeholder="ex) 알레르기, 복용 약... 등"
-                  value={healthStatus}
-                  onChange={(e) => setHealthStatus(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                />
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {currentDisplayStep === 4 && (
-          <motion.div
-            key="final-button"
-            initial="hidden"
-            animate="visible"
-            variants={fadeInOutVariants}
-            className="flex flex-col items-center w-full max-w-sm mt-auto mb-4"
+        <div className="w-full mb-12">
+          <label htmlFor="name" className="text-gray-500 text-sm font-semibold mb-2 block">
+            이름 <span className="text-red-500">*</span>
+          </label>
+          <div className="w-full border-b-2 border-gray-300 pb-2">
+            <input
+              type="text"
+              id="name"
+              ref={nameRef}
+              className="w-full text-xl focus:outline-none placeholder-gray-400"
+              placeholder="이름을 입력해주세요."
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="w-full mb-12">
+          <label htmlFor="dob" className="text-gray-500 text-sm font-semibold mb-2 block">
+            생년월일 <span className="text-red-500">*</span>
+          </label>
+          <div className="w-full border-b-2 border-gray-300 pb-2">
+            <input
+              type="text"
+              id="dob"
+              ref={dobRef}
+              className="w-full text-xl focus:outline-none placeholder-gray-400"
+              placeholder="생년월일을 입력해주세요."
+              value={dob}
+              onChange={(e) => {
+                let value = e.target.value.replace(/[^0-9]/g, '');
+                if (value.length > 8) value = value.slice(0, 8);
+                let formatted = value;
+                if (value.length > 4) {
+                  formatted = value.slice(0, 4) + '-' + value.slice(4);
+                }
+                if (value.length > 6) {
+                  formatted = value.slice(0, 4) + '-' + value.slice(4, 6) + '-' + value.slice(6);
+                }
+                setDob(formatted);
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="w-full mb-12">
+          <label htmlFor="gender" className="text-gray-500 text-sm font-semibold mb-2 block">
+            성별 <span className="text-red-500">*</span>
+          </label>
+          <div className="flex flex-row space-x-8 mt-2">
+            <label className="flex items-center space-x-3">
+              <input
+                type="radio"
+                name="gender"
+                value="male"
+                checked={gender === 'male'}
+                onChange={() => handleGenderSelect('male')}
+                className="form-radio h-5 w-5 text-[#FF6F71] focus:ring-[#FF6F71]"
+              />
+              <span className="text-black text-xl font-medium">남자</span>
+            </label>
+            <label className="flex items-center space-x-3">
+              <input
+                type="radio"
+                name="gender"
+                value="female"
+                checked={gender === 'female'}
+                onChange={() => handleGenderSelect('female')}
+                className="form-radio h-5 w-5 text-[#FF6F71] focus:ring-[#FF6F71]"
+              />
+              <span className="text-black text-xl font-medium">여자</span>
+            </label>
+          </div>
+        </div>
+
+        <div className="w-full mb-12">
+          <label htmlFor="healthStatus" className="text-gray-500 text-sm font-semibold mb-2 block">건강 상태</label>
+          <div className="w-full border-b-2 border-gray-300 pb-2">
+            <input
+              type="text"
+              id="healthStatus"
+              ref={healthStatusRef}
+              className="w-full text-xl focus:outline-none placeholder-gray-400"
+              placeholder="ex) 알레르기, 복용 약... 등"
+              value={healthStatus}
+              onChange={(e) => setHealthStatus(e.target.value)}
+              onKeyDown={(e) => {
+                // 메모 단계에서는 엔터키 동작하지 않음
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                }
+              }}
+            />
+          </div>
+          <p className="text-gray-500 text-sm mt-2">알레르기와 같은 참고해야할 사항이 있다면 적어주세요.</p>
+        </div>
+
+        <div className="flex flex-col items-center w-full max-w-sm mt-auto mb-4">
+          <button
+            className="flex w-full items-center justify-center gap-1 rounded-lg bg-[#FF6F71] text-white py-3 text-lg font-semibold mb-4 disabled:opacity-50 disabled:cursor-not-allowed"
+            onClick={handleSave}
+            disabled={isSaving}
           >
-            <button
-              className="flex w-full items-center justify-center gap-1 rounded-lg bg-[#FF6F71] text-white py-3 text-lg font-semibold mb-4 disabled:opacity-50 disabled:cursor-not-allowed"
-              onClick={handleSave}
-              disabled={isSaving}
-            >
-              {isSaving ? (
-                <>
-                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
-                  수정 중...
-                </>
-              ) : (
-                '수정 완료'
-              )}
-            </button>
-          </motion.div> 
-        )}
+            {isSaving ? (
+              <>
+                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                수정 중...
+              </>
+            ) : (
+              '수정 완료'
+            )}
+          </button>
+        </div>
       </div>
     </Container>
   );
@@ -463,11 +351,17 @@ function EditChildPageContent() {
 
 export default function EditChildPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-white">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
-        <p className="text-gray-600">로딩 중...</p>
-      </div>
-    </div>
+    <Suspense fallback={
+      <Container>
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF6F71] mx-auto mb-4"></div>
+            <p className="text-gray-600">페이지를 불러오는 중...</p>
+          </div>
+        </div>
+      </Container>
+    }>
+      <EditChildPageContent />
+    </Suspense>
   );
 } 
\ No newline at end of file
diff --git a/app/childList/page.tsx b/app/childList/page.tsx
index 720830d..9ce1fde 100644
--- a/app/childList/page.tsx
+++ b/app/childList/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import Container from "../components/Container"
 import NavigationBar from "../components/NavigationBar"
+import PageHeader from "../components/PageHeader"
 import Toast from "../components/Toast"
 import { useChild } from "../contexts/ChildContext"
 
@@ -210,9 +211,7 @@ export default function ChildListPage() {
     setToast(prev => ({ ...prev, isVisible: false }));
   };
 
-  const handleBack = () => {
-    window.history.back()
-  }
+
 
   const handleChildClick = (childId: number) => {
     console.log('Child clicked:', childId)
@@ -329,13 +328,6 @@ export default function ChildListPage() {
   if (isLoading) {
     return (
       <Container>
-        <div className="w-full max-w-sm mx-auto">
-          <button className="mb-4 cursor-pointer" onClick={handleBack}>
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-            </svg>
-          </button>
-        </div>
         
         <div className="flex flex-col items-center justify-center min-h-[60vh]">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF6F71] mx-auto mb-4"></div>
@@ -351,13 +343,6 @@ export default function ChildListPage() {
   if (error) {
     return (
       <Container>
-        <div className="w-full max-w-sm mx-auto">
-          <button className="mb-4 cursor-pointer" onClick={handleBack}>
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-            </svg>
-          </button>
-        </div>
         
         <div className="flex flex-col items-center justify-center min-h-[60vh]">
           <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
@@ -389,17 +374,13 @@ export default function ChildListPage() {
         onClose={hideToast}
       />
       
-      <div className="w-full max-w-sm mx-auto">
-        <button className="mb-4 cursor-pointer" onClick={handleBack}>
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-          </svg>
-        </button>
-      </div>
+
 
       <div className="flex flex-col items-start justify-start flex-grow w-full max-w-sm mx-auto mt-4">
+        {/* 상단바 */}
+        <PageHeader showLogo={true} />
+        
         <div className="w-full mb-8">
-          <span className="text-gray-500 font-medium text-sm">아이 관리</span>
           <h1 className="text-2xl font-semibold mb-1">등록된 아이 목록</h1>
           <p className="text-sm text-gray-600">
             총 {childrenData.length}명의 아이가 등록되어 있습니다.
diff --git a/app/components/Calendar.tsx b/app/components/Calendar.tsx
index 581f95d..99dff2a 100644
--- a/app/components/Calendar.tsx
+++ b/app/components/Calendar.tsx
@@ -8,7 +8,7 @@ interface CalendarProps {
   hasDiary: (date: Date) => boolean;
   isToday: (date: Date) => boolean;
   isPastDate: (date: Date) => boolean;
-  isCurrentMonth: (date: Date) => boolean;
+  isCurrentMonth: (date: Date, currentMonth: Date) => boolean;
   formatDate: (date: Date) => string;
   readOnly?: boolean; // 읽기 전용 모드 (home 페이지용)
   showEmptyIcon?: boolean; // 빈 상태 아이콘 표시 여부
@@ -106,7 +106,7 @@ export default function Calendar({
               disabled={!isClickable}
               className={`
                 relative h-10 text-sm rounded-lg transition-colors
-                ${isCurrentMonth(date) ? 'text-gray-900' : 'text-gray-300'}
+                ${isCurrentMonth(date, currentMonth) ? 'text-gray-900' : 'text-gray-300'}
                 ${isToday(date) ? 'bg-blue-100 text-blue-600 font-semibold' : ''}
                 ${selectedDate === formatDate(date) ? 'bg-[#FF6F71] text-white' : ''}
                 ${isClickable ? 'hover:bg-gray-100 cursor-pointer' : 'cursor-not-allowed opacity-50'}
diff --git a/app/components/Container.tsx b/app/components/Container.tsx
index 7e69c2f..f56d636 100644
--- a/app/components/Container.tsx
+++ b/app/components/Container.tsx
@@ -8,7 +8,7 @@ interface ContainerProps {
 export default function Container({ children, className = "" }: ContainerProps) {
   return (
     <div className={`container ${className}`}>
-      <div className="min-h-screen flex flex-col items-center justify-center px-4 pt-10 pb-0 text-black">
+      <div className="min-h-screen flex flex-col items-center justify-center px-4 pt-10 pb-0 text-black overflow-hidden">
         {children}
       </div>
     </div>
diff --git a/app/components/DiaryCard.tsx b/app/components/DiaryCard.tsx
new file mode 100644
index 0000000..24a2808
--- /dev/null
+++ b/app/components/DiaryCard.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import React from 'react';
+import { DiaryTimeData } from '../types/common';
+
+interface DiaryCardProps {
+  title: string;
+  data: DiaryTimeData;
+  type: 'forecast' | 'record'; // 예보인지 기록인지 구분
+  className?: string;
+}
+
+export default function DiaryCard({ title, data, type, className = "" }: DiaryCardProps) {
+  const emotions = type === 'forecast' ? data.predictedEmotions : data.actualEmotions;
+  const text = type === 'forecast' ? data.predictedText : data.actualText;
+  const defaultEmotionText = type === 'forecast' ? '예상 감정' : '실제 감정';
+  const defaultText = type === 'forecast' ? '예보 메모가 없습니다.' : '실제 기록이 없습니다.';
+
+  return (
+    <div className={`bg-white rounded-2xl p-5 border border-gray-100 ${className}`}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-sm font-medium text-[#FF6F71]">{title}</span>
+        <span className="text-sm text-gray-400">
+          {emotions?.map((e, index) => (
+            <span 
+              key={`${e.emotion}-${index}`}
+              className="inline-block px-2 py-1 rounded-full text-xs font-medium mr-1"
+              style={{ backgroundColor: e.color + '20', color: e.color }}
+            >
+              {e.emotion}
+            </span>
+          )) || defaultEmotionText}
+        </span>
+      </div>
+      <p className="text-base text-gray-600 leading-normal">
+        {text || defaultText}
+      </p>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/EmotionSelector.tsx b/app/components/EmotionSelector.tsx
new file mode 100644
index 0000000..52367d8
--- /dev/null
+++ b/app/components/EmotionSelector.tsx
@@ -0,0 +1,144 @@
+'use client'
+
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { EmotionType, CATEGORY_COLORS } from '../types/common';
+
+interface EmotionSelectorProps {
+  onEmotionSelect: (emotion: EmotionType, category: string) => void;
+  selectedEmotion?: EmotionType | null;
+  className?: string;
+}
+
+export default function EmotionSelector({ 
+  onEmotionSelect, 
+  selectedEmotion,
+  className = ""
+}: EmotionSelectorProps) {
+  const [emotions, setEmotions] = useState<EmotionType[]>([]);
+  const [emotionCategories, setEmotionCategories] = useState<{[key: string]: EmotionType[]}>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 감정 목록 조회
+  const fetchEmotions = async () => {
+    try {
+      setIsLoading(true);
+      const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+      const response = await fetch(`${apiBaseUrl}/api/emotionTypes/emotionType`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error('감정 목록 조회에 실패했습니다.');
+      }
+
+      const emotionData: EmotionType[] = await response.json();
+      setEmotions(emotionData);
+
+      // 감정을 타입별로 그룹화
+      const grouped = emotionData.reduce((acc, emotion) => {
+        if (!acc[emotion.type]) {
+          acc[emotion.type] = [];
+        }
+        acc[emotion.type].push(emotion);
+        return acc;
+      }, {} as {[key: string]: EmotionType[]});
+
+      setEmotionCategories(grouped);
+    } catch (error) {
+      console.error('감정 목록 조회 실패:', error);
+      setError('감정 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchEmotions();
+  }, []);
+
+  const handleEmotionClick = (category: string, emotion: EmotionType) => {
+    onEmotionSelect(emotion, category);
+  };
+
+  const fadeInOutVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+    exit: { opacity: 0, y: -10, transition: { duration: 0.3 } },
+  };
+
+  if (isLoading) {
+    return (
+      <div className={`text-center py-8 ${className}`}>
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
+        <p className="text-gray-600">감정 목록을 불러오는 중...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`text-center py-8 ${className}`}>
+        <p className="text-red-500 text-sm mb-4">{error}</p>
+        <button 
+          onClick={fetchEmotions}
+          className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600"
+        >
+          다시 시도
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`w-full space-y-6 ${className}`}>
+      {Object.entries(emotionCategories).map(([category, categoryEmotions]) => (
+        <motion.div
+          key={category}
+          variants={fadeInOutVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="w-full"
+        >
+          <div className="text-sm font-medium text-gray-600 mb-3">{category}</div>
+          <div className="flex flex-wrap gap-2">
+            {categoryEmotions.map((emotion) => {
+              const isSelected = selectedEmotion?.id === emotion.id;
+              const categoryColor = CATEGORY_COLORS[category as keyof typeof CATEGORY_COLORS];
+              
+              return (
+                <motion.button
+                  key={`${category}-${emotion.id}`}
+                  type="button"
+                  className={`
+                    px-4 py-2 rounded-full text-sm font-medium transition-all duration-200
+                    border inline-flex items-center justify-center
+                    ${isSelected 
+                      ? 'text-white shadow-lg transform scale-105' 
+                      : 'text-gray-700 hover:shadow-md hover:scale-105'
+                    }
+                  `}
+                  style={{
+                    backgroundColor: isSelected ? categoryColor : 'transparent',
+                    borderColor: categoryColor,
+                  }}
+                  onClick={() => handleEmotionClick(category, emotion)}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  {emotion.name}
+                </motion.button>
+              );
+            })}
+          </div>
+        </motion.div>
+      ))}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/EmptyState.tsx b/app/components/EmptyState.tsx
new file mode 100644
index 0000000..2b4ce62
--- /dev/null
+++ b/app/components/EmptyState.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import React from 'react';
+
+interface EmptyStateProps {
+  message: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export default function EmptyState({ 
+  message, 
+  icon,
+  className = ""
+}: EmptyStateProps) {
+  const defaultIcon = (
+    <svg className="w-12 h-12 mx-auto mb-2" fill="none" viewBox="0 0 24 26">
+      <path d="M22 2H19V1C19 0.734784 18.8946 0.48043 18.7071 0.292893C18.5196 0.105357 18.2652 0 18 0C17.7348 0 17.4804 0.105357 17.2929 0.292893C17.1054 0.48043 17 0.734784 17 1V2H7V1C7 0.734784 6.89464 0.48043 6.70711 0.292893C6.51957 0.105357 6.26522 0 6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V2H2C1.46957 2 0.960859 2.21071 0.585786 2.58579C0.210714 2.96086 0 3.46957 0 4V24C0 24.5304 0.210714 25.0391 0.585786 25.4142C0.960859 25.7893 1.46957 26 2 26H22C22.5304 26 23.0391 25.7893 23.4142 25.4142C23.7893 25.0391 24 24.5304 24 24V4C24 3.46957 23.7893 2.96086 23.4142 2.58579C23.0391 2.21071 22.5304 2 22 2ZM5 4V5C5 5.26522 5.10536 5.51957 5.29289 5.70711C5.48043 5.89464 5.73478 6 6 6C6.26522 6 6.51957 5.89464 6.70711 5.70711C6.89464 5.51957 7 5.26522 7 5V4H17V5C17 5.26522 17.1054 5.51957 17.2929 5.70711C17.4804 5.89464 17.7348 6 18 6C18.2652 6 18.5196 5.89464 18.7071 5.70711C18.8946 5.51957 19 5.26522 19 5V4H22V8H2V4H5ZM22 24H2V10H22V24ZM16 17C16 17.2652 15.8946 17.5196 15.7071 17.7071C15.5196 17.8946 15.2652 18 15 18H9C8.73478 18 8.48043 17.8946 8.29289 17.7071C8.10536 17.5196 8 17.2652 8 17C8 16.7348 8.10536 16.4804 8.29289 16.2929C8.48043 16.1054 8.73478 16 9 16H15C15.2652 16 15.5196 16.1054 15.7071 16.2929C15.8946 16.4804 16 16.7348 16 17Z" fill="currentColor"/>
+    </svg>
+  );
+
+  return (
+    <div className={`w-full text-center py-8 ${className}`}>
+      <div className="text-gray-400 mb-2 px-4">
+        {icon || defaultIcon}
+      </div>
+      <p className="text-gray-500 text-sm">
+        {message}
+      </p>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/ErrorMessage.tsx b/app/components/ErrorMessage.tsx
new file mode 100644
index 0000000..a033e51
--- /dev/null
+++ b/app/components/ErrorMessage.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react';
+
+interface ErrorMessageProps {
+  message: string;
+  onRetry?: () => void;
+  retryText?: string;
+  className?: string;
+}
+
+export default function ErrorMessage({ 
+  message, 
+  onRetry, 
+  retryText = "다시 시도",
+  className = ""
+}: ErrorMessageProps) {
+  return (
+    <div className={`w-full text-center py-8 ${className}`}>
+      <div className="text-red-400 mb-2">
+        <svg className="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <p className="text-red-500 text-sm mb-4">{message}</p>
+      {onRetry && (
+        <button 
+          onClick={onRetry}
+          className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors"
+        >
+          {retryText}
+        </button>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/HeaderBar.tsx b/app/components/HeaderBar.tsx
index 68163b7..26b891a 100644
--- a/app/components/HeaderBar.tsx
+++ b/app/components/HeaderBar.tsx
@@ -34,13 +34,14 @@ export default function HeaderBar({
     if (onSettingsClick) {
       onSettingsClick();
     } else {
-      router.push('/settings');
+      const currentPath = window.location.pathname;
+      router.push(`/settings?from=${encodeURIComponent(currentPath)}`);
     }
   };
 
   return (
-    <div className="flex items-end justify-between w-full">
-      <div className="flex items-end gap-1">
+    <div className="flex items-center justify-between w-full">
+      <div className="flex items-center gap-1">
         <span className="text-gray-900 font-semibold text-2xl">{childName}</span>
         {inviteCode && (
           <span className="text-sm text-gray-500 font-medium">
@@ -50,7 +51,7 @@ export default function HeaderBar({
         {showChildListButton && (
           <button
             onClick={handleChildListClick}
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors ml-2"
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors ml-2 flex items-center justify-center"
             title="아이 목록"
           >
             <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -62,7 +63,7 @@ export default function HeaderBar({
       {showSettingsButton && (
         <button
           onClick={handleSettingsClick}
-          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+          className="p-2 hover:bg-gray-100 rounded-lg transition-colors flex items-center justify-center"
           title="설정"
         >
           <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/app/components/LoadingSpinner.tsx b/app/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..d2ba523
--- /dev/null
+++ b/app/components/LoadingSpinner.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import React from 'react';
+
+interface LoadingSpinnerProps {
+  message?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export default function LoadingSpinner({ 
+  message = "로딩 중...", 
+  size = 'md',
+  className = ""
+}: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'h-6 w-6',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12'
+  };
+
+  return (
+    <div className={`flex flex-col items-center justify-center ${className}`}>
+      <div className={`animate-spin rounded-full border-b-2 border-gray-900 mx-auto mb-4 ${sizeClasses[size]}`}></div>
+      <p className="text-gray-600 text-sm">{message}</p>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/PageHeader.tsx b/app/components/PageHeader.tsx
new file mode 100644
index 0000000..3ea1fb8
--- /dev/null
+++ b/app/components/PageHeader.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import React from 'react';
+import HeaderBar from './HeaderBar';
+import { useChild } from '../contexts/ChildContext';
+
+interface PageHeaderProps {
+  customTitle?: string;
+  showChildListButton?: boolean;
+  showLogo?: boolean;
+}
+
+export default function PageHeader({ 
+  customTitle, 
+  showChildListButton = false,
+  showLogo = false
+}: PageHeaderProps) {
+  const { selectedChild } = useChild();
+
+  return (
+    <div className="flex flex-col w-full rounded-lg mb-6">
+      {/* 로고 영역 */}
+      {showLogo && (
+        <div className="flex justify-center mb-4">
+          <div className="flex items-center gap-2">
+            <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+          </div>
+        </div>
+      )}
+      
+      {/* 헤더바 */}
+      <HeaderBar 
+        childName={customTitle || selectedChild?.name || ''}
+        inviteCode={selectedChild?.inviteCode}
+        showChildListButton={showChildListButton}
+        showSettingsButton={true}
+      />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/TimeSlotSelector.tsx b/app/components/TimeSlotSelector.tsx
new file mode 100644
index 0000000..a4a3349
--- /dev/null
+++ b/app/components/TimeSlotSelector.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import React from 'react';
+import { TimeSlot, TIME_PERIODS } from '../types/common';
+
+interface TimeSlotSelectorProps {
+  selectedTimeSlot: TimeSlot;
+  onTimeSlotChange: (timeSlot: TimeSlot) => void;
+  className?: string;
+}
+
+export default function TimeSlotSelector({ 
+  selectedTimeSlot, 
+  onTimeSlotChange,
+  className = ""
+}: TimeSlotSelectorProps) {
+  return (
+    <div className={`w-full mb-4 ${className}`}>
+      <div className="flex bg-gray-100 rounded-xl p-1">
+        {Object.entries(TIME_PERIODS).map(([key, period]) => (
+          <button
+            key={key}
+            onClick={() => onTimeSlotChange(key as TimeSlot)}
+            className={`
+              flex-1 py-2 px-4 text-sm font-medium rounded-lg transition-all
+              ${selectedTimeSlot === key 
+                ? 'bg-white text-gray-900 shadow-sm' 
+                : 'text-gray-500 hover:text-gray-700'
+              }
+            `}
+          >
+            {period.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/Toast.tsx b/app/components/Toast.tsx
index e80f1dc..03a29ab 100644
--- a/app/components/Toast.tsx
+++ b/app/components/Toast.tsx
@@ -25,30 +25,30 @@ export default function Toast({ message, type, isVisible, onClose }: ToastProps)
   const iconColor = type === 'success' ? 'bg-green-400' : type === 'error' ? 'bg-red-400' : 'bg-yellow-400';
 
   return (
-    <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 z-50 px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 transition-all duration-300 ${
+    <div className={`fixed top-4 left-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 transition-all duration-300 max-w-sm mx-auto ${
       isVisible 
         ? 'opacity-100 translate-y-0' 
         : 'opacity-0 -translate-y-2 pointer-events-none'
     } ${bgColor} text-white`}>
-      <div className={`w-5 h-5 rounded-full flex items-center justify-center ${iconColor}`}>
+      <div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 ${iconColor}`}>
         {type === 'success' ? (
-          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+          <svg className="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20">
             <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
           </svg>
         ) : type === 'error' ? (
-          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+          <svg className="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20">
             <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
           </svg>
         ) : (
-          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+          <svg className="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 20 20">
             <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
           </svg>
         )}
       </div>
-      <span className="font-medium">{message}</span>
+      <span className="font-medium text-sm flex-1 min-w-0">{message}</span>
       <button
         onClick={onClose}
-        className="ml-2 text-white/80 hover:text-white"
+        className="text-white/80 hover:text-white flex-shrink-0"
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
diff --git a/app/globals.css b/app/globals.css
index ce87e98..faf303d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -41,6 +41,8 @@ body {
   -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   text-size-adjust: 100%;
+  overflow-x: hidden;
+  position: relative;
 }
 
 body, input, textarea, select, button, p, h1, h2, h3, h4, h5, h6, span, div, a {
@@ -53,6 +55,7 @@ body, input, textarea, select, button, p, h1, h2, h3, h4, h5, h6, span, div, a {
   min-height: 100vh;
   background: white;
   position: relative;
+  overflow-x: hidden;
 }
 
 .app-content {
diff --git a/app/home/page.tsx b/app/home/page.tsx
index 0a279d7..196be16 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -14,38 +14,30 @@ import {
   isAuthenticated
 } from "../auth/index"
 import Calendar from "../components/Calendar"
-import HeaderBar from "../components/HeaderBar"
-import { getEmotionColor, fetchEmotionType, EmotionTypeData } from "../utils/emotionUtils";
+import PageHeader from "../components/PageHeader"
+import { getEmotionColor, fetchEmotionType } from "../utils/emotionUtils"
+import { 
+  DiaryData, 
+  DiaryTimeData, 
+  TimeSlot, 
+  ToastState,
+  TIME_PERIODS
+} from "../types/common"
+import { 
+  formatDate, 
+  isToday, 
+  isPastDate, 
+  isCurrentMonth, 
+  generateCalendarDays 
+} from "../utils/dateUtils"
+import LoadingSpinner from "../components/LoadingSpinner"
+import ErrorMessage from "../components/ErrorMessage"
+import EmptyState from "../components/EmptyState"
+import TimeSlotSelector from "../components/TimeSlotSelector"
+import DiaryCard from "../components/DiaryCard"
 
 
-// API 데이터 타입 정의
-interface DiaryData {
-  morning?: {
-    predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-    predictedText: string;
-    actualEmotions: Array<{emotion: string, category: string, color: string}>;
-    actualText: string;
-  };
-  afternoon?: {
-    predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-    predictedText: string;
-    actualEmotions: Array<{emotion: string, category: string, color: string}>;
-    actualText: string;
-  };
-  evening?: {
-    predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-    predictedText: string;
-    actualEmotions: Array<{emotion: string, category: string, color: string}>;
-    actualText: string;
-  };
-}
-
-type DiaryTimeData = {
-  predictedEmotions: Array<{emotion: string, category: string, color: string}>;
-  predictedText: string;
-  actualEmotions: Array<{emotion: string, category: string, color: string}>;
-  actualText: string;
-};
+// 공통 타입 사용
 
 export default function Register() {
   const router = useRouter()
@@ -53,64 +45,20 @@ export default function Register() {
   const [childName, setChildName] = useState('')
   const [activeTab, setActiveTab] = useState('홈')
   const [selectedDate, setSelectedDate] = useState<string | null>(null)
-  const [selectedTimeSlot, setSelectedTimeSlot] = useState<'morning' | 'afternoon' | 'evening'>('morning')
+  const [selectedTimeSlot, setSelectedTimeSlot] = useState<TimeSlot>('morning')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [diaryData, setDiaryData] = useState<Record<string, DiaryData>>({})
-  const [toast, setToast] = useState<{
-    message: string;
-    type: 'success' | 'error' | 'warning';
-    isVisible: boolean;
-  }>({
+  const [toast, setToast] = useState<ToastState>({
     message: '',
     type: 'warning',
     isVisible: false
   })
 
   const [currentMonth, setCurrentMonth] = useState(new Date());
-  const [forecastData, setForecastData] = useState<Record<string, Record<'morning' | 'afternoon' | 'evening', Partial<DiaryTimeData>>>>({});
-
-  const generateCalendarDays = () => {
-    const year = currentMonth.getFullYear();
-    const month = currentMonth.getMonth();
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const startDate = new Date(firstDay);
-    startDate.setDate(startDate.getDate() - firstDay.getDay());
-    const days = [];
-    const endDate = new Date(lastDay);
-    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
-    const current = new Date(startDate);
-    while (current <= endDate) {
-      days.push(new Date(current));
-      current.setDate(current.getDate() + 1);
-    }
-    return days;
-  };
-
-  const formatDate = (date: Date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
+  const [forecastData, setForecastData] = useState<Record<string, Record<TimeSlot, Partial<DiaryTimeData>>>>({});
 
-  const isToday = (date: Date) => {
-    const today = new Date();
-    return date.toDateString() === today.toDateString();
-  };
-
-  const isPastDate = (date: Date) => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const compareDate = new Date(date);
-    compareDate.setHours(0, 0, 0, 0);
-    return compareDate < today;
-  };
 
-  const isCurrentMonth = (date: Date) => {
-    return date.getMonth() === currentMonth.getMonth();
-  };
 
   // 데이터 로딩 함수
   const loadDiaryData = async (date: string) => {
@@ -353,13 +301,9 @@ export default function Register() {
     };
   };
 
-  const timeSlots: { key: 'morning' | 'afternoon' | 'evening'; label: string; time?: string }[] = [
-    { key: 'morning', label: '아침', time: '오전' },
-    { key: 'afternoon', label: '점심', time: '오후' },
-    { key: 'evening', label: '저녁', time: '저녁' }
-  ];
 
-  const calendarDays = generateCalendarDays();
+
+
   const selectedDiary: DiaryData | null =
     selectedDate && (isPastDate(new Date(selectedDate)) || isToday(new Date(selectedDate)))
       ? (diaryData[selectedDate] || getDefaultDiary(selectedDate))
@@ -402,7 +346,7 @@ export default function Register() {
     }
   }, [isLoading, hasChildren, selectedChild]);
 
-  // 현재 달의 과거 날짜들에 대한 데이터 미리 로드
+  // 현재 달의 과거 날짜들과 오늘 날짜에 대한 데이터 미리 로드
   useEffect(() => {
     if (selectedChild?.id && !isLoading) {
       const today = new Date();
@@ -411,7 +355,7 @@ export default function Register() {
       const firstDay = new Date(year, month, 1);
       const lastDay = new Date(year, month + 1, 0);
       for (let date = new Date(firstDay); date <= lastDay; date.setDate(date.getDate() + 1)) {
-        if (isPastDate(date)) {
+        if (isPastDate(date) || isToday(date)) {
           const dateStr = formatDate(date);
           if (!forecastData[dateStr]) {
             loadForecastData(dateStr);
@@ -461,14 +405,7 @@ export default function Register() {
       />
       <div className="flex flex-col items-start justify-start w-full max-w-sm mx-auto mt-4 pb-20">
         {/* 상단바 */}
-        <div className="flex items-end justify-between w-full rounded-lg px-2 mb-6">
-          <HeaderBar 
-            childName={displayChildName}
-            inviteCode={selectedChild?.inviteCode}
-            showChildListButton={false}
-            showSettingsButton={true}
-          />
-        </div>
+        <PageHeader showLogo={true} />
 
         {/* 달력 컴포넌트 */}
         <Calendar
@@ -483,25 +420,10 @@ export default function Register() {
         />
 
         {selectedDate && (isPastDate(new Date(selectedDate)) || isToday(new Date(selectedDate))) && (
-          <div className="w-full mb-4">
-            <div className="flex bg-gray-100 rounded-xl p-1">
-              {timeSlots.map((timeSlot: typeof timeSlots[number]) => (
-                <button
-                  key={timeSlot.key}
-                  onClick={() => setSelectedTimeSlot(timeSlot.key as 'morning' | 'afternoon' | 'evening')}
-                  className={`
-                    flex-1 py-2 px-4 text-sm font-medium rounded-lg transition-all
-                    ${selectedTimeSlot === timeSlot.key 
-                      ? 'bg-white text-gray-900 shadow-sm' 
-                      : 'text-gray-500 hover:text-gray-700'
-                    }
-                  `}
-                >
-                  {timeSlot.label}
-                </button>
-              ))}
-            </div>
-          </div>
+          <TimeSlotSelector
+            selectedTimeSlot={selectedTimeSlot}
+            onTimeSlotChange={setSelectedTimeSlot}
+          />
         )}
 
         {selectedDate && (isPastDate(new Date(selectedDate)) || isToday(new Date(selectedDate))) && (
@@ -517,32 +439,15 @@ export default function Register() {
 
             {/* 로딩 상태 */}
             {loading && (
-              <div className="w-full text-center py-8">
-                <div className="text-gray-400 mb-2">
-                  <svg className="w-8 h-8 mx-auto animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                  </svg>
-                </div>
-                <p className="text-gray-500 text-sm">일기 데이터를 불러오는 중...</p>
-              </div>
+              <LoadingSpinner message="일기 데이터를 불러오는 중..." />
             )}
 
             {/* 에러 상태 */}
             {error && (
-              <div className="w-full text-center py-8">
-                <div className="text-red-400 mb-2">
-                  <svg className="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </div>
-                <p className="text-red-500 text-sm">{error}</p>
-                <button 
-                  onClick={() => selectedDate && loadDiaryData(selectedDate)}
-                  className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600"
-                >
-                  다시 시도
-                </button>
-              </div>
+              <ErrorMessage 
+                message={error}
+                onRetry={() => selectedDate && loadDiaryData(selectedDate)}
+              />
             )}
 
             {/* 데이터 표시 */}
@@ -550,7 +455,7 @@ export default function Register() {
               <>
                 {/* 선택된 시간대 일기 */}
                 <div className="text-lg font-semibold text-gray-800 mb-2">
-                  {timeSlots.find(t => t.key === selectedTimeSlot)?.label} 기록
+                  {TIME_PERIODS[selectedTimeSlot].label} 기록
                 </div>
                 
                 {(() => {
@@ -567,46 +472,18 @@ export default function Register() {
                   return (
                     <div className="space-y-3">
                       {/* 예보 섹션 */}
-                      <div className="bg-white rounded-2xl p-5 border border-gray-100">
-                        <div className="flex items-center justify-between mb-3">
-                          <span className="text-sm font-medium text-[#FF6F71]">예보</span>
-                          <span className="text-sm text-gray-400">
-                            {timeData.predictedEmotions?.map((e: any) => (
-                              <span 
-                                key={e.emotion} 
-                                className="inline-block px-2 py-1 rounded-full text-xs font-medium mr-1"
-                                style={{ backgroundColor: e.color + '20', color: e.color }}
-                              >
-                                {e.emotion}
-                              </span>
-                            )) || '예상 감정'}
-                          </span>
-                        </div>
-                        <p className="text-base text-gray-600 leading-normal">
-                          {timeData.predictedText || '예보 메모가 없습니다.'}
-                        </p>
-                      </div>
+                      <DiaryCard 
+                        title="예보"
+                        data={timeData}
+                        type="forecast"
+                      />
 
                       {/* 예보 기록 섹션 */}
-                      <div className="bg-white rounded-2xl p-5 border border-gray-100">
-                        <div className="flex items-center justify-between mb-3">
-                          <span className="text-sm font-medium text-[#FF6F71]">예보 기록</span>
-                          <span className="text-sm text-gray-400">
-                            {timeData.actualEmotions?.map((e: any) => (
-                              <span 
-                                key={e.emotion} 
-                                className="inline-block px-2 py-1 rounded-full text-xs font-medium mr-1"
-                                style={{ backgroundColor: e.color + '20', color: e.color }}
-                              >
-                                {e.emotion}
-                              </span>
-                            )) || '실제 감정'}
-                          </span>
-                        </div>
-                        <p className="text-base text-gray-600 leading-normal">
-                          {timeData.actualText || '실제 기록이 없습니다.'}
-                        </p>
-                      </div>
+                      <DiaryCard 
+                        title="예보 기록"
+                        data={timeData}
+                        type="record"
+                      />
                     </div>
                   );
                 })()}
@@ -615,16 +492,7 @@ export default function Register() {
 
             {/* 데이터가 없는 경우 */}
             {!loading && !error && (!selectedDiary || !selectedDiary[selectedTimeSlot]) && selectedDate && (
-              <div className="w-full text-center py-8">
-                <div className="text-gray-400 mb-2 px-4">
-                  <svg className="w-12 h-12 mx-auto mb-2" fill="none" viewBox="0 0 24 26">
-                    <path d="M22 2H19V1C19 0.734784 18.8946 0.48043 18.7071 0.292893C18.5196 0.105357 18.2652 0 18 0C17.7348 0 17.4804 0.105357 17.2929 0.292893C17.1054 0.48043 17 0.734784 17 1V2H7V1C7 0.734784 6.89464 0.48043 6.70711 0.292893C6.51957 0.105357 6.26522 0 6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V2H2C1.46957 2 0.960859 2.21071 0.585786 2.58579C0.210714 2.96086 0 3.46957 0 4V24C0 24.5304 0.210714 25.0391 0.585786 25.4142C0.960859 25.7893 1.46957 26 2 26H22C22.5304 26 23.0391 25.7893 23.4142 25.4142C23.7893 25.0391 24 24.5304 24 24V4C24 3.46957 23.7893 2.96086 23.4142 2.58579C23.0391 2.21071 22.5304 2 22 2ZM5 4V5C5 5.26522 5.10536 5.51957 5.29289 5.70711C5.48043 5.89464 5.73478 6 6 6C6.26522 6 6.51957 5.89464 6.70711 5.70711C6.89464 5.51957 7 5.26522 7 5V4H17V5C17 5.26522 17.1054 5.51957 17.2929 5.70711C17.4804 5.89464 17.7348 6 18 6C18.2652 6 18.5196 5.89464 18.7071 5.70711C18.8946 5.51957 19 5.26522 19 5V4H22V8H2V4H5ZM22 24H2V10H22V24ZM16 17C16 17.2652 15.8946 17.5196 15.7071 17.7071C15.5196 17.8946 15.2652 18 15 18H9C8.73478 18 8.48043 17.8946 8.29289 17.7071C8.10536 17.5196 8 17.2652 8 17C8 16.7348 8.10536 16.4804 8.29289 16.2929C8.48043 16.1054 8.73478 16 9 16H15C15.2652 16 15.5196 16.1054 15.7071 16.2929C15.8946 16.4804 16 16.7348 16 17Z" fill="currentColor"/>
-                  </svg>
-                </div>
-                <p className="text-gray-500 text-sm">
-                  해당 시간대의 예보가 없습니다.
-                </p>
-              </div>
+              <EmptyState message="해당 시간대의 예보가 없습니다." />
             )}
           </div>
         )}
diff --git a/app/insert-after/page.tsx b/app/insert-after/page.tsx
index 6223a36..fe1128a 100644
--- a/app/insert-after/page.tsx
+++ b/app/insert-after/page.tsx
@@ -1,110 +1,35 @@
 'use client'
 
 import React, { useState, useEffect, Suspense } from "react";
-import { motion } from "framer-motion";
 import { useRouter, useSearchParams } from "next/navigation";
 import Button from "../components/Button";
 import { useChild } from "../contexts/ChildContext";
-
-const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
-
-// 감정 타입 정의
-interface EmotionType {
-  id: number;
-  name: string;
-  type: string;
-  temp: number;
-  image: string;
-}
-
-const CATEGORY_COLORS = {
-  긍정: '#3DC8EF',
-  중립: '#FFD340',
-  부정: '#FF7B6F'
-};
-
-const TIME_PERIODS = {
-  morning: { label: '아침', text: '아침에는 어떤 감정을' },
-  afternoon: { label: '점심', text: '점심에는 어떤 감정을' },
-  evening: { label: '저녁', text: '저녁에는 어떤 감정을' }
-};
+import { EmotionType, TIME_PERIODS, TimeSlot } from "../types/common";
+import { getCurrentDate } from "../utils/dateUtils";
+import EmotionSelector from "../components/EmotionSelector";
 
 function InsertAfterPageContent() {
   const { selectedChild } = useChild();
-  const [emotions, setEmotions] = useState<EmotionType[]>([]);
-  const [emotionCategories, setEmotionCategories] = useState<{[key: string]: EmotionType[]}>({});
-  const [selectedEmotion, setSelectedEmotion] = useState<{
-    emotion: EmotionType;
-    categoryIdx: number;
-    emotionIdx: number;
-  } | null>(null);
-  const [currentStep, setCurrentStep] = useState<'morning' | 'afternoon' | 'evening'>('morning');
+  const [selectedEmotion, setSelectedEmotion] = useState<EmotionType | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [currentStep, setCurrentStep] = useState<TimeSlot>('morning');
   const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingEmotions, setIsLoadingEmotions] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [savedSteps, setSavedSteps] = useState<Set<string>>(new Set());
+  
   const router = useRouter();
   const searchParams = useSearchParams();
   const forecastId = searchParams.get('forecastId');
 
-  // 감정 목록 조회
-  const fetchEmotions = async () => {
-    try {
-      setIsLoadingEmotions(true);
-      const response = await fetch(`${apiBaseUrl}/api/emotionTypes/emotionType`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-      });
-
-      if (!response.ok) {
-        throw new Error('감정 목록 조회에 실패했습니다.');
-      }
-
-      const emotionData: EmotionType[] = await response.json();
-      setEmotions(emotionData);
-
-      // 감정을 타입별로 그룹화
-      const grouped = emotionData.reduce((acc, emotion) => {
-        if (!acc[emotion.type]) {
-          acc[emotion.type] = [];
-        }
-        acc[emotion.type].push(emotion);
-        return acc;
-      }, {} as {[key: string]: EmotionType[]});
-
-      setEmotionCategories(grouped);
-    } catch (error) {
-      console.error('감정 목록 조회 실패:', error);
-      setError('감정 목록을 불러오는데 실패했습니다.');
-    } finally {
-      setIsLoadingEmotions(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchEmotions();
-  }, []);
-
   useEffect(() => {
-    const step = searchParams.get('step') as 'morning' | 'afternoon' | 'evening';
+    const step = searchParams.get('step') as TimeSlot;
     if (step && ['morning', 'afternoon', 'evening'].includes(step)) {
       setCurrentStep(step);
     }
   }, [searchParams]);
 
-  const handleEmotionClick = (categoryIdx: number, emotionIdx: number) => {
-    const categories = Object.entries(emotionCategories);
-    const [categoryName, categoryEmotions] = categories[categoryIdx];
-    const emotion = categoryEmotions[emotionIdx];
-    
-    setSelectedEmotion({
-      emotion,
-      categoryIdx,
-      emotionIdx
-    });
+  const handleEmotionSelect = (emotion: EmotionType, category: string) => {
+    setSelectedEmotion(emotion);
+    setSelectedCategory(category);
   };
 
   const handleBack = () => {
@@ -117,8 +42,8 @@ function InsertAfterPageContent() {
     // 현재 선택된 감정을 localStorage에 저장
     const currentEmotionData = {
       step: currentStep,
-      emotion: selectedEmotion.emotion,
-      category: Object.keys(emotionCategories)[selectedEmotion.categoryIdx]
+      emotion: selectedEmotion,
+      category: selectedCategory
     };
 
     // 기존 데이터 가져오기
@@ -143,38 +68,17 @@ function InsertAfterPageContent() {
 
   const isEmotionSelected = selectedEmotion !== null;
 
-  // 현재 날짜 포맷팅
-  const getCurrentDate = () => {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, '0');
-    const day = String(today.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
-
-  const fadeInOutVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
-    exit: { opacity: 0, y: -10, transition: { duration: 0.3 } },
-  };
-
-  if (isLoadingEmotions) {
-    return (
-      <div className="container">
-        <div className="min-h-screen flex items-center justify-center bg-white">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
-            <p className="text-gray-600">감정 목록을 불러오는 중...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="container">
       <div className="min-h-screen flex flex-col bg-white text-black">
         <div className="flex-1 flex flex-col px-4 pt-10 pb-5">
+          {/* 로고 */}
+          <div className="flex justify-center mb-4 w-full">
+            <div className="flex items-center gap-2">
+              <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+            </div>
+          </div>
+          
           <div className="w-full max-w-sm mx-auto">
             <button className="mb-4 cursor-pointer" onClick={handleBack}>
               <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
@@ -188,97 +92,30 @@ function InsertAfterPageContent() {
               {TIME_PERIODS[currentStep].text}{`\n`}느꼈나요?
             </div>
             
-            {error && (
-              <div className="w-full mb-4 text-sm text-red-500 text-center">
-                {error}
-              </div>
-            )}
-            
-            <div className="w-full space-y-6">
-              {Object.entries(emotionCategories).map(([category, categoryEmotions], categoryIdx) => (
-                <div key={category} className="w-full">
-                  <div className="text-sm font-medium text-gray-600 mb-3">{category}</div>
-                  <div className="flex flex-wrap gap-2">
-                    {categoryEmotions.map((emotion, emotionIdx) => {
-                      const isSelected = selectedEmotion && 
-                        selectedEmotion.categoryIdx === categoryIdx && 
-                        selectedEmotion.emotionIdx === emotionIdx;
-                      const categoryColor = CATEGORY_COLORS[category as keyof typeof CATEGORY_COLORS];
-                      
-                      return (
-                        <motion.button
-                          key={`${category}-${emotion.id}`}
-                          type="button"
-                          className={`
-                            px-4 py-2 rounded-full text-sm font-medium transition-all duration-200
-                            border inline-flex items-center justify-center
-                            ${isSelected
-                              ? "text-white border-transparent"
-                              : "bg-white text-gray-700 border-gray-300 hover:border-gray-400"
-                            }
-                            focus:outline-none
-                          `}
-                          style={{
-                            fontFamily: 'inherit',
-                            fontWeight: 500,
-                            fontSize: '14px',
-                            minHeight: '36px',
-                            whiteSpace: 'nowrap',
-                            backgroundColor: isSelected ? categoryColor : 'white'
-                          }}
-                          whileTap={{ scale: 0.95 }}
-                          onClick={() => handleEmotionClick(categoryIdx, emotionIdx)}
-                          disabled={isLoading}
-                        >
-                          {emotion.name}
-                        </motion.button>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
+            <EmotionSelector
+              onEmotionSelect={handleEmotionSelect}
+              selectedEmotion={selectedEmotion}
+            />
+
+            <div className="w-full mt-8">
+              <Button
+                onClick={handleNext}
+                disabled={!isEmotionSelected || isLoading}
+                className="w-full"
+              >
+                {isLoading ? '처리 중...' : '다음'}
+              </Button>
             </div>
           </div>
         </div>
-        <motion.div
-          key="final-button"
-          initial="hidden"
-          animate="visible"
-          variants={fadeInOutVariants}
-          className="flex flex-col items-center w-full max-w-sm mx-auto mb-4 px-4"
-        >
-          <Button
-            className={`flex w-full items-center justify-center gap-1 rounded-lg bg-[#FF6F71] text-white py-3 text-lg font-semibold text-gray-900 mb-4 transition-opacity ${isEmotionSelected && !isLoading ? '' : 'opacity-50 cursor-not-allowed'}`}
-            disabled={!isEmotionSelected || isLoading}
-            onClick={handleNext}
-          >
-            {isLoading ? (
-              <div className="flex items-center gap-2">
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
-                처리 중...
-              </div>
-            ) : (
-              '다음으로'
-            )}
-          </Button>
-        </motion.div>
       </div>
     </div>
   );
 }
 
-export default function InsertPage() {
+export default function InsertAfterPage() {
   return (
-    <Suspense fallback={
-      <div className="container">
-        <div className="min-h-screen flex items-center justify-center bg-white">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
-            <p className="text-gray-600">로딩 중...</p>
-          </div>
-        </div>
-      </div>
-    }>
+    <Suspense fallback={<div>Loading...</div>}>
       <InsertAfterPageContent />
     </Suspense>
   );
diff --git a/app/insert-after/reason/page.tsx b/app/insert-after/reason/page.tsx
index 2bcdf30..4bf9885 100644
--- a/app/insert-after/reason/page.tsx
+++ b/app/insert-after/reason/page.tsx
@@ -79,7 +79,6 @@ function ReasonPageContent() {
   };
 
   const handleNext = async () => {
-    if (reason.trim().length === 0) return;
     if (!currentEmotion || !selectedChild?.id || !forecastId) {
       setError('필수 정보가 누락되었습니다.');
       return;
@@ -167,7 +166,7 @@ function ReasonPageContent() {
     }
   };
 
-  const isComplete = reason.trim().length > 0;
+  const isComplete = true; // 메모는 선택사항이므로 항상 true
 
   const fadeInOutVariants = {
     hidden: { opacity: 0, y: 10 },
@@ -200,70 +199,71 @@ function ReasonPageContent() {
 
   return (
     <div className="container">
-      <div className="min-h-screen flex flex-col items-center justify-center px-4 pt-10 pb-5 bg-white text-black">
-        <div className="w-full max-w-sm mx-auto">
-          <button className="mb-4 cursor-pointer" onClick={handleBack}>
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-            </svg>
-          </button>
-        </div>
-        
-        <div className="flex flex-col items-start justify-start flex-grow w-full max-w-sm mx-auto mt-4">
-          <div className="text-xs text-gray-400 mb-2">
-            {searchParams.get('date') || new Date().toISOString().split('T')[0]} {TIME_PERIODS[currentStep].label}
-          </div>
-          <div className="text-2xl font-bold leading-tight whitespace-pre-line mb-8">
-            {TIME_PERIODS[currentStep].text}{`\n`}느꼈나요?
+      <div className="min-h-screen flex flex-col bg-white text-black overflow-hidden">
+        <div className="flex-1 flex flex-col px-4 pt-10 pb-5">
+          <div className="w-full max-w-sm mx-auto">
+            <button className="mb-4 cursor-pointer" onClick={handleBack}>
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
           </div>
           
-          {error && (
-            <div className="w-full mb-4 text-sm text-red-500 text-center">
-              {error}
+          <div className="flex flex-col items-start justify-start flex-1 w-full max-w-sm mx-auto">
+            <div className="text-xs text-gray-400 mb-2">
+              {searchParams.get('date') || new Date().toISOString().split('T')[0]} {TIME_PERIODS[currentStep].label}
             </div>
-          )}
-          
-          <div className="w-full flex-grow">
-            <div className="relative">
-              <textarea
-                value={reason}
-                onChange={(e) => setReason(e.target.value)}
-                placeholder="어떤 일 때문에 이런 감정을 느꼈나요?"
-                className="w-full h-100 p-5 border-2 border-gray-200 rounded-xl resize-none focus:border-[#FF6F71] focus:outline-none transition-all duration-300 text-base leading-relaxed placeholder-gray-400"
-                maxLength={500}
-              />
-              <div className="absolute bottom-4 right-4 text-xs text-gray-400">
-                {reason.length}/500
-              </div>
+            <div className="text-xl sm:text-2xl font-bold leading-tight whitespace-pre-line mb-6">
+              {TIME_PERIODS[currentStep].text}{`\n`}느꼈나요?
             </div>
-            <div className="mt-3  mb-8 text-sm text-gray-500 text-center">
-              🫶 자세히 적을수록 더 좋아요
+            
+            {error && (
+              <div className="w-full mb-4 text-sm text-red-500 text-center">
+                {error}
+              </div>
+            )}
+            
+            <div className="w-full flex-1 flex flex-col">
+              <div className="relative flex-1">
+                <textarea
+                  value={reason}
+                  onChange={(e) => setReason(e.target.value)}
+                  placeholder="어떤 일 때문에 이런 감정을 느꼈나요?"
+                  className="w-full h-full min-h-[200px] p-4 border-2 border-gray-200 rounded-xl resize-none focus:border-[#FF6F71] focus:outline-none transition-all duration-300 text-base leading-relaxed placeholder-gray-400"
+                  maxLength={500}
+                />
+                <div className="absolute bottom-4 right-4 text-xs text-gray-400">
+                  {reason.length}/500
+                </div>
+              </div>
+              <div className="mt-3 text-sm text-gray-500 text-center">
+                🫶 자세히 적을수록 더 좋아요 (선택사항)
+              </div>
             </div>
           </div>
         </div>
         
-        <motion.div
-          key="final-button"
-          initial="hidden"
-          animate="visible"
-          variants={fadeInOutVariants}
-          className="flex flex-col items-center w-full max-w-sm mt-auto mb-4"
-        >
-          <Button
-            className={`flex w-full items-center justify-center gap-1 rounded-lg bg-[#FF6F71] text-white py-3 text-lg font-semibold text-gray-900 mb-4 transition-opacity ${isComplete && !isLoading ? '' : 'opacity-50 cursor-not-allowed'}`}
-            disabled={!isComplete || isLoading}
-            onClick={handleNext}
+        <div className="px-4 pb-5">
+          <motion.div
+            key="final-button"
+            initial="hidden"
+            animate="visible"
+            variants={fadeInOutVariants}
+            className="flex flex-col items-center w-full max-w-sm mx-auto"
           >
-            {isLoading ? (
-              <div className="flex items-center gap-2">
+            <Button
+              className={`flex w-full items-center justify-center gap-1 rounded-lg bg-[#FF6F71] text-white py-3 text-lg font-semibold transition-opacity ${!isLoading ? '' : 'opacity-50 cursor-not-allowed'}`}
+              disabled={isLoading}
+              onClick={handleNext}
+            >
+              {isLoading ? (
                 <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
-                저장 중...
-              </div>
-            ) : (
-              getButtonText()
-            )}
-          </Button>
-        </motion.div>
+              ) : (
+                getButtonText()
+              )}
+            </Button>
+          </motion.div>
+        </div>
       </div>
       
       {/* 완료 모달 */}
@@ -273,16 +273,20 @@ function ReasonPageContent() {
             <div className="text-6xl mb-4">🎉</div>
             <h2 className="text-xl font-bold text-gray-800 mb-2">완료!</h2>
             <p className="text-gray-600 mb-6">
-              모든 예보 기록을 작성하였습니다.
+              오늘 하루의 예보 기록을 모두 작성했어요.
             </p>
             <button
               onClick={() => {
+                // localStorage 정리
+                if (typeof window !== 'undefined') {
+                  localStorage.removeItem('forecastRecordEmotions');
+                }
                 setShowCompletionModal(false);
                 router.push('/baby');
               }}
               className="w-full bg-[#FF6F71] hover:bg-[#e55a5c] text-white font-medium py-3 px-6 rounded-lg transition-colors"
             >
-              확인
+              홈으로 가기
             </button>
           </div>
         </div>
diff --git a/app/insert-children/page.tsx b/app/insert-children/page.tsx
index 2f72259..b9d48da 100644
--- a/app/insert-children/page.tsx
+++ b/app/insert-children/page.tsx
@@ -160,6 +160,13 @@ export default function Register() {
   return (
     <div className="container">
       <div className="min-h-screen flex flex-col items-center px-4 pt-10 pb-5 bg-white text-black">
+        {/* 로고 */}
+        <div className="flex justify-center mb-4 w-full">
+          <div className="flex items-center gap-2">
+            <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+          </div>
+        </div>
+        
         <div className="w-full max-w-sm mx-auto">
           <button className="mb-4 cursor-pointer" onClick={handleBack}>
             <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
@@ -307,7 +314,6 @@ export default function Register() {
                     value={healthStatus}
                     onChange={(e) => setHealthStatus(e.target.value)}
                     onKeyDown={(e) => {
-                      // 메모 단계에서는 엔터키 동작하지 않음
                       if (e.key === 'Enter') {
                         e.preventDefault();
                       }
diff --git a/app/insert-code/page.tsx b/app/insert-code/page.tsx
index 33166de..bcddfaf 100644
--- a/app/insert-code/page.tsx
+++ b/app/insert-code/page.tsx
@@ -159,6 +159,13 @@ export default function Register() {
 
   return (
     <div className="min-h-screen flex flex-col items-center justify-center px-4 pt-10 pb-5 bg-white text-black">
+      {/* 로고 */}
+      <div className="flex justify-center mb-4 w-full">
+        <div className="flex items-center gap-2">
+          <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+        </div>
+      </div>
+      
       <div className="w-full max-w-sm mx-auto">
         <button className="mb-4 cursor-pointer" onClick={handleBack}>
           <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
diff --git a/app/insert/page.tsx b/app/insert/page.tsx
index 5232d21..1ca8ce7 100644
--- a/app/insert/page.tsx
+++ b/app/insert/page.tsx
@@ -1,113 +1,37 @@
 'use client'
 
 import React, { useState, useEffect, Suspense } from "react";
-import { motion } from "framer-motion";
 import { useRouter, useSearchParams } from "next/navigation";
 import Button from "../components/Button";
 import { useChild } from "../contexts/ChildContext";
-
-const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
-
-// 감정 타입 정의
-interface EmotionType {
-  id: number;
-  name: string;
-  type: string;
-  temp: number;
-  image: string;
-}
-
-const CATEGORY_COLORS = {
-  긍정: '#3DC8EF',
-  중립: '#FFD340',
-  부정: '#FF7B6F'
-};
-
-const TIME_PERIODS = {
-  morning: { label: '아침', text: '아침에는 어떤 감정을' },
-  afternoon: { label: '점심', text: '점심에는 어떤 감정을' },
-  evening: { label: '저녁', text: '저녁에는 어떤 감정을' }
-};
+import { EmotionType, TIME_PERIODS, TimeSlot } from "../types/common";
+import { getCurrentDate } from "../utils/dateUtils";
+import EmotionSelector from "../components/EmotionSelector";
 
 function InsertPageContent() {
   const { selectedChild } = useChild();
-  const [emotions, setEmotions] = useState<EmotionType[]>([]);
-  const [emotionCategories, setEmotionCategories] = useState<{[key: string]: EmotionType[]}>({});
-  const [selectedEmotion, setSelectedEmotion] = useState<{
-    emotion: EmotionType;
-    categoryIdx: number;
-    emotionIdx: number;
-  } | null>(null);
-  const [currentStep, setCurrentStep] = useState<'morning' | 'afternoon' | 'evening'>('morning');
+  const [selectedEmotion, setSelectedEmotion] = useState<EmotionType | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [currentStep, setCurrentStep] = useState<TimeSlot>('morning');
   const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingEmotions, setIsLoadingEmotions] = useState(true);
-  const [error, setError] = useState<string | null>(null);
 
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  // 감정 목록 조회
-  const fetchEmotions = async () => {
-    try {
-      setIsLoadingEmotions(true);
-      const response = await fetch(`${apiBaseUrl}/api/emotionTypes/emotionType`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-      });
-
-      if (!response.ok) {
-        throw new Error('감정 목록 조회에 실패했습니다.');
-      }
-
-      const emotionData: EmotionType[] = await response.json();
-      setEmotions(emotionData);
-
-      // 감정을 타입별로 그룹화
-      const grouped = emotionData.reduce((acc, emotion) => {
-        if (!acc[emotion.type]) {
-          acc[emotion.type] = [];
-        }
-        acc[emotion.type].push(emotion);
-        return acc;
-      }, {} as {[key: string]: EmotionType[]});
-
-      setEmotionCategories(grouped);
-    } catch (error) {
-      console.error('감정 목록 조회 실패:', error);
-      setError('감정 목록을 불러오는데 실패했습니다.');
-    } finally {
-      setIsLoadingEmotions(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchEmotions();
-  }, []);
-
   useEffect(() => {
-    const step = searchParams.get('step') as 'morning' | 'afternoon' | 'evening';
+    const step = searchParams.get('step') as TimeSlot;
     if (step && ['morning', 'afternoon', 'evening'].includes(step)) {
       setCurrentStep(step);
     }
   }, [searchParams]);
 
-  const handleEmotionClick = (categoryIdx: number, emotionIdx: number) => {
-    const categories = Object.entries(emotionCategories);
-    const [categoryName, categoryEmotions] = categories[categoryIdx];
-    const emotion = categoryEmotions[emotionIdx];
-    
-    setSelectedEmotion({
-      emotion,
-      categoryIdx,
-      emotionIdx
-    });
+  const handleEmotionSelect = (emotion: EmotionType, category: string) => {
+    setSelectedEmotion(emotion);
+    setSelectedCategory(category);
   };
 
   const handleBack = () => {
-    const steps = ['morning', 'afternoon', 'evening'];
+    const steps: TimeSlot[] = ['morning', 'afternoon', 'evening'];
     const currentIndex = steps.indexOf(currentStep);
     const prevStep = steps[currentIndex - 1];
     
@@ -124,8 +48,8 @@ function InsertPageContent() {
     // 현재 선택된 감정을 localStorage에 저장
     const currentEmotionData = {
       step: currentStep,
-      emotion: selectedEmotion.emotion,
-      category: Object.keys(emotionCategories)[selectedEmotion.categoryIdx]
+      emotion: selectedEmotion,
+      category: selectedCategory
     };
 
     // 기존 데이터 가져오기
@@ -150,38 +74,17 @@ function InsertPageContent() {
 
   const isEmotionSelected = selectedEmotion !== null;
 
-  // 현재 날짜 포맷팅
-  const getCurrentDate = () => {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, '0');
-    const day = String(today.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
-
-  const fadeInOutVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
-    exit: { opacity: 0, y: -10, transition: { duration: 0.3 } },
-  };
-
-  if (isLoadingEmotions) {
-    return (
-      <div className="container">
-        <div className="min-h-screen flex items-center justify-center bg-white">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
-            <p className="text-gray-600">감정 목록을 불러오는 중...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="container">
       <div className="min-h-screen flex flex-col bg-white text-black">
         <div className="flex-1 flex flex-col px-4 pt-10 pb-5">
+          {/* 로고 */}
+          <div className="flex justify-center mb-4 w-full">
+            <div className="flex items-center gap-2">
+              <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+            </div>
+          </div>
+          
           <div className="w-full max-w-sm mx-auto">
             <button className="mb-4 cursor-pointer" onClick={handleBack}>
               <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
@@ -195,82 +98,22 @@ function InsertPageContent() {
               {TIME_PERIODS[currentStep].text}{`\n`}느낄까요?
             </div>
             
-            {error && (
-              <div className="w-full mb-4 text-sm text-red-500 text-center">
-                {error}
-              </div>
-            )}
-
-
-            
-            <div className="w-full space-y-6">
-              {Object.entries(emotionCategories).map(([category, categoryEmotions], categoryIdx) => (
-                <div key={category} className="w-full">
-                  <div className="text-sm font-medium text-gray-600 mb-3">{category}</div>
-                  <div className="flex flex-wrap gap-2">
-                    {categoryEmotions.map((emotion, emotionIdx) => {
-                      const isSelected = selectedEmotion && 
-                        selectedEmotion.categoryIdx === categoryIdx && 
-                        selectedEmotion.emotionIdx === emotionIdx;
-                      const categoryColor = CATEGORY_COLORS[category as keyof typeof CATEGORY_COLORS];
-                      
-                      return (
-                        <motion.button
-                          key={`${category}-${emotion.id}`}
-                          type="button"
-                          className={`
-                            px-4 py-2 rounded-full text-sm font-medium transition-all duration-200
-                            border inline-flex items-center justify-center
-                            ${isSelected
-                              ? "text-white border-transparent"
-                              : "bg-white text-gray-700 border-gray-300 hover:border-gray-400"
-                            }
-                            focus:outline-none
-                          `}
-                          style={{
-                            fontFamily: 'inherit',
-                            fontWeight: 500,
-                            fontSize: '14px',
-                            minHeight: '36px',
-                            whiteSpace: 'nowrap',
-                            backgroundColor: isSelected ? categoryColor : 'white'
-                          }}
-                          whileTap={{ scale: 0.95 }}
-                          onClick={() => handleEmotionClick(categoryIdx, emotionIdx)}
-                          disabled={isLoading}
-                        >
-                          {emotion.name}
-                        </motion.button>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
+            <EmotionSelector
+              onEmotionSelect={handleEmotionSelect}
+              selectedEmotion={selectedEmotion}
+            />
+
+            <div className="w-full mt-8">
+              <Button
+                onClick={handleNext}
+                disabled={!isEmotionSelected || isLoading}
+                className="w-full"
+              >
+                {isLoading ? '처리 중...' : '다음'}
+              </Button>
             </div>
           </div>
         </div>
-        <motion.div
-          key="final-button"
-          initial="hidden"
-          animate="visible"
-          variants={fadeInOutVariants}
-          className="flex flex-col items-center w-full max-w-sm mx-auto mb-4 px-4"
-        >
-          <Button
-            className={`flex w-full items-center justify-center gap-1 rounded-lg bg-[#FF6F71] text-white py-3 text-lg font-semibold text-gray-900 mb-4 transition-opacity ${isEmotionSelected && !isLoading ? '' : 'opacity-50 cursor-not-allowed'}`}
-            disabled={!isEmotionSelected || isLoading}
-            onClick={handleNext}
-          >
-            {isLoading ? (
-              <div className="flex items-center gap-2">
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
-                처리 중...
-              </div>
-            ) : (
-              '다음으로'
-            )}
-          </Button>
-        </motion.div>
       </div>
     </div>
   );
@@ -278,16 +121,7 @@ function InsertPageContent() {
 
 export default function InsertPage() {
   return (
-    <Suspense fallback={
-      <div className="container">
-        <div className="min-h-screen flex items-center justify-center bg-white">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
-            <p className="text-gray-600">로딩 중...</p>
-          </div>
-        </div>
-      </div>
-    }>
+    <Suspense fallback={<div>Loading...</div>}>
       <InsertPageContent />
     </Suspense>
   );
diff --git a/app/insert/reason/page.tsx b/app/insert/reason/page.tsx
index 83f028e..348693c 100644
--- a/app/insert/reason/page.tsx
+++ b/app/insert/reason/page.tsx
@@ -189,6 +189,13 @@ function ReasonPageContent() {
   return (
     <div className="container">
       <div className="min-h-screen flex flex-col items-center justify-center px-4 pt-10 pb-5 bg-white text-black">
+        {/* 로고 */}
+        <div className="flex justify-center mb-4 w-full">
+          <div className="flex items-center gap-2">
+            <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+          </div>
+        </div>
+        
         <div className="w-full max-w-sm mx-auto">
           <button className="mb-4 cursor-pointer" onClick={handleBack}>
             <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
diff --git a/app/layout.tsx b/app/layout.tsx
index 07fae7f..a2e7225 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "HeartForecast",
   description: "감정 예보 앱",
+  viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
 };
 
 export default function RootLayout({
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 6fea9f9..49271cd 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,15 +1,17 @@
 'use client'
 
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import React, { useState, useEffect, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Container from '../components/Container';
 import { useChild } from '../contexts/ChildContext';
 import { clearAuthState } from '../auth/index';
 
-export default function Settings() {
+function SettingsContent() {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { isChildMode, selectedChild, exitChildMode, enterChildMode } = useChild();
   const [isLoading, setIsLoading] = useState(false);
+  const [fromPage, setFromPage] = useState('/home');
 
   const handleLogout = async () => {
     setIsLoading(true);
@@ -55,8 +57,16 @@ export default function Settings() {
     }
   };
 
+  // URL 쿼리 파라미터에서 원래 페이지 정보 가져오기
+  useEffect(() => {
+    const from = searchParams.get('from');
+    if (from) {
+      setFromPage(decodeURIComponent(from));
+    }
+  }, [searchParams]);
+
   const handleBackToHome = () => {
-    router.push('/home');
+    router.push(fromPage);
   };
 
   return (
@@ -78,7 +88,7 @@ export default function Settings() {
         </div>
 
         {/* 현재 모드 표시 */}
-        <div className="w-full mb-6">
+        <div className="w-full mb-16">
           <div className="bg-gray-50 rounded-2xl p-4">
             <div className="flex items-center justify-between">
               <div>
@@ -95,7 +105,7 @@ export default function Settings() {
               <div className={`px-3 py-1 rounded-full text-xs font-medium ${
                 isChildMode 
                   ? 'bg-blue-100 text-blue-700' 
-                  : 'bg-green-100 text-green-700'
+                  : 'bg-red-100 text-red-700'
               }`}>
                 {isChildMode ? '아이' : '보호자'}
               </div>
@@ -163,8 +173,32 @@ export default function Settings() {
         </div>
 
         {/* 하단 여백 */}
-        <div className="h-8"></div>
+        <div className="h-12"></div>
+        
+        {/* 로고 */}
+        <div className="flex justify-center mt-12 w-full">
+          <div className="flex items-center gap-2">
+            <img src="/logo_not_title.svg" alt="HeartForecast" className="w-10 h-10" />
+          </div>
+        </div>
       </div>
     </Container>
   );
+}
+
+export default function Settings() {
+  return (
+    <Suspense fallback={
+      <Container className="bg-white">
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF6F71] mx-auto mb-4"></div>
+            <p className="text-gray-600">페이지를 불러오는 중...</p>
+          </div>
+        </div>
+      </Container>
+    }>
+      <SettingsContent />
+    </Suspense>
+  );
 } 
\ No newline at end of file
diff --git a/app/stats/page.tsx b/app/stats/page.tsx
index 5f3522b..23e86fc 100644
--- a/app/stats/page.tsx
+++ b/app/stats/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import Container from "../components/Container"
 import NavigationBar from "../components/NavigationBar"
+import PageHeader from "../components/PageHeader"
 import Toast from "../components/Toast"
 import { useChild } from "../contexts/ChildContext"
 import { 
@@ -52,7 +53,7 @@ ChartJS.register(
 
 export default function StatsPage() {
   const router = useRouter()
-  const { isChildMode, selectedChild, hasChildren, autoSelectFirstChild } = useChild();
+  const { isChildMode, selectedChild, hasChildren, autoSelectFirstChild, isLoading: childContextLoading } = useChild();
   const [childName, setChildName] = useState('')
   const [activeTab, setActiveTab] = useState('통계')
   const [statsUnit, setStatsUnit] = useState<'week' | 'month'>('week')
@@ -158,10 +159,10 @@ export default function StatsPage() {
   }, [selectedChild, loading, autoSelectFirstChild]);
 
   useEffect(() => {
-    if (!hasChildren && !selectedChild) {
+    if (!childContextLoading && !hasChildren && !selectedChild) {
       showToast('이동할 수 없습니다. 아이를 생성하거나 연결해주세요.', 'warning');
     }
-  }, [hasChildren, selectedChild]);
+  }, [hasChildren, selectedChild, childContextLoading]);
 
   const currentAccuracyData = dailyTemperatureData.map(d => d.avgTemp)
   const latestAccuracy = currentAccuracyData.length > 0 ? currentAccuracyData[currentAccuracyData.length - 1] : 0
@@ -184,11 +185,11 @@ export default function StatsPage() {
       {
         data: [latestAccuracy, 100 - latestAccuracy],
         backgroundColor: [
-          latestAccuracy >= 90 ? '#10B981' : latestAccuracy >= 70 ? '#3B82F6' : '#F59E0B',
+          latestAccuracy >= 90 ? '#FF7B6F' : latestAccuracy >= 70 ? '#3B82F6' : '#F59E0B',
           'rgba(243, 244, 246, 0.3)'
         ],
         borderColor: [
-          latestAccuracy >= 90 ? '#10B981' : latestAccuracy >= 70 ? '#3B82F6' : '#F59E0B',
+          latestAccuracy >= 90 ? '#FF7B6F' : latestAccuracy >= 70 ? '#3B82F6' : '#F59E0B',
           'rgba(229, 231, 235, 0.5)'
         ],
         borderWidth: 0,
@@ -386,9 +387,8 @@ export default function StatsPage() {
         onClose={hideToast}
       />
       <div className="flex flex-col items-start justify-start flex-grow w-full max-w-sm mx-auto mt-4 pb-24">
-        <div className="flex items-center gap-3 rounded-lg px-3 py-2 mb-6">
-          <span className="text-gray-900 font-semibold text-2xl">{childName}의 통계</span>
-        </div>
+        {/* 상단바 */}
+        <PageHeader showLogo={true} />
 
         {/* 로딩 상태 */}
         {loading && (
diff --git a/app/types/common.ts b/app/types/common.ts
new file mode 100644
index 0000000..d2d8b4c
--- /dev/null
+++ b/app/types/common.ts
@@ -0,0 +1,46 @@
+// 공통 타입 정의
+export interface EmotionType {
+  id: number;
+  name: string;
+  type: string;
+  temp: number;
+  image: string;
+}
+
+export interface DiaryTimeData {
+  predictedEmotions: Array<{emotion: string, category: string, color: string}>;
+  predictedText: string;
+  actualEmotions: Array<{emotion: string, category: string, color: string}>;
+  actualText: string;
+}
+
+export interface DiaryData {
+  morning?: DiaryTimeData;
+  afternoon?: DiaryTimeData;
+  evening?: DiaryTimeData;
+}
+
+export type TimeSlot = 'morning' | 'afternoon' | 'evening';
+
+export interface TimePeriod {
+  label: string;
+  text: string;
+}
+
+export const TIME_PERIODS: Record<TimeSlot, TimePeriod> = {
+  morning: { label: '아침', text: '아침에는 어떤 감정을' },
+  afternoon: { label: '점심', text: '점심에는 어떤 감정을' },
+  evening: { label: '저녁', text: '저녁에는 어떤 감정을' }
+};
+
+export const CATEGORY_COLORS = {
+  긍정: '#FF7B6F',
+  중립: '#FFD340',
+  부정: '#3DC8EF'
+} as const;
+
+export interface ToastState {
+  message: string;
+  type: 'success' | 'error' | 'warning';
+  isVisible: boolean;
+} 
\ No newline at end of file
diff --git a/app/utils/dateUtils.ts b/app/utils/dateUtils.ts
new file mode 100644
index 0000000..6ed18c1
--- /dev/null
+++ b/app/utils/dateUtils.ts
@@ -0,0 +1,56 @@
+// 날짜 관련 유틸리티 함수들
+export const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+export const isToday = (date: Date): boolean => {
+  const today = new Date();
+  return date.toDateString() === today.toDateString();
+};
+
+export const isTomorrow = (date: Date): boolean => {
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  return date.toDateString() === tomorrow.toDateString();
+};
+
+export const isPastDate = (date: Date): boolean => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const compareDate = new Date(date);
+  compareDate.setHours(0, 0, 0, 0);
+  return compareDate < today;
+};
+
+export const isCurrentMonth = (date: Date, currentMonth: Date): boolean => {
+  return date.getMonth() === currentMonth.getMonth();
+};
+
+export const getCurrentDate = (): string => {
+  const today = new Date();
+  return formatDate(today);
+};
+
+export const generateCalendarDays = (currentMonth: Date): Date[] => {
+  const year = currentMonth.getFullYear();
+  const month = currentMonth.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startDate = new Date(firstDay);
+  startDate.setDate(startDate.getDate() - firstDay.getDay());
+  
+  const days = [];
+  const endDate = new Date(lastDay);
+  endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
+  
+  const current = new Date(startDate);
+  while (current <= endDate) {
+    days.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  
+  return days;
+}; 
\ No newline at end of file
diff --git a/app/utils/emotionUtils.ts b/app/utils/emotionUtils.ts
index 9179529..bf077cd 100644
--- a/app/utils/emotionUtils.ts
+++ b/app/utils/emotionUtils.ts
@@ -1,35 +1,32 @@
 // 감정 타입별 색상
 export const EMOTION_COLORS = {
-  '긍정': '#3DC8EF',
+  '긍정': '#FF7B6F',
   '중립': '#FFD340',
-  '부정': '#FF7B6F'
+  '부정': '#3DC8EF'
 } as const;
 
 export type EmotionType = keyof typeof EMOTION_COLORS;
 
 // 감정 타입 판별 함수
 export const getEmotionType = (emotionName: string): EmotionType => {
-  const positiveKeywords = ['긍정', '기쁜', '행복한', '신나는', '즐거운', '만족스러운', '감사한', '기대되는', '평온한', '즐거움', 'joy'];
-  const negativeKeywords = ['부정', '슬픈', '화난', '분노한', '두려운', '걱정되는', '스트레스받는', '짜증나는', '슬픔', 'sadness', 'anger', 'fear', 'disgust'];
+  const positiveKeywords = ['기쁜', '행복한', '신나는', '즐거운', '만족스러운', '감사한', '기대되는', '평온한'];
+  const negativeKeywords = ['슬픈', '짜증나는', '두려운', '외로운'];
   
   if (positiveKeywords.some(keyword => emotionName.includes(keyword))) return '긍정';
   if (negativeKeywords.some(keyword => emotionName.includes(keyword))) return '부정';
   return '중립';
 };
 
-// 감정 색상 반환 함수
 export const getEmotionColor = (emotionName: string): string => {
   const emotionType = getEmotionType(emotionName);
   return EMOTION_COLORS[emotionType] || '#6B7280';
 };
 
-// hex 색상을 rgba로 변환하는 함수
 export const hexToRgba = (hex: string, alpha: number = 0.8): string => {
   const rgb = hex.replace('#', '').match(/.{2}/g)?.map(x => parseInt(x, 16)).join(', ');
   return `rgba(${rgb}, ${alpha})` || 'rgba(128, 128, 128, 0.8)';
 };
 
-// 감정 타입 API 인터페이스
 export interface EmotionTypeData {
   id: number;
   name: string;
@@ -38,7 +35,6 @@ export interface EmotionTypeData {
   image: string;
 }
 
-// 감정 타입 API 호출 함수
 export const fetchEmotionType = async (emotionTypeId: number): Promise<EmotionTypeData | null> => {
   try {
     const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
diff --git a/public/logo_not_title.svg b/public/logo_not_title.svg
new file mode 100644
index 0000000..75e185c
--- /dev/null
+++ b/public/logo_not_title.svg
@@ -0,0 +1,6 @@
+<svg width="165" height="161" viewBox="0 0 165 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M114.309 59.1284C109.994 56.4324 106.564 52.85 103.983 48.3812C101.402 43.9493 100.111 39.4066 100.111 34.827C100.111 28.0315 101.586 21.9746 104.573 16.6933C107.56 11.412 111.653 7.31257 116.853 4.39493C122.053 1.47729 127.843 0 134.259 0C142.594 0 149.49 2.58525 154.984 7.71883C160.479 12.8524 163.208 19.5371 163.208 27.7361C163.208 33.9776 161.622 39.8498 158.414 45.2419C155.206 50.671 151.002 55.029 145.691 58.279C140.418 61.5659 134.665 63.191 128.396 63.191C123.27 63.191 118.55 61.8245 114.235 59.1284H114.309Z" fill="#FF7B6F"/>
+<path d="M18.5751 156.334C14.2604 153.638 10.8309 150.055 8.24944 145.587C5.66802 141.155 4.37732 136.612 4.37732 132.033C4.37732 125.237 5.85241 119.18 8.83947 113.899C11.8265 108.618 15.9199 104.518 21.1196 101.6C26.3193 98.6828 32.1091 97.2055 38.5257 97.2055C46.86 97.2055 53.7561 99.7908 59.2508 104.924C64.7455 110.058 67.4744 116.743 67.4744 124.942C67.4744 131.183 65.8887 137.055 62.6804 142.447C59.4721 147.876 55.268 152.234 49.9577 155.484C44.6842 158.771 38.9314 160.396 32.6622 160.396C27.5363 160.396 22.816 159.03 18.5013 156.334H18.5751Z" fill="#FFD340"/>
+<path d="M63.6392 3.3239C66.7369 4.72732 68.8389 7.53417 70.019 11.7814C71.1622 16.0286 71.7522 22.5656 71.7522 31.3554C71.7522 43.8754 71.0515 52.5914 69.6871 57.5403C68.7652 60.9381 66.9582 63.4495 64.2661 65.0745C61.5741 66.6995 57.9232 67.7336 53.3873 68.2137C48.8514 68.6569 42.3241 68.9154 33.8423 68.9154C28.6057 68.9154 23.2585 68.6939 17.8744 68.2137C13.4123 67.7336 10.0933 66.8842 7.91753 65.6654C5.74177 64.4467 4.2298 62.6 3.30786 60.1995C2.38593 57.7989 1.68526 54.2164 1.24273 49.4153C0.61582 44.3186 0.320801 35.7504 0.320801 23.6735C0.320801 18.7246 0.61582 15.0314 1.24273 12.5569C2.45969 6.537 7.3275 3.13924 15.8093 2.36366C20.2714 1.88354 27.0569 1.66195 36.1656 1.66195H48.4457C55.8581 1.66195 60.9471 2.21593 63.7129 3.28697L63.6392 3.3239ZM35.1699 18.8354C29.7858 18.8354 25.9874 19.057 23.8117 19.5371C21.8203 20.165 20.5296 21.4207 19.9764 23.3781C19.4233 25.2985 19.1651 28.9179 19.1651 34.1623C19.1651 40.1822 19.2389 43.6538 19.3864 44.5771C19.6814 48.6028 22.8529 50.5971 28.8639 50.5971H43.2091C47.5238 50.5971 50.2896 49.7846 51.5434 48.1596C52.7604 46.5346 53.3873 43.0999 53.3873 37.8555C53.3873 31.2077 53.7561 26.4065 52.9079 23.7105C51.3959 18.7246 35.0961 18.8354 35.0961 18.8354H35.1699Z" fill="#3DC8EF"/>
+<path d="M149.416 104.85C149.047 102.117 148.9 99.5322 148.9 97.0578C148.9 92.5521 151.186 90.3361 155.796 90.3361C157.676 90.3361 159.41 90.8532 160.922 91.8503C162.47 92.8475 163.392 94.1771 163.761 95.839C164.462 99.3845 164.831 104.186 164.831 110.206V117.297C164.831 124.498 164.646 131.663 164.314 138.754C163.946 145.143 162.434 149.871 159.705 152.936C156.976 155.78 153.767 157.59 150.043 158.439C146.318 159.252 140.639 159.695 132.969 159.695C125.888 159.695 119.435 159.104 113.682 157.922C108.74 156.851 105.2 154.561 103.135 151.016C101.07 147.47 99.9633 142.558 99.8527 136.317C99.8527 132.882 99.7789 130.297 99.6683 128.524L99.2995 120.916C98.8201 113.456 98.5989 107.251 98.5989 102.302C98.5989 99.8277 99.2995 97.9442 100.738 96.7254C102.139 95.4697 104.094 94.8788 106.564 94.8788C108.334 94.8788 109.883 95.5066 111.248 96.7254C112.612 97.9811 113.276 99.4584 113.276 101.231L113.645 108.507L114.014 113.308L149.785 112.791L149.416 104.998V104.85ZM114.714 135.172C114.714 138.016 115.194 140.195 116.116 141.746C117.074 143.297 118.697 144.331 121.057 144.922C124.487 145.624 128.654 145.993 133.632 145.993H139.828C142.667 145.993 144.88 145.18 146.466 143.518C148.051 141.857 148.9 140.379 149.047 139.087L149.563 126.862L114.493 127.379C114.604 128.561 114.677 131.146 114.677 135.172H114.714Z" fill="#666666"/>
+</svg>