diff --git a/app/package.json b/app/package.json
index 2f26151..9125df9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,7 +18,8 @@
     "react-slick": "^0.30.2",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
diff --git a/app/public/nodata.png b/app/public/nodata.png
new file mode 100644
index 0000000..e8679d2
Binary files /dev/null and b/app/public/nodata.png differ
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 9c62205..70aae17 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,29 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { initDB, useIndexedDB } from "react-indexed-db-hook";
+import { initDB } from "react-indexed-db-hook";
 import { onAuthStateChanged, User } from 'firebase/auth';
 
 import { DBConfig } from './DBConfig';
 import { auth } from './firebase';
-import { chatCompletions } from './api/ncloud-api';
-import { getCurrentDate } from './modules/utils';
 import FlashCardViewer from './pages/FlashCardViewer';
 import Login from './pages/Login';
 import Settings from './pages/Settings';
-import { getGithubData } from './services/github-service';
+import NoDataView from './pages/NoDataView';
 import UserDropdown from './widgets/UserDropdown';
+import { useTodayFlashcards } from './hooks/useTodayFlashcards';
+import { useNavigationStore } from './stores/navigationStore';
 
 initDB(DBConfig);
-const dates = [1, 7, 30]; // days ago list
-
-type Page = 'flashcard' | 'settings';
 
 const App: React.FC = () => {
-  const { add, getByID } = useIndexedDB("data");
-  const [loading, setLoading] = useState<boolean>(true);
   const [user, setUser] = useState<User | null>(null);
   const [authLoading, setAuthLoading] = useState<boolean>(true);
-  const [currentPage, setCurrentPage] = useState<Page>('flashcard');
   const [isScrollAtTop, setIsScrollAtTop] = useState<boolean>(true);
+  const { currentPage, navigateToSettings, navigateToFlashcard } = useNavigationStore();
+  
+  // 오늘의 플래시카드 데이터 로드
+  const { loading, hasData } = useTodayFlashcards(user);
 
   // 인증 상태 감지
   useEffect(() => {
@@ -50,43 +48,6 @@ const App: React.FC = () => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // 사용자가 로그인한 경우에만 데이터 로드
-  useEffect(() => {
-    if (!user) {
-      setLoading(false);
-      return;
-    }
-
-    (async () => {
-      const todayData = await getByID(getCurrentDate());
-      if (todayData) {
-        setLoading(false);
-        return;
-      }
-
-      let list: Array<{question: string, answer: string}> = [];
-      for (const ago of dates) {
-        try {
-          const githubData = await getGithubData(ago);
-          if (githubData) {
-            const result = await chatCompletions(githubData);
-            const questions = JSON.parse(result.body.result.message.content);
-            for (let ncloudData of questions) {
-              list.push({question: ncloudData, answer: githubData});
-            }
-          }
-        } catch (error) {
-          console.error(`Error fetching data for ${ago}:`, error);
-        }
-      }
-      
-      if (list.length > 0) {
-        add({date: getCurrentDate(), data: list });
-      }
-      setLoading(false);
-    })();
-  }, [add, getByID, user]);
-
   // 인증 로딩 중
   if (authLoading) {
     return (
@@ -115,13 +76,45 @@ const App: React.FC = () => {
         justifyContent: 'center', 
         alignItems: 'center', 
         height: '100vh',
-        fontSize: '1.2rem'
+        fontSize: '1.2rem',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        color: 'white'
       }}>
-        데이터를 불러오는 중...
+        <div style={{
+          textAlign: 'center',
+          background: 'rgba(255, 255, 255, 0.1)',
+          padding: '40px',
+          borderRadius: '20px',
+          backdropFilter: 'blur(10px)',
+          border: '1px solid rgba(255, 255, 255, 0.2)'
+        }}>
+          <div style={{
+            width: '50px',
+            height: '50px',
+            border: '3px solid rgba(255, 255, 255, 0.3)',
+            borderTop: '3px solid white',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+            margin: '0 auto 20px'
+          }}></div>
+          <h2 style={{ marginBottom: '10px' }}>📚 플래시카드 준비 중</h2>
+          <p>GitHub에서 최근 커밋을 분석하고 있습니다...</p>
+        </div>
+        <style>{`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}</style>
       </div>
     );
   }
 
+  // 데이터가 없는 경우 - 하지만 Settings 페이지는 허용
+  if (!hasData && currentPage === 'flashcard') {
+    return <NoDataView />;
+  }
+
   // 메인 앱 렌더링
   return (
     <main>
@@ -145,7 +138,7 @@ const App: React.FC = () => {
         <div>
           {currentPage === 'settings' && (
             <button
-              onClick={() => setCurrentPage('flashcard')}
+              onClick={navigateToFlashcard}
               style={{
                 padding: '8px 16px',
                 background: 'rgba(255, 255, 255, 0.95)',
@@ -179,7 +172,7 @@ const App: React.FC = () => {
         
         <UserDropdown 
           user={user}
-          onNavigateToSettings={() => setCurrentPage('settings')}
+          onNavigateToSettings={navigateToSettings}
         />
       </nav>
 
diff --git a/app/src/api/github-api.ts b/app/src/api/github-api.ts
index a1538bc..b340e54 100644
--- a/app/src/api/github-api.ts
+++ b/app/src/api/github-api.ts
@@ -11,10 +11,21 @@ interface Commit {
   };
 }
 
-interface CommitDetail {
-  files: Array<{
-    filename: string;
-  }>;
+export interface FileChange {
+  filename: string;
+  status: 'added' | 'modified' | 'removed' | 'renamed';
+  additions: number;
+  deletions: number;
+  changes: number;
+  patch?: string;
+}
+
+export interface CommitDetail {
+  sha: string;
+  commit: {
+    message: string;
+  };
+  files: FileChange[];
 }
 
 interface MarkdownResponse {
@@ -53,3 +64,15 @@ export async function getRepositories(): Promise<Repository[]> {
   const response = await apiClient.get('/getRepositories');
   return response.data;
 }
+
+export interface Branch {
+  name: string;
+  protected: boolean;
+}
+
+export async function getBranches(owner: string, repo: string): Promise<Branch[]> {
+  const response = await apiClient.get('/getBranches', {
+    params: { owner, repo }
+  });
+  return response.data;
+}
\ No newline at end of file
diff --git a/app/src/api/ncloud-api.ts b/app/src/api/ncloud-api.ts
index c876080..6576477 100644
--- a/app/src/api/ncloud-api.ts
+++ b/app/src/api/ncloud-api.ts
@@ -1,22 +1,54 @@
 import { apiClient } from '../modules/axios';
 
 interface ChatCompletionResponse {
-  body: {
-    result: {
-      message: {
-        content: string;
+  status: {
+    code: string;
+    message: string;
+  };
+  result: {
+    message: {
+      role: string;
+      content: string;
+      thinkingContent?: string;
+    };
+    finishReason: string;
+    created: number;
+    seed: number;
+    usage: {
+      promptTokens: number;
+      completionTokens: number;
+      totalTokens: number;
+      completionTokensDetails?: {
+        thinkingTokens: number;
       };
     };
+    aiFilter?: Array<{
+      groupName: string;
+      name: string;
+      score: string;
+      result: string;
+    }>;
   };
 }
 
 /**
  * CLOVA Studio - Firebase Functions를 통해 호출
  */
-export async function chatCompletions(text: string): Promise<ChatCompletionResponse> {
+export async function chatCompletions(
+  text: string, 
+  contentType: 'markdown' | 'code-diff' = 'markdown'
+): Promise<ChatCompletionResponse> {
     try {
+        let prompt: string;
+        
+        if (contentType === 'markdown') {
+            prompt = "마크다운 파일을 읽고 질문을 만들어주세요. 질문은 다음과 같은 형식으로 출력해주세요. [\"첫 번째 질문\", \"두 번째 질문\", ...]";
+        } else {
+            prompt = "코드 변경 내용(diff)을 보고 질문을 만들어주세요. 변경된 코드의 목적, 동작, 영향 등에 대해 물어보세요. 질문은 다음과 같은 형식으로 출력해주세요. [\"첫 번째 질문\", \"두 번째 질문\", ...]";
+        }
+        
         const response = await apiClient.post('/chatCompletions', {
-            prompt: "마크다운 파일을 읽고 질문을 만들어주세요. 질문은 다음과 같은 형식으로 출력해주세요. [\"첫 번째 질문\", \"두 번째 질문\", ...]",
+            prompt: prompt,
             text: text,
         });
 
diff --git a/app/src/hooks/useTodayFlashcards.ts b/app/src/hooks/useTodayFlashcards.ts
new file mode 100644
index 0000000..2098a20
--- /dev/null
+++ b/app/src/hooks/useTodayFlashcards.ts
@@ -0,0 +1,210 @@
+import { useEffect, useState } from 'react';
+import { useIndexedDB } from 'react-indexed-db-hook';
+import { User } from 'firebase/auth';
+import { chatCompletions } from '../api/ncloud-api';
+import { getCommits, getFilename, getMarkdown, type CommitDetail } from '../api/github-api';
+import { getCurrentDate } from '../modules/utils';
+
+const DATES_AGO = [1, 7, 30]; // days ago list
+
+export type ContentType = 'markdown' | 'code-diff';
+
+export interface FlashCardData {
+  question: string;
+  answer: string;
+  contentType: ContentType;
+  metadata?: {
+    filename?: string;
+    commitMessage?: string;
+  };
+}
+
+/**
+ * 오늘의 플래시카드 데이터를 로드하는 커스텀 훅
+ * 
+ * @param user - 현재 로그인한 사용자 (로그인하지 않은 경우 null)
+ * @returns loading - 데이터 로딩 중 여부
+ */
+export function useTodayFlashcards(user: User | null) {
+  const { add, getByID } = useIndexedDB("data");
+  const [loading, setLoading] = useState<boolean>(true);
+  const [hasData, setHasData] = useState<boolean>(false);
+
+  useEffect(() => {
+    // 사용자가 로그인하지 않은 경우 로딩 종료
+    if (!user) {
+      setLoading(false);
+      setHasData(false);
+      return;
+    }
+
+    const loadFlashcards = async () => {
+      try {
+        // 오늘 날짜의 데이터가 이미 있는지 확인
+        const todayData = await getByID(getCurrentDate());
+        if (todayData) {
+          setLoading(false);
+          setHasData(todayData.data && todayData.data.length > 0);
+          return;
+        }
+
+        // 오늘 데이터가 없으면 새로 생성
+        const list = await generateFlashcards();
+        
+        // 생성된 플래시카드가 있으면 저장
+        if (list.length > 0) {
+          await add({ date: getCurrentDate(), data: list });
+          setHasData(true);
+        } else {
+          setHasData(false);
+        }
+        
+        setLoading(false);
+      } catch (error) {
+        console.error('Error loading flashcards:', error);
+        setLoading(false);
+        setHasData(false);
+      }
+    };
+
+    loadFlashcards();
+  }, [add, getByID, user]);
+
+  return { loading, hasData };
+}
+
+/**
+ * 여러 날짜의 GitHub 데이터를 기반으로 플래시카드 생성
+ */
+async function generateFlashcards(): Promise<FlashCardData[]> {
+  const list: FlashCardData[] = [];
+
+  for (const daysAgo of DATES_AGO) {
+    try {
+      const githubData = await getGithubData(daysAgo);
+      
+      if (!githubData) {
+        continue;
+      }
+
+      const { content, contentType, metadata } = githubData;
+
+      // AI를 통해 질문 생성 (contentType에 따라 프롬프트 변경)
+      const result = await chatCompletions(content, contentType);
+      const questions = JSON.parse(result.result.message.content);
+      
+      // 질문-답변 쌍 생성
+      for (const question of questions) {
+        list.push({
+          question: question,
+          answer: content,
+          contentType: contentType,
+          metadata: metadata
+        });
+      }
+    } catch (error) {
+      console.error(`Error fetching data for ${daysAgo} days ago:`, error);
+      // 에러가 발생해도 다음 날짜 처리를 계속함
+    }
+  }
+
+  return list;
+}
+
+interface GithubData {
+  content: string;
+  contentType: ContentType;
+  metadata?: {
+    filename?: string;
+    commitMessage?: string;
+  };
+}
+
+/**
+ * GitHub에서 특정 날짜의 데이터 가져오기
+ * 마크다운 파일이 있으면 마크다운, 없으면 코드 변경 내용(diff) 반환
+ * 
+ * @param daysAgo - 며칠 전 데이터를 가져올지
+ * @returns GithubData 또는 null
+ */
+async function getGithubData(daysAgo: number): Promise<GithubData | null> {
+  const interval = 24 * daysAgo * 60 * 60 * 1000;
+  const currentDate = new Date();
+  const pastDate = new Date(currentDate.getTime() - interval);
+
+  const since = new Date(pastDate);
+  since.setHours(0, 0, 0, 0);
+
+  const until = new Date(pastDate);
+  until.setHours(23, 59, 59, 999);
+
+  const commits = await getCommits(since, until);
+
+  if (commits.length === 0) {
+    return null;
+  }
+
+  for (const commit of commits) {
+    const commit_detail = await getFilename(commit.sha);
+    
+    // 1. 마크다운 파일이 있는지 확인
+    const markdownFile = commit_detail.files.find(file => file.filename.endsWith('.md'));
+    
+    if (markdownFile) {
+      // 마크다운 파일이 있으면 전체 내용 가져오기
+      const data = await getMarkdown(markdownFile.filename);
+      return {
+        content: data,
+        contentType: 'markdown',
+        metadata: {
+          filename: markdownFile.filename,
+          commitMessage: commit_detail.commit.message
+        }
+      };
+    }
+    
+    // 2. 마크다운 파일이 없으면 코드 변경 내용(diff) 사용
+    const codeDiff = formatCodeDiff(commit_detail);
+    if (codeDiff) {
+      return {
+        content: codeDiff,
+        contentType: 'code-diff',
+        metadata: {
+          commitMessage: commit_detail.commit.message
+        }
+      };
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * 커밋 상세 정보를 GitHub 스타일 diff 형식으로 변환
+ */
+function formatCodeDiff(commitDetail: CommitDetail): string | null {
+  if (commitDetail.files.length === 0) {
+    return null;
+  }
+
+  const diffParts: string[] = [];
+  
+  // 커밋 메시지
+  diffParts.push(`## ${commitDetail.commit.message}\n`);
+  diffParts.push(`Commit: ${commitDetail.sha.substring(0, 7)}\n`);
+  
+  // 각 파일의 변경 내용
+  for (const file of commitDetail.files) {
+    diffParts.push(`\n### ${file.filename}`);
+    diffParts.push(`**Status**: ${file.status} | **Changes**: +${file.additions} -${file.deletions}\n`);
+    
+    if (file.patch) {
+      diffParts.push('```diff');
+      diffParts.push(file.patch);
+      diffParts.push('```\n');
+    }
+  }
+  
+  return diffParts.join('\n');
+}
+
diff --git a/app/src/modules/axios.ts b/app/src/modules/axios.ts
index e259987..72c7804 100644
--- a/app/src/modules/axios.ts
+++ b/app/src/modules/axios.ts
@@ -9,7 +9,7 @@ const FUNCTIONS_URL = import.meta.env.PROD
 // 기본 axios 인스턴스 생성
 export const apiClient = axios.create({
   baseURL: FUNCTIONS_URL,
-  timeout: 10000,
+  timeout: 60000, // 60초 (HCX API 응답 대기)
   headers: {
     'Content-Type': 'application/json',
   },
diff --git a/app/src/pages/FlashCardViewer.tsx b/app/src/pages/FlashCardViewer.tsx
index 196e47d..7d888b6 100644
--- a/app/src/pages/FlashCardViewer.tsx
+++ b/app/src/pages/FlashCardViewer.tsx
@@ -5,11 +5,18 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
 import MarkdownBlock from '../templates/MarkdownBlock';
+import CodeDiffBlock from '../templates/CodeDiffBlock';
 import { useIndexedDB } from "react-indexed-db-hook";
+import type { ContentType } from '../hooks/useTodayFlashcards';
 
 interface Card {
   question: string;
   answer: string;
+  contentType?: ContentType;
+  metadata?: {
+    filename?: string;
+    commitMessage?: string;
+  };
 }
 
 interface DBData {
@@ -39,27 +46,57 @@ const FlashCardViewer: React.FC = () => {
 
     const { getAll } = useIndexedDB("data");
     
-    useEffect(() => {
+    // IndexedDB에서 데이터 로드하는 함수
+    const loadCards = () => {
         getAll().then((dataFromDB: DBData[]) => {
             if (dataFromDB && dataFromDB.length > 0) {
                 setCards(dataFromDB[0].data);
+            } else {
+                setCards([]);
             }
         });
+    };
+    
+    // 컴포넌트 마운트 시 데이터 로드
+    useEffect(() => {
+        loadCards();
     }, [getAll]);
     
+    // 페이지가 다시 포커스되거나 보일 때 데이터 다시 로드
+    useEffect(() => {
+        const handleFocus = () => {
+            console.log('🔄 페이지 포커스 - 플래시카드 데이터 새로고침');
+            loadCards();
+        };
+        
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                console.log('👁️ 페이지 visible - 플래시카드 데이터 새로고침');
+                loadCards();
+            }
+        };
+        
+        window.addEventListener('focus', handleFocus);
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        
+        return () => {
+            window.removeEventListener('focus', handleFocus);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [getAll]);
+    
+    // 주기적으로 IndexedDB 체크 (5초마다)
+    useEffect(() => {
+        const interval = setInterval(() => {
+            loadCards();
+        }, 5000);
+        
+        return () => clearInterval(interval);
+    }, [getAll]);
+    
+    // 이제 App.tsx에서 로딩과 데이터 없음을 처리하므로 여기서는 빈 배열일 때만 처리
     if (cards.length === 0) {
-        return (
-            <div style={{
-                display: "flex", 
-                height: "100vh", 
-                alignItems: "center", 
-                justifyContent: "center", 
-                background: "lightgray", 
-                fontSize: "larger"
-            }}>
-                질문을 생성하고 있습니다.<br/>잠시만 기다려주세요.
-            </div>
-        );
+        return null; // App.tsx에서 처리됨
     }
 
     return (
@@ -79,11 +116,23 @@ const FlashCardViewer: React.FC = () => {
                         </div>
                     )}
                 >
-                    {cards.map((card, i) =>
-                        <div key={i} className={`flashcard ${flipped ? 'flipped' : ''}`}>
-                            {flipped ? <MarkdownBlock markdown={card.answer} /> : <p>{card.question}</p> } 
-                        </div>
-                    )}                       
+                    {cards.map((card, i) => {
+                        const contentType = card.contentType || 'markdown';
+                        
+                        return (
+                            <div key={i} className={`flashcard ${flipped ? 'flipped' : ''}`}>
+                                {flipped ? (
+                                    contentType === 'code-diff' ? (
+                                        <CodeDiffBlock diffContent={card.answer} />
+                                    ) : (
+                                        <MarkdownBlock markdown={card.answer} />
+                                    )
+                                ) : (
+                                    <p>{card.question}</p>
+                                )}
+                            </div>
+                        );
+                    })}                       
                 </Slider>
             </div>
             <div className='button-wrapper'>
diff --git a/app/src/pages/NoDataView.tsx b/app/src/pages/NoDataView.tsx
new file mode 100644
index 0000000..3419a1d
--- /dev/null
+++ b/app/src/pages/NoDataView.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { useNavigationStore } from '../stores/navigationStore';
+
+const NoDataView: React.FC = () => {
+  const { navigateToSettings } = useNavigationStore();
+  return (
+    <div style={{
+      display: "flex", 
+      flexDirection: "column",
+      height: "100vh", 
+      alignItems: "center", 
+      justifyContent: "center", 
+      background: "linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)",
+      color: "white",
+      textAlign: "center",
+      padding: "16px"
+    }}>
+      <div style={{
+        background: "rgba(255, 255, 255, 0.1)",
+        borderRadius: "16px",
+        padding: "24px",
+        backdropFilter: "blur(10px)",
+        border: "1px solid rgba(255, 255, 255, 0.2)",
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1)",
+        maxWidth: "400px",
+        width: "100%"
+      }}>
+        <img 
+          src="/nodata.png" 
+          alt="데이터 없음" 
+          style={{
+            width: "140px",
+            height: "auto",
+            marginBottom: "16px",
+            filter: "drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2))"
+          }}
+        />
+        <h2 style={{
+          fontSize: "20px",
+          marginBottom: "8px",
+          fontWeight: "600",
+          lineHeight: "1.3"
+        }}>
+          📭 플래시카드가 없습니다
+        </h2>
+        <p style={{
+          fontSize: "14px",
+          marginBottom: "6px",
+          opacity: 0.9,
+          lineHeight: "1.4"
+        }}>
+          최근 커밋에서 학습할 내용을 찾지 못했습니다
+        </p>
+        <p style={{
+          fontSize: "12px",
+          marginBottom: "24px",
+          opacity: 0.7,
+          lineHeight: "1.4"
+        }}>
+          ⚙️ 설정 에서 다른 리포지토리나 브랜치를 시도해보세요
+        </p>
+        
+         <button
+           onClick={() => {
+             navigateToSettings();
+           }}
+           style={{
+            background: "rgba(255, 255, 255, 0.2)",
+            color: "white",
+            border: "2px solid rgba(255, 255, 255, 0.3)",
+            borderRadius: "10px",
+            padding: "10px 20px",
+            fontSize: "14px",
+            fontWeight: "600",
+            cursor: "pointer",
+            transition: "all 0.3s ease",
+            backdropFilter: "blur(10px)",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            margin: "0 auto"
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)";
+            e.currentTarget.style.transform = "translateY(-2px)";
+            e.currentTarget.style.boxShadow = "0 8px 25px rgba(0, 0, 0, 0.2)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+            e.currentTarget.style.transform = "translateY(0)";
+            e.currentTarget.style.boxShadow = "none";
+          }}
+        >
+          ⚙️ 설정으로 이동
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default NoDataView;
diff --git a/app/src/pages/Settings.tsx b/app/src/pages/Settings.tsx
index 5950098..78da5a0 100644
--- a/app/src/pages/Settings.tsx
+++ b/app/src/pages/Settings.tsx
@@ -2,37 +2,42 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { doc, getDoc, setDoc, deleteDoc } from 'firebase/firestore';
 import { useIndexedDB } from 'react-indexed-db-hook';
 import { auth, db } from '../firebase';
-import { getRepositories } from '../api/github-api';
+import { getRepositories, getBranches, Branch } from '../api/github-api';
 import { Repository } from '@til-alarm/shared';
 import './Settings.css';
 
 interface RepositorySettings {
   repositoryFullName: string;
   repositoryUrl: string;
+  branch: string;
 }
 
 // 캐시 설정 (컴포넌트 외부로 이동)
 const CACHE_KEY = 'github_repositories';
-const CACHE_DURATION = 30 * 60 * 1000; // 30분
 
 const Settings: React.FC = () => {
   const [settings, setSettings] = useState<RepositorySettings>({
     repositoryFullName: '',
     repositoryUrl: '',
+    branch: 'main',
   });
   const [repositories, setRepositories] = useState<Repository[]>([]);
+  const [branches, setBranches] = useState<Branch[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [loadingRepos, setLoadingRepos] = useState<boolean>(false);
+  const [loadingBranches, setLoadingBranches] = useState<boolean>(false);
   const [saving, setSaving] = useState<boolean>(false);
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
   const [deleteConfirmText, setDeleteConfirmText] = useState<string>('');
   const [deleting, setDeleting] = useState<boolean>(false);
+  const [hasChanges, setHasChanges] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   // IndexedDB 훅
   const repositoriesDB = useIndexedDB('repositories');
+  const flashcardsDB = useIndexedDB('data'); // 플래시카드 데이터 스토어
 
   // 드롭다운 외부 클릭 감지
   useEffect(() => {
@@ -56,23 +61,17 @@ const Settings: React.FC = () => {
     try {
       setLoadingRepos(true);
 
-      // 캐시 확인 (강제 새로고침이 아닌 경우)
+      // 캐시 확인 (수동 새로고침이 아닌 경우)
       if (!forceRefresh) {
         try {
           const cached = await repositoriesDB.getByID(CACHE_KEY);
           if (cached) {
             const now = Date.now();
             const cacheAge = now - cached.timestamp;
-            
-            // 캐시가 유효한 경우 (30분 이내)
-            if (cacheAge < CACHE_DURATION) {
-              console.log(`✅ 캐시된 리포지토리 목록 사용 (IndexedDB) - ${Math.floor(cacheAge / 1000 / 60)}분 전 캐시`);
-              setRepositories(cached.data);
-              setLoadingRepos(false);
-              return;
-            } else {
-              console.log(`⏰ 캐시 만료됨 (${Math.floor(cacheAge / 1000 / 60)}분 경과) - API 호출`);
-            }
+            console.log(`✅ 캐시된 리포지토리 목록 사용 (IndexedDB) - ${Math.floor(cacheAge / 1000 / 60)}분 전 캐시`);
+            setRepositories(cached.data);
+            setLoadingRepos(false);
+            return;
           } else {
             console.log('📭 캐시 없음 - API 호출');
           }
@@ -80,7 +79,7 @@ const Settings: React.FC = () => {
           console.error('❌ 캐시 읽기 실패:', cacheError);
         }
       } else {
-        console.log('🔄 강제 새로고침 - API 호출');
+        console.log('🔄 수동 새로고침 - API 호출');
       }
 
       // API 호출
@@ -115,6 +114,23 @@ const Settings: React.FC = () => {
     }
   }, []);
 
+  // 브랜치 목록 불러오기
+  const fetchBranches = useCallback(async (owner: string, repo: string) => {
+    try {
+      setLoadingBranches(true);
+      console.log(`🌿 브랜치 목록 불러오기: ${owner}/${repo}`);
+      const branchList = await getBranches(owner, repo);
+      setBranches(branchList);
+      console.log(`✅ ${branchList.length}개의 브랜치 발견`);
+    } catch (error) {
+      console.error('❌ 브랜치 불러오기 실패:', error);
+      setMessage({ type: 'error', text: '브랜치 목록을 불러오는데 실패했습니다.' });
+      setBranches([]);
+    } finally {
+      setLoadingBranches(false);
+    }
+  }, []);
+
   // 설정 및 리포지토리 목록 불러오기
   useEffect(() => {
     let mounted = true;
@@ -136,7 +152,14 @@ const Settings: React.FC = () => {
             setSettings({
               repositoryFullName: data.repositoryFullName || '',
               repositoryUrl: data.repositoryUrl || '',
+              branch: data.branch || 'main',
             });
+
+            // 리포지토리가 선택되어 있으면 브랜치 목록 불러오기
+            if (data.repositoryFullName) {
+              const [owner, repo] = data.repositoryFullName.split('/');
+              await fetchBranches(owner, repo);
+            }
           }
         }
 
@@ -163,8 +186,27 @@ const Settings: React.FC = () => {
     };
   }, []); // 마운트 시 한 번만 실행
 
-  // 리포지토리 선택 및 즉시 저장
+  // 리포지토리 선택 (상태만 변경)
   const handleRepositorySelect = async (repo: Repository) => {
+    setIsDropdownOpen(false);
+    setMessage(null);
+
+    // 설정 업데이트
+    setSettings({
+      repositoryFullName: repo.full_name,
+      repositoryUrl: repo.html_url,
+      branch: 'main', // 리포지토리 변경 시 기본 브랜치로 초기화
+    });
+
+    // 브랜치 목록 불러오기
+    const [owner, repoName] = repo.full_name.split('/');
+    await fetchBranches(owner, repoName);
+    
+    setHasChanges(true);
+  };
+
+  // 설정 저장
+  const handleSaveSettings = async () => {
     const user = auth.currentUser;
     
     if (!user) {
@@ -172,51 +214,77 @@ const Settings: React.FC = () => {
       return;
     }
 
-    setIsDropdownOpen(false);
+    if (!settings.repositoryFullName) {
+      setMessage({ type: 'error', text: '리포지토리를 선택해주세요.' });
+      return;
+    }
+
+    if (!settings.branch) {
+      setMessage({ type: 'error', text: '브랜치를 선택해주세요.' });
+      return;
+    }
+
     setSaving(true);
     setMessage(null);
 
     try {
-      // 설정 업데이트
-      setSettings({
-        repositoryFullName: repo.full_name,
-        repositoryUrl: repo.html_url,
-      });
-
-      // 기존 데이터 유지하면서 업데이트
+      // 기존 리포지토리 확인
       const userDoc = await getDoc(doc(db, 'users', user.uid));
       const existingData = userDoc.exists() ? userDoc.data() : {};
+      const previousRepo = existingData.repositoryFullName;
+      const previousBranch = existingData.branch;
+      
+      // 리포지토리 또는 브랜치가 변경되었는지 확인
+      const isRepoOrBranchChanged = 
+        (previousRepo && previousRepo !== settings.repositoryFullName) ||
+        (previousBranch && previousBranch !== settings.branch);
 
       // full_name에서 username과 repository 분리
-      const [githubUsername, repositoryName] = repo.full_name.split('/');
+      const [githubUsername, repositoryName] = settings.repositoryFullName.split('/');
 
       await setDoc(doc(db, 'users', user.uid), {
         ...existingData,
-        repositoryFullName: repo.full_name,
-        repositoryUrl: repo.html_url,
+        repositoryFullName: settings.repositoryFullName,
+        repositoryUrl: settings.repositoryUrl,
         githubUsername,
         repositoryName,
+        branch: settings.branch,
         updatedAt: new Date().toISOString(),
       });
 
-      setMessage({ type: 'success', text: '✅ 리포지토리가 성공적으로 변경되었습니다!' });
-      
-      // 3초 후 메시지 자동 제거
-      setTimeout(() => {
-        setMessage(null);
-      }, 3000);
+      // 리포지토리 또는 브랜치가 변경된 경우 플래시카드 데이터 삭제 및 페이지 새로고침
+      if (isRepoOrBranchChanged) {
+        try {
+          await flashcardsDB.clear();
+          console.log('🗑️ 설정 변경으로 인해 플래시카드 데이터를 삭제했습니다.');
+          setMessage({ type: 'success', text: '✅ 설정이 저장되었습니다. 페이지를 새로고침합니다...' });
+          
+          // 1초 후 페이지 새로고침
+          setTimeout(() => {
+            window.location.reload();
+          }, 1000);
+        } catch (clearError) {
+          console.error('❌ 플래시카드 데이터 삭제 실패:', clearError);
+          setMessage({ type: 'success', text: '✅ 설정이 저장되었습니다.' });
+          setHasChanges(false);
+          
+          // 3초 후 메시지 자동 제거
+          setTimeout(() => {
+            setMessage(null);
+          }, 3000);
+        }
+      } else {
+        setMessage({ type: 'success', text: '✅ 설정이 성공적으로 저장되었습니다!' });
+        setHasChanges(false);
+        
+        // 3초 후 메시지 자동 제거
+        setTimeout(() => {
+          setMessage(null);
+        }, 3000);
+      }
     } catch (error) {
       console.error('설정 저장 실패:', error);
       setMessage({ type: 'error', text: '설정 저장에 실패했습니다.' });
-      // 실패 시 이전 상태로 복원
-      const userDoc = await getDoc(doc(db, 'users', user.uid));
-      if (userDoc.exists()) {
-        const data = userDoc.data();
-        setSettings({
-          repositoryFullName: data.repositoryFullName || '',
-          repositoryUrl: data.repositoryUrl || '',
-        });
-      }
     } finally {
       setSaving(false);
     }
@@ -362,19 +430,67 @@ const Settings: React.FC = () => {
           </div>
 
           {settings.repositoryFullName && (
-            <div className="form-preview">
-              <p className="preview-label">📂 선택된 리포지토리:</p>
-              <code className="preview-path">
-                <a 
-                  href={settings.repositoryUrl} 
-                  target="_blank" 
-                  rel="noopener noreferrer"
-                  className="repo-link"
-                >
-                  {settings.repositoryUrl}
-                </a>
-              </code>
-            </div>
+            <>
+              <div className="form-preview">
+                <p className="preview-label">📂 선택된 리포지토리:</p>
+                <code className="preview-path">
+                  <a 
+                    href={settings.repositoryUrl} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="repo-link"
+                  >
+                    {settings.repositoryUrl}
+                  </a>
+                </code>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="branch">
+                  브랜치 이름
+                  <span className="required">*</span>
+                </label>
+                <p className="form-hint">
+                  커밋을 가져올 브랜치를 선택하세요
+                </p>
+                
+                {loadingBranches ? (
+                  <div className="loading-repos">
+                    <div className="loading-spinner-small"></div>
+                    <span>브랜치 목록을 불러오는 중...</span>
+                  </div>
+                ) : branches.length > 0 ? (
+                  <select
+                    id="branch"
+                    value={settings.branch}
+                    onChange={(e) => {
+                      setSettings({ ...settings, branch: e.target.value });
+                      setHasChanges(true);
+                    }}
+                    disabled={saving}
+                    style={{
+                      width: '100%',
+                      padding: '10px 12px',
+                      fontSize: '14px',
+                      border: '1px solid #ddd',
+                      borderRadius: '6px',
+                      backgroundColor: 'white',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {branches.map((branch) => (
+                      <option key={branch.name} value={branch.name}>
+                        {branch.name} {branch.protected ? '🔒' : ''}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <p className="form-hint" style={{ color: '#999', fontStyle: 'italic' }}>
+                    리포지토리를 선택하면 브랜치 목록이 표시됩니다.
+                  </p>
+                )}
+              </div>
+            </>
           )}
 
           {message && (
@@ -382,6 +498,30 @@ const Settings: React.FC = () => {
               {message.text}
             </div>
           )}
+
+          {settings.repositoryFullName && (
+            <button
+              type="button"
+              className="save-settings-button"
+              onClick={handleSaveSettings}
+              disabled={saving || !hasChanges}
+              style={{
+                width: '100%',
+                padding: '12px 24px',
+                fontSize: '16px',
+                fontWeight: 'bold',
+                color: 'white',
+                backgroundColor: hasChanges ? '#4CAF50' : '#ccc',
+                border: 'none',
+                borderRadius: '8px',
+                cursor: hasChanges && !saving ? 'pointer' : 'not-allowed',
+                marginTop: '20px',
+                transition: 'background-color 0.3s',
+              }}
+            >
+              {saving ? '저장 중...' : hasChanges ? '설정 저장' : '저장됨'}
+            </button>
+          )}
         </div>
 
         <div className="settings-footer">
diff --git a/app/src/services/github-service.ts b/app/src/services/github-service.ts
deleted file mode 100644
index 38451c3..0000000
--- a/app/src/services/github-service.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { getCommits, getFilename, getMarkdown } from '../api/github-api';
-
-export async function getGithubData(daysAgo: number): Promise<string | null> {
-    const interval = 24 * daysAgo * 60 * 60 * 1000;
-    const currentDate = new Date();
-    const pastDate = new Date(currentDate.getTime() - interval);
-
-    const since = new Date(pastDate);
-    since.setHours(0, 0, 0, 0);
-
-    const until = new Date(pastDate);
-    until.setHours(23, 59, 59, 999);
-
-    const commits = await getCommits(since, until);
-
-    if (commits.length === 0) {
-        return null;
-    }
-
-    for (let commit of commits) {
-        const commit_detail = await getFilename(commit.sha);
-        let dump: Record<string, string> = {}; 
-        for (let file of commit_detail.files) {
-            if(file.filename.endsWith(".md")) {
-                if (dump && Object.keys(dump).includes(file.filename)) {
-                    return dump[file.filename];
-                } else {
-                    const data = await getMarkdown(file.filename);
-                    dump[file.filename] = data;
-                    return data;
-                }
-            }
-        }
-    }
-    return null;
-}
diff --git a/app/src/stores/navigationStore.ts b/app/src/stores/navigationStore.ts
new file mode 100644
index 0000000..fb5e053
--- /dev/null
+++ b/app/src/stores/navigationStore.ts
@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+export type Page = 'flashcard' | 'settings';
+
+interface NavigationState {
+  currentPage: Page;
+  setCurrentPage: (page: Page) => void;
+  navigateToSettings: () => void;
+  navigateToFlashcard: () => void;
+}
+
+export const useNavigationStore = create<NavigationState>((set) => ({
+  currentPage: 'flashcard',
+  setCurrentPage: (page) => set({ currentPage: page }),
+  navigateToSettings: () => set({ currentPage: 'settings' }),
+  navigateToFlashcard: () => set({ currentPage: 'flashcard' }),
+}));
diff --git a/app/src/templates/CodeDiffBlock.tsx b/app/src/templates/CodeDiffBlock.tsx
new file mode 100644
index 0000000..b27c8fc
--- /dev/null
+++ b/app/src/templates/CodeDiffBlock.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface CodeDiffBlockProps {
+  diffContent: string;
+}
+
+const CodeDiffBlock: React.FC<CodeDiffBlockProps> = ({ diffContent }) => {
+  return (
+    <div className="code-diff-content">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ node, inline, className, children, ...props }: any) {
+            const match = /language-(\w+)/.exec(className || '');
+            const isDiff = match && match[1] === 'diff';
+            
+            if (!inline && match) {
+              if (isDiff) {
+                // diff 코드용 커스텀 렌더링
+                return (
+                  <div className="github-diff-container">
+                    <SyntaxHighlighter
+                      style={tomorrow as any}
+                      language="diff"
+                      PreTag="div"
+                      customStyle={{
+                        margin: 0,
+                        borderRadius: '6px',
+                        fontSize: '13px',
+                        lineHeight: '1.45',
+                      }}
+                      codeTagProps={{
+                        style: {
+                          fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+                        }
+                      }}
+                      lineProps={(lineNumber) => {
+                        const lineContent = String(children).split('\n')[lineNumber - 1] || '';
+                        const style: React.CSSProperties = { display: 'block' };
+                        
+                        if (lineContent.startsWith('+') && !lineContent.startsWith('+++')) {
+                          style.backgroundColor = 'rgba(46, 160, 67, 0.15)';
+                          style.borderLeft = '3px solid #2ea043';
+                        } else if (lineContent.startsWith('-') && !lineContent.startsWith('---')) {
+                          style.backgroundColor = 'rgba(248, 81, 73, 0.15)';
+                          style.borderLeft = '3px solid #f85149';
+                        } else if (lineContent.startsWith('@@')) {
+                          style.backgroundColor = 'rgba(84, 174, 255, 0.15)';
+                          style.fontWeight = '600';
+                        }
+                        
+                        return { style };
+                      }}
+                      {...props}
+                    >
+                      {String(children).replace(/\n$/, '')}
+                    </SyntaxHighlighter>
+                  </div>
+                );
+              }
+              
+              // 일반 코드 블록
+              return (
+                <SyntaxHighlighter
+                  style={tomorrow as any}
+                  language={match[1]}
+                  PreTag="div"
+                  {...props}
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              );
+            }
+            
+            return (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          },
+          h2: ({ children }) => (
+            <h2 style={{
+              fontSize: '1.5em',
+              fontWeight: '600',
+              marginTop: '24px',
+              marginBottom: '16px',
+              borderBottom: '1px solid #d0d7de',
+              paddingBottom: '8px',
+            }}>
+              {children}
+            </h2>
+          ),
+          h3: ({ children }) => (
+            <h3 style={{
+              fontSize: '1.25em',
+              fontWeight: '600',
+              marginTop: '20px',
+              marginBottom: '12px',
+              color: '#24292f',
+            }}>
+              📄 {children}
+            </h3>
+          ),
+          strong: ({ children }) => {
+            const text = String(children);
+            let color = '#24292f';
+            
+            if (text.includes('Status')) {
+              color = '#0969da';
+            } else if (text.includes('Changes')) {
+              color = '#8250df';
+            }
+            
+            return (
+              <strong style={{ color }}>
+                {children}
+              </strong>
+            );
+          },
+        }}
+      >
+        {diffContent}
+      </ReactMarkdown>
+      
+      <style>{`
+        .code-diff-content {
+          padding: 20px;
+          background: #ffffff;
+          border-radius: 8px;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+          color: #24292f;
+          max-height: 80vh;
+          overflow-y: auto;
+        }
+        
+        .github-diff-container {
+          margin: 12px 0;
+          border: 1px solid #d0d7de;
+          border-radius: 6px;
+          overflow: hidden;
+        }
+        
+        .code-diff-content p {
+          margin: 8px 0;
+          line-height: 1.6;
+        }
+        
+        .code-diff-content pre {
+          margin: 0 !important;
+        }
+        
+        /* 스크롤바 스타일링 */
+        .code-diff-content::-webkit-scrollbar {
+          width: 8px;
+        }
+        
+        .code-diff-content::-webkit-scrollbar-track {
+          background: #f6f8fa;
+          border-radius: 4px;
+        }
+        
+        .code-diff-content::-webkit-scrollbar-thumb {
+          background: #d0d7de;
+          border-radius: 4px;
+        }
+        
+        .code-diff-content::-webkit-scrollbar-thumb:hover {
+          background: #8c959f;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default CodeDiffBlock;
+
diff --git a/functions/src/github.ts b/functions/src/github.ts
index 766d3d1..4f70377 100644
--- a/functions/src/github.ts
+++ b/functions/src/github.ts
@@ -10,6 +10,7 @@ async function getUserData(req: any): Promise<{
   githubToken: string;
   githubUsername: string;
   repositoryName: string;
+  branch: string;
 }> {
   const authHeader = req.headers.authorization;
   
@@ -35,6 +36,7 @@ async function getUserData(req: any): Promise<{
     const githubToken = userData?.githubToken;
     const githubUsername = userData?.githubUsername;
     const repositoryName = userData?.repositoryName;
+    const branch = userData?.branch || 'main'; // 기본값 main
     
     if (!githubToken) {
       throw new Error('GitHub token not found. Please login with GitHub again.');
@@ -48,6 +50,7 @@ async function getUserData(req: any): Promise<{
       githubToken,
       githubUsername,
       repositoryName,
+      branch,
     };
   } catch (error) {
     console.error('Authentication error:', error);
@@ -70,7 +73,8 @@ export const getCommits = onRequest(
       const userData = await getUserData(req);
       const repoPath = `${userData.githubUsername}/${userData.repositoryName}`;
 
-      const response = await fetch(`https://api.github.com/repos/${repoPath}/commits?since=${since}&until=${until}`, {
+      // 브랜치를 지정하여 커밋 가져오기
+      const response = await fetch(`https://api.github.com/repos/${repoPath}/commits?sha=${userData.branch}&since=${since}&until=${until}`, {
         headers: {
           "Authorization": `Bearer ${userData.githubToken}`,
           "Accept": "application/vnd.github.v3+json",
@@ -158,7 +162,8 @@ export const getMarkdown = onRequest(
       const userData = await getUserData(req);
       const repoPath = `${userData.githubUsername}/${userData.repositoryName}`;
 
-      const response = await fetch(`https://api.github.com/repos/${repoPath}/contents/${filename}`, {
+      // 브랜치를 지정하여 파일 가져오기
+      const response = await fetch(`https://api.github.com/repos/${repoPath}/contents/${filename}?ref=${userData.branch}`, {
         headers: {
           "Accept": "application/vnd.github.raw",
           "Authorization": `Bearer ${userData.githubToken}`,
@@ -254,4 +259,79 @@ export const getRepositories = onRequest(
       });
     }
   }
+);
+
+/**
+ * 특정 리포지토리의 브랜치 목록 가져오기
+ * Settings 페이지에서 브랜치 선택을 위해 사용
+ */
+export const getBranches = onRequest(
+  { cors: true },
+  async (req, res) => {
+    try {
+      const { owner, repo } = req.query;
+      
+      if (!owner || !repo) {
+        res.status(400).json({ error: 'owner and repo parameters are required' });
+        return;
+      }
+
+      const authHeader = req.headers.authorization;
+      
+      if (!authHeader || !authHeader.startsWith('Bearer ')) {
+        res.status(401).json({ error: 'Firebase ID token not provided. Please authenticate.' });
+        return;
+      }
+      
+      const idToken = authHeader.split('Bearer ')[1];
+      
+      // Firebase ID Token 검증
+      const decodedToken = await getAuth().verifyIdToken(idToken);
+      const userId = decodedToken.uid;
+      
+      // Firestore에서 GitHub 토큰 조회
+      const userDoc = await getFirestore().collection('users').doc(userId).get();
+      
+      if (!userDoc.exists) {
+        res.status(404).json({ error: 'User not found. Please login again.' });
+        return;
+      }
+      
+      const userData = userDoc.data();
+      const githubToken = userData?.githubToken;
+      
+      if (!githubToken) {
+        res.status(400).json({ error: 'GitHub token not found. Please login with GitHub again.' });
+        return;
+      }
+
+      // GitHub API로 브랜치 목록 가져오기
+      const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/branches`, {
+        headers: {
+          'Authorization': `Bearer ${githubToken}`,
+          'Accept': 'application/vnd.github.v3+json',
+          'X-GitHub-Api-Version': '2022-11-28'
+        }
+      });
+
+      if (!response.ok) {
+        const errorBody = await response.text();
+        console.error(`GitHub API error: ${response.status}`, errorBody);
+        res.status(response.status).json({ 
+          error: 'Failed to fetch branches from GitHub',
+          details: errorBody 
+        });
+        return;
+      }
+
+      const branches = await response.json();
+      res.json(branches);
+    } catch (error) {
+      console.error('Error fetching branches:', error);
+      res.status(500).json({ 
+        error: 'Failed to fetch branches',
+        message: error instanceof Error ? error.message : 'Unknown error'
+      });
+    }
+  }
 );
\ No newline at end of file
diff --git a/functions/src/hypercloax.ts b/functions/src/hypercloax.ts
deleted file mode 100644
index d98d101..0000000
--- a/functions/src/hypercloax.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { onRequest } from 'firebase-functions/v2/https';
-
-// Hypercloax 관련 API Functions
-export const hypercloaxApi = onRequest(
-  { cors: true },
-  async (req, res) => {
-    try {
-      const { method, path } = req.query;
-      
-      if (!method || !path) {
-        res.status(400).json({ error: 'method and path parameters are required' });
-        return;
-      }
-
-      // TODO: Hypercloax API 호출 로직 구현
-      // 현재는 플레이스홀더 응답
-      res.json({ 
-        message: 'Hypercloax API endpoint',
-        method,
-        path,
-        status: 'not_implemented'
-      });
-    } catch (error) {
-      console.error('Error calling Hypercloax API:', error);
-      res.status(500).json({ error: 'Failed to call Hypercloax API' });
-    }
-  }
-);
-
-// CLOVA Studio API (기존 NCloud API)
-export const chatCompletions = onRequest(
-  { cors: true },
-  async (req, res) => {
-    try {
-      const { prompt, text } = req.body;
-      
-      if (!prompt || !text) {
-        res.status(400).json({ error: 'prompt and text are required' });
-        return;
-      }
-
-      // CLOVA Studio API 호출
-      const response = await fetch('https://clovastudio.apigw.ntruss.com/testapp/v1/chat-completions/HMX-001', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-NCP-CLOVASTUDIO-API-KEY': process.env.CLOVA_API_KEY || '',
-          'X-NCP-APIGW-API-KEY': process.env.NCLOUD_API_KEY || ''
-        },
-        body: JSON.stringify({
-          messages: [
-            {
-              role: 'user',
-              content: `${prompt}\n\n${text}`
-            }
-          ],
-          maxTokens: 1000,
-          temperature: 0.7,
-          topK: 0,
-          topP: 0.8,
-          repeatPenalty: 1.0
-        })
-      });
-
-      if (!response.ok) {
-        throw new Error(`CLOVA API error: ${response.status}`);
-      }
-
-      const data = await response.json();
-      res.json(data);
-    } catch (error) {
-      console.error('Error calling CLOVA API:', error);
-      res.status(500).json({ error: 'Failed to call CLOVA API' });
-    }
-  }
-);
-
-// Firebase Cloud Messaging 관련 API
-export const registerDeviceToken = onRequest(
-  { cors: true },
-  async (req, res) => {
-    try {
-      const { userId, token } = req.body;
-      
-      if (!userId || !token) {
-        res.status(400).json({ error: 'userId and token are required' });
-        return;
-      }
-
-      // TODO: Firestore에 토큰 저장 로직 구현
-      console.log('Registering device token:', { userId, token });
-      res.json({ success: true });
-    } catch (error) {
-      console.error('Error registering device token:', error);
-      res.status(500).json({ error: 'Failed to register device token' });
-    }
-  }
-);
-
-export const removeDeviceToken = onRequest(
-  { cors: true },
-  async (req, res) => {
-    try {
-      const { userId } = req.body;
-      
-      if (!userId) {
-        res.status(400).json({ error: 'userId is required' });
-        return;
-      }
-
-      // TODO: Firestore에서 토큰 삭제 로직 구현
-      console.log('Removing device token for user:', userId);
-      res.json({ success: true });
-    } catch (error) {
-      console.error('Error removing device token:', error);
-      res.status(500).json({ error: 'Failed to remove device token' });
-    }
-  }
-);
-
-export const registerSchedule = onRequest(
-  { cors: true },
-  async (req, res) => {
-    try {
-      const { scheduleCode } = req.body;
-      
-      if (!scheduleCode) {
-        res.status(400).json({ error: 'scheduleCode is required' });
-        return;
-      }
-
-      // TODO: 스케줄 등록 로직 구현
-      console.log('Registering schedule:', scheduleCode);
-      res.json({ success: true });
-    } catch (error) {
-      console.error('Error registering schedule:', error);
-      res.status(500).json({ error: 'Failed to register schedule' });
-    }
-  }
-);
diff --git a/functions/src/hyperclovax.ts b/functions/src/hyperclovax.ts
new file mode 100644
index 0000000..c0c8573
--- /dev/null
+++ b/functions/src/hyperclovax.ts
@@ -0,0 +1,72 @@
+import { onRequest } from 'firebase-functions/v2/https';
+
+// HyperCLOVA X API (HCX-007)
+export const chatCompletions = onRequest(
+  { cors: true },
+  async (req, res) => {
+    try {
+      const { prompt, text } = req.body;
+      
+      if (!prompt || !text) {
+        res.status(400).json({ error: 'prompt and text are required' });
+        return;
+      }
+
+      // 고유한 요청 ID 생성
+      const requestId = crypto.randomUUID().replace(/-/g, '');
+
+      // HyperCLOVA X API 호출 (HCX-007 모델)
+      const response = await fetch('https://clovastudio.stream.ntruss.com/v3/chat-completions/HCX-007', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${process.env.CLOVA_API_KEY || ''}`,
+          'X-NCP-CLOVASTUDIO-REQUEST-ID': requestId
+        },
+        body: JSON.stringify({
+          messages: [
+            {
+              role: 'system',
+              content: [
+                {
+                  type: 'text',
+                  text: prompt
+                }
+              ]
+            },
+            {
+              role: 'user',
+              content: [
+                {
+                  type: 'text',
+                  text: text
+                }
+              ]
+            }
+          ],
+          thinking: {
+            effort: 'low'
+          },
+          topP: 0.8,
+          topK: 0,
+          maxCompletionTokens: 20480,
+          temperature: 0.5,
+          repetitionPenalty: 1.1,
+          seed: 0,
+          includeAiFilters: true
+        })
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`HCX API error: ${response.status} - ${errorText}`);
+      }
+
+      const data = await response.json();
+      res.json(data);
+    } catch (error) {
+      console.error('Error calling HCX API:', error);
+      res.status(500).json({ error: 'Failed to call HCX API' });
+    }
+  }
+);
diff --git a/functions/src/index.ts b/functions/src/index.ts
index d46680b..5b44ecc 100644
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@@ -5,4 +5,4 @@ initializeApp();
 
 export * from './github';
 export * from './schedule';
-export * from './hypercloax';
+export * from './hyperclovax';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf76b1e..d4c3899 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       slick-carousel:
         specifier: ^1.8.1
         version: 1.8.1(jquery@3.7.1)
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@18.3.25)(react@18.3.1)
     devDependencies:
       '@types/react':
         specifier: ^18.2.0
@@ -3727,6 +3730,24 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zustand@5.0.8:
+    resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -8227,4 +8248,9 @@ snapshots:
   yocto-queue@0.1.0:
     optional: true
 
+  zustand@5.0.8(@types/react@18.3.25)(react@18.3.1):
+    optionalDependencies:
+      '@types/react': 18.3.25
+      react: 18.3.1
+
   zwitch@2.0.4: {}