diff --git a/FE/package.json b/FE/package.json
index 3cf090e9..1eab693f 100644
--- a/FE/package.json
+++ b/FE/package.json
@@ -64,5 +64,6 @@
     "tailwindcss": "latest",
     "ts-node": "^10.9.2",
     "typescript": "latest"
-  }
+  },
+  "packageManager": "pnpm@8.15.1+sha1.8adba2d20330c02d3856e18c4eb3819d1d3ca6aa"
 }
diff --git a/FE/src/apis/__test__/program.test.ts b/FE/src/apis/__test__/program.test.ts
index d7b54aee..37d8bc23 100644
--- a/FE/src/apis/__test__/program.test.ts
+++ b/FE/src/apis/__test__/program.test.ts
@@ -301,7 +301,7 @@ describe("sendSlackMessage", () => {
 
     // 내부 구현사항
     expect(https).toHaveBeenCalledWith({
-      data: { programUrl: "https://econo.eeos.store/detail/1" },
+      data: { programUrl: "https://eeos.co.kr/detail/1" },
       method: "POST",
       url: "/programs/1/slack/notification",
     });
@@ -381,6 +381,7 @@ describe("patchProgram", () => {
         },
       ],
       teams: [{ teamId: 1 }],
+      programGithubUrl: "",
     };
 
     const programId = 1;
diff --git a/FE/src/apis/__test__/question.test.ts b/FE/src/apis/__test__/question.test.ts
index b03be2c5..248fc55a 100644
--- a/FE/src/apis/__test__/question.test.ts
+++ b/FE/src/apis/__test__/question.test.ts
@@ -56,9 +56,10 @@ describe("postQuestion", () => {
     const programId = 1;
     const teamId = 1;
     const questionContent = "질문 내용";
+    const isAnonymous = 0;
 
     // act
-    await postQuestion({ programId, teamId, questionContent });
+    await postQuestion({ programId, teamId, questionContent, isAnonymous });
 
     // assert
     expect(mockHttps).toHaveBeenCalledWith({
@@ -67,6 +68,30 @@ describe("postQuestion", () => {
       data: {
         programId,
         teamId,
+        isAnonymous: 0,
+        content: questionContent,
+        parentsCommentId: -1,
+      },
+    });
+  });
+  it("익명 질문을 등록한다", async () => {
+    // arrange
+    const programId = 1;
+    const teamId = 1;
+    const questionContent = "질문 내용";
+    const isAnonymous = 1;
+
+    // act
+    await postQuestion({ programId, teamId, questionContent, isAnonymous });
+
+    // assert
+    expect(mockHttps).toHaveBeenCalledWith({
+      url: "comments",
+      method: "POST",
+      data: {
+        programId,
+        teamId,
+        isAnonymous: 1,
         content: questionContent,
         parentsCommentId: -1,
       },
@@ -78,6 +103,7 @@ describe("postQuestion", () => {
     const teamId = 1;
     const questionContent = "답변 내용";
     const parentsCommentId = 1;
+    const isAnonymous = 0;
 
     // act
     await postQuestion({
@@ -85,6 +111,7 @@ describe("postQuestion", () => {
       teamId,
       questionContent,
       parentsCommentId,
+      isAnonymous,
     });
 
     // assert
@@ -94,6 +121,7 @@ describe("postQuestion", () => {
       data: {
         programId,
         teamId,
+        isAnonymous: 0,
         content: questionContent,
         parentsCommentId,
       },
diff --git a/FE/src/apis/question.ts b/FE/src/apis/question.ts
index af74d3dd..e5ca7b1d 100644
--- a/FE/src/apis/question.ts
+++ b/FE/src/apis/question.ts
@@ -11,22 +11,34 @@ export const getQuestionsByTeam = async (programId: number, teamId: number) => {
   return new QuestionListDto(data?.data);
 };
 
+/**
+ * 질문을 등록합니다.
+ * - isAnonymous : 질문을 등록할 때 체크박스를 체크했는지 여부. 체크가 되었다면 1, 아니라면 0
+ */
 export interface PostQuestionParams {
   programId: number;
   teamId: number;
   questionContent: string;
   parentsCommentId?: number;
+  commentType: "ANONYMOUS" | "NON_ANONYMOUS";
 }
 export const postQuestion = async ({
   programId,
   teamId,
   questionContent,
   parentsCommentId = -1,
+  commentType = "NON_ANONYMOUS",
 }: PostQuestionParams) => {
   return await https({
     url: API.QUESTION.CREATE,
     method: "POST",
-    data: { programId, teamId, content: questionContent, parentsCommentId },
+    data: {
+      programId,
+      teamId,
+      content: questionContent,
+      parentsCommentId,
+      commentType,
+    },
   });
 };
 
diff --git a/FE/src/app/(admin)/admin/detail/[programId]/page.tsx b/FE/src/app/(admin)/admin/detail/[programId]/page.tsx
index 4eb29799..3cce624d 100644
--- a/FE/src/app/(admin)/admin/detail/[programId]/page.tsx
+++ b/FE/src/app/(admin)/admin/detail/[programId]/page.tsx
@@ -1,5 +1,9 @@
-import AttendeeInfoContainer from "@/components/programDetail/attendee/AttendeeInfo.container";
-import ProgramInfo from "@/components/programDetail/program/ProgramInfo";
+import AttendeeInfoContainer from "@/components/feature/detail/attendee/AttendeeInfo.container";
+import ProgramHeaderSection from "@/components/feature/detail/program/ProgramHeaderSection";
+import ProgramDetailSection from "@/components/feature/detail/program/ProgramDetailSection";
+import ProgramattendModeManageSection from "@/components/feature/detail/program/ProgramAttendStatusManageSection";
+import ProgramPresentationsSection from "@/components/feature/detail/presentation/ProgramPresentationsSection";
+import ProgramDashboardSection from "@/components/feature/detail/Dashboard/ProgramDashboardSection";
 
 interface ProgramDetailPageProps {
   params: {
@@ -12,7 +16,15 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
 
   return (
     <div className="mb-16 space-y-16">
-      <ProgramInfo programId={+programId} accessType="admin" />
+      <section className="space-y-8">
+        <ProgramHeaderSection />
+        <ProgramDetailSection />
+        <ProgramattendModeManageSection />
+        <ProgramPresentationsSection />
+        <div className="mt-12">
+          <ProgramDashboardSection />
+        </div>
+      </section>
       <AttendeeInfoContainer programId={+programId} isLoggedIn />
     </div>
   );
diff --git a/FE/src/app/(guest)/guest/detail/[programId]/page.tsx b/FE/src/app/(guest)/guest/detail/[programId]/page.tsx
index 0701336d..822373a3 100644
--- a/FE/src/app/(guest)/guest/detail/[programId]/page.tsx
+++ b/FE/src/app/(guest)/guest/detail/[programId]/page.tsx
@@ -1,6 +1,9 @@
-import AttendeeInfoContainer from "@/components/programDetail/attendee/AttendeeInfo.container";
-import ProgramInfo from "@/components/programDetail/program/ProgramInfo";
-import UserAttendModalContainer from "@/components/programDetail/userAttendModal/UserAttendModal.container";
+import AttendeeInfoContainer from "@/components/feature/detail/attendee/AttendeeInfo.container";
+import ProgramHeaderSection from "@/components/feature/detail/program/ProgramHeaderSection";
+import ProgramDetailSection from "@/components/feature/detail/program/ProgramDetailSection";
+import UserAttendModalContainer from "@/components/feature/detail/userAttendModal/UserAttendModal.container";
+import ProgramPresentationsSection from "@/components/feature/detail/presentation/ProgramPresentationsSection";
+import BlurDashboard from "@/components/feature/detail/Dashboard/BlurDashboard";
 
 interface ProgramDetailPageProps {
   params: {
@@ -13,10 +16,18 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
 
   return (
     <div className="mb-16 space-y-16">
-      <ProgramInfo programId={+programId} accessType="public" />
+      <section className="space-y-8">
+        <ProgramHeaderSection />
+        <ProgramDetailSection />
+        <ProgramPresentationsSection />
+        <div className="mt-12">
+          <BlurDashboard />
+        </div>
+      </section>
       <AttendeeInfoContainer programId={+programId} isLoggedIn={false} />
       <UserAttendModalContainer programId={+programId} isLoggedIn={false} />
     </div>
   );
 };
+
 export default ProgramDetailPage;
diff --git a/FE/src/app/(private)/(program)/detail/[programId]/page.tsx b/FE/src/app/(private)/(program)/detail/[programId]/page.tsx
index 08621ea5..8ead99d2 100644
--- a/FE/src/app/(private)/(program)/detail/[programId]/page.tsx
+++ b/FE/src/app/(private)/(program)/detail/[programId]/page.tsx
@@ -1,6 +1,9 @@
-import AttendeeInfoContainer from "@/components/programDetail/attendee/AttendeeInfo.container";
-import ProgramInfo from "@/components/programDetail/program/ProgramInfo";
-import UserAttendModalContainer from "@/components/programDetail/userAttendModal/UserAttendModal.container";
+import AttendeeInfoContainer from "@/components/feature/detail/attendee/AttendeeInfo.container";
+import ProgramHeaderSection from "@/components/feature/detail/program/ProgramHeaderSection";
+import ProgramDetailSection from "@/components/feature/detail/program/ProgramDetailSection";
+import UserAttendModalContainer from "@/components/feature/detail/userAttendModal/UserAttendModal.container";
+import ProgramPresentationsSection from "@/components/feature/detail/presentation/ProgramPresentationsSection";
+import ProgramDashboardSection from "@/components/feature/detail/Dashboard/ProgramDashboardSection";
 
 interface ProgramDetailPageProps {
   params: {
@@ -13,10 +16,18 @@ const ProgramDetailPage = ({ params }: ProgramDetailPageProps) => {
 
   return (
     <div className="mb-16 space-y-16">
-      <ProgramInfo programId={+programId} accessType="private" />
+      <section className="space-y-8">
+        <ProgramHeaderSection />
+        <ProgramDetailSection />
+        <ProgramPresentationsSection />
+        <div className="mt-12">
+          <ProgramDashboardSection />
+        </div>
+      </section>
       <AttendeeInfoContainer programId={+programId} isLoggedIn />
       <UserAttendModalContainer programId={+programId} isLoggedIn />
     </div>
   );
 };
+
 export default ProgramDetailPage;
diff --git a/FE/src/components/common/CheckBox/CheckBox.tsx b/FE/src/components/common/CheckBox/CheckBox.tsx
index 2da6b92a..253ab649 100644
--- a/FE/src/components/common/CheckBox/CheckBox.tsx
+++ b/FE/src/components/common/CheckBox/CheckBox.tsx
@@ -1,23 +1,32 @@
+"use client";
+
 import classNames from "classnames";
 import Image from "next/image";
 
 interface CheckBoxProps {
   checked: boolean;
-  onClick: () => void;
+  onClick?: () => void;
   disabled?: boolean;
+  className?: string;
 }
 
-const CheckBox = ({ checked, onClick, disabled = false }: CheckBoxProps) => {
+const CheckBox = ({
+  checked,
+  onClick,
+  disabled = false,
+  className,
+}: CheckBoxProps) => {
   const checkboxClass = classNames(
     "flex h-6 w-6 items-center justify-center rounded border-2 transition duration-100",
     checked ? "border-blue-500 bg-blue-500" : "border-gray-20 bg-background",
     {
       "cursor-not-allowed opacity-0": disabled,
     },
+    className,
   );
 
   const handleCheckBoxClick = () => {
-    !disabled && onClick();
+    !disabled && onClick && onClick();
   };
 
   return (
diff --git a/FE/src/components/common/dashboard/ChatBox.tsx b/FE/src/components/common/dashboard/ChatBox.tsx
new file mode 100644
index 00000000..ac709fa9
--- /dev/null
+++ b/FE/src/components/common/dashboard/ChatBox.tsx
@@ -0,0 +1,190 @@
+"use client";
+import { useState } from "react";
+import MarkdownViewer from "../markdown/MarkdownViewer";
+import { useGetAccessType } from "@/hooks/useAccess";
+
+export interface ChatBoxInnerData {
+  commentId: number;
+  defaultContent: string;
+  time: string;
+  markdownStyle: string;
+  showReplyButton: boolean;
+  writer: string;
+  userInputToModify: string;
+  setUserInputToModify: (content: string) => void;
+  isGuest: boolean;
+  hasUpdateRight: boolean;
+  toggleIsModify: () => void;
+}
+export interface UpdateComment extends ChatBoxInnerData {
+  newContents: string;
+}
+
+interface ChatBoxProps {
+  writer: string;
+  defaultContent: string;
+  time: string;
+  markdownStyle?: string;
+  showReplyButton?: boolean;
+  accessRight: "edit" | "read_only";
+  updateComment: (question: UpdateComment) => void;
+  deleteComment: (question: ChatBoxInnerData) => void;
+  commentId: number;
+  handleReply: () => void;
+}
+
+const ChatBox = ({
+  writer,
+  defaultContent,
+  time,
+  markdownStyle,
+  showReplyButton,
+  accessRight,
+  updateComment,
+  commentId, //TODO: 필요 없는지 확인 필요
+  deleteComment,
+  handleReply,
+}: ChatBoxProps) => {
+  const [userInputToModify, setUserInputToModify] = useState(defaultContent);
+  const [isModifyMode, setIsModify] = useState(false);
+
+  const accessType = useGetAccessType();
+
+  const isGuest = accessType === "public";
+  const hasUpdateRight = accessRight === "edit" && !isGuest;
+
+  const toggleIsModify = () => {
+    if (!hasUpdateRight) return;
+    setIsModify((prev) => !prev);
+    setUserInputToModify(defaultContent);
+  };
+
+  // const handleReply = () => {
+  // setParentsCommentId(commentId);
+  // changeSelectedCommentContent(content);
+  // };
+
+  const handleUpdateComment = () => {
+    if (!isModifyMode) return;
+
+    const newContents = userInputToModify;
+    if (!newContents) return;
+
+    if (defaultContent === newContents) {
+      setIsModify((prev) => !prev);
+      return;
+    }
+
+    // updateComment({ commentId, contents: newContents });
+    // isUpdateSuccess && setUserInputToModify(newContents);
+
+    updateComment({
+      commentId,
+      defaultContent,
+      hasUpdateRight,
+      isGuest,
+      markdownStyle,
+      showReplyButton,
+      time,
+      writer,
+      toggleIsModify,
+      newContents,
+      userInputToModify,
+      setUserInputToModify,
+    });
+
+    setIsModify((prev) => !prev);
+  };
+
+  const handleDeleteComment = () => {
+    if (!hasUpdateRight) return;
+
+    const isOkToDelete = confirm("정말 삭제하시겠습니까?");
+    if (!isOkToDelete) return;
+
+    deleteComment({
+      commentId,
+      defaultContent,
+      time,
+      markdownStyle,
+      showReplyButton,
+      writer,
+      userInputToModify,
+      setUserInputToModify,
+      isGuest,
+      hasUpdateRight,
+      toggleIsModify,
+    });
+    // deleteComment({ commentId });
+    // isDeleteSuccess && setUserInputToModify("");
+  };
+
+  return (
+    <>
+      <div className="relative my-4 h-2 w-fit translate-y-4 bg-emerald-300">
+        <p className="w-fit -translate-y-4 text-lg font-semibold">{writer}</p>
+      </div>
+      <div>
+        {!isModifyMode && (
+          <MarkdownViewer value={defaultContent} className={markdownStyle} />
+        )}
+      </div>
+      {isModifyMode && (
+        <textarea
+          className="mt-4 h-40 w-full rounded-sm border-2 p-4 text-lg"
+          value={userInputToModify}
+          onChange={(e) => setUserInputToModify(e.target.value)}
+        />
+      )}
+      <div className="mt-4 flex items-center gap-4">
+        <span className="opacity-60">{time}</span>
+        {!isModifyMode && showReplyButton && (
+          <>
+            {!isGuest && (
+              <button
+                className="opacity-60 transition-all hover:opacity-100"
+                onClick={handleReply}
+              >
+                답변하기
+              </button>
+            )}
+            {hasUpdateRight && (
+              <button
+                className="opacity-60 transition-all hover:opacity-100"
+                onClick={toggleIsModify}
+              >
+                수정하기
+              </button>
+            )}
+            {hasUpdateRight && (
+              <button
+                className="opacity-60 transition-all hover:opacity-100"
+                onClick={handleDeleteComment}
+              >
+                삭제하기
+              </button>
+            )}
+          </>
+        )}
+        {isModifyMode && (
+          <>
+            <button
+              className="opacity-60 transition-all hover:opacity-100"
+              onClick={handleUpdateComment}
+            >
+              수정완료
+            </button>
+            <button
+              className="opacity-60 transition-all hover:opacity-100"
+              onClick={toggleIsModify}
+            >
+              취소
+            </button>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ChatBox;
diff --git a/FE/src/components/common/form/program/CreateForm.tsx b/FE/src/components/common/form/program/CreateForm.tsx
index 15b0f073..487ae680 100644
--- a/FE/src/components/common/form/program/CreateForm.tsx
+++ b/FE/src/components/common/form/program/CreateForm.tsx
@@ -21,7 +21,7 @@ import {
 import { useMemberSet } from "@/hooks/useMemberForm";
 import { ProgramCategory } from "@/types/program";
 import { TeamInputInfo } from "@/types/team";
-import { checkIsValidateGithubUrl } from "@/utils/github";
+// import { checkIsValidateGithubUrl } from "@/utils/github";
 
 export interface ProgramFormDataState {
   title: string;
@@ -75,6 +75,7 @@ const CreateForm = () => {
       return;
     }
 
+
     //TODO: 백엔드에서 유효성 검사하도록 수정. 백엔드와 논의 필요
     // const isValidGithubUrl = checkIsValidateGithubUrl(programGithubUrl);
     const isValidGithubUrl = true;
diff --git a/FE/src/components/common/tabs/tab/Tab.tsx b/FE/src/components/common/tabs/tab/Tab.tsx
index 0b55eecc..3420c325 100644
--- a/FE/src/components/common/tabs/tab/Tab.tsx
+++ b/FE/src/components/common/tabs/tab/Tab.tsx
@@ -1,3 +1,5 @@
+// TODO 해당 컴포넌트 대신 /tabCompound/Tab 컴포넌트를 하용하기 바랍니다.
+
 import classNames from "classnames";
 import TabItem, { tabColors, tabSizes } from "./TabItem";
 import { TabOption } from "@/types/tab";
diff --git a/FE/src/components/common/tabs/tab/TabAsChild/TabAsChild.tsx b/FE/src/components/common/tabs/tab/TabAsChild/TabAsChild.tsx
deleted file mode 100644
index 29ac9f34..00000000
--- a/FE/src/components/common/tabs/tab/TabAsChild/TabAsChild.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-//TODO: 스크립트 작성 후 삭제할 파일
-"use client";
-import classNames from "classnames";
-import { useState, ReactNode } from "react";
-import TabItem from "../TabItem";
-
-const tabAlign = {
-  line: "flex gap-4",
-  square: "grid grid-cols-2 gap-4",
-} as const;
-
-export const tabColors = {
-  gray: "bg-gray-10 text-gray-30 border-gray-20",
-  yellow: "bg-warning-10 text-warning-30 border-warning-30",
-  teal: "bg-secondary-20 text-tertiary-20 border-tertiary-20",
-  white: "bg-background text-gray-30 border-background",
-  navy: "bg-paragraph text-background border-paragraph",
-};
-
-export const tabSizes = {
-  sm: "min-w-[4.25rem] px-2 py-[0.3rem] text-xs",
-  md: "min-w-[5rem] px-3 py-2 text-sm",
-  lg: "min-w-[6rem] px-4 py-2 text-base",
-};
-
-//TODO: Tab 컴포넌트까지 새롭게 만들어야 함.
-interface TabAsChildProps<ListType> {
-  defaultSelected: ListType;
-  tabItemList?: ListType[];
-  align: keyof typeof tabAlign;
-  children: ({ selectedItem }: { selectedItem: ListType }) => ReactNode;
-  rounded?: boolean;
-  tabSize: keyof typeof tabSizes;
-  nonPickedColor: keyof typeof tabColors;
-  pickedColor: keyof typeof tabColors;
-}
-
-/**
- * [변경] 탭의 사이즈, 색상, 정렬등의 모든 책임을 해당 컴포넌트에서 가집니다.
- *
- * @example - children에 ({selectedItem}) => <div>{selectedItem === "Home" && <HomeContent />}</div> 와 같이 사용합니다.
- *
- */
-
-const TabAsChild = <ListType extends string>({
-  defaultSelected,
-  tabItemList,
-  nonPickedColor,
-  pickedColor,
-  rounded,
-  align,
-  tabSize,
-  children,
-}: TabAsChildProps<ListType>) => {
-  const [selectedItem, setSelectedItem] = useState<ListType>(defaultSelected);
-
-  if (!tabItemList) {
-    throw new Error("optionItemList이 필요합니다.");
-  }
-
-  const tabStyle = classNames(
-    tabAlign[align],
-    "w-full overflow-x-scroll scrollbar-hide",
-  );
-
-  return (
-    <>
-      <div className={tabStyle}>
-        {tabItemList.map((item) => (
-          <TabItem
-            key={item}
-            color={item === selectedItem ? pickedColor : nonPickedColor}
-            size={tabSize}
-            text={item}
-            onClick={() => setSelectedItem(item)}
-            rounded={rounded}
-          />
-        ))}
-      </div>
-      {children({ selectedItem })}
-    </>
-  );
-};
-
-export default TabAsChild;
diff --git a/FE/src/components/common/tabs/tab/TabCompound/TabCompound.tsx b/FE/src/components/common/tabs/tab/TabCompound/TabCompound.tsx
index bc626c16..285c6fe6 100644
--- a/FE/src/components/common/tabs/tab/TabCompound/TabCompound.tsx
+++ b/FE/src/components/common/tabs/tab/TabCompound/TabCompound.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import classNames from "classnames";
-import React, {
+import {
   createContext,
   useContext,
   useState,
diff --git a/FE/src/components/feature/detail/Dashboard/BlurDashboard.tsx b/FE/src/components/feature/detail/Dashboard/BlurDashboard.tsx
new file mode 100644
index 00000000..b5d4a6c4
--- /dev/null
+++ b/FE/src/components/feature/detail/Dashboard/BlurDashboard.tsx
@@ -0,0 +1,117 @@
+import { TeamInfo } from "@/types/team";
+import { Comment } from "@/apis/dtos/question.dto";
+import Chat from "./components/Chat";
+import CheckBox from "@/components/common/CheckBox/CheckBox";
+import StatusToggleItem from "@/components/common/StatusToggleItem";
+import Title from "@/components/common/Title/Title";
+import classNames from "classnames";
+
+const fakeTeams: TeamInfo[] = [
+  {
+    teamId: 1,
+    teamName: "Blackcompany",
+  },
+  {
+    teamId: 2,
+    teamName: "whitecompany",
+  },
+  {
+    teamId: 3,
+    teamName: "Team3",
+  },
+  {
+    teamId: 4,
+    teamName: "이름이 어떻게",
+  },
+  {
+    teamId: 5,
+    teamName: "econo",
+  },
+];
+
+const comments: Comment[] = [
+  {
+    commentId: 1,
+    teamId: 1,
+    content:
+      "교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다?? 공무원은 국민전체에 대한 봉사자이며, 국민에 대하여 책임을 진다.\n\n중앙선거관리위원회는 법령의 범위안에서 선거관리·국민투표관리 또는 정당사무에 관한 규칙을 제정할 수 있으며, 법률에 저촉되지 아니하는 범위안에서 내부규율에 관한 규칙을 제정할 수 있다?",
+    accessRight: "read_only",
+    writer: "이르음",
+    time: "2021-10-01",
+    answers: [
+      {
+        writer: "홍길동",
+        content:
+          "통신·방송의 시설기준과 신문의 기능을 보장하기 위하여 필요한 사항은 법률로 정한다. 평화통일정책의 수립에 관한 대통령의 자문에 응하기 위하여 민주평화통일자문회의를 둘 수 있다.\n\n국무위원은 국무총리의 제청으로 대통령이 임명한다. 대통령은 조약을 체결·비준하고, 외교사절을 신임·접수 또는 파견하며, 선전포고와 강화를 한다.",
+        accessRight: "read_only",
+        commentId: 1,
+        time: "2021-10-01",
+      },
+      {
+        writer: "김똥개",
+        content: "답변1",
+        accessRight: "read_only",
+        commentId: 1,
+        time: "2021-10-01",
+      },
+    ],
+  },
+];
+
+const BlurDashboard = () => {
+  return (
+    <>
+      <Title text="질문 게시판" />
+      <div className="mt-4" />
+      <div className="pointer-events-none select-none blur-sm">
+        {/* tab */}
+        <div className="flex gap-4">
+          {fakeTeams.map(({ teamName }, i) => (
+            <button
+              className={classNames(
+                "flex h-fit w-fit min-w-[5rem] items-center justify-center rounded-md border border-gray-300 px-3 py-2 text-sm font-semibold",
+                {
+                  "bg-paragraph text-background": i === 0,
+                },
+              )}
+            >
+              <p>{teamName}</p>
+            </button>
+          ))}
+        </div>
+
+        {/* content */}
+        <div className="mt-8 flex flex-col gap-8">
+          <div className="flex max-h-[36rem] w-full flex-col overflow-hidden overflow-y-auto rounded-sm border">
+            {comments.map((props) => (
+              <Chat key={props.commentId} {...props} />
+            ))}
+          </div>
+
+          {/* input */}
+          <div>
+            <div className="flex items-center justify-between gap-4">
+              <p className="text-xl font-bold">@Blackcompany 에게 질문하기</p>
+              <label className="flex select-none items-center justify-end gap-2 text-lg">
+                <CheckBox checked={false} className="h-5 w-5" />
+                익명으로 질문하기
+              </label>
+            </div>
+            <div className="mb-2 " />
+            <div className="relative">
+              <textarea
+                className={`h-40 w-full resize-none rounded-sm border-2 p-4 px-8 pr-40 text-lg`}
+                placeholder="질문을 입력해주세요"
+              />
+              <button className="absolute right-4 top-1/2 -translate-y-1/2">
+                <StatusToggleItem color="green" text="전송" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BlurDashboard;
diff --git a/FE/src/components/feature/detail/Dashboard/ProgramDashboardSection.tsx b/FE/src/components/feature/detail/Dashboard/ProgramDashboardSection.tsx
new file mode 100644
index 00000000..dc9eddb7
--- /dev/null
+++ b/FE/src/components/feature/detail/Dashboard/ProgramDashboardSection.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Title from "@/components/common/Title/Title";
+import DashboardContent from "./components/DashboardContent";
+import DashboardInput from "./components/DashboardInput";
+import { useGetProgramId } from "@/hooks/usePrograms";
+import TeamsTab from "@/components/feature/detail/Dashboard/TeamsTab";
+
+const ProgramDashboardSection = () => {
+  const programId = useGetProgramId();
+
+  return (
+    <section>
+      <Title text="질문 게시판" />
+      <div className="mt-4" />
+      <TeamsTab programId={programId}>
+        {({ teamId, teamName }) => (
+          <div className="mt-8 flex flex-col gap-8">
+            <DashboardContent programId={programId} selectedTeamId={teamId} />
+            <DashboardInput
+              programId={programId}
+              selectedTeamId={teamId}
+              selectedTeamName={teamName}
+            />
+          </div>
+        )}
+      </TeamsTab>
+    </section>
+  );
+};
+
+export default ProgramDashboardSection;
diff --git a/FE/src/components/feature/detail/Dashboard/TeamsTab.tsx b/FE/src/components/feature/detail/Dashboard/TeamsTab.tsx
new file mode 100644
index 00000000..9308020b
--- /dev/null
+++ b/FE/src/components/feature/detail/Dashboard/TeamsTab.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import Tab from "@/components/common/tabs/tab/TabCompound/TabCompound";
+import { useTeamQuery } from "@/hooks/query/useTeamQuery";
+
+interface SelectedItemProps {
+  teamName: string;
+  teamId: number;
+}
+
+interface TeamsTabProps {
+  programId: number;
+  children: (selectedItem: SelectedItemProps) => JSX.Element;
+}
+const TeamsTab = ({ programId, children }: TeamsTabProps) => {
+  const { data: teamsQueryData, isLoading, isError } = useTeamQuery(programId);
+
+  if (isLoading) return null;
+  if (isError) return null;
+
+  const { teams } = teamsQueryData;
+  if (teams.length === 0) return null;
+
+  const teamNameArray = teams.map(({ teamName }) => teamName);
+
+  return (
+    <Tab<string>
+      align="line"
+      defaultSelected={`${teams[0].teamName}`}
+      nonPickedColor="gray"
+      pickedColor="navy"
+      tabItemList={teamNameArray}
+      tabSize="md"
+    >
+      <Tab.List>
+        {teamNameArray.map((name, index) => (
+          <Tab.Item key={`${name}-${index}`} text={name} />
+        ))}
+      </Tab.List>
+      <Tab.Content<string>>
+        {({ selectedItem }) =>
+          children({
+            teamName: selectedItem,
+            teamId: teams.find(({ teamName }) => teamName === selectedItem)
+              ?.teamId,
+          })
+        }
+      </Tab.Content>
+    </Tab>
+  );
+};
+
+export default TeamsTab;
diff --git a/FE/src/components/programDetail/program/DashboardCompound/Board/Chat.tsx b/FE/src/components/feature/detail/Dashboard/components/Chat.tsx
similarity index 86%
rename from FE/src/components/programDetail/program/DashboardCompound/Board/Chat.tsx
rename to FE/src/components/feature/detail/Dashboard/components/Chat.tsx
index c8c3930f..c6d5f29f 100644
--- a/FE/src/components/programDetail/program/DashboardCompound/Board/Chat.tsx
+++ b/FE/src/components/feature/detail/Dashboard/components/Chat.tsx
@@ -1,6 +1,8 @@
-import ChatList from "./common/ChatList";
-import ReplyChat from "./ReplyChat";
+"use client";
+
+import ChatList from "./ChatList";
 import { Comment } from "@/apis/dtos/question.dto";
+import ReplyChat from "./ReplyChat";
 
 const Chat = ({
   commentId,
@@ -13,6 +15,8 @@ const Chat = ({
   return (
     <div className="border p-4">
       <ChatList
+        showReplyButton={true}
+        markdownStyle=""
         commentId={commentId}
         writer={writer}
         accessRight={accessRight}
diff --git a/FE/src/components/feature/detail/Dashboard/components/ChatList.tsx b/FE/src/components/feature/detail/Dashboard/components/ChatList.tsx
new file mode 100644
index 00000000..7e9442ad
--- /dev/null
+++ b/FE/src/components/feature/detail/Dashboard/components/ChatList.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  useDeleteQuestion,
+  useUpdateQuestion,
+} from "@/hooks/query/useQuestionQuery";
+import ChatBox, {
+  ChatBoxInnerData,
+  UpdateComment,
+} from "@/components/common/dashboard/ChatBox";
+import { useSetAtom } from "jotai";
+import dashboardAtoms from "@/store/dashboardAtoms";
+
+interface ChatListProps {
+  commentId: number;
+  writer: string;
+  accessRight: "edit" | "read_only";
+  time: string;
+  content: string;
+  markdownStyle?: string;
+  showReplyButton?: boolean;
+}
+const ChatList = ({
+  writer,
+  accessRight,
+  commentId,
+  content,
+  time,
+  markdownStyle,
+  showReplyButton = true,
+}: ChatListProps) => {
+  const setSelectedCommentId = useSetAtom(dashboardAtoms.selectedCommentId);
+  const setSelectedCommentContent = useSetAtom(
+    dashboardAtoms.selectedCommentContent,
+  );
+  const setIsAnonymous = useSetAtom(dashboardAtoms.commentType);
+
+  const { mutate: updateComment, isSuccess: isUpdateSuccess } =
+    useUpdateQuestion();
+  const { mutate: deleteComment, isSuccess: isDeleteSuccess } =
+    useDeleteQuestion();
+
+  const handleReply = () => {
+    setSelectedCommentId(commentId);
+    setSelectedCommentContent(content);
+    setIsAnonymous("NON_ANONYMOUS");
+  };
+
+  const handleUpdateComment = ({
+    newContents,
+    setUserInputToModify,
+  }: UpdateComment) => {
+    updateComment({ commentId, contents: newContents });
+    isUpdateSuccess && setUserInputToModify(newContents);
+  };
+
+  const handleDeleteComment = ({ setUserInputToModify }: ChatBoxInnerData) => {
+    deleteComment(commentId);
+    isDeleteSuccess && setUserInputToModify("");
+  };
+
+  return (
+    <ChatBox
+      writer={writer}
+      accessRight={accessRight}
+      commentId={commentId}
+      defaultContent={content}
+      deleteComment={handleDeleteComment}
+      handleReply={handleReply}
+      time={time}
+      updateComment={handleUpdateComment}
+      markdownStyle={markdownStyle}
+      showReplyButton={showReplyButton}
+    />
+  );
+};
+
+export default ChatList;
diff --git a/FE/src/components/programDetail/program/DashboardCompound/Board/Board.tsx b/FE/src/components/feature/detail/Dashboard/components/DashboardContent.tsx
similarity index 57%
rename from FE/src/components/programDetail/program/DashboardCompound/Board/Board.tsx
rename to FE/src/components/feature/detail/Dashboard/components/DashboardContent.tsx
index 232b5d56..f855942e 100644
--- a/FE/src/components/programDetail/program/DashboardCompound/Board/Board.tsx
+++ b/FE/src/components/feature/detail/Dashboard/components/DashboardContent.tsx
@@ -1,14 +1,17 @@
-import { useContext } from "react";
-import { DashboardContext } from "../DashboardWrapper";
-import Chat from "./Chat";
-import { useGetQuestion } from "@/hooks/query/useQuestionQuery";
+"use client";
 
-const Board = () => {
-  const {
-    teamValues: { selectedTeamId },
-    programValue: { programId },
-  } = useContext(DashboardContext);
-  const { data, isLoading, error } = useGetQuestion(programId, selectedTeamId);
+import Chat from "@/components/feature/detail/Dashboard/components/Chat";
+import { useGetQuestions } from "@/hooks/query/useQuestionQuery";
+
+interface DashboardContentProps {
+  programId: number;
+  selectedTeamId: number;
+}
+const DashboardContent = ({
+  programId,
+  selectedTeamId,
+}: DashboardContentProps) => {
+  const { data, isLoading, error } = useGetQuestions(programId, selectedTeamId);
 
   // TODO: Loader 적용, 에러 처리
   if (isLoading) return <div>Loading...</div>;
@@ -30,4 +33,4 @@ const Board = () => {
   );
 };
 
-export default Board;
+export default DashboardContent;
diff --git a/FE/src/components/feature/detail/Dashboard/components/DashboardInput.tsx b/FE/src/components/feature/detail/Dashboard/components/DashboardInput.tsx
new file mode 100644
index 00000000..04df49b6
--- /dev/null
+++ b/FE/src/components/feature/detail/Dashboard/components/DashboardInput.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { PostQuestionParams } from "@/apis/question";
+import CheckBox from "@/components/common/CheckBox/CheckBox";
+import StatusToggleItem from "@/components/common/StatusToggleItem";
+import { usePostQuestion } from "@/hooks/query/useQuestionQuery";
+import { useGetAccessType } from "@/hooks/useAccess";
+import dashboardAtoms from "@/store/dashboardAtoms";
+import { useAtom } from "jotai";
+
+interface DashboardInputProps {
+  programId: number;
+  selectedTeamId: number;
+  selectedTeamName: string;
+}
+
+//TODO: UI 분리하기
+const DashboardInput = ({
+  programId,
+  selectedTeamId,
+  selectedTeamName,
+}: DashboardInputProps) => {
+  const [commentType, setCommentType] = useAtom(dashboardAtoms.commentType);
+  const [questionInput, setQuestionInput] = useAtom(
+    dashboardAtoms.questionInput,
+  );
+  const [selectedCommentId, setSelectedCommentId] = useAtom(
+    dashboardAtoms.selectedCommentId,
+  );
+  const [selectedCommentContent, setSelectedCommentContent] = useAtom(
+    dashboardAtoms.selectedCommentContent,
+  );
+
+  const { mutate: postQuestion } = usePostQuestion();
+  const isReply = selectedCommentId !== -1;
+
+  const accessType = useGetAccessType();
+
+  const isAbleToPost = accessType === "private";
+
+  const handlePostQuestion = () => {
+    const questionContent = questionInput.trim();
+
+    if (!questionContent) return;
+    if (!isAbleToPost) return;
+
+    const postQuestionParams: PostQuestionParams = {
+      programId,
+      teamId: selectedTeamId,
+      questionContent,
+      parentsCommentId: selectedCommentId,
+      commentType,
+    };
+
+    postQuestion(postQuestionParams);
+    setQuestionInput("");
+    setSelectedCommentId(-1);
+    setSelectedCommentContent("");
+  };
+
+  const resetSelectedComment = () => {
+    setSelectedCommentId(-1);
+    setSelectedCommentContent("");
+  };
+
+  return (
+    <div>
+      {isReply ? (
+        <div className="truncate text-lg font-semibold">
+          <button className="px-2 " onClick={resetSelectedComment}>
+            x
+          </button>
+          <p className="inline text-xl font-bold">답변하기 :</p>
+          <p className="ml-2 inline opacity-50">{selectedCommentContent}</p>
+        </div>
+      ) : (
+        <div className="flex items-center justify-between gap-4">
+          <p className="text-xl font-bold">@{selectedTeamName} 에게 질문하기</p>
+          <label
+            className="flex select-none items-center justify-end gap-2 text-lg"
+            onClick={() =>
+              setCommentType((prev) =>
+                prev === "ANONYMOUS" ? "NON_ANONYMOUS" : "ANONYMOUS",
+              )
+            }
+          >
+            <CheckBox
+              checked={commentType === "ANONYMOUS"}
+              className="h-5 w-5"
+            />
+            익명으로 질문하기
+          </label>
+        </div>
+      )}
+      <div className="mb-2 " />
+      <div className="relative">
+        <textarea
+          className={`min-h-40 w-full rounded-sm border-2 p-4 px-8 pr-40 text-lg`}
+          placeholder="질문을 입력해주세요"
+          value={questionInput}
+          onChange={(e) => setQuestionInput(e.target.value)}
+        />
+        <button
+          className="absolute right-4 top-1/2 -translate-y-1/2"
+          onClick={handlePostQuestion}
+        >
+          <StatusToggleItem
+            color={isAbleToPost ? "green" : "gray"}
+            text="전송"
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardInput;
diff --git a/FE/src/components/programDetail/program/DashboardCompound/Board/ReplyChat.tsx b/FE/src/components/feature/detail/Dashboard/components/ReplyChat.tsx
similarity index 86%
rename from FE/src/components/programDetail/program/DashboardCompound/Board/ReplyChat.tsx
rename to FE/src/components/feature/detail/Dashboard/components/ReplyChat.tsx
index 127f5a2a..0aad78a7 100644
--- a/FE/src/components/programDetail/program/DashboardCompound/Board/ReplyChat.tsx
+++ b/FE/src/components/feature/detail/Dashboard/components/ReplyChat.tsx
@@ -1,4 +1,4 @@
-import ChatList from "./common/ChatList";
+import ChatList from "./ChatList";
 import { Answer } from "@/apis/dtos/question.dto";
 
 interface ReplyChatProps extends Answer {}
@@ -18,7 +18,7 @@ const ReplyChat = ({
         commentId={commentId}
         accessRight={accessRight}
         markdownStyle="!bg-inherit"
-        showReplyButton={false}
+        showReplyButton={true}
       />
     </div>
   );
diff --git a/FE/src/components/programDetail/attendee/AttendeeInfo.container.tsx b/FE/src/components/feature/detail/attendee/AttendeeInfo.container.tsx
similarity index 100%
rename from FE/src/components/programDetail/attendee/AttendeeInfo.container.tsx
rename to FE/src/components/feature/detail/attendee/AttendeeInfo.container.tsx
diff --git a/FE/src/components/programDetail/attendee/AttendeeInfo.loader.tsx b/FE/src/components/feature/detail/attendee/AttendeeInfo.loader.tsx
similarity index 100%
rename from FE/src/components/programDetail/attendee/AttendeeInfo.loader.tsx
rename to FE/src/components/feature/detail/attendee/AttendeeInfo.loader.tsx
diff --git a/FE/src/components/programDetail/attendee/AttendeeInfo.tsx b/FE/src/components/feature/detail/attendee/AttendeeInfo.tsx
similarity index 100%
rename from FE/src/components/programDetail/attendee/AttendeeInfo.tsx
rename to FE/src/components/feature/detail/attendee/AttendeeInfo.tsx
diff --git a/FE/src/components/programDetail/attendee/AttendeeStatus.tsx b/FE/src/components/feature/detail/attendee/AttendeeStatus.tsx
similarity index 100%
rename from FE/src/components/programDetail/attendee/AttendeeStatus.tsx
rename to FE/src/components/feature/detail/attendee/AttendeeStatus.tsx
diff --git a/FE/src/components/programDetail/attendee/BluredAttedee.tsx b/FE/src/components/feature/detail/attendee/BluredAttedee.tsx
similarity index 100%
rename from FE/src/components/programDetail/attendee/BluredAttedee.tsx
rename to FE/src/components/feature/detail/attendee/BluredAttedee.tsx
diff --git a/FE/src/components/programDetail/program/ProgramDetail.skeleton.tsx b/FE/src/components/feature/detail/loader/ProgramDetail.skeleton.tsx
similarity index 100%
rename from FE/src/components/programDetail/program/ProgramDetail.skeleton.tsx
rename to FE/src/components/feature/detail/loader/ProgramDetail.skeleton.tsx
diff --git a/FE/src/components/programDetail/program/ProgramHeader.skeleton.tsx b/FE/src/components/feature/detail/loader/ProgramHeader.skeleton.tsx
similarity index 100%
rename from FE/src/components/programDetail/program/ProgramHeader.skeleton.tsx
rename to FE/src/components/feature/detail/loader/ProgramHeader.skeleton.tsx
diff --git a/FE/src/components/programDetail/program/ProgramPresentations.tsx b/FE/src/components/feature/detail/presentation/ProgramPresentationsSection.tsx
similarity index 75%
rename from FE/src/components/programDetail/program/ProgramPresentations.tsx
rename to FE/src/components/feature/detail/presentation/ProgramPresentationsSection.tsx
index e38a302c..d4e8fe6e 100644
--- a/FE/src/components/programDetail/program/ProgramPresentations.tsx
+++ b/FE/src/components/feature/detail/presentation/ProgramPresentationsSection.tsx
@@ -4,17 +4,23 @@ import Image from "next/image";
 import Link from "next/link";
 import Title from "@/components/common/Title/Title";
 import usePresentations from "@/hooks/query/usePresentations";
+import { useQueryClient } from "@tanstack/react-query";
+import { useGetProgramId } from "@/hooks/usePrograms";
+
+const ProgramPresentationsSection = () => {
+  const programId = useGetProgramId();
+  const queryClient = useQueryClient();
+
+  const githubUrl = queryClient.getQueryData(["githubUrl", programId]);
 
-interface ProgramPresentationsProps {
-  programId: number;
-}
-const ProgramPresentations = ({ programId }: ProgramPresentationsProps) => {
   const {
     data: presentations,
     isLoading,
     isError,
   } = usePresentations(programId);
 
+  if (githubUrl) return null;
+
   if (isError) return null;
 
   if (isLoading) return null;
@@ -48,4 +54,4 @@ const ProgramPresentations = ({ programId }: ProgramPresentationsProps) => {
   );
 };
 
-export default ProgramPresentations;
+export default ProgramPresentationsSection;
diff --git a/FE/src/components/programDetail/program/EditAndDeleteButton.tsx b/FE/src/components/feature/detail/program/EditAndDeleteButton.tsx
similarity index 100%
rename from FE/src/components/programDetail/program/EditAndDeleteButton.tsx
rename to FE/src/components/feature/detail/program/EditAndDeleteButton.tsx
diff --git a/FE/src/components/programDetail/program/ProgramAttendStatusManageSection.tsx b/FE/src/components/feature/detail/program/ProgramAttendStatusManageSection.tsx
similarity index 94%
rename from FE/src/components/programDetail/program/ProgramAttendStatusManageSection.tsx
rename to FE/src/components/feature/detail/program/ProgramAttendStatusManageSection.tsx
index 3c38b23e..6380a21c 100644
--- a/FE/src/components/programDetail/program/ProgramAttendStatusManageSection.tsx
+++ b/FE/src/components/feature/detail/program/ProgramAttendStatusManageSection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // TODO: 리팩토링 필요 : 중복되는 코드 줄이기
 // 출석 상태값만 받아오는 API 필요
 
@@ -6,17 +8,13 @@ import StatusToggleItem from "@/components/common/StatusToggleItem";
 import Title from "@/components/common/Title/Title";
 import {
   useGetProgramByProgramId,
-  // useGetProgramAttendModeAndStatus,
-  // useGetProgramByProgramId,
   useUpdateProgramAttendMode,
 } from "@/hooks/query/useProgramQuery";
+import { useGetProgramId } from "@/hooks/usePrograms";
+
+const ProgramattendModeManageSection = () => {
+  const programId = useGetProgramId();
 
-interface ProgramattendModeManageSectionProps {
-  programId: number;
-}
-const ProgramattendModeManageSection = ({
-  programId,
-}: ProgramattendModeManageSectionProps) => {
   const { mutate: updateProgramAttendMode, isLoading } =
     useUpdateProgramAttendMode(programId);
 
diff --git a/FE/src/components/feature/detail/program/ProgramDetailSection.tsx b/FE/src/components/feature/detail/program/ProgramDetailSection.tsx
new file mode 100644
index 00000000..47ee12e1
--- /dev/null
+++ b/FE/src/components/feature/detail/program/ProgramDetailSection.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import MarkdownViewer from "@/components/common/markdown/MarkdownViewer";
+import { useGetAccessType } from "@/hooks/useAccess";
+import { useGetProgramId } from "@/hooks/usePrograms";
+import { useGetProgramByProgramId } from "@/hooks/query/useProgramQuery";
+import ProgramDetailSkeleton from "../loader/ProgramDetail.skeleton";
+
+const ProgramDetailSection = () => {
+  const isAbleToEdit = useGetAccessType() === "admin";
+  const programId = useGetProgramId();
+
+  const {
+    data: programData,
+    isLoading,
+    isError,
+  } = useGetProgramByProgramId(programId, isAbleToEdit);
+
+  if (isLoading) return <ProgramDetailSkeleton />;
+  if (isError) return <div>에러 발생</div>;
+
+  const { content } = programData;
+
+  return <MarkdownViewer value={content} />;
+};
+export default ProgramDetailSection;
diff --git a/FE/src/components/programDetail/program/ProgramHeader.tsx b/FE/src/components/feature/detail/program/ProgramHeaderSection.tsx
similarity index 53%
rename from FE/src/components/programDetail/program/ProgramHeader.tsx
rename to FE/src/components/feature/detail/program/ProgramHeaderSection.tsx
index cd4b1ac3..3e4e062b 100644
--- a/FE/src/components/programDetail/program/ProgramHeader.tsx
+++ b/FE/src/components/feature/detail/program/ProgramHeaderSection.tsx
@@ -1,18 +1,31 @@
+"use client";
+
 import EditAndDeleteButton from "./EditAndDeleteButton";
-import { ProgramInfoDto } from "@/apis/dtos/program.dto";
 import TabItem from "@/components/common/tabs/tab/TabItem";
 import Title from "@/components/common/Title/Title";
 import PROGRAM from "@/constants/PROGRAM";
+import { useGetProgramByProgramId } from "@/hooks/query/useProgramQuery";
+import { useGetAccessType } from "@/hooks/useAccess";
 import { formatTimestamp } from "@/utils/convert";
-
-interface ProgramHeaderProps {
-  data: ProgramInfoDto;
-}
+import { useGetProgramId } from "@/hooks/usePrograms";
+import ProgramHeaderSkeleton from "../loader/ProgramHeader.skeleton";
 
 const DEADLINE_TEXT = "행사일정 : ";
 
-const ProgramHeader = ({ data }: ProgramHeaderProps) => {
-  const { category, title, deadLine, programId, accessRight } = data;
+const ProgramHeaderSection = () => {
+  const isAbleToEdit = useGetAccessType() === "admin";
+  const programId = useGetProgramId();
+
+  const {
+    data: programData,
+    isLoading,
+    isError,
+  } = useGetProgramByProgramId(programId, isAbleToEdit);
+
+  if (isLoading) return <ProgramHeaderSkeleton />;
+  if (isError) return <div>에러 발생</div>;
+
+  const { accessRight, category, deadLine, title } = programData;
 
   const categoryText = PROGRAM.CATEGORY_TAB[category]?.text ?? "기타";
 
@@ -31,4 +44,4 @@ const ProgramHeader = ({ data }: ProgramHeaderProps) => {
     </section>
   );
 };
-export default ProgramHeader;
+export default ProgramHeaderSection;
diff --git a/FE/src/components/programDetail/userAttendModal/AttendStatusModal.loader.tsx b/FE/src/components/feature/detail/userAttendModal/AttendStatusModal.loader.tsx
similarity index 100%
rename from FE/src/components/programDetail/userAttendModal/AttendStatusModal.loader.tsx
rename to FE/src/components/feature/detail/userAttendModal/AttendStatusModal.loader.tsx
diff --git a/FE/src/components/programDetail/userAttendModal/AttendStatusView.tsx b/FE/src/components/feature/detail/userAttendModal/AttendStatusView.tsx
similarity index 91%
rename from FE/src/components/programDetail/userAttendModal/AttendStatusView.tsx
rename to FE/src/components/feature/detail/userAttendModal/AttendStatusView.tsx
index e925d20e..3aff4cb8 100644
--- a/FE/src/components/programDetail/userAttendModal/AttendStatusView.tsx
+++ b/FE/src/components/feature/detail/userAttendModal/AttendStatusView.tsx
@@ -17,10 +17,7 @@ const AttendStatusView = ({ userInfo, programId }: AttendStatusViewProps) => {
     programId,
   ]);
 
-  console.log(programType);
-  console.log(attendStatus);
   const { demand_text, text, color } = ATTEND_STATUS.USER[attendStatus];
-  console.log(demand_text, text, color);
   const isDemandNonResponse =
     programType === "demand" && attendStatus === "nonResponse";
   const displayText = isDemandNonResponse ? demand_text : text;
diff --git a/FE/src/components/programDetail/userAttendModal/AttendToggleLabel.tsx b/FE/src/components/feature/detail/userAttendModal/AttendToggleLabel.tsx
similarity index 100%
rename from FE/src/components/programDetail/userAttendModal/AttendToggleLabel.tsx
rename to FE/src/components/feature/detail/userAttendModal/AttendToggleLabel.tsx
diff --git a/FE/src/components/programDetail/userAttendModal/LoginModal.tsx b/FE/src/components/feature/detail/userAttendModal/LoginModal.tsx
similarity index 100%
rename from FE/src/components/programDetail/userAttendModal/LoginModal.tsx
rename to FE/src/components/feature/detail/userAttendModal/LoginModal.tsx
diff --git a/FE/src/components/programDetail/userAttendModal/UserAttendModal.container.tsx b/FE/src/components/feature/detail/userAttendModal/UserAttendModal.container.tsx
similarity index 100%
rename from FE/src/components/programDetail/userAttendModal/UserAttendModal.container.tsx
rename to FE/src/components/feature/detail/userAttendModal/UserAttendModal.container.tsx
diff --git a/FE/src/components/programDetail/userAttendModal/UserAttendModal.tsx b/FE/src/components/feature/detail/userAttendModal/UserAttendModal.tsx
similarity index 63%
rename from FE/src/components/programDetail/userAttendModal/UserAttendModal.tsx
rename to FE/src/components/feature/detail/userAttendModal/UserAttendModal.tsx
index 52d79854..5104083f 100644
--- a/FE/src/components/programDetail/userAttendModal/UserAttendModal.tsx
+++ b/FE/src/components/feature/detail/userAttendModal/UserAttendModal.tsx
@@ -10,7 +10,7 @@ import {
 } from "@/hooks/query/useUserQuery";
 import { EditableStatus } from "@/types/attendStatusModal";
 import { AttendStatus } from "@/types/member";
-import { ProgramStatus } from "@/types/program";
+import { ProgramAttendStatus, ProgramStatus } from "@/types/program";
 
 interface UserAttendModalProps {
   programId: number;
@@ -24,6 +24,10 @@ const UserAttendModal = ({ programId }: UserAttendModalProps) => {
   if (isLoading) return <AttendStatusModalLoader />;
 
   const { attendStatus } = userInfo;
+  const attendMode = queryClient.getQueryData<ProgramAttendStatus>([
+    "attendMode",
+    programId,
+  ]);
   const programStatus = queryClient.getQueryData<ProgramStatus>([
     "programStatus",
     programId,
@@ -31,16 +35,32 @@ const UserAttendModal = ({ programId }: UserAttendModalProps) => {
 
   const getEditableStatus = (
     attendStatus: AttendStatus,
+    programAttendMode: ProgramAttendStatus,
     programStatus: ProgramStatus,
   ): EditableStatus => {
-    if (attendStatus === "nonRelated") return "NON_RELATED";
-    if (programStatus === "end" || attendStatus === "absent") return "INACTIVE";
-    if (attendStatus === "attend" || attendStatus === "late")
-      return "ALREADY_ATTENDED";
-    return "EDITABLE";
+    if (attendStatus === "nonRelated") {
+      return "NON_RELATED";
+    }
+    if (programStatus === "active") {
+      // 당일날에
+      if (programAttendMode === "attend" || programAttendMode === "late") {
+        // 출석 중이면
+        if (attendStatus === "attend" || attendStatus === "late")
+          // 내 상태가 참석 또는 지각이면
+          return "ALREADY_ATTENDED"; // 변경 불가
+
+        return "EDITABLE"; //내 상태가 없다면 변경 가능
+      }
+      if (programAttendMode === "end") return "NON_RELATED"; // 당일날 종료되었으면 변경 불가
+    }
+    return "INACTIVE"; // 당일날이 아니면 변경 불가
   };
 
-  const editableStatus = getEditableStatus(attendStatus, programStatus);
+  const editableStatus = getEditableStatus(
+    attendStatus,
+    attendMode,
+    programStatus,
+  );
 
   const handleSelectorClick = () => {
     if (editableStatus === "EDITABLE")
diff --git a/FE/src/components/programDetail/program/DashboardCompound/Board/common/ChatList.tsx b/FE/src/components/programDetail/program/DashboardCompound/Board/common/ChatList.tsx
deleted file mode 100644
index ab84f030..00000000
--- a/FE/src/components/programDetail/program/DashboardCompound/Board/common/ChatList.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useContext, useState } from "react";
-import { DashboardContext } from "../../DashboardWrapper";
-import MarkdownViewer from "@/components/common/markdown/MarkdownViewer";
-
-//TODO: headless 하게 변경해야함
-interface ChatListProps {
-  commentId: number;
-  writer: string;
-  accessRight: "edit" | "read_only";
-  time: string;
-  content: string;
-  markdownStyle?: string;
-  showReplyButton?: boolean;
-}
-const ChatList = ({
-  writer,
-  accessRight,
-  commentId,
-  content,
-  time,
-  markdownStyle,
-  showReplyButton = true,
-}: ChatListProps) => {
-  const {
-    accessType,
-    commentValues: {
-      create: { setParentsCommentId, changeSelectedCommentContent },
-      update: { updateComment, isUpdateSuccess },
-      delete: { deleteComment, isDeleteSuccess },
-    },
-  } = useContext(DashboardContext);
-
-  const [userInputToModify, setUserInputToModify] = useState(content);
-  const [isModify, setIsModify] = useState(false);
-
-  const isGuest = accessType === "public";
-  const isHasUpdateRight = accessRight === "edit" && !isGuest;
-
-  const handleReply = () => {
-    setParentsCommentId(commentId);
-    changeSelectedCommentContent(content);
-  };
-
-  const toggleIsModify = () => {
-    if (!isHasUpdateRight) return;
-    setIsModify((prev) => !prev);
-    setUserInputToModify(content);
-  };
-
-  const handleUpdateComment = () => {
-    if (!isModify) return;
-
-    const newContents = userInputToModify;
-    if (!newContents) return;
-
-    if (content === newContents) {
-      setIsModify((prev) => !prev);
-      return;
-    }
-
-    updateComment({ commentId, contents: newContents });
-    isUpdateSuccess && setUserInputToModify(newContents);
-
-    setIsModify((prev) => !prev);
-  };
-
-  const handleDeleteComment = () => {
-    if (!isHasUpdateRight) return;
-
-    const isOkToDelete = confirm("정말 삭제하시겠습니까?");
-    if (!isOkToDelete) return;
-    deleteComment(commentId);
-    isDeleteSuccess && setUserInputToModify("");
-  };
-  return (
-    <>
-      <div className="relative my-4 h-2 w-fit translate-y-4 bg-emerald-300">
-        <p className="w-fit -translate-y-4 text-lg font-semibold">{writer}</p>
-      </div>
-      <div>
-        {!isModify && (
-          <MarkdownViewer value={content} className={markdownStyle} />
-        )}
-      </div>
-      {isModify && (
-        <textarea
-          className="mt-4 h-40 w-full rounded-sm border-2 p-4 text-lg"
-          value={userInputToModify}
-          onChange={(e) => setUserInputToModify(e.target.value)}
-        />
-      )}
-      <div className="mt-4 flex items-center gap-4">
-        <span className="opacity-60">{time}</span>
-        {!isModify && showReplyButton && (
-          <>
-            {!isGuest && (
-              <button
-                className="opacity-60 transition-all hover:opacity-100"
-                onClick={handleReply}
-              >
-                답변하기
-              </button>
-            )}
-            {isHasUpdateRight && (
-              <button
-                className="opacity-60 transition-all hover:opacity-100"
-                onClick={toggleIsModify}
-              >
-                수정하기
-              </button>
-            )}
-            {isHasUpdateRight && (
-              <button
-                className="opacity-60 transition-all hover:opacity-100"
-                onClick={handleDeleteComment}
-              >
-                삭제하기
-              </button>
-            )}
-          </>
-        )}
-        {isModify && (
-          <>
-            <button
-              className="opacity-60 transition-all hover:opacity-100"
-              onClick={handleUpdateComment}
-            >
-              수정완료
-            </button>
-            <button
-              className="opacity-60 transition-all hover:opacity-100"
-              onClick={toggleIsModify}
-            >
-              취소
-            </button>
-          </>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default ChatList;
diff --git a/FE/src/components/programDetail/program/DashboardCompound/DashboardWrapper.tsx b/FE/src/components/programDetail/program/DashboardCompound/DashboardWrapper.tsx
deleted file mode 100644
index d567e309..00000000
--- a/FE/src/components/programDetail/program/DashboardCompound/DashboardWrapper.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-"use client";
-
-import { createContext, useState } from "react";
-import Board from "./Board/Board";
-import Input from "./Form";
-import TeamTab from "./TeamTab";
-import {
-  useDeleteQuestion,
-  useUpdateQuestion,
-} from "@/hooks/query/useQuestionQuery";
-import { useTeamQuery } from "@/hooks/query/useTeamQuery";
-import { AccessType } from "@/types/access";
-import { TeamInfo } from "@/types/team";
-
-interface DashboardContextValue {
-  accessType: AccessType;
-  programValue: {
-    readonly programId: number;
-  };
-  teamValues: {
-    readonly teams: TeamInfo[];
-    readonly isLoading: boolean;
-    readonly selectedTeamId: number;
-    readonly changeSelectedTeamId: (teamId: number) => void;
-  };
-  commentValues: {
-    create: {
-      readonly parentsCommentId: number;
-      readonly setParentsCommentId: (id: number) => void;
-      readonly selectedCommentContent: string;
-      readonly changeSelectedCommentContent: (content: string) => void;
-    };
-    update: {
-      readonly updateComment: (question: unknown) => void;
-      readonly isUpdateSuccess: boolean;
-    };
-    delete: {
-      readonly deleteComment: (question: unknown) => void;
-      readonly isDeleteSuccess: boolean;
-    };
-  };
-  programId: number;
-  children: React.ReactNode;
-}
-
-export const DashboardContext = createContext<DashboardContextValue>(null);
-
-interface DashboardWrapperProps {
-  programId: number;
-  accessType: AccessType; //TODO: 현재 accessType에 의존하는 중임. 이는 알지 않아도 되는 정보이므로 추후 수정 필요
-  children: React.ReactNode;
-}
-const DashboardWrapper = ({
-  programId,
-  accessType,
-  children,
-}: DashboardWrapperProps) => {
-  // teamValues
-  const { data, isLoading } = useTeamQuery(programId);
-  const { teams } = data || { teams: [] };
-  const [selectedTeamId, setSelectedTeamId] = useState<number>();
-  const changeSelectedTeamId = (teamId: number) => {
-    setSelectedTeamId(teamId);
-  };
-
-  // comment
-  const [parentsCommentId, setParentsCommentId] = useState<number>(-1);
-  const [selectedCommentContent, setSelectedCommentContent] =
-    useState<string>("");
-  const { mutate: updateComment, isSuccess: isUpdateSuccess } =
-    useUpdateQuestion();
-  const { mutate: deleteComment, isSuccess: isDeleteSuccess } =
-    useDeleteQuestion();
-
-  const changeSelectedCommentContent = (content: string) => {
-    setSelectedCommentContent(content);
-  };
-
-  if (isLoading) return null;
-  if (!data || data.teams.length === 0) return null;
-
-  const programValue = {
-    programId,
-  };
-
-  const teamValues = {
-    teams,
-    isLoading,
-    selectedTeamId,
-    changeSelectedTeamId,
-  };
-
-  const commentValues = {
-    create: {
-      parentsCommentId,
-      setParentsCommentId,
-      selectedCommentContent,
-      changeSelectedCommentContent,
-    },
-    update: {
-      updateComment,
-      isUpdateSuccess,
-    },
-    delete: {
-      deleteComment,
-      isDeleteSuccess,
-    },
-  };
-
-  //TODO: useMemo 사용해야함 _ 급하게 임의로 수정함. 이는 의존성 문제 존재하므로 이부분 보기
-  // const DashBoardValue = useMemo(() => {
-  //   return {
-  //     accessType,
-  //     programValue,
-  //     teamValues,
-  //     commentValues,
-  //     programId,
-  //     children,
-  //   };
-  // }, [programValue, teamValues, commentValues, programId, children]);
-
-  const DashBoardValue = {
-    accessType,
-    programValue,
-    teamValues,
-    commentValues,
-    programId,
-    children,
-  };
-
-  return (
-    <DashboardContext.Provider value={DashBoardValue}>
-      {children}
-    </DashboardContext.Provider>
-  );
-};
-
-DashboardWrapper.TeamTab = TeamTab;
-DashboardWrapper.Board = Board;
-DashboardWrapper.Input = Input;
-
-export default DashboardWrapper;
diff --git a/FE/src/components/programDetail/program/DashboardCompound/Form.tsx b/FE/src/components/programDetail/program/DashboardCompound/Form.tsx
deleted file mode 100644
index bed90370..00000000
--- a/FE/src/components/programDetail/program/DashboardCompound/Form.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-//TODO: 답변 취소 아이콘 추가하기
-
-import { useContext, useState } from "react";
-import { DashboardContext } from "./DashboardWrapper";
-import { PostQuestionParams } from "@/apis/question";
-import StatusToggleItem from "@/components/common/StatusToggleItem";
-import { usePostQuestion } from "@/hooks/query/useQuestionQuery";
-
-const Input = () => {
-  const {
-    accessType,
-    programValue: { programId },
-    teamValues: { teams, selectedTeamId },
-    commentValues: {
-      create: { parentsCommentId, setParentsCommentId, selectedCommentContent },
-    },
-  } = useContext(DashboardContext);
-
-  const [questionInput, setQuestionInput] = useState<string>("");
-
-  const { mutate } = usePostQuestion();
-  const isReply = parentsCommentId !== -1;
-  const selectedTeamName = teams?.find((team) => team.teamId === selectedTeamId)
-    ?.teamName;
-
-  const isAbleToPost = accessType === "private";
-
-  const handlePostQuestion = () => {
-    const questionContent = questionInput.trim();
-
-    if (!questionContent) return;
-    if (!isAbleToPost) return;
-
-    const postQuestionParams: PostQuestionParams = {
-      programId,
-      teamId: selectedTeamId,
-      questionContent,
-      parentsCommentId,
-    };
-    mutate(postQuestionParams);
-    setQuestionInput("");
-    setParentsCommentId(-1);
-  };
-
-  return (
-    <div>
-      {/* <div className="absolute z-10 text-xl font-bold">{name}</div> */}
-      {isReply ? (
-        <div className="truncate text-lg font-semibold">
-          {/* <Image src={"/icons/x.svg"} alt="답글 종료" width={20} height={20} /> */}
-          <button className="px-2 " onClick={() => setParentsCommentId(-1)}>
-            x
-          </button>
-          <p className="inline text-xl font-bold">답변하기 :</p>
-          <p className="ml-2 inline opacity-50">{selectedCommentContent}</p>
-        </div>
-      ) : (
-        <p className="text-xl font-bold">@{selectedTeamName} 에게 질문하기</p>
-      )}
-
-      <div className="mb-2 " />
-      <div className="relative">
-        <textarea
-          className={`h-40 w-full resize-none rounded-sm border-2 p-4 px-8 pr-40 text-lg`}
-          placeholder="질문을 입력해주세요"
-          value={questionInput}
-          onChange={(e) => setQuestionInput(e.target.value)}
-        />
-        <button
-          className="absolute right-4 top-1/2 -translate-y-1/2"
-          onClick={handlePostQuestion}
-        >
-          <StatusToggleItem
-            color={isAbleToPost ? "green" : "gray"}
-            text="전송"
-          />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Input;
diff --git a/FE/src/components/programDetail/program/DashboardCompound/TeamTab.tsx b/FE/src/components/programDetail/program/DashboardCompound/TeamTab.tsx
deleted file mode 100644
index f59dae2e..00000000
--- a/FE/src/components/programDetail/program/DashboardCompound/TeamTab.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useContext, useEffect } from "react";
-import { DashboardContext } from "./DashboardWrapper";
-import Tab from "@/components/common/tabs/tab/Tab";
-import { TabOption } from "@/types/tab";
-import { TeamInfo } from "@/types/team";
-
-const TeamTab = () => {
-  const {
-    teamValues: { teams, isLoading, selectedTeamId, changeSelectedTeamId },
-  } = useContext(DashboardContext);
-
-  useEffect(() => {
-    if (teams && teams.length > 0) {
-      changeSelectedTeamId(teams[0].teamId);
-    }
-  }, [teams]);
-
-  const teamTabOptions: TabOption<number>[] =
-    teams?.map(({ teamId, teamName }: TeamInfo) => ({
-      text: teamName,
-      type: teamId,
-    })) || [];
-
-  const handleTeamSelect = (selected: number) => {
-    changeSelectedTeamId(selected);
-  };
-
-  return (
-    <div>
-      {isLoading && <div>로딩중</div>}
-      {teams && teams.length > 0 && (
-        <Tab<number>
-          selected={selectedTeamId}
-          baseColor="gray"
-          size="md"
-          pointColor="navy"
-          align="line"
-          onItemClick={handleTeamSelect}
-          options={teamTabOptions}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TeamTab;
diff --git a/FE/src/components/programDetail/program/ProgramDashboard.tsx b/FE/src/components/programDetail/program/ProgramDashboard.tsx
deleted file mode 100644
index 205d9ea3..00000000
--- a/FE/src/components/programDetail/program/ProgramDashboard.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import DashboardWrapper from "./DashboardCompound/DashboardWrapper";
-import Title from "@/components/common/Title/Title";
-import { AccessType } from "@/types/access";
-
-interface ProgramDashboardProps {
-  programId: number;
-  accessType: AccessType;
-}
-const ProgramDashboard = ({ programId, accessType }: ProgramDashboardProps) => {
-  return (
-    <DashboardWrapper programId={programId} accessType={accessType}>
-      <Title text="질문 게시판" />
-      <div className="mt-8 flex flex-col gap-8">
-        <DashboardWrapper.TeamTab />
-        <DashboardWrapper.Board />
-        <DashboardWrapper.Input />
-      </div>
-    </DashboardWrapper>
-  );
-};
-
-export default ProgramDashboard;
diff --git a/FE/src/components/programDetail/program/ProgramDetail.tsx b/FE/src/components/programDetail/program/ProgramDetail.tsx
deleted file mode 100644
index 7ec29a4b..00000000
--- a/FE/src/components/programDetail/program/ProgramDetail.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-import { useQueryClient } from "@tanstack/react-query";
-import ProgramAttendStatusManageSection from "./ProgramAttendStatusManageSection";
-import ProgramDashboard from "./ProgramDashboard";
-import ProgramPresentations from "./ProgramPresentations";
-import { ProgramInfoDto } from "@/apis/dtos/program.dto";
-import MarkdownViewer from "@/components/common/markdown/MarkdownViewer";
-import { AccessType } from "@/types/access";
-
-interface ProgramDetailProps {
-  data: ProgramInfoDto;
-  programId: number;
-  accessType: AccessType;
-}
-
-const ProgramDetail = ({ data, programId, accessType }: ProgramDetailProps) => {
-  const isAdmin = accessType === "admin";
-
-  const { content } = data;
-
-  const queryClient = useQueryClient();
-  const githubUrl = queryClient.getQueryData(["githubUrl", programId]);
-
-  return (
-    <div>
-      <MarkdownViewer value={content} />
-      {isAdmin && <ProgramAttendStatusManageSection programId={programId} />}
-      {githubUrl && <ProgramPresentations programId={programId} />}
-      <div className="mt-12">
-        <ProgramDashboard programId={programId} accessType={accessType} />
-      </div>
-    </div>
-  );
-};
-export default ProgramDetail;
diff --git a/FE/src/components/programDetail/program/ProgramInfo.loader.tsx b/FE/src/components/programDetail/program/ProgramInfo.loader.tsx
deleted file mode 100644
index ccd99556..00000000
--- a/FE/src/components/programDetail/program/ProgramInfo.loader.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import ProgramDetailSkeleton from "./ProgramDetail.skeleton";
-import ProgramHeaderSkeleton from "./ProgramHeader.skeleton";
-
-const ProgramInfoLoader = () => {
-  return (
-    <div className="space-y-8">
-      <ProgramHeaderSkeleton />
-      <ProgramDetailSkeleton />
-    </div>
-  );
-};
-export default ProgramInfoLoader;
diff --git a/FE/src/components/programDetail/program/ProgramInfo.tsx b/FE/src/components/programDetail/program/ProgramInfo.tsx
deleted file mode 100644
index 319b411f..00000000
--- a/FE/src/components/programDetail/program/ProgramInfo.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import ProgramDetail from "./ProgramDetail";
-import ProgramHeader from "./ProgramHeader";
-import ProgramInfoLoader from "./ProgramInfo.loader";
-import { useGetProgramByProgramId } from "@/hooks/query/useProgramQuery";
-import { AccessType } from "@/types/access";
-
-interface ProgramInfoProps {
-  programId: number;
-  accessType?: AccessType;
-}
-
-const ProgramInfo = ({ programId, accessType }: ProgramInfoProps) => {
-  const isAbleToEdit = accessType === "admin";
-  const {
-    data: programData,
-    isLoading,
-    isError,
-  } = useGetProgramByProgramId(programId, isAbleToEdit);
-
-  if (isLoading) return <ProgramInfoLoader />;
-  if (isError) return <div>에러 발생</div>;
-
-  return (
-    <section className="space-y-8">
-      <ProgramHeader data={programData} />
-      <ProgramDetail
-        data={programData}
-        programId={programId}
-        accessType={accessType}
-      />
-    </section>
-  );
-};
-export default ProgramInfo;
diff --git a/FE/src/hooks/query/useMemberQuery.ts b/FE/src/hooks/query/useMemberQuery.ts
index 54b79c2a..ffad68fa 100644
--- a/FE/src/hooks/query/useMemberQuery.ts
+++ b/FE/src/hooks/query/useMemberQuery.ts
@@ -13,6 +13,7 @@ import {
   ActiveStatusWithAll,
   AttendStatus,
 } from "@/types/member";
+import { ProgramAttendStatus } from "@/types/program";
 
 export const useGetMemberByActive = (activeStatus: ActiveStatusWithAll) => {
   return useQuery({
@@ -49,10 +50,23 @@ export const useGetProgramMembersByAttend = ({
   programId,
   status,
 }: GetProgramMemebersByAttend) => {
+  const queryClient = useQueryClient();
+  const adminAttendStatus = queryClient.getQueryData<ProgramAttendStatus>([
+    "attendMode",
+    programId,
+  ]);
+
   return useQuery({
     queryKey: [API.MEMBER.ATTEND_STATUS(programId), status],
     queryFn: () => getProgramMembersByAttendStatus(programId, status),
     staleTime: 1000 * 60 * 5,
+    refetchInterval: () => {
+      if (adminAttendStatus === "attend") {
+        return 2000;
+      } else {
+        return false;
+      }
+    },
   });
 };
 
diff --git a/FE/src/hooks/query/useProgramQuery.ts b/FE/src/hooks/query/useProgramQuery.ts
index dad34904..2147bf6d 100644
--- a/FE/src/hooks/query/useProgramQuery.ts
+++ b/FE/src/hooks/query/useProgramQuery.ts
@@ -85,23 +85,34 @@ export const useGetProgramByProgramId = (
   return useQuery({
     queryKey: [API.PROGRAM.Edit_DETAIL(programId)],
     queryFn: () =>
-      getProgramById(programId, isAbleToEdit).then((res) => {
-        //TODO: setquery 지양하기
-        queryClient.setQueryData<ProgramStatus>(
-          ["programStatus", programId],
-          res.programStatus,
-        );
-        queryClient.setQueryData<ProgramType>(
-          ["programType", programId],
-          res.type,
-        );
-        queryClient.setQueryData<string>(
-          ["githubUrl", programId],
-          res.programGithubUrl,
-        );
-        return res;
-      }),
-    staleTime: 1000 * 60 * 5,
+      getProgramById(programId, isAbleToEdit)
+        .then((res) => {
+          queryClient.cancelQueries({
+            queryKey: [API.MEMBER.ATTEND_STATUS(programId)],
+          });
+          return res;
+        })
+        .then((res) => {
+          //TODO: setquery 지양하기
+          queryClient.setQueryData<ProgramStatus>(
+            ["programStatus", programId],
+            res.programStatus,
+          );
+          queryClient.setQueryData(["attendMode", programId], res.attendMode);
+          queryClient.setQueryData<ProgramType>(
+            ["programType", programId],
+            res.type,
+          );
+          queryClient.setQueryData<string>(
+            ["githubUrl", programId],
+            res.programGithubUrl,
+          );
+          queryClient.invalidateQueries({
+            queryKey: [API.MEMBER.ATTEND_STATUS(programId)],
+          });
+          return res;
+        }),
+    refetchInterval: 1000 * 60,
   });
 };
 
@@ -136,24 +147,37 @@ export const useUpdateProgramAttendMode = (programId: number) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationKey: [API.PROGRAM.UPDATE_ATTEND_MODE(programId)],
-    mutationFn: (attendMode: ProgramAttendStatus) => {
-      queryClient.invalidateQueries([API.PROGRAM.Edit_DETAIL(programId)]);
-      return updateProgramAttendMode(programId, attendMode);
-    },
-    onSuccess: (_, targetAttendMode) => {
+    mutationFn: (attendMode: ProgramAttendStatus) =>
+      updateProgramAttendMode(programId, attendMode),
+    onMutate: (targetAttendMode) => {
+      queryClient.cancelQueries([API.PROGRAM.Edit_DETAIL(programId)]);
       const prevProgram = queryClient.getQueryData<ProgramInfoDto>([
         API.PROGRAM.Edit_DETAIL(programId),
       ]);
-
       const newProgram: ProgramInfoDto = {
         ...prevProgram,
         attendMode: targetAttendMode,
       };
-
       queryClient.setQueryData<ProgramInfoDto>(
         [API.PROGRAM.Edit_DETAIL(programId)],
         newProgram,
       );
+      queryClient.setQueryData<ProgramAttendStatus>(
+        ["attendMode", programId],
+        targetAttendMode,
+      );
+      return prevProgram;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [API.MEMBER.ATTEND_STATUS(programId)],
+      });
+    },
+    onError: (_, __, context) => {
+      queryClient.setQueryData(
+        [API.PROGRAM.Edit_DETAIL(programId)],
+        context as ProgramInfoDto,
+      );
     },
   });
 };
diff --git a/FE/src/hooks/query/useQuestionQuery.ts b/FE/src/hooks/query/useQuestionQuery.ts
index 918eb72f..80076556 100644
--- a/FE/src/hooks/query/useQuestionQuery.ts
+++ b/FE/src/hooks/query/useQuestionQuery.ts
@@ -6,8 +6,12 @@ import {
   PostQuestionParams,
   updateQuestion,
 } from "@/apis/question";
+import { Comment, QuestionListDto } from "@/apis/dtos/question.dto";
+import API from "@/constants/API";
+import { UserAttendStatusInfoDto } from "@/apis/dtos/user.dto";
+import { makeNewQuestionData } from "@/utils/question";
 
-export const useGetQuestion = (programId: number, teamId: number) => {
+export const useGetQuestions = (programId: number, teamId: number) => {
   return useQuery({
     queryKey: ["question", programId, teamId],
     queryFn: () => getQuestionsByTeam(programId, teamId),
@@ -20,14 +24,53 @@ export const useGetQuestion = (programId: number, teamId: number) => {
 export const usePostQuestion = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationKey: ["question", "post"],
-    mutationFn: async (postQuestionParams: PostQuestionParams) => {
-      const res = await postQuestion(postQuestionParams);
+    mutationFn: async (postQuestionParams: PostQuestionParams) =>
+      await postQuestion(postQuestionParams),
+    onMutate: ({
+      commentType,
+      programId,
+      teamId,
+      questionContent,
+      parentsCommentId,
+    }: PostQuestionParams) => {
+      queryClient.cancelQueries(["question", programId, teamId]);
 
-      const { programId, teamId } = postQuestionParams;
-      queryClient.invalidateQueries(["question", programId, teamId]);
+      const oldData = queryClient.getQueryData<QuestionListDto>([
+        "question",
+        programId,
+        teamId,
+      ]) || { comments: [] };
 
-      return res;
+      const { name: userName } =
+        queryClient.getQueryData<UserAttendStatusInfoDto>([
+          API.USER.ATTEND_STATUS(programId),
+        ]);
+
+      const newComment: Comment = {
+        commentId: new Date().getTime(),
+        teamId,
+        writer: commentType === "ANONYMOUS" ? "익명" : userName,
+        accessRight: "edit",
+        time: "방금전",
+        content: questionContent,
+        answers: [],
+      };
+
+      const newComments = makeNewQuestionData(
+        oldData,
+        newComment,
+        parentsCommentId,
+      );
+
+      queryClient.setQueryData<QuestionListDto>(
+        ["question", programId, teamId],
+        newComments,
+      );
+
+      return oldData;
+    },
+    onError: (_, { programId, teamId }, oldData) => {
+      queryClient.setQueriesData(["question", programId, teamId], oldData);
     },
   });
 };
diff --git a/FE/src/hooks/useAccess.ts b/FE/src/hooks/useAccess.ts
new file mode 100644
index 00000000..2992be4f
--- /dev/null
+++ b/FE/src/hooks/useAccess.ts
@@ -0,0 +1,13 @@
+import { AccessType } from "@/types/access";
+import { usePathname } from "next/navigation";
+
+export const useGetAccessType = (): AccessType => {
+  const pathname = usePathname();
+  if (pathname.includes("admin")) {
+    return "admin";
+  }
+  if (pathname.includes("guest")) {
+    return "public";
+  }
+  return "private";
+};
diff --git a/FE/src/hooks/usePrograms.ts b/FE/src/hooks/usePrograms.ts
new file mode 100644
index 00000000..476560c2
--- /dev/null
+++ b/FE/src/hooks/usePrograms.ts
@@ -0,0 +1,6 @@
+import { useParams } from "next/navigation";
+
+export const useGetProgramId = () => {
+  const { programId } = useParams();
+  return +programId;
+};
diff --git a/FE/src/store/dashboardAtoms.ts b/FE/src/store/dashboardAtoms.ts
new file mode 100644
index 00000000..a237ff56
--- /dev/null
+++ b/FE/src/store/dashboardAtoms.ts
@@ -0,0 +1,21 @@
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+/**
+ * selectedCommentId
+ * 선택된 질문의 id
+ * -1이면 선택된 질문이 없음
+ */
+const selectedCommentId = atom(-1);
+const selectedCommentContent = atom("");
+const questionInput = atomWithStorage("questionInput", "");
+const commentType = atom<"ANONYMOUS" | "NON_ANONYMOUS">("NON_ANONYMOUS");
+
+const dashboardAtoms = {
+  selectedCommentId,
+  selectedCommentContent,
+  questionInput,
+  commentType,
+};
+
+export default dashboardAtoms;
diff --git a/FE/src/utils/convert.ts b/FE/src/utils/convert.ts
index 8393a07d..e3d62503 100644
--- a/FE/src/utils/convert.ts
+++ b/FE/src/utils/convert.ts
@@ -25,6 +25,7 @@ export const convertText = (text: string, str: string) => {
 
 //githubUrl을 owner, repo, branch, path로 분리
 export const convertGitHubUrl = (githubUrl: string) => {
+
   //TODO: 백엔드에서 유효성 검사하도록 수정. 백엔드와 논의 필요
   // const isValidateGithubUrl = checkIsValidateGithubUrl(githubUrl);
   const isValidateGithubUrl = true;
diff --git a/FE/src/utils/question.ts b/FE/src/utils/question.ts
new file mode 100644
index 00000000..d66790d8
--- /dev/null
+++ b/FE/src/utils/question.ts
@@ -0,0 +1,45 @@
+import type { Comment, QuestionListDto } from "@/apis/dtos/question.dto";
+
+export const makeNewQuestionData = (
+  prevData: QuestionListDto,
+  newComment: Comment,
+  newCommentParentId: number,
+): QuestionListDto => {
+  // 일반 질문인 경우
+  if (newCommentParentId === -1) {
+    const newComments = [...prevData.comments, newComment];
+    return {
+      comments: newComments,
+    };
+  }
+
+  // 답변인 경우
+  const newComments = prevData.comments.map((comment) => {
+    // 부모 댓글의 답변으로 추가
+    if (comment.commentId === newCommentParentId) {
+      return {
+        ...comment,
+        answers: [...comment.answers, newComment],
+      };
+    }
+
+    // 해당 comment가 부모가 아닌 경우, 해당 comment의 답변을 추가로 살펴보고 만약 대댓글이 부모인 경우
+    const isCommentOfComment = comment.answers.some((answer) => {
+      return answer.commentId === newCommentParentId;
+    });
+
+    // 대댓글의 대댓글인 경우 해당 대댓글에 추가
+    if (isCommentOfComment) {
+      return {
+        ...comment,
+        answers: [...comment.answers, newComment],
+      };
+    }
+
+    return comment;
+  });
+
+  return {
+    comments: newComments,
+  };
+};