diff --git a/src/app/doc/[uuid]/DocPageClient.tsx b/src/app/doc/[uuid]/DocPageClient.tsx
index ba5586d..ab89807 100644
--- a/src/app/doc/[uuid]/DocPageClient.tsx
+++ b/src/app/doc/[uuid]/DocPageClient.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import TopNavigationBar from "@/components/layout/NotePage/TopNavigationBar";
+import { useCallback, useEffect, useState } from "react";
+
+import ChatMenu from "@/components/chat/ChatMenu";
 import NoteExplorer from "@/components/layout/NotePage/NoteExplorer";
 import NoteUI from "@/components/layout/NotePage/NoteUI";
-import ChatMenu from "@/components/chat/ChatMenu";
+import TopNavigationBar from "@/components/layout/NotePage/TopNavigationBar";
 
 export default function DocPageClient({
   user,
@@ -12,12 +14,35 @@ export default function DocPageClient({
   user: User;
   selectedNoteId: string;
 }) {
+  const [activeNoteId, setActiveNoteId] = useState<string>(selectedNoteId);
+
+  useEffect(() => {
+    setActiveNoteId(selectedNoteId);
+  }, [selectedNoteId]);
+
+  const handleSelectNote = useCallback((noteId: string) => {
+    setActiveNoteId(noteId);
+
+    if (typeof window !== "undefined") {
+      const nextUrl = `/doc/${noteId}`;
+      if (window.location.pathname !== nextUrl) {
+        window.history.replaceState(null, "", nextUrl);
+      }
+    }
+  }, []);
+
+  const resolvedNoteId = activeNoteId || selectedNoteId;
+
   return (
     <div className="flex flex-col justify-start w-full relative gap-[59px] bg-[#f0f8fe]">
-      <TopNavigationBar user={user} selectedNoteId={selectedNoteId} />
+      <TopNavigationBar user={user} selectedNoteId={resolvedNoteId} />
       <div className="flex flex-row w-full pt-24">
-        <NoteExplorer user={user} selectedNoteId={selectedNoteId} />
-        <NoteUI user={user} noteId={selectedNoteId} />
+        <NoteExplorer
+          user={user}
+          selectedNoteId={resolvedNoteId}
+          onSelectNote={handleSelectNote}
+        />
+        <NoteUI user={user} noteId={resolvedNoteId} />
       </div>
       <ChatMenu uuid={"1234"} user={user} />
     </div>
diff --git a/src/components/layout/NotePage/GithubCommitModal.tsx b/src/components/layout/NotePage/GithubCommitModal.tsx
index 76a7384..4fb498b 100644
--- a/src/components/layout/NotePage/GithubCommitModal.tsx
+++ b/src/components/layout/NotePage/GithubCommitModal.tsx
@@ -1,13 +1,14 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import Portal from "@/components/common/Portal";
 import {
   createGithubBranchAndCommit,
+  listGithubRepositoryFiles,
   listImportedRepositories,
 } from "@/libs/client/github";
-import { GithubBranchCommitFileInput, GithubImportedRepositoryDTO } from "@/types/github";
-import { FilePlus2, GitBranch, Loader2, Plus, Trash2, X } from "lucide-react";
+import { GithubImportedRepositoryDTO, GithubRepositoryFileDTO } from "@/types/github";
+import { CheckSquare, GitBranch, Loader2, Search, Square, X } from "lucide-react";
 import toast from "react-hot-toast";
 
 interface GithubCommitModalProps {
@@ -16,36 +17,46 @@ interface GithubCommitModalProps {
   onClose: () => void;
 }
 
-function createEmptyFileInput(): GithubBranchCommitFileInput {
-  return {
-    path: "",
-    content: "",
-  };
-}
-
 export default function GithubCommitModal({
   user,
   open,
   onClose,
 }: GithubCommitModalProps) {
   const [repositories, setRepositories] = useState<GithubImportedRepositoryDTO[]>([]);
-  const [selectedRepo, setSelectedRepo] = useState<string>("");
+  const [selectedRepo, setSelectedRepo] = useState<GithubImportedRepositoryDTO | null>(null);
   const [baseBranch, setBaseBranch] = useState("main");
   const [branchName, setBranchName] = useState("");
   const [commitMessage, setCommitMessage] = useState("");
-  const [files, setFiles] = useState<GithubBranchCommitFileInput[]>([createEmptyFileInput()]);
+  const [repositoryFiles, setRepositoryFiles] = useState<GithubRepositoryFileDTO[]>([]);
+  const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
+  const [fileSearch, setFileSearch] = useState("");
   const [loadingRepos, setLoadingRepos] = useState(false);
+  const [loadingFiles, setLoadingFiles] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const repoSelectId = useId();
+  const baseBranchId = useId();
+  const branchNameId = useId();
+  const commitMessageId = useId();
+  const fileSearchId = useId();
+
+  /**
+   * Resets the modal state when it closes or re-initializes.
+   */
+  const resetState = useCallback(() => {
+    setSelectedRepo(null);
+    setBaseBranch("main");
+    setBranchName("");
+    setCommitMessage("");
+    setRepositoryFiles([]);
+    setSelectedFileIds([]);
+    setFileSearch("");
+    setError(null);
+  }, []);
 
   useEffect(() => {
     if (!open) {
-      setSelectedRepo("");
-      setBaseBranch("main");
-      setBranchName("");
-      setCommitMessage("");
-      setFiles([createEmptyFileInput()]);
-      setError(null);
+      resetState();
       return;
     }
 
@@ -54,8 +65,9 @@ export default function GithubCommitModal({
         setLoadingRepos(true);
         const list = await listImportedRepositories(user.id);
         setRepositories(list);
+        setError(null);
         if (list.length > 0) {
-          setSelectedRepo(list[0].repositoryUrl);
+          setSelectedRepo(list[0]);
         }
       } catch (err) {
         console.error(err);
@@ -66,63 +78,98 @@ export default function GithubCommitModal({
     };
 
     loadRepositories();
-  }, [open, user.id]);
+  }, [open, resetState, user.id]);
+
+  useEffect(() => {
+    if (!open || !selectedRepo) {
+      setRepositoryFiles([]);
+      setSelectedFileIds([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const loadRepositoryFiles = async () => {
+      try {
+        setLoadingFiles(true);
+        setError(null);
+        const files = await listGithubRepositoryFiles(user.id, selectedRepo);
+        if (!cancelled) {
+          setRepositoryFiles(files);
+          setSelectedFileIds([]);
+          setFileSearch("");
+        }
+      } catch (err) {
+        console.error(err);
+        if (!cancelled) {
+          setRepositoryFiles([]);
+          setSelectedFileIds([]);
+          setError((err as Error).message ?? "파일 목록을 불러오지 못했습니다.");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoadingFiles(false);
+        }
+      }
+    };
+
+    loadRepositoryFiles();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, selectedRepo, user.id]);
 
   const isSubmitDisabled = useMemo(() => {
     if (!selectedRepo || !baseBranch.trim() || !branchName.trim() || !commitMessage.trim()) {
       return true;
     }
 
-    return files.some((file) => !file.path.trim());
-  }, [selectedRepo, baseBranch, branchName, commitMessage, files]);
-
-  const handleFileChange = (
-    index: number,
-    key: keyof GithubBranchCommitFileInput,
-    value: string
-  ) => {
-    setFiles((prev) => {
-      const next = [...prev];
-      next[index] = {
-        ...next[index],
-        [key]: value,
-      };
-      return next;
-    });
-  };
+    return selectedFileIds.length === 0;
+  }, [selectedRepo, baseBranch, branchName, commitMessage, selectedFileIds]);
 
-  const handleAddFile = () => {
-    setFiles((prev) => [...prev, createEmptyFileInput()]);
-  };
+  /**
+   * Returns whether a file is currently selected for the commit.
+   *
+   * @param fileId The unique file identifier.
+   */
+  const isFileSelected = (fileId: string) => selectedFileIds.includes(fileId);
 
-  const handleRemoveFile = (index: number) => {
-    setFiles((prev) => (prev.length === 1 ? prev : prev.filter((_, i) => i !== index)));
+  /**
+   * Toggles a file selection when the user interacts with it.
+   *
+   * @param fileId The unique file identifier to toggle.
+   */
+  const handleToggleFile = (fileId: string) => {
+    setSelectedFileIds((prev) =>
+      prev.includes(fileId) ? prev.filter((id) => id !== fileId) : [...prev, fileId]
+    );
   };
 
+  const filteredFiles = useMemo(() => {
+    const keyword = fileSearch.trim().toLowerCase();
+    if (!keyword) {
+      return repositoryFiles;
+    }
+    return repositoryFiles.filter((file) => file.path.toLowerCase().includes(keyword));
+  }, [fileSearch, repositoryFiles]);
+
   const handleSubmit = async () => {
-    if (isSubmitDisabled) {
+    if (isSubmitDisabled || !selectedRepo) {
       setError("필수 항목을 모두 입력해주세요.");
       return;
     }
 
-    const payloadFiles: Record<string, string> = {};
-    files.forEach((file) => {
-      const path = file.path.trim();
-      if (path) {
-        payloadFiles[path] = file.content ?? "";
-      }
-    });
-
     try {
       setSubmitting(true);
       setError(null);
       await createGithubBranchAndCommit({
         userId: user.id,
-        repositoryUrl: selectedRepo,
+        repositoryUrl: selectedRepo.repositoryUrl,
         baseBranch: baseBranch.trim(),
         branchName: branchName.trim(),
         commitMessage: commitMessage.trim(),
-        files: payloadFiles,
+        fileIds: selectedFileIds,
       });
       toast.success("새 브랜치에 변경 사항을 푸시했습니다.");
       onClose();
@@ -167,11 +214,19 @@ export default function GithubCommitModal({
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="space-y-2">
-                <label className="text-sm font-semibold text-slate-700">대상 저장소</label>
+                <label className="text-sm font-semibold text-slate-700" htmlFor={repoSelectId}>
+                  대상 저장소
+                </label>
                 <select
                   className="w-full border-2 border-slate-200 rounded-xl px-4 py-3 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all"
-                  value={selectedRepo}
-                  onChange={(event) => setSelectedRepo(event.target.value)}
+                  value={selectedRepo?.repositoryUrl ?? ""}
+                  onChange={(event) => {
+                    const repo = repositories.find(
+                      (candidate) => candidate.repositoryUrl === event.target.value
+                    );
+                    setSelectedRepo(repo ?? null);
+                  }}
+                  id={repoSelectId}
                   disabled={loadingRepos || repositories.length === 0}
                 >
                   {repositories.length === 0 && (
@@ -186,88 +241,100 @@ export default function GithubCommitModal({
               </div>
 
               <div className="space-y-2">
-                <label className="text-sm font-semibold text-slate-700">기준 브랜치</label>
+                <label className="text-sm font-semibold text-slate-700" htmlFor={baseBranchId}>
+                  기준 브랜치
+                </label>
                 <input
                   className="w-full border-2 border-slate-200 rounded-xl px-4 py-3 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all"
                   value={baseBranch}
                   onChange={(event) => setBaseBranch(event.target.value)}
+                  id={baseBranchId}
                 />
               </div>
 
               <div className="space-y-2">
-                <label className="text-sm font-semibold text-slate-700">새 브랜치 이름</label>
+                <label className="text-sm font-semibold text-slate-700" htmlFor={branchNameId}>
+                  새 브랜치 이름
+                </label>
                 <input
                   className="w-full border-2 border-slate-200 rounded-xl px-4 py-3 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all"
                   value={branchName}
                   onChange={(event) => setBranchName(event.target.value)}
+                  id={branchNameId}
                   placeholder="feature/my-change"
                 />
               </div>
 
               <div className="space-y-2">
-                <label className="text-sm font-semibold text-slate-700">커밋 메시지</label>
+                <label className="text-sm font-semibold text-slate-700" htmlFor={commitMessageId}>
+                  커밋 메시지
+                </label>
                 <input
                   className="w-full border-2 border-slate-200 rounded-xl px-4 py-3 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all"
                   value={commitMessage}
                   onChange={(event) => setCommitMessage(event.target.value)}
+                  id={commitMessageId}
                   placeholder="Add new changes"
                 />
               </div>
             </div>
 
             <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <h3 className="text-sm font-semibold text-slate-700 flex items-center gap-2">
-                  <FilePlus2 className="w-4 h-4 text-purple-500" />
-                  커밋할 파일
-                </h3>
-                <button
-                  className="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-sm font-medium"
-                  onClick={handleAddFile}
-                  type="button"
-                >
-                  <Plus className="w-4 h-4" /> 파일 추가
-                </button>
-              </div>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-slate-700 flex items-center gap-2">
+                    커밋할 파일 선택
+                  </h3>
+                </div>
 
-              <div className="space-y-4">
-                {files.map((file, index) => (
-                  <div
-                    key={index}
-                    className="p-4 border border-slate-200 rounded-2xl space-y-3 bg-white shadow-sm"
-                  >
-                    <div className="flex flex-col md:flex-row md:items-center md:gap-3">
-                      <div className="flex-1 space-y-2">
-                        <label className="text-xs font-semibold text-slate-500">파일 경로</label>
-                        <input
-                          className="w-full border-2 border-slate-200 rounded-xl px-4 py-2.5 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all"
-                          value={file.path}
-                          onChange={(event) => handleFileChange(index, "path", event.target.value)}
-                          placeholder="docs/README.md"
-                        />
-                      </div>
-                      <button
-                        className="mt-3 md:mt-6 w-full md:w-auto inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 text-sm"
-                        onClick={() => handleRemoveFile(index)}
-                        type="button"
-                        disabled={files.length === 1}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                        제거
-                      </button>
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <input
+                    className="w-full border-2 border-slate-200 rounded-xl pl-10 pr-4 py-2.5 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all"
+                    value={fileSearch}
+                    onChange={(event) => setFileSearch(event.target.value)}
+                    id={fileSearchId}
+                    placeholder="파일 이름 또는 경로 검색"
+                  />
+                </div>
+
+                <div className="border border-slate-200 rounded-2xl bg-white max-h-72 overflow-y-auto divide-y divide-slate-100">
+                  {loadingFiles && (
+                    <div className="flex items-center justify-center gap-2 py-10 text-slate-500 text-sm">
+                      <Loader2 className="w-4 h-4 animate-spin" /> 파일 목록을 불러오는 중입니다
                     </div>
+                  )}
 
-                    <div className="space-y-2">
-                      <label className="text-xs font-semibold text-slate-500">파일 내용</label>
-                      <textarea
-                        className="w-full border-2 border-slate-200 rounded-xl px-4 py-3 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-all min-h-[120px]"
-                        value={file.content}
-                        onChange={(event) => handleFileChange(index, "content", event.target.value)}
-                        placeholder="이곳에 커밋할 내용을 입력하세요"
-                      />
+                  {!loadingFiles && filteredFiles.length === 0 && (
+                    <div className="py-10 text-center text-sm text-slate-500">
+                      커밋할 수 있는 파일이 없습니다.
                     </div>
-                  </div>
-                ))}
+                  )}
+
+                  {!loadingFiles &&
+                    filteredFiles.map((file) => {
+                      const selected = isFileSelected(file.id);
+                      return (
+                        <button
+                          key={file.id}
+                          type="button"
+                          onClick={() => handleToggleFile(file.id)}
+                          className={`w-full flex items-center justify-between px-4 py-3 text-left transition-colors ${
+                            selected ? "bg-purple-50" : "hover:bg-slate-50"
+                          }`}
+                        >
+                          <div className="flex items-center gap-3">
+                            {selected ? (
+                              <CheckSquare className="w-4 h-4 text-purple-500" />
+                            ) : (
+                              <Square className="w-4 h-4 text-slate-400" />
+                            )}
+                            <span className="text-sm text-slate-700">{file.path}</span>
+                          </div>
+                        </button>
+                      );
+                    })}
+                </div>
               </div>
             </div>
 
@@ -282,7 +349,13 @@ export default function GithubCommitModal({
               <button
                 className="px-5 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-blue-600 text-white font-semibold shadow-sm hover:shadow-md disabled:opacity-60"
                 onClick={handleSubmit}
-                disabled={submitting || isSubmitDisabled || repositories.length === 0}
+                disabled={
+                  submitting ||
+                  isSubmitDisabled ||
+                  repositories.length === 0 ||
+                  loadingFiles ||
+                  loadingRepos
+                }
               >
                 {submitting ? <Loader2 className="w-4 h-4 animate-spin" /> : "브랜치 생성"}
               </button>
diff --git a/src/components/layout/NotePage/NoteExplorer.tsx b/src/components/layout/NotePage/NoteExplorer.tsx
index ced9e43..a3ba9f8 100644
--- a/src/components/layout/NotePage/NoteExplorer.tsx
+++ b/src/components/layout/NotePage/NoteExplorer.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import type { MouseEvent as ReactMouseEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   Menu,
   ChevronLeft,
@@ -42,6 +42,7 @@ import type { Language } from "@/types/note";
 interface NoteExplorerProps {
   user: User;
   selectedNoteId: string;
+  onSelectNote?: (noteId: string) => void;
 }
 
 type FileTreeNode = MoaFile & {
@@ -152,6 +153,7 @@ function findNode(node: FileTreeNode, id: string): FileTreeNode | null {
 export default function NoteExplorer({
   user,
   selectedNoteId,
+  onSelectNote,
 }: NoteExplorerProps) {
   const router = useRouter();
   const [open, setOpen] = useState(true);
@@ -183,6 +185,17 @@ export default function NoteExplorer({
 
   const modalTreeLoadingRef = useRef(false);
 
+  const handleNoteSelection = useCallback(
+    (noteId: string) => {
+      if (onSelectNote) {
+        onSelectNote(noteId);
+      } else {
+        router.push(`/doc/${noteId}`);
+      }
+    },
+    [onSelectNote, router]
+  );
+
   const loadModalTree = useCallback(async () => {
     try {
       const fullTree = await getFileTree(null, user, { recursive: true });
@@ -614,7 +627,7 @@ export default function NoteExplorer({
                   onToggleFolder={handleToggleFolder}
                   onEditFolder={openEditModal}
                   onEditNote={openNoteEditModal}
-                  onNoteClick={(noteId) => router.push(`/doc/${noteId}`)}
+                  onNoteClick={handleNoteSelection}
                   onContextMenu={handleContextMenu}
                   loadingFolders={loadingFolders}
                   isRoot
@@ -641,7 +654,11 @@ export default function NoteExplorer({
                   공유된 노트
                 </span>
               </div>
-              <SharedNoteTree user={user} selectedNoteId={selectedNoteId} />
+              <SharedNoteTree
+                user={user}
+                selectedNoteId={selectedNoteId}
+                onSelectNote={handleNoteSelection}
+              />
             </div>
           </div>
 
diff --git a/src/components/layout/NotePage/SharedNoteTree.tsx b/src/components/layout/NotePage/SharedNoteTree.tsx
index 05dbdb5..713586c 100644
--- a/src/components/layout/NotePage/SharedNoteTree.tsx
+++ b/src/components/layout/NotePage/SharedNoteTree.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import {useEffect, useState} from "react";
-import type {MoaFile} from "@/types/file";
-import {getSharedFiles} from "@/libs/client/file";
-import {useRouter} from "next/navigation";
-import {FileTypeDTO} from "@/types/dto";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import type { MoaFile } from "@/types/file";
+import { getSharedFiles } from "@/libs/client/file";
+import { FileTypeDTO } from "@/types/dto";
 
 import FolderItem from "@/components/layout/NotePage/FolderItem";
 import NoteItem from "@/components/layout/NotePage/NoteItem";
@@ -12,9 +13,11 @@ import NoteItem from "@/components/layout/NotePage/NoteItem";
 export default function SharedNoteTree({
   user,
   selectedNoteId,
+  onSelectNote,
 }: {
   user: User;
   selectedNoteId: string;
+  onSelectNote?: (noteId: string) => void;
 }) {
   const [sharedFiles, setSharedFiles] = useState<MoaFile[]>([]);
   const [folderOpen, setFolderOpen] = useState<Record<string, boolean>>({});
@@ -66,7 +69,11 @@ export default function SharedNoteTree({
                       }}
                       selected={selectedNoteId == file.id}
                       onClick={() => {
-                        router.push(`/doc/${file.id}`);
+                        if (onSelectNote) {
+                          onSelectNote(file.id);
+                        } else {
+                          router.push(`/doc/${file.id}`);
+                        }
                       }}
                       isShared={true}
                   />
diff --git a/src/components/layout/NotePage/__tests__/GithubCommitModal.test.tsx b/src/components/layout/NotePage/__tests__/GithubCommitModal.test.tsx
new file mode 100644
index 0000000..084259c
--- /dev/null
+++ b/src/components/layout/NotePage/__tests__/GithubCommitModal.test.tsx
@@ -0,0 +1,111 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+import GithubCommitModal from "@/components/layout/NotePage/GithubCommitModal";
+
+jest.mock("@/components/common/Portal", () => ({
+  __esModule: true,
+  default: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+const mockCreateGithubBranchAndCommit = jest.fn();
+const mockListGithubRepositoryFiles = jest.fn();
+const mockListImportedRepositories = jest.fn();
+
+jest.mock("@/libs/client/github", () => ({
+  createGithubBranchAndCommit: (
+    ...args: Parameters<typeof mockCreateGithubBranchAndCommit>
+  ) => mockCreateGithubBranchAndCommit(...args),
+  listGithubRepositoryFiles: (
+    ...args: Parameters<typeof mockListGithubRepositoryFiles>
+  ) => mockListGithubRepositoryFiles(...args),
+  listImportedRepositories: (
+    ...args: Parameters<typeof mockListImportedRepositories>
+  ) => mockListImportedRepositories(...args),
+}));
+
+jest.mock("react-hot-toast", () => ({
+  __esModule: true,
+  default: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+import toast from "react-hot-toast";
+
+const toastMocked = toast as unknown as { success: jest.Mock; error: jest.Mock };
+
+describe("GithubCommitModal", () => {
+  beforeEach(() => {
+    mockCreateGithubBranchAndCommit.mockReset();
+    mockListGithubRepositoryFiles.mockReset();
+    mockListImportedRepositories.mockReset();
+    toastMocked.success.mockReset();
+    toastMocked.error.mockReset();
+  });
+
+  it("filters repository files by search term and submits selected file IDs", async () => {
+    mockListImportedRepositories.mockResolvedValue([
+      { repositoryName: "frontend", repositoryUrl: "https://github.com/example/frontend" },
+    ]);
+    mockListGithubRepositoryFiles.mockResolvedValue([
+      { id: "file-1", path: "src/index.ts" },
+      { id: "file-2", path: "src/utils/helpers.ts" },
+    ]);
+    mockCreateGithubBranchAndCommit.mockResolvedValue(undefined);
+
+    const onClose = jest.fn();
+
+    render(
+      <GithubCommitModal
+        user={{ id: "user-1", name: "User" } as User}
+        open
+        onClose={onClose}
+      />
+    );
+
+    await waitFor(() => expect(mockListImportedRepositories).toHaveBeenCalled());
+    await waitFor(() => expect(mockListGithubRepositoryFiles).toHaveBeenCalled());
+
+    expect(mockListGithubRepositoryFiles).toHaveBeenCalledWith("user-1", {
+      repositoryName: "frontend",
+      repositoryUrl: "https://github.com/example/frontend",
+    });
+
+    expect(screen.getByText("src/index.ts")).toBeTruthy();
+    expect(screen.getByText("src/utils/helpers.ts")).toBeTruthy();
+
+    const searchInput = screen.getByPlaceholderText("파일 이름 또는 경로 검색");
+    fireEvent.change(searchInput, { target: { value: "helpers" } });
+
+    await waitFor(() => {
+      expect(screen.getByText("src/utils/helpers.ts")).toBeTruthy();
+      expect(screen.queryByText("src/index.ts")).toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("src/utils/helpers.ts"));
+
+    fireEvent.change(screen.getByLabelText("새 브랜치 이름"), {
+      target: { value: "feature/search" },
+    });
+    fireEvent.change(screen.getByLabelText("커밋 메시지"), {
+      target: { value: "Add filtered commit" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "브랜치 생성" }));
+
+    await waitFor(() => expect(mockCreateGithubBranchAndCommit).toHaveBeenCalled());
+
+    expect(mockCreateGithubBranchAndCommit).toHaveBeenCalledWith({
+      userId: "user-1",
+      repositoryUrl: "https://github.com/example/frontend",
+      baseBranch: "main",
+      branchName: "feature/search",
+      commitMessage: "Add filtered commit",
+      fileIds: ["file-2"],
+    });
+    expect(onClose).toHaveBeenCalled();
+    expect(toastMocked.success).toHaveBeenCalled();
+  });
+});
diff --git a/src/libs/client/github.ts b/src/libs/client/github.ts
index 92a927d..84da722 100644
--- a/src/libs/client/github.ts
+++ b/src/libs/client/github.ts
@@ -1,8 +1,10 @@
 "use client";
 
+import { FileDTO, FileTypeDTO } from "@/types/dto";
 import {
   GithubImportedRepositoryDTO,
   GithubOAuthAuthorizeResponse,
+  GithubRepositoryFileDTO,
 } from "@/types/github";
 
 const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
@@ -109,13 +111,18 @@ export async function fetchGithubRepository(
   });
 }
 
+/**
+ * Requests a new GitHub branch creation and commit for the selected files.
+ *
+ * @param options Parameters required to create a branch and commit.
+ */
 export async function createGithubBranchAndCommit(options: {
   userId: string;
   repositoryUrl: string;
   baseBranch: string;
   branchName: string;
   commitMessage: string;
-  files: Record<string, string>;
+  fileIds: string[];
 }) {
   await request<null>("/api/github/branch", {
     method: "POST",
@@ -123,3 +130,111 @@ export async function createGithubBranchAndCommit(options: {
     parseJson: false,
   });
 }
+
+/**
+ * Retrieves the list of files available for committing in the selected repository.
+ *
+ * @param userId The ID of the authenticated user.
+ * @param repositoryUrl The GitHub repository URL to query.
+ * @returns The repository files that can be committed.
+ */
+/**
+ * Requests the root file metadata for an imported GitHub repository.
+ *
+ * @param userId The ID of the authenticated user.
+ * @param repositoryName The name of the imported repository.
+ * @returns The repository root file metadata, if available.
+ */
+async function fetchGithubRepositoryRootFile(
+  userId: string,
+  repositoryName: string
+): Promise<FileDTO | null> {
+  const data = await request<FileDTO | null>(
+    `/api/github/repository/file?userId=${encodeURIComponent(
+      userId
+    )}&repositoryName=${encodeURIComponent(repositoryName)}`,
+    {
+      method: "GET",
+    }
+  );
+
+  if (!data) {
+    return null;
+  }
+
+  return data;
+}
+
+/**
+ * Builds a list of repository files with their relative paths using file metadata.
+ *
+ * @param files The raw file metadata retrieved from the backend.
+ * @param rootId The identifier of the repository root directory.
+ */
+function mapRepositoryFiles(
+  files: FileDTO[],
+  rootId: string
+): GithubRepositoryFileDTO[] {
+  const byParent = new Map<string | null, FileDTO[]>();
+
+  for (const file of files) {
+    const parentId = (file.dir as unknown as string | null) ?? null;
+    const siblings = byParent.get(parentId) ?? [];
+    siblings.push(file);
+    byParent.set(parentId, siblings);
+  }
+
+  const traverse = (parentId: string, parentPath: string): GithubRepositoryFileDTO[] => {
+    const children = byParent.get(parentId) ?? [];
+    const result: GithubRepositoryFileDTO[] = [];
+
+    for (const child of children) {
+      const childId = String(child.id);
+      const currentPath = parentPath ? `${parentPath}/${child.name}` : child.name;
+
+      if (child.type === FileTypeDTO.DOCUMENT) {
+        result.push({ id: childId, path: currentPath });
+      } else if (child.type === FileTypeDTO.DIRECTORY) {
+        result.push(...traverse(childId, currentPath));
+      }
+    }
+
+    return result;
+  };
+
+  return traverse(rootId, "").sort((a, b) => a.path.localeCompare(b.path));
+}
+
+/**
+ * Retrieves the list of files available for committing in the selected repository.
+ *
+ * @param userId The ID of the authenticated user.
+ * @param repository The imported repository to query.
+ * @returns The repository files that can be committed.
+ */
+export async function listGithubRepositoryFiles(
+  userId: string,
+  repository: GithubImportedRepositoryDTO
+): Promise<GithubRepositoryFileDTO[]> {
+  const root = await fetchGithubRepositoryRootFile(userId, repository.repositoryName);
+
+  if (!root) {
+    return [];
+  }
+
+  const rootId = String(root.id);
+  const directoryFiles = await request<FileDTO[]>(
+    `/api/files/list/${encodeURIComponent(rootId)}?user=${encodeURIComponent(
+      userId
+    )}&recursive=true`,
+    {
+      method: "GET",
+    }
+  );
+
+  if (!Array.isArray(directoryFiles)) {
+    return [];
+  }
+
+  return mapRepositoryFiles(directoryFiles, rootId);
+}
diff --git a/src/types/github.ts b/src/types/github.ts
index 2c9d231..b4c0003 100644
--- a/src/types/github.ts
+++ b/src/types/github.ts
@@ -8,11 +8,6 @@ export interface GithubImportedRepositoryDTO {
   repositoryUrl: string;
 }
 
-export interface GithubBranchCommitFileInput {
-  path: string;
-  content: string;
-}
-
 export interface GithubSearchRepositoryItem {
   id: number;
   full_name: string;
@@ -25,3 +20,8 @@ export interface GithubSearchRepositoryItem {
     avatar_url: string;
   };
 }
+
+export interface GithubRepositoryFileDTO {
+  id: string;
+  path: string;
+}