diff --git a/src/app/api/support/notice/route.ts b/src/app/api/support/notice/route.ts
new file mode 100644
index 00000000..f5379dac
--- /dev/null
+++ b/src/app/api/support/notice/route.ts
@@ -0,0 +1,26 @@
+import { NextRequest } from "next/server";
+
+/**
+ *  공지사항 목록 조회
+ */
+export async function GET(request: NextRequest) {
+  const url = new URL(request.url);
+  const page = url.searchParams.get("page") || "1"; 
+
+  // 페이지 번호를 0 기반으로 조정합니다.
+  const zeroBasedPage = Number(page) - 1;
+
+  const apiUrl = `${process.env.BACKEND_URL}/api/notice${zeroBasedPage > 0 ? `?page=${zeroBasedPage}` : ""}`;
+
+  // 백엔드 API 호출
+  const response = await fetch(apiUrl, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    cache: "no-cache",
+  });
+
+  return response;
+}
+
diff --git a/src/app/api/support/qna/route.ts b/src/app/api/support/qna/route.ts
new file mode 100644
index 00000000..a17b9191
--- /dev/null
+++ b/src/app/api/support/qna/route.ts
@@ -0,0 +1,102 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ *  qna 등록
+ */
+export async function POST(request: NextRequest) {
+  const access_cookie = request.cookies.get("access_token");
+  if (!access_cookie) {
+    const refresh_cookie = request.cookies.get("refresh_token");
+    if (!refresh_cookie) {
+      // 리프레시 토큰이 없으므로 요청 중단
+      return new NextResponse("Refresh token not found", { status: 403 });
+    }
+    // 리프레시 토큰으로 재발급 받아 재요청 보내기 위한 응답
+    return new NextResponse("Refresh token not found", { status: 401 });
+  }
+  const bodyData = await request.json();
+
+  const response = await fetch(`${process.env.BACKEND_URL}/api/qna`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+    },
+    body: JSON.stringify(bodyData),
+    cache: "no-store",
+  });
+
+  return response;
+}
+
+/**
+ * qna 리스트 페이지네이션
+ */
+export async function GET(request: NextRequest) {
+  // 요청에서 access_token을 가져옵니다.
+  const access_cookie = request.cookies.get("access_token");
+
+  if (!access_cookie) {
+    // access_token이 없으면 refresh_token이 있는지 확인합니다.
+    const refresh_cookie = request.cookies.get("refresh_token");
+    if (!refresh_cookie) {
+      // refresh_token이 없는 경우 요청을 중단하고 403 응답을 보냅니다.
+      return new NextResponse("Refresh token not found", { status: 403 });
+    }
+    // refresh_token만으로는 유효하지 않으므로 401 응답을 보냅니다.
+    return new NextResponse("Access token not found", { status: 401 });
+  }
+
+  // 요청 URL에서 쿼리 파라미터를 가져옵니다.
+  const url = new URL(request.url);
+  const page = url.searchParams.get("page") || "1"; // 페이지가 없으면 기본값으로 1을 사용합니다.
+
+  // 페이지 번호를 0 기반으로 조정합니다.
+  const zeroBasedPage = Number(page) - 1;
+
+  // URL을 페이지 번호에 맞게 수정합니다. 페이지 번호가 0보다 큰 경우에만 쿼리 파라미터를 추가합니다.
+  const apiUrl = `${process.env.BACKEND_URL}/api/qna${zeroBasedPage > 0 ? `?page=${zeroBasedPage}` : ""}`;
+
+  // 백엔드 API 호출
+  const response = await fetch(apiUrl, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+    },
+    cache: "no-store",
+  });
+
+  return response;
+}
+
+/**
+ * qna 삭제
+ */
+export async function DELETE(request: NextRequest) {
+  const access_cookie = request.cookies.get("access_token");
+  if (!access_cookie) {
+    const refresh_cookie = request.cookies.get("refresh_token");
+    if (!refresh_cookie) {
+      // 리프레시 토큰이 없으므로 요청 중단
+      return new NextResponse("Refresh token not found", { status: 403 });
+    }
+    // 리프레시 토큰으로 재발급 받아 재요청 보내기 위한 응답
+    return new NextResponse("Refresh token not found", { status: 401 });
+  }
+  const url = new URL(request.url);
+
+  const response = await fetch(
+    `${process.env.BACKEND_URL}/api/qna/${url.searchParams.get("id")}`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+      },
+      cache: "no-store",
+    },
+  );
+
+  return response;
+}
diff --git a/src/app/api/support/question/route.ts b/src/app/api/support/question/route.ts
new file mode 100644
index 00000000..941879fb
--- /dev/null
+++ b/src/app/api/support/question/route.ts
@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * qna 질문 등록
+ */
+export async function POST(request: NextRequest) {
+  const access_cookie = request.cookies.get("access_token");
+  if (!access_cookie) {
+    const refresh_cookie = request.cookies.get("refresh_token");
+    if (!refresh_cookie) {
+      // 리프레시 토큰이 없으므로 요청 중단
+      return new NextResponse("Refresh token not found", { status: 403 });
+    }
+    // 리프레시 토큰으로 재발급 받아 재요청 보내기 위한 응답
+    return new NextResponse("Refresh token not found", { status: 401 });
+  }
+
+      const bodyData = await request.json();
+
+  const response = await fetch(`${process.env.BACKEND_URL}/api/qna/question`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+    },
+    body: JSON.stringify(bodyData),
+    cache: "no-store",
+  });
+
+  return response;
+}
diff --git a/src/app/support/notice/[id]/page.tsx b/src/app/support/notice/[id]/page.tsx
new file mode 100644
index 00000000..c91e2cf1
--- /dev/null
+++ b/src/app/support/notice/[id]/page.tsx
@@ -0,0 +1,49 @@
+// app/page.tsx
+import SupportNoticeDetail from "@/components/support/SupportNoticeDetail";
+import { Metadata } from "next";
+import { cookies } from "next/headers";
+
+export const metadata: Metadata = {
+  title: "공지사항 상세조회",
+  description: "공지사항 상세조회",
+};
+
+interface PageProps {
+  params: { id: string };
+}
+
+async function fetchData(id: number) {
+  const cookie = cookies().get("access_token");
+
+  try {
+    const res = await fetch(
+      `${process.env.BACKEND_URL}/api/notice/${id}`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+        },
+        next: { revalidate: 3600 },
+      },
+    );
+    if (!res.ok) {
+      throw new Error(`Failed to fetch data: ${res.statusText}`);
+    }
+    return res.json();
+  } catch (error) {
+    return { error: "Failed to fetch data" };
+  }
+}
+
+export default async function Page({ params: { id } }: PageProps) {
+  const noticeId = Number(id);
+  if (noticeId <= 0 || !Number.isSafeInteger(noticeId)) {
+    throw Error("Not Found");
+  }
+
+  const data = await fetchData(noticeId);
+
+  return (
+      <SupportNoticeDetail data={data} />
+  );
+}
diff --git a/src/app/support/qna/detail/[id]/page.tsx b/src/app/support/qna/detail/[id]/page.tsx
index e06202f9..fa42d4be 100644
--- a/src/app/support/qna/detail/[id]/page.tsx
+++ b/src/app/support/qna/detail/[id]/page.tsx
@@ -1,19 +1,55 @@
 import SupportQnADetailEditContainer from "@/containers/support/qna/SupportQnADetailEditContainer";
-import { Metadata } from "next";
+import { QnADetailType } from "@/types/QnADto";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { cookies } from "next/headers";
 
-export const metadata: Metadata = {
-  title: "마이페이지",
-  description: "Solitour 사용자 마이페이지",
-};
+interface Props {
+  params: { id: string };
+}
+
+export async function generateMetadata({ params: { id } }: Props) {
+  const qnaId = Number(id);
+  if (qnaId <= 0 || !Number.isSafeInteger(qnaId)) {
+    throw Error("Not Found");
+  }
+
+  return {
+    title: `공지사항 조회`,
+    description: "공지사항 상세조회",
+  };
+}
+
+async function fetchData(id: number) {
+  const cookie = cookies().get("access_token");
+
+  const res = await fetchWithAuth(`${process.env.BACKEND_URL}/api/qna/${id}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `${cookie?.name}=${cookie?.value}`,
+    },
+  });
+
+  console.log("page.tsx 파일 : ",res.status);
+  console.log("page.tsx 파일 : ",cookie);
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch data: ${res.statusText}`);
+  }
+
+  return res.json();
+}
+
+export default async function Page({ params: { id } }: Props) {
+  const qnaId = Number(id);
+  if (qnaId <= 0 || !Number.isSafeInteger(qnaId)) {
+    throw Error("Not Found");
+  }
+
+  const data: QnADetailType = await fetchData(qnaId);
 
-export default async function page() {
   return (
-    <main
-      className={
-        "w-full mt-4 mb-8"
-      }
-      >
-          <SupportQnADetailEditContainer />
+    <main className="mb-8 w-full">
+      <SupportQnADetailEditContainer data={data} />
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index e84add97..0c24a5e0 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -127,7 +127,7 @@ const Header = ({
                     href="/support?menu=about"
                     prefetch={userId > 0}
                   >
-                    지원&안내
+                    고객지원
                   </Link>
                 </li>
               </ul>
diff --git a/src/components/common/HeaderSidebar.tsx b/src/components/common/HeaderSidebar.tsx
index 98f2c509..650904bf 100644
--- a/src/components/common/HeaderSidebar.tsx
+++ b/src/components/common/HeaderSidebar.tsx
@@ -158,7 +158,7 @@ const HeaderSidebar = ({
                 height={22}
               />
             )}
-            <p>지원&안내</p>
+            <p>고객지원</p>
           </Link>
           {signedIn ? (
             <div className="flex flex-col gap-7">
diff --git a/src/components/support/SupportNotice.tsx b/src/components/support/SupportNotice.tsx
deleted file mode 100644
index 7a9abc09..00000000
--- a/src/components/support/SupportNotice.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Link from "next/link";
-
-interface ISupportNotice {
-  data: {
-    id: number;
-    title: string;
-    createdAt: string;
-    content: string;
-  }[];
-}
-
-const SupportNotice = ({ data }: ISupportNotice) => {
-  return (
-    <div className="flex w-full flex-col space-y-4 pb-8">
-      {data.map((notice) => (
-        <Link
-          href={`support/notice/${notice.id}`}
-          key={notice.id}
-          className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
-        >
-          <h2 className="mb-2 text-xl font-semibold">{notice.title}</h2>
-          <p className="mb-2 text-sm text-gray-500">
-            {new Date(notice.createdAt).toLocaleDateString()}
-          </p>
-          <p className="text-gray-700">{notice.content}</p>
-        </Link>
-      ))}
-    </div>
-  );
-};
-
-export default SupportNotice;
diff --git a/src/components/support/SupportNoticeDetail.tsx b/src/components/support/SupportNoticeDetail.tsx
new file mode 100644
index 00000000..2333503e
--- /dev/null
+++ b/src/components/support/SupportNoticeDetail.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { NoticeType } from "@/types/NoticeDto";
+import { NOTICE_DETAIL_BREADCRUMB_PATH } from "@/utils/constant/BreadCrumbDirectory";
+import { format } from "date-fns";
+import Breadcrumbs from "../common/Breadcrumb";
+
+interface ISupportNoticeDetail {
+  data: NoticeType;
+}
+
+const SupportNoticeDetail = ({ data }: ISupportNoticeDetail) => {
+  const categoryStyles: { [key: string]: string } = {
+    이벤트: "bg-green-100 text-green-800",
+    공지: "bg-blue-100 text-blue-800",
+    점검: "bg-yellow-100 text-yellow-800",
+    기타: "bg-gray-100 text-gray-800",
+  };
+
+  return (
+    <div className={"flex w-full flex-col"}>
+      <Breadcrumbs categories={NOTICE_DETAIL_BREADCRUMB_PATH(data.id)} />
+      <div className="mb-8 flex min-h-[calc(100vh-160px)] w-full flex-col rounded-lg border border-gray-300 bg-white p-6 shadow-lg">
+        {/* 카테고리 및 날짜 */}
+        <div className="mb-6 flex items-center justify-between">
+          <div
+            className={`inline-block rounded-full px-4 py-2 text-sm font-semibold ${categoryStyles[data.categoryName]}`}
+          >
+            {data.categoryName}
+          </div>
+
+          <div className="text-sm text-gray-600">
+            {format(new Date(data.createdAt), "yyyy-MM-dd")}
+          </div>
+        </div>
+
+        {/* 제목 */}
+        <div className="mb-4 text-3xl font-extrabold text-gray-900">
+          {data.title}
+        </div>
+
+        <hr className="my-4 border-t-2 border-gray-300" />
+
+        {/* 본문 내용 */}
+        <div className="text-lg text-gray-800">{data.content}</div>
+      </div>
+    </div>
+  );
+};
+
+export default SupportNoticeDetail;
diff --git a/src/components/support/SupportNoticeList.tsx b/src/components/support/SupportNoticeList.tsx
new file mode 100644
index 00000000..5904c304
--- /dev/null
+++ b/src/components/support/SupportNoticeList.tsx
@@ -0,0 +1,50 @@
+import { NoticeType } from "@/types/NoticeDto";
+import { differenceInDays, format } from "date-fns";
+import Link from "next/link";
+
+interface ISupportNoticeList {
+  data: NoticeType[];
+  viewedNotices: number[];
+  onClickNotice: (id: number) => void;
+}
+
+  const categoryStyles: { [key: string]: string } = {
+    이벤트: "bg-green-100 text-green-800",
+    공지: "bg-blue-100 text-blue-800",
+    점검: "bg-yellow-100 text-yellow-800",
+    기타: "bg-gray-100 text-gray-800",
+  };
+
+
+const SupportNoticeList = ({ data, viewedNotices, onClickNotice }: ISupportNoticeList) => {
+  return (
+    <div className="flex w-full flex-col space-y-4 pb-8">
+      {data.map((notice) => (
+        <Link
+          href={`/support/notice/${notice.id}`}
+          key={notice.id}
+          className={`relative flex flex-col gap-y-2 rounded-lg border border-gray-200 p-4 shadow-sm hover:bg-main hover:text-white`}
+          onClick={() => onClickNotice(notice.id)}
+        >
+          {differenceInDays(new Date(), new Date(notice.createdAt)) < 2 &&
+            !viewedNotices.includes(notice.id) && (
+              <div className="absolute right-2 top-2 rounded-full bg-red-500 px-2 py-1 text-xs font-bold text-white">
+                New
+              </div>
+            )}
+          <div
+            className={`${categoryStyles[notice.categoryName]} max-w-fit rounded-lg px-2`}
+          >
+            {notice.categoryName}
+          </div>
+          <h2 className="mb-2 text-xl font-semibold">{notice.title}</h2>
+          <p className="mb-2 text-sm">
+            {format(new Date(notice.createdAt), "yyyy-MM-dd")}
+          </p>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default SupportNoticeList;
diff --git a/src/components/support/SupportQnA.tsx b/src/components/support/SupportQnA.tsx
deleted file mode 100644
index 1ae603d7..00000000
--- a/src/components/support/SupportQnA.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import Link from "next/link";
-
-interface ISupportQnA {
-  id: number;
-  title: string;
-  createdAt: string;
-  status: "답변 대기중" | "답변 완료";
-}
-
-const qnaList: ISupportQnA[] = [
-  {
-    id: 1,
-    title: "회원가입이 안됩니다.",
-    createdAt: "2024-08-26",
-    status: "답변 대기중",
-  },
-  {
-    id: 2,
-    title: "비밀번호를 잊어버렸어요.",
-    createdAt: "2024-08-25",
-    status: "답변 완료",
-  },
-  {
-    id: 3,
-    title: "결제 오류가 발생했습니다.",
-    createdAt: "2024-08-24",
-    status: "답변 대기중",
-  },
-  {
-    id: 4,
-    title: "배송 조회가 안돼요.",
-    createdAt: "2024-08-23",
-    status: "답변 완료",
-  },
-  {
-    id: 5,
-    title: "제품이 불량입니다.",
-    createdAt: "2024-08-22",
-    status: "답변 대기중",
-  },
-  {
-    id: 6,
-    title: "환불이 지연되고 있어요.",
-    createdAt: "2024-08-21",
-    status: "답변 완료",
-  },
-  {
-    id: 7,
-    title: "주문 내역이 보이지 않아요.",
-    createdAt: "2024-08-20",
-    status: "답변 대기중",
-  },
-  {
-    id: 8,
-    title: "프로모션 코드가 적용되지 않아요.",
-    createdAt: "2024-08-19",
-    status: "답변 완료",
-  },
-  {
-    id: 9,
-    title: "이메일 인증이 안됩니다.",
-    createdAt: "2024-08-18",
-    status: "답변 대기중",
-  },
-  {
-    id: 10,
-    title: "주소 변경이 안돼요.",
-    createdAt: "2024-08-17",
-    status: "답변 완료",
-  },
-  {
-    id: 11,
-    title: "고객센터 연결이 어려워요.",
-    createdAt: "2024-08-16",
-    status: "답변 대기중",
-  },
-  {
-    id: 12,
-    title: "상품 상세 정보가 부족해요.",
-    createdAt: "2024-08-15",
-    status: "답변 완료",
-  },
-  {
-    id: 13,
-    title: "배송이 너무 지연되고 있어요.",
-    createdAt: "2024-08-14",
-    status: "답변 대기중",
-  },
-  {
-    id: 14,
-    title: "상품이 잘못 배송되었습니다.",
-    createdAt: "2024-08-13",
-    status: "답변 완료",
-  },
-  {
-    id: 15,
-    title: "상품이 도착하지 않았습니다.",
-    createdAt: "2024-08-12",
-    status: "답변 대기중",
-  },
-  {
-    id: 16,
-    title: "결제가 이중으로 되었습니다.",
-    createdAt: "2024-08-11",
-    status: "답변 완료",
-  },
-  {
-    id: 17,
-    title: "계정을 삭제하고 싶습니다.",
-    createdAt: "2024-08-10",
-    status: "답변 대기중",
-  },
-  {
-    id: 18,
-    title: "회원 등급이 잘못 적용되었습니다.",
-    createdAt: "2024-08-09",
-    status: "답변 완료",
-  },
-  {
-    id: 19,
-    title: "자동 결제가 되지 않았어요.",
-    createdAt: "2024-08-08",
-    status: "답변 대기중",
-  },
-  {
-    id: 20,
-    title: "포인트가 적립되지 않았습니다.",
-    createdAt: "2024-08-07",
-    status: "답변 완료",
-  },
-];
-
-const SupportQnA = () => {
-  return (
-    <div className="flex w-full flex-col">
-      <div className={"flex w-full justify-end"}>
-        <Link href="/support/qna/write" passHref>
-          <button className="hover:scale-105 mb-4 rounded-lg bg-main px-4 py-2 text-white shadow-md transition-colors duration-300">
-            질문 등록하기
-          </button>
-        </Link>
-      </div>
-      <ul className="m-0 list-none p-0">
-        {qnaList.map((qna) => (
-          <Link key={qna.id} href={`/support/qna/detail/${qna.id}`}>
-            <li className="relative mb-4 flex cursor-pointer flex-col rounded-lg border border-gray-300 bg-white p-4 shadow-sm transition-shadow duration-300 hover:shadow-md">
-              <div className="mb-2 flex items-start justify-between">
-                <span className="text-lg font-medium">{qna.title}</span>
-                <span
-                  className={`text-xs font-semibold ${qna.status === "답변 완료" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"} rounded-md px-2 py-1 shadow-sm`}
-                >
-                  {qna.status}
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-xs text-gray-500">{qna.createdAt}</span>
-              </div>
-            </li>
-          </Link>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default SupportQnA;
\ No newline at end of file
diff --git a/src/components/support/SupportQnAList.tsx b/src/components/support/SupportQnAList.tsx
new file mode 100644
index 00000000..024881c4
--- /dev/null
+++ b/src/components/support/SupportQnAList.tsx
@@ -0,0 +1,93 @@
+import { QnAListElementType } from "@/types/QnADto";
+import { format } from "date-fns";
+import Link from "next/link";
+
+interface ISupportQnAListProps {
+  elements: QnAListElementType[];
+  loading: boolean;
+  userId: number;
+}
+
+  const STATUS: { [key: string]: { name: string; style: string } } = {
+    WAIT: {
+      name: "답변 대기중",
+      style: "bg-red-100 text-red-700",
+    },
+    ANSWER: {
+      name: "답변 완료",
+      style: "bg-green-100 text-green-700",
+    },
+    CLOSED: {
+      name: "답변 종료",
+      style: "bg-gray-400 text-black",
+    },
+  };
+
+const SupportQnAList = ({ elements, loading, userId }: ISupportQnAListProps) => {
+
+  return (
+    <div className="flex w-full flex-col">
+      {loading ? (
+        <>
+          <ul className="m-0 min-h-[30rem] list-none p-0">
+            {Array.from({ length: 10 }).map((_, index) => (
+              <li
+                key={index}
+                className="relative mb-4 flex flex-col rounded-lg border border-gray-300 bg-white p-4 shadow-sm"
+              >
+                <div className="mb-2 flex items-start justify-between">
+                  <div className="h-6 w-2/3 animate-pulse rounded bg-gray-200"></div>
+                  <div className="h-6 w-[4rem] animate-pulse rounded bg-gray-200"></div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="h-4 w-16 animate-pulse rounded bg-gray-200"></div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <>
+          {userId > 0 ? (
+            <div className={"flex w-full justify-end"}>
+              <Link href="/support/qna/write" passHref>
+                <button className="mb-4 rounded-lg bg-main px-4 py-2 text-white shadow-md transition-colors duration-300 hover:scale-105">
+                  질문 등록하기
+                </button>
+              </Link>
+            </div>
+          ) : (
+            <div className="flex h-[12rem] w-full items-center justify-center text-lg">
+              로그인이 필요합니다.
+            </div>
+          )}
+          <ul className="m-0 min-h-[30rem] list-none p-0">
+            {elements?.map((qna) => (
+              <Link key={qna.id} href={`/support/qna/detail/${qna.id}`}>
+                <li className="relative mb-4 flex cursor-pointer flex-col rounded-lg border border-gray-300 bg-white p-4 shadow-sm transition-shadow duration-300 hover:shadow-md">
+                  <div className="mb-2 flex items-start justify-between gap-4">
+                    <span className="max-w-[calc(100%-4rem)] overflow-hidden text-ellipsis whitespace-nowrap text-lg font-medium">
+                      {qna.title}
+                    </span>
+                    <span
+                      className={`rounded-md min-w-[5rem] flex justify-center px-2 py-1 text-xs font-semibold shadow-sm ${STATUS[qna.status].style}`}
+                    >
+                      {STATUS[qna.status].name}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-gray-500">
+                      {format(new Date(qna.createdAt), "yyyy-MM-dd")}
+                    </span>
+                  </div>
+                </li>
+              </Link>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SupportQnAList;
diff --git a/src/components/support/qna/SupportQnADetailEdit.tsx b/src/components/support/qna/SupportQnADetailEdit.tsx
index 1656d6e7..20083628 100644
--- a/src/components/support/qna/SupportQnADetailEdit.tsx
+++ b/src/components/support/qna/SupportQnADetailEdit.tsx
@@ -1,133 +1,111 @@
 import Breadcrumbs from "@/components/common/Breadcrumb";
+import { QnADetailType, QnAMessageType } from "@/types/QnADto";
+import { QNA_DETAIL_BREADCRUMB_PATH } from "@/utils/constant/BreadCrumbDirectory";
 import { format } from "date-fns";
-import React, { useState } from "react";
+import React from "react";
 
 interface ISupportQnADetailEdit {
-  // 필요한 props가 있으면 여기에 정의
+  data: QnADetailType;
+  userId: number; // 현재 로그인한 사용자의 ID
+  changeInputHandler: (value: string) => void;
+  questionSubmitHandler: () => void;
+  messageList: QnAMessageType[];
+  qnaCloseHandler: () => void;
 }
 
-const SupportQnADetailEdit: React.FC<ISupportQnADetailEdit> = (props) => {
-  const [responses, setResponses] = useState([
-    {
-      id: 1,
-      state: "question",
-      content: "React를 배우는 가장 좋은 방법은 무엇인가요?",
-      createdAt: "2024-08-27T10:00:00Z",
-    },
-    {
-      id: 2,
-      state: "response",
-      content:
-        "React를 배우는 가장 좋은 방법은 공식 문서부터 시작하고 작은 프로젝트를 만드는 것입니다. 온라인 튜토리얼과 강의도 도움이 될 수 있습니다.",
-      createdAt: "2024-08-27T10:05:00Z",
-    },
-    {
-      id: 3,
-      state: "response",
-      content:
-        "또 다른 좋은 방법은 커뮤니티나 포럼에 참여하여 질문을 하고 프로젝트에 대한 피드백을 받는 것입니다.",
-      createdAt: "2024-08-27T10:10:00Z",
-    },
-    {
-      id: 4,
-      state: "question",
-      content: "React의 상태 관리를 위한 가장 좋은 라이브러리는 무엇인가요?",
-      createdAt: "2024-08-27T10:15:00Z",
+const SupportQnADetailEdit: React.FC<ISupportQnADetailEdit> = ({
+  data,
+  userId,
+  changeInputHandler,
+  questionSubmitHandler,
+  messageList,
+  qnaCloseHandler,
+}) => {
+  const formatDate = (dateString: string) => {
+    return format(new Date(dateString), "yyyy-MM-dd HH:mm:ss");
+  };
+
+  const STATUS: { [key: string]: { name: string; style: string } } = {
+    WAIT: {
+      name: "답변 대기 중",
+      style: "bg-red-100 text-red-700",
     },
-    {
-      id: 5,
-      state: "response",
-      content:
-        "상태 관리를 위해서는 React의 내장 훅인 `useState`와 `useReducer`를 사용할 수 있습니다. 또한, 상태 관리를 더 복잡하게 하고 싶다면 Redux나 Zustand 같은 라이브러리를 고려할 수 있습니다.",
-      createdAt: "2024-08-27T10:20:00Z",
+    ANSWER: {
+      name: "답변 완료",
+      style: "bg-green-100 text-green-700",
     },
-    {
-      id: 6,
-      state: "response",
-      content:
-        "Redux는 상태 관리를 위한 매우 강력한 라이브러리지만, 설정이 복잡할 수 있습니다. Zustand는 더 간단한 설정으로 상태 관리를 제공하므로 작은 프로젝트나 간단한 상태 관리에 적합할 수 있습니다.",
-      createdAt: "2024-08-27T10:25:00Z",
+    CLOSED: {
+      name: "답변 종료",
+      style: "bg-gray-400 text-black",
     },
-  ]);
-  const [newResponse, setNewResponse] = useState<string>("");
-
-  const handleResponseChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>,
-  ) => {
-    setNewResponse(event.target.value);
   };
 
-  const handleResponseSubmit = () => {
-    if (newResponse.trim()) {
-      const newEntry = {
-        id: responses.length + 1,
-        state: "response",
-        content: newResponse,
-        createdAt: new Date().toISOString(),
-      };
-      setResponses([...responses, newEntry]);
-      setNewResponse(""); // 제출 후 textarea를 비웁니다.
-    }
-  };
+  return (
+    <div className="mx-auto max-w-4xl px-6">
+      <Breadcrumbs categories={QNA_DETAIL_BREADCRUMB_PATH(data.id)} />
 
-  const formatDate = (dateString: string) => {
-    const options: Intl.DateTimeFormatOptions = {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      timeZoneName: "short",
-    };
-    return new Date(dateString).toLocaleDateString(undefined, options);
-    };
-    
-    const categories = [
-        { label: "지원&안내", href: "/support" },
-        { label: "QnA", href: "/support?menu=qna" },
-        { label: "상세", href: "" },
-    ];
+      <div className="mb-8 rounded-[.25rem] bg-white p-6">
+        <div className="mb-4 w-full text-start">
+          <h2 className="whitespace-pre-wrap break-words text-4xl font-bold text-main">
+            {data.title}
+          </h2>
+        </div>
+        <div className="text-center">
+          <span
+            className={`rounded-lg px-4 py-1 text-xl font-medium ${STATUS[data.status].style}`}
+          >
+            {STATUS[data.status].name}
+          </span>
+        </div>
+      </div>
 
-  return (
-      <div className="flex w-full flex-col space-y-4 mt-4">
-          <Breadcrumbs categories={categories} />
-      <div className="space-y-2 px-4">
-        {responses.map((entry) => (
+      <div className="mb-8 space-y-6">
+        {messageList.map((entry) => (
           <div
             key={entry.id}
-            className={`flex ${
-              entry.state === "question" ? "justify-start" : "justify-end"
-            }`}
+            className={`flex ${entry.userId === userId ? "justify-start" : "justify-end"}`}
           >
-            <div className="w-full max-w-screen-sm rounded-lg bg-white p-4 shadow-md">
-              <h2 className="text-lg font-semibold">
-                {entry.state === "question" ? "질문" : `답변 ${entry.id}`}
-              </h2>
+            <div
+              className={`w-full max-w-2xl rounded-[2rem] bg-white p-6 shadow-md outline outline-[2px] outline-offset-[-2px] ${entry.userId === userId ? "outline-gray-800" : "outline-orange-400"}`}
+            >
+              <div className="flex aspect-square w-[2rem] items-center justify-center rounded-lg bg-main text-white">
+                {entry.userId === userId ? "Q" : "A"}
+              </div>
               <p className="text-gray-700">{entry.content}</p>
-              <p className="mt-2 text-sm text-gray-500 flex justify-end">
-                {format(new Date(entry.createdAt), "yyyy-MM-dd hh:mm")}
+              <p className="mt-2 text-right text-sm text-gray-500">
+                {format(new Date(entry.createdAt), "yyyy-MM-dd HH:mm")}
               </p>
             </div>
           </div>
         ))}
       </div>
 
-      <div className="rounded-lg bg-white p-4 shadow-md">
-        <textarea
-          value={newResponse}
-          onChange={handleResponseChange}
-          rows={4}
-          className="w-full resize-none rounded-lg border border-gray-300 p-2"
-          placeholder="여기에 응답을 작성하세요..."
-        />
-        <button
-          onClick={handleResponseSubmit}
-          className="mt-2 w-full rounded-lg bg-main py-2 text-white"
-        >
-          응답 제출
-        </button>
-      </div>
+      {data.status !== "CLOSED" && (
+        <div className="space-y-4">
+          <div className="rounded-[2rem] bg-white p-6 shadow-md outline outline-[1px] outline-offset-[-1px] outline-main">
+            <textarea
+              rows={4}
+              className="mb-4 w-full resize-none rounded-lg p-4 focus:outline-none"
+              placeholder="여기에 응답을 작성하세요..."
+              onChange={(e) => changeInputHandler(e.target.value)}
+            />
+            <button
+              onClick={() => questionSubmitHandler()}
+              className="hover:bg-main-dark w-full rounded-lg bg-main py-2 font-semibold text-white transition duration-200"
+            >
+              응답 제출
+            </button>
+          </div>
+          <button
+            onClick={() => {
+              qnaCloseHandler();
+            }}
+            className="w-full rounded-lg bg-gray-600 py-2 font-semibold text-white transition duration-200 hover:bg-gray-700"
+          >
+            QnA 종료
+          </button>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/support/qna/SupportQnAWrite.tsx b/src/components/support/qna/SupportQnAWrite.tsx
index 81bc12df..fd2f15ad 100644
--- a/src/components/support/qna/SupportQnAWrite.tsx
+++ b/src/components/support/qna/SupportQnAWrite.tsx
@@ -1,43 +1,30 @@
 import Breadcrumbs from "@/components/common/Breadcrumb";
-import React, { useState } from "react";
+import { QNA_DETAIL_WRITE_BREADCRUMB_PATH } from "@/utils/constant/BreadCrumbDirectory";
+import React from "react";
 
 interface ISupportQnAWrite {
-  onSubmit: (category: string, question: string) => void;
+  category: string;
+  content: string;
+  title: string; // New prop
+  onCategoryChange: (category: string) => void;
+  onContentChange: (content: string) => void;
+  onTitleChange: (title: string) => void; // New handler
+  onSubmit: () => void;
 }
 
-const SupportQnAWrite: React.FC<ISupportQnAWrite> = ({ onSubmit }) => {
-  const [question, setQuestion] = useState("");
-  const [category, setCategory] = useState("general");
-
-  const handleQuestionChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>,
-  ) => {
-    setQuestion(event.target.value);
-  };
-
-  const handleCategoryChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    setCategory(event.target.value);
-  };
-
-  const handleSubmit = () => {
-    if (question.trim()) {
-      onSubmit(category, question);
-      setQuestion(""); // Clear the input field after submission
-      setCategory("general"); // Reset category to default
-    }
-    };
-    
-    const categories = [
-      { label: "지원&안내", href: "/support" },
-      { label: "QnA", href: "/support?menu=qna" },
-      { label: "질문 등록하기", href: "" },
-    ];
+const SupportQnAWrite: React.FC<ISupportQnAWrite> = ({
+  category,
+  content,
+  title, // New prop
+  onCategoryChange,
+  onContentChange,
+  onTitleChange, // New handler
+  onSubmit,
+}) => {
 
   return (
-    <div className="flex w-full flex-col p-4">
-      <Breadcrumbs categories={categories} />
+    <div className="flex w-full flex-col px-4">
+      <Breadcrumbs categories={QNA_DETAIL_WRITE_BREADCRUMB_PATH} />
       <h2 className="mb-2 text-xl font-bold">질문 작성하기</h2>
 
       {/* 카테고리 선택 */}
@@ -47,28 +34,53 @@ const SupportQnAWrite: React.FC<ISupportQnAWrite> = ({ onSubmit }) => {
       <select
         id="category"
         value={category}
-        onChange={handleCategoryChange}
+        onChange={(e) => onCategoryChange(e.target.value)}
         className="mb-4 w-full rounded border p-2"
       >
-        <option value="general">일반</option>
-        <option value="technical">기술적</option>
-        <option value="billing">청구</option>
-        <option value="support">지원</option>
+        <option value="" disabled>
+          선택해주세요
+        </option>
+        <option value="정보 서비스">정보 서비스</option>
+        <option value="모임 서비스">모임 서비스</option>
+        <option value="여행일기 서비스">여행일기 서비스</option>
+        <option value="인증 및 개인정보">인증 및 개인정보</option>
+        <option value="기타">기타</option>
       </select>
 
+      {/* 제목 입력 */}
+      <input
+        id="title"
+        type="text"
+        value={title}
+        onChange={(e) => onTitleChange(e.target.value)}
+        placeholder="제목을 입력하세요..."
+        className="mb-4 w-full rounded border p-2"
+      />
+
       {/* 질문 입력 */}
       <textarea
-        value={question}
-        onChange={handleQuestionChange}
+        value={content}
+        onChange={(e) => onContentChange(e.target.value)}
         placeholder="질문을 입력하세요..."
         rows={5}
-        className="mb-4 h-[10rem] w-full resize-none rounded border p-2"
+        className="mb-4 h-[15rem] w-full resize-none rounded border p-2"
       />
 
       {/* 제출 버튼 */}
       <button
-        onClick={handleSubmit}
-        className="w-full rounded bg-main p-2 text-white hover:bg-blue-600"
+        onClick={onSubmit}
+        disabled={
+          content.trim().length < 1 ||
+          category === "" ||
+          title.trim().length < 1
+        }
+        className={`w-full rounded p-2 text-white ${
+          content.trim().length < 1 ||
+          category === "" ||
+          title.trim().length < 1
+            ? "bg-gray-400"
+            : "bg-main"
+        }`}
       >
         제출
       </button>
diff --git a/src/containers/support/SupportNoticeContainer.tsx b/src/containers/support/SupportNoticeContainer.tsx
index c877a86c..12fbbb74 100644
--- a/src/containers/support/SupportNoticeContainer.tsx
+++ b/src/containers/support/SupportNoticeContainer.tsx
@@ -1,223 +1,91 @@
-import SupportNotice from "@/components/support/SupportNotice";
+"use client"
 
-const data = [
-  {
-    id: 1,
-    title: "시스템 점검 안내",
-    createdAt: "2024-08-01T09:00:00Z",
-    content:
-      "저희 시스템의 정기 점검이 2024년 8월 5일 00:00부터 06:00까지 진행됩니다. 이 시간 동안 서비스 이용이 불가할 수 있습니다.",
-  },
-  {
-    id: 2,
-    title: "회원 가입 이벤트",
-    createdAt: "2024-08-02T10:30:00Z",
-    content:
-      "회원 가입 시 특별 할인 쿠폰을 드립니다. 자세한 사항은 홈페이지에서 확인해 주세요.",
-  },
-  {
-    id: 3,
-    title: "새로운 기능 추가",
-    createdAt: "2024-08-03T11:15:00Z",
-    content:
-      "새로운 기능이 추가되었습니다. 업데이트된 기능에 대한 자세한 내용은 사용자 설명서를 참조하세요.",
-  },
-  {
-    id: 4,
-    title: "비밀번호 변경 안내",
-    createdAt: "2024-08-04T12:00:00Z",
-    content:
-      "비밀번호를 주기적으로 변경해 주시기 바랍니다. 변경 방법은 계정 설정에서 확인할 수 있습니다.",
-  },
-  {
-    id: 5,
-    title: "고객 지원팀 연락처",
-    createdAt: "2024-08-05T13:45:00Z",
-    content:
-      "고객 지원팀의 연락처가 변경되었습니다. 새 연락처는 홈페이지의 고객 지원 페이지에서 확인해 주세요.",
-  },
-  {
-    id: 6,
-    title: "추석 연휴 휴무 안내",
-    createdAt: "2024-08-06T14:30:00Z",
-    content:
-      "추석 연휴로 인해 2024년 9월 27일부터 9월 30일까지 휴무합니다. 연휴 기간 동안의 서비스 이용에 참고해 주세요.",
-  },
-  {
-    id: 7,
-    title: "데이터 백업 완료",
-    createdAt: "2024-08-07T15:00:00Z",
-    content:
-      "모든 데이터의 백업이 완료되었습니다. 안전하게 서비스 이용하시기 바랍니다.",
-  },
-  {
-    id: 8,
-    title: "정기 업데이트 공지",
-    createdAt: "2024-08-08T16:10:00Z",
-    content:
-      "정기 업데이트가 2024년 8월 10일에 진행됩니다. 이로 인해 일시적인 서비스 중단이 있을 수 있습니다.",
-  },
-  {
-    id: 9,
-    title: "보안 강화 안내",
-    createdAt: "2024-08-09T17:25:00Z",
-    content:
-      "서비스 보안을 강화하기 위한 작업이 진행됩니다. 이로 인해 일부 기능이 일시적으로 비활성화될 수 있습니다.",
-  },
-  {
-    id: 10,
-    title: "서비스 이용약관 변경",
-    createdAt: "2024-08-10T18:00:00Z",
-    content:
-      "서비스 이용약관이 변경되었습니다. 변경된 약관은 홈페이지에서 확인할 수 있습니다.",
-  },
-  {
-    id: 11,
-    title: "이벤트 참여 방법 안내",
-    createdAt: "2024-08-11T19:15:00Z",
-    content:
-      "현재 진행 중인 이벤트에 참여하는 방법에 대한 안내입니다. 자세한 내용은 이벤트 페이지를 참조해 주세요.",
-  },
-  {
-    id: 12,
-    title: "서버 점검 완료",
-    createdAt: "2024-08-12T20:00:00Z",
-    content:
-      "서버 점검이 완료되었습니다. 서비스 이용에 문제가 없으시길 바랍니다.",
-  },
-  {
-    id: 13,
-    title: "채팅 서비스 개선",
-    createdAt: "2024-08-13T21:30:00Z",
-    content: "채팅 서비스가 개선되었습니다. 개선된 기능을 확인해 보세요.",
-  },
-  {
-    id: 14,
-    title: "연말정산 관련 공지",
-    createdAt: "2024-08-14T22:15:00Z",
-    content:
-      "연말정산 관련 안내입니다. 관련 서류는 2024년 12월 15일까지 제출해 주시기 바랍니다.",
-  },
-  {
-    id: 15,
-    title: "사용자 만족도 조사",
-    createdAt: "2024-08-15T23:00:00Z",
-    content:
-      "사용자 만족도 조사가 진행 중입니다. 설문에 참여해 주시면 감사하겠습니다.",
-  },
-  {
-    id: 16,
-    title: "서비스 장애 사과",
-    createdAt: "2024-08-16T09:45:00Z",
-    content:
-      "최근 서비스 장애로 불편을 드려 사과드립니다. 문제는 해결되었으며, 향후 동일한 문제가 발생하지 않도록 최선을 다하겠습니다.",
-  },
-  {
-    id: 17,
-    title: "구매 할인 쿠폰 발급",
-    createdAt: "2024-08-17T10:20:00Z",
-    content:
-      "특별 구매 할인 쿠폰이 발급되었습니다. 쿠폰 코드와 사용 방법은 이메일을 확인해 주세요.",
-  },
-  {
-    id: 18,
-    title: "업데이트 예정일 공지",
-    createdAt: "2024-08-18T11:05:00Z",
-    content:
-      "다음 업데이트가 2024년 8월 25일에 예정되어 있습니다. 업데이트에 따른 서비스 중단은 없습니다.",
-  },
-  {
-    id: 19,
-    title: "서비스 속도 개선",
-    createdAt: "2024-08-19T12:00:00Z",
-    content:
-      "서비스 속도가 개선되었습니다. 보다 빠르고 원활한 이용을 경험해 보세요.",
-  },
-  {
-    id: 20,
-    title: "사용자 정보 업데이트",
-    createdAt: "2024-08-20T13:30:00Z",
-    content:
-      "사용자 정보 업데이트가 완료되었습니다. 계정 정보를 확인해 주세요.",
-  },
-  {
-    id: 21,
-    title: "모바일 앱 출시",
-    createdAt: "2024-08-21T14:15:00Z",
-    content:
-      "새로운 모바일 앱이 출시되었습니다. 앱 스토어에서 다운로드하고 이용해 보세요.",
-  },
-  {
-    id: 22,
-    title: "설문조사 참여 요청",
-    createdAt: "2024-08-22T15:00:00Z",
-    content:
-      "서비스 개선을 위한 설문조사에 참여해 주세요. 여러분의 의견이 중요합니다.",
-  },
-  {
-    id: 23,
-    title: "보안 업데이트 완료",
-    createdAt: "2024-08-23T16:45:00Z",
-    content:
-      "보안 업데이트가 완료되었습니다. 보안 관련 문제는 해결되었으니 안심하고 서비스를 이용하세요.",
-  },
-  {
-    id: 24,
-    title: "제휴사 할인 안내",
-    createdAt: "2024-08-24T17:30:00Z",
-    content:
-      "제휴사와의 할인 혜택이 적용되었습니다. 제휴사 목록과 할인 내용은 홈페이지에서 확인할 수 있습니다.",
-  },
-  {
-    id: 25,
-    title: "서비스 이용 팁",
-    createdAt: "2024-08-25T18:15:00Z",
-    content:
-      "서비스 이용 시 유용한 팁을 안내드립니다. 효율적인 이용을 위해 참고해 주세요.",
-  },
-  {
-    id: 26,
-    title: "이벤트 결과 발표",
-    createdAt: "2024-08-26T19:00:00Z",
-    content:
-      "최근 진행된 이벤트의 결과를 발표합니다. 당첨자 명단과 상품은 홈페이지에서 확인해 주세요.",
-  },
-  {
-    id: 27,
-    title: "기술 지원 서비스 개선",
-    createdAt: "2024-08-27T20:45:00Z",
-    content:
-      "기술 지원 서비스가 개선되었습니다. 보다 빠르고 전문적인 지원을 경험해 보세요.",
-  },
-  {
-    id: 28,
-    title: "알림 설정 변경 안내",
-    createdAt: "2024-08-28T21:30:00Z",
-    content:
-      "알림 설정 변경 방법에 대한 안내입니다. 설정을 통해 원하는 알림을 받으실 수 있습니다.",
-  },
-  {
-    id: 29,
-    title: "서버 점검 예정",
-    createdAt: "2024-08-29T22:15:00Z",
-    content:
-      "서버 점검이 2024년 9월 1일 02:00부터 04:00까지 예정되어 있습니다. 점검 중에는 서비스 이용이 제한될 수 있습니다.",
-  },
-  {
-    id: 30,
-    title: "새로운 소식 구독 안내",
-    createdAt: "2024-08-30T23:00:00Z",
-    content:
-      "새로운 소식을 이메일로 받아보세요. 구독 방법은 계정 설정에서 확인할 수 있습니다.",
-  },
-];
+import Pagination from "@/components/common/Pagination";
+import SupportNoticeList from "@/components/support/SupportNoticeList";
+import { NoticeType } from "@/types/NoticeDto";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 
 interface ISupportNoticeContainer {
 }
+
+const Skeleton = () => (
+  <div className="flex w-full flex-col space-y-4 pb-8">
+    {Array.from({ length: 10 }).map((_, index) => (
+      <div
+        key={index}
+        className="flex flex-col gap-y-2 rounded-lg border border-gray-200 p-4 shadow-sm bg-gray-100 animate-pulse"
+      >
+        <div className="w-24 h-4 bg-gray-300 rounded-lg mb-2"></div>
+        <div className="w-48 h-6 bg-gray-300 rounded-lg mb-2"></div>
+        <div className="w-32 h-4 bg-gray-300 rounded-lg"></div>
+      </div>
+    ))}
+  </div>
+);
+
 const SupportNoticeContainer = (props: ISupportNoticeContainer) => {
 
+  const searchParams = useSearchParams();
+  const [currentPage, setCurrentPage] = useState(
+    searchParams.get("page") ? Number(searchParams.get("page")) : 1,
+  );
+  const [elements, setElements] = useState<NoticeType[]>([]);
+  const [totalPages, setTotalPages] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [viewedNotices, setViewedNotices] = useState([]);
+
+  const pageHandler = (page: number) => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    params.set("page", page + "");
+    url.search = params.toString();
+    setCurrentPage(page);
+    fetchNotice(page);
+    window.history.pushState({}, "", url.toString());
+  };
+
+  const fetchNotice = async (page: number) => {
+    setLoading(true);
+    const response = await fetch(`/api/support/notice?page=${page}`);
+    const data = await response.json();
+    setElements(data.content);
+    setTotalPages(data.page.totalPages);
+    setLoading(false);
+  };
+
+  const onClickNotice = (id: number) => {
+    const viewedNotices = JSON.parse(
+      localStorage.getItem("viewedNotices") || "[]",
+    );
+    if (!viewedNotices.includes(id)) {
+      viewedNotices.push(id);
+      localStorage.setItem("viewedNotices", JSON.stringify(viewedNotices));
+    }
+  }
+
+  useEffect(() => {
+    fetchNotice(currentPage);
+    setViewedNotices(JSON.parse(localStorage.getItem("viewedNotices") || "[]"));
+  }, []);
+
   return (
-      <SupportNotice data={data}  />
+    <>
+      {loading ? (
+        <Skeleton />
+      ) : (
+        <SupportNoticeList
+          data={elements}
+          viewedNotices={viewedNotices}
+          onClickNotice={onClickNotice}
+        />
+      )}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        pageHandler={pageHandler}
+      />
+    </>
   );
 };
-export default SupportNoticeContainer
\ No newline at end of file
+export default SupportNoticeContainer
diff --git a/src/containers/support/SupportQnAContainer.tsx b/src/containers/support/SupportQnAContainer.tsx
index a9bb33be..41abb32c 100644
--- a/src/containers/support/SupportQnAContainer.tsx
+++ b/src/containers/support/SupportQnAContainer.tsx
@@ -1,11 +1,80 @@
-import SupportQnA from "@/components/support/SupportQnA";
+import Pagination from "@/components/common/Pagination";
+import SupportQnAList from "@/components/support/SupportQnAList";
+import useAuthStore from "@/store/authStore";
+import { QnAListElementType } from "@/types/QnADto";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 
 interface ISupportQnAContainer {
 
 }
 const SupportQnAContainer = (props: ISupportQnAContainer) => {
+  const [totalElements, setTotalElements] = useState(0);
+  const [elements, setElements] = useState<QnAListElementType[]>([]);
+  const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams();
+  const authStore = useAuthStore(); 
+  const [currentPage, setCurrentPage] = useState(
+    searchParams.get("page") ? Number(searchParams.get("page")) : 1,
+  );
+  const pageHandler = (page: number) => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    setCurrentPage(page);
+    getQnAList(page);
+      url.search = params.toString();
+      window.history.pushState({}, "", url.toString());
+  };
+  
+  const getQnAList = async (page: number) => {
+    if (isNaN(page) || page < 1) {
+      // 페이지가 숫자가 아닌 경우, 에러 페이지로 이동
+      window.location.href = "/error"; // 원하는 에러 페이지로 리다이렉트
+      return;
+    }
+
+    const response = await fetchWithAuth(
+      `/api/support/qna?page=${page}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+
+    if (!response.ok) {
+      setLoading(false);
+      return;
+    }
+
+    const data = await response.json();
+    setTotalElements(data.page.totalElements);
+    setElements(data.content);
+    setLoading(false);
+  };
+  
+  useEffect(() => {
+    setLoading(true);
+    getQnAList(currentPage);
+  },[])
+    
   return (
-    <SupportQnA/>
+    <div className="flex w-full flex-col">
+      <SupportQnAList
+        elements={elements}
+        loading={loading}
+        userId={authStore.id}
+      />
+      {authStore.id > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.floor(totalElements / 10) + 1}
+          pageHandler={pageHandler}
+        />
+      )}
+    </div>
   );
 };
 export default SupportQnAContainer
diff --git a/src/containers/support/qna/SupportQnADetailEditContainer.tsx b/src/containers/support/qna/SupportQnADetailEditContainer.tsx
index d838d92b..14d69d2d 100644
--- a/src/containers/support/qna/SupportQnADetailEditContainer.tsx
+++ b/src/containers/support/qna/SupportQnADetailEditContainer.tsx
@@ -1,13 +1,92 @@
 "use client"
 
 import SupportQnADetailEdit from "@/components/support/qna/SupportQnADetailEdit";
+import useAuthStore from "@/store/authStore";
+import { QnADetailType, QnAMessageType } from "@/types/QnADto";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 interface ISupportQnADetailEditContainer {
-
+  data: QnADetailType;
 }
-const SupportQnADetailEditContainer = (props: ISupportQnADetailEditContainer) => {
+const SupportQnADetailEditContainer = ({data}: ISupportQnADetailEditContainer) => {
+  const authStore = useAuthStore();
+  const router = useRouter();
+  const [content, setContent] = useState("");
+  const [messageList, setMessageList] = useState(data.qnaMessages || []);
+
+  const changeInputHandler = (value: string) => {
+    setContent(value);
+  }
+
+const questionSubmitHandler = async () => {
+  if (!content.trim()) {
+    alert("답변 내용을 입력해 주세요.");
+    return;
+  }
+
+  try {
+    const response = await fetchWithAuth(`/api/support/question`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        content: content,
+        qnaId: data.id,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("서버에 요청하는 중 오류가 발생했습니다.");
+    }
+
+    const result: QnAMessageType = await response.json();
+    setMessageList(prev => [...prev, result]);
+
+  } catch (error) {
+    console.error("답변 등록 중 오류: ", error);
+    alert("답변 등록에 실패했습니다. 다시 시도해 주세요.");
+  }
+  };
+ 
+  const qnaCloseHandler = async () => {
+      try {
+        const response = await fetchWithAuth(
+          `/api/support/qna?id=${data.id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          },
+        );
+
+        if (!response.ok) {
+          throw new Error("서버에 요청하는 중 오류가 발생했습니다.");
+        }
+
+      router.replace("/support?menu=qna");
+
+      } catch (error) {
+        console.error("QnA 삭제 중 오류: ", error);
+        alert("QnA 삭제에 실패했습니다. 다시 시도해 주세요.");
+      }
+  }
+
+// 상태값을 늦게 불러와 렌더링이 약간 이상해짐 임시 해결
   return (
-     <SupportQnADetailEdit />
+    <>
+        <SupportQnADetailEdit
+          data={data}
+          messageList={messageList}
+          userId={authStore.id}
+          changeInputHandler={changeInputHandler}
+          questionSubmitHandler={questionSubmitHandler}
+          qnaCloseHandler={qnaCloseHandler}
+        />
+    </>
   );
 };
 export default SupportQnADetailEditContainer
\ No newline at end of file
diff --git a/src/containers/support/qna/SupportQnAWriteContainer.tsx b/src/containers/support/qna/SupportQnAWriteContainer.tsx
index df6f75d7..9c5e051b 100644
--- a/src/containers/support/qna/SupportQnAWriteContainer.tsx
+++ b/src/containers/support/qna/SupportQnAWriteContainer.tsx
@@ -1,15 +1,65 @@
-"use client"
+"use client";
 
 import SupportQnAWrite from "@/components/support/qna/SupportQnAWrite";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
 
-interface ISupportQnAWriteContainer {
+interface ISupportQnAWriteContainer {}
 
-}
-const SupportQnAWriteContainer = (props: ISupportQnAWriteContainer) => {
+const SupportQnAWriteContainer: React.FC<ISupportQnAWriteContainer> = () => {
+  const [content, setContent] = useState("");
+  const [category, setCategory] = useState("");
+  const [title, setTitle] = useState("");
+  const router = useRouter();
 
-    const submitHandle = (value: string) => {
+  const handleContentChange = (content: string) => {
+    setContent(content);
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setCategory(category);
+  };
+
+  const handleTitleChange = (title: string) => {
+    // New handler
+    setTitle(title);
+  };
+
+  const handleSubmit = async () => {
+    if (content.trim() && title.trim()) {
+      const response = await fetchWithAuth("/api/support/qna", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          categoryName: category,
+          content: content,
+          title: title,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const qnaId = await response.json();
+      router.replace(`/support/qna/detail/${qnaId}`);
     }
+  };
 
-  return <SupportQnAWrite onSubmit={submitHandle} />;
+  return (
+    <SupportQnAWrite
+      category={category}
+      content={content}
+      title={title} // Pass title to the component
+      onCategoryChange={handleCategoryChange}
+      onContentChange={handleContentChange}
+      onTitleChange={handleTitleChange} // Pass title change handler
+      onSubmit={handleSubmit}
+    />
+  );
 };
-export default SupportQnAWriteContainer
\ No newline at end of file
+
+export default SupportQnAWriteContainer;
diff --git a/src/types/NoticeDto.ts b/src/types/NoticeDto.ts
new file mode 100644
index 00000000..06239a8d
--- /dev/null
+++ b/src/types/NoticeDto.ts
@@ -0,0 +1,8 @@
+export interface NoticeType {
+  id: number;
+  title: string;
+  content: string;
+  createdAt: string; // Date 타입으로 처리하고 싶다면 string 대신 Date로 바꿀 수 있습니다.
+  categoryName: string;
+  isDeleted: boolean;
+}
diff --git a/src/types/QnADto.ts b/src/types/QnADto.ts
new file mode 100644
index 00000000..4d62a808
--- /dev/null
+++ b/src/types/QnADto.ts
@@ -0,0 +1,22 @@
+// 답변 타입
+export interface QnAMessageType {
+  id: number;
+  createdAt: string; // 문자열로 변경
+  userId: number;
+  content: string;
+}
+
+// QnA 데이터 타입
+export interface QnADetailType {
+  id: number;
+  title: string;
+  createdAt: string; // 문자열로 변경
+  status: "WAIT" | "ANSWER" | "CLOSED";
+  updatedAt: string; // 문자열로 변경
+  categoryName: string;
+  userId: number;
+  qnaMessages: QnAMessageType[];
+}
+
+// QnA 리스트 데이터 타입
+export type QnAListElementType = Omit<QnADetailType, "qnaMessages">;
\ No newline at end of file
diff --git a/src/utils/constant/BreadCrumbDirectory.ts b/src/utils/constant/BreadCrumbDirectory.ts
new file mode 100644
index 00000000..6bc08416
--- /dev/null
+++ b/src/utils/constant/BreadCrumbDirectory.ts
@@ -0,0 +1,18 @@
+export const NOTICE_DETAIL_BREADCRUMB_PATH = (id: number) => [
+  { label: "고객지원", href: "/support" },
+  { label: "공지사항", href: "/support?menu=notice" },
+  { label: `${id}`, href: "" },
+];
+
+export const QNA_DETAIL_BREADCRUMB_PATH = (id: number) => [
+  { label: "고객지원", href: "/support" },
+  { label: "QnA", href: "/support?menu=qna" },
+  { label: `${id}`, href: "" },
+];
+
+export const QNA_DETAIL_WRITE_BREADCRUMB_PATH = [
+  { label: "고객지원", href: "/support" },
+  { label: "QnA", href: "/support?menu=qna" },
+  { label: "질문 등록하기", href: "" },
+];
+