diff --git a/.nuxtignore b/.nuxtignore
new file mode 100644
index 0000000..0918c19
--- /dev/null
+++ b/.nuxtignore
@@ -0,0 +1 @@
+app/pages/**/*.ts
\ No newline at end of file
diff --git a/app/app.vue b/app/app.vue
index a3b61a4..b605d60 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -8,14 +8,38 @@ useHead({
 
 <template>
   <component :is="'style'">
-    @font-face { font-family: "Pretendard"; src: url("/font/PretendardVariable.woff2")
-    format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --primary:
-    45 138 231; --secondary: 239 247 255; --accent-1: 163 209 255; --accent-2: 249 199 91;
-    --destructive: 255 97 94; --gray-fe: 254 254 254; --background: 254 254 254; --gray-f5: 245 245
-    245; --gray-d9: 217 217 217; --gray-b4: 180 180 180; --gray-8f: 143 143 143; --gray-66: 102 102
-    102; --gray-1a: 26 26 26; --foreground: 26 26 26; } * { font-family: "Pretendard", sans-serif;
-    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height:
-    100vh; background-color: var(--background); color: var(--foreground); }
+    /* Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
+    https://github.com/orioncactus/pretendard This Font Software is licensed under the SIL Open Font
+    License, Version 1.1. This license is copied below, and is also available with a FAQ at:
+    http://scripts.sil.org/OFL */ @font-face { font-family: 'Pretendard'; font-weight: 900;
+    font-display: swap; src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2)
+    format('woff2'), url(./woff/Pretendard-Black.woff) format('woff'); } @font-face { font-family:
+    'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'),
+    url(./woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(./woff/Pretendard-ExtraBold.woff)
+    format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap;
+    src: local('Pretendard Bold'), url(./woff2/Pretendard-Bold.woff2) format('woff2'),
+    url(./woff/Pretendard-Bold.woff) format('woff'); } @font-face { font-family: 'Pretendard';
+    font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'),
+    url(./woff2/Pretendard-SemiBold.woff2) format('woff2'), url(./woff/Pretendard-SemiBold.woff)
+    format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap;
+    src: local('Pretendard Medium'), url(./woff2/Pretendard-Medium.woff2) format('woff2'),
+    url(./woff/Pretendard-Medium.woff) format('woff'); } @font-face { font-family: 'Pretendard';
+    font-weight: 400; font-display: swap; src: local('Pretendard Regular'),
+    url(./woff2/Pretendard-Regular.woff2) format('woff2'), url(./woff/Pretendard-Regular.woff)
+    format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap;
+    src: local('Pretendard Light'), url(./woff2/Pretendard-Light.woff2) format('woff2'),
+    url(./woff/Pretendard-Light.woff) format('woff'); } @font-face { font-family: 'Pretendard';
+    font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'),
+    url(./woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(./woff/Pretendard-ExtraLight.woff)
+    format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap;
+    src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'),
+    url(./woff/Pretendard-Thin.woff) format('woff'); } :root { --primary: 45 138 231; --secondary:
+    239 247 255; --accent-1: 163 209 255; --accent-2: 249 199 91; --destructive: 255 97 94;
+    --gray-fe: 254 254 254; --background: 254 254 254; --gray-f5: 245 245 245; --gray-d9: 217 217
+    217; --gray-b4: 180 180 180; --gray-8f: 143 143 143; --gray-66: 102 102 102; --gray-1a: 26 26
+    26; --foreground: 26 26 26; } * { font-family: "Pretendard", sans-serif; -webkit-font-smoothing:
+    antialiased; -moz-osx-font-smoothing: grayscale; } html { zoom: 0.8 } body { min-height: 100vh;
+    background-color: var(--background); color: var(--foreground); }
   </component>
   <Navbar />
   <NuxtPage class="mx-auto max-w-[1440px]" />
diff --git a/app/assets/icon/warning-house.svg b/app/assets/icon/warning-house.svg
new file mode 100644
index 0000000..f731ee1
--- /dev/null
+++ b/app/assets/icon/warning-house.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="24" viewBox="0 0 31 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 0L0 12.7059H4.65V24H26.35V12.7059H31L15.5 0ZM17.05 21.1765H13.95V18.3529H17.05V21.1765ZM17.05 15.5294H13.95V7.05882H17.05V15.5294Z" fill="#FF615E"/>
+</svg>
diff --git a/app/assets/image/ad-banner.png b/app/assets/image/ad-banner.png
new file mode 100644
index 0000000..f7e7b77
Binary files /dev/null and b/app/assets/image/ad-banner.png differ
diff --git a/app/assets/image/amisan.jpg b/app/assets/image/amisan.jpg
new file mode 100644
index 0000000..18c499d
Binary files /dev/null and b/app/assets/image/amisan.jpg differ
diff --git a/app/assets/image/flowerGimbap.jpg b/app/assets/image/flowerGimbap.jpg
new file mode 100644
index 0000000..45efdba
Binary files /dev/null and b/app/assets/image/flowerGimbap.jpg differ
diff --git a/app/assets/image/victorySuper.jpg b/app/assets/image/victorySuper.jpg
new file mode 100644
index 0000000..0316362
Binary files /dev/null and b/app/assets/image/victorySuper.jpg differ
diff --git a/app/components/Navbar.vue b/app/components/Navbar.vue
index e4f3b17..7913c14 100644
--- a/app/components/Navbar.vue
+++ b/app/components/Navbar.vue
@@ -1,7 +1,5 @@
 <template>
-  <nav
-    class="sticky top-0 z-[999] flex w-full items-center justify-center bg-background px-[80px] py-[40px]"
-  >
+  <nav class="sticky top-0 z-[999] flex w-full items-center justify-center bg-background py-[40px]">
     <!-- 로고 -->
     <NuxtLink to="/" class="inline-flex items-center gap-[2px]">
       <LogoOutline :font-controlled="false" filled="false" class="h-[35px] w-[35px]" />
@@ -61,30 +59,115 @@
     </div>
 
     <!-- 검색바 -->
-    <div
-      class="ml-[70px] flex items-center gap-[12px] rounded-full border-[1.5px] border-gray-b4 px-[30px] py-[15px]"
-    >
-      <SearchIcon class="h-[20px] w-[20px]" filled="false" />
-      <input
-        type="search"
-        placeholder="실거주 후기가 궁금하다면, 주소를 입력하세요."
-        class="w-full text-[16px] font-[500] text-foreground outline-none placeholder:text-gray-b4"
-      />
+    <div class="relative ml-[70px]">
+      <div
+        class="flex items-center gap-[12px] rounded-full border-[1.5px] border-gray-b4 px-[30px] py-[15px]"
+      >
+        <SearchIcon class="h-[20px] w-[20px]" filled="false" />
+        <input
+          :value="address"
+          type="search"
+          placeholder="실거주 후기가 궁금하다면, 주소를 입력하세요."
+          class="w-full text-[16px] font-[500] text-foreground outline-none placeholder:text-gray-b4 desktop:w-[20rem]"
+          @input="handleInput"
+        />
+      </div>
+
+      <!-- 검색 결과 -->
+      <div
+        v-if="searchResponse?.data && searchResponse.data.length > 0"
+        class="absolute left-0 right-0 top-full z-50 mt-[2px] flex max-h-[300px] flex-col gap-[10px] overflow-y-auto rounded-[15px] bg-white px-[20px] py-[15px] shadow-[0px_4px_20px_0px_rgba(0,0,0,0.15)]"
+      >
+        <div
+          v-for="suggestion in searchResponse?.data"
+          :key="suggestion.rnMgtSn"
+          class="px-[10px] py-[8px]"
+        >
+          <div
+            class="cursor-pointer rounded-[8px] p-[8px] hover:bg-gray-50"
+            @click="navigateToAddress(suggestion)"
+          >
+            <span
+              v-for="part in splitByKeyword(suggestion.roadAddrPart1, address)"
+              :key="part"
+              :class="[
+                'text-[14px] font-[400]',
+                part.toLowerCase() === address.toLowerCase()
+                  ? 'font-[600] text-primary'
+                  : 'text-foreground',
+              ]"
+            >
+              {{ part }}
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </nav>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useQuery } from "@tanstack/vue-query";
 import SearchIcon from "~/assets/icon/search.svg";
 import LogoOutline from "~/assets/icon/logo-outline.svg";
 import Setbangsari from "~/assets/icon/setbangsari.svg";
+import { apiInstance } from "~/utils/api";
+import type { BaseResponse } from "~/utils/api";
+import type { SearchAddressResponse } from "~/pages/community/_api/types/SearchAddressResponse";
+import { useDebounce } from "~/composables/useDebounce";
+import { splitByKeyword } from "~/pages/community/_utils/splitByKeyword";
 
 // PLUS 구독중 여부
 const isPlus = ref(true);
 
 const route = useRoute();
+const router = useRouter();
 
-const isActive = (path) => {
+const isActive = (path: string) => {
   return route.path === path || route.path.startsWith(path + "/");
 };
+
+// 검색 기능
+const address = ref("");
+const debouncedAddress = useDebounce(address, 500);
+
+const { data: searchResponse } = useQuery<BaseResponse<SearchAddressResponse>>({
+  queryKey: ["search-address", debouncedAddress],
+  queryFn: async () =>
+    apiInstance
+      .get("v1/address-search", {
+        params: {
+          currentPage: 1,
+          countPerPage: 20,
+          keyword: debouncedAddress.value,
+          resultType: "json",
+        },
+      })
+      .then((res) => res.data),
+  enabled: computed(() => !!debouncedAddress.value),
+});
+
+const handleInput = (e: Event) => {
+  address.value = (e.target as HTMLInputElement).value.trim();
+};
+
+const navigateToAddress = (suggestion: {
+  rnMgtSn: string;
+  buldMnnm: string;
+  roadAddrPart1: string;
+}) => {
+  // 검색 결과 숨기기
+  address.value = "";
+
+  // 커뮤니티 페이지로 이동하면서 주소 정보를 쿼리 파라미터로 전달
+  router.push({
+    path: "/community",
+    query: {
+      roadCode: suggestion.rnMgtSn,
+      buildingNumber: suggestion.buldMnnm,
+      address: suggestion.roadAddrPart1,
+    },
+  });
+};
 </script>
diff --git a/app/components/SafetyTypeChip.vue b/app/components/SafetyTypeChip.vue
index ac1e5e3..29b8bec 100644
--- a/app/components/SafetyTypeChip.vue
+++ b/app/components/SafetyTypeChip.vue
@@ -7,7 +7,9 @@
           ? 'rgb(var(--primary))'
           : safetyType === SafetyType.Caution
             ? 'rgb(var(--accent-2))'
-            : 'rgb(var(--destructive))',
+            : safetyType === SafetyType.Dangerous
+              ? 'rgb(var(--destructive))'
+              : 'rgb(var(--gray-8f))',
     }"
   >
     <span
@@ -22,9 +24,15 @@
     >
       이 부동산은 거래에 주의가 필요합니다.
     </span>
-    <span v-else class="text-center text-[24px] font-[600] text-gray-fe">
+    <span
+      v-else-if="safetyType === SafetyType.Dangerous"
+      class="text-center text-[24px] font-[600] text-gray-fe"
+    >
       이 부동산은 거래에 위험합니다.
     </span>
+    <span v-else class="text-center text-[24px] font-[600] text-gray-fe">
+      분석 결과를 불러오는 중...
+    </span>
   </div>
 </template>
 
@@ -33,7 +41,7 @@ import getSafetyTypeByScore from "~/utils/getSafetyTypeByScore";
 import { SafetyType } from "~/types/SafetyType";
 
 const props = defineProps<{
-  score: number;
+  score: number | null;
 }>();
 
 const safetyType = computed(() => getSafetyTypeByScore(props.score));
diff --git a/app/pages/analyze/_api/types/AnalyzeSubmitResponse.ts b/app/pages/analyze/_api/types/AnalyzeSubmitResponse.ts
new file mode 100644
index 0000000..6bb83c2
--- /dev/null
+++ b/app/pages/analyze/_api/types/AnalyzeSubmitResponse.ts
@@ -0,0 +1,4 @@
+export interface AnalyzeSubmitResponse {
+  reportId: number;
+  processingStatus: string;
+}
diff --git a/app/pages/analyze/_components/FormPanel.vue b/app/pages/analyze/_components/FormPanel.vue
index 7e7da11..bc269fe 100644
--- a/app/pages/analyze/_components/FormPanel.vue
+++ b/app/pages/analyze/_components/FormPanel.vue
@@ -1,57 +1,11 @@
 <script setup lang="ts">
 import { watch } from "vue";
 import { useForm } from "@tanstack/vue-form";
-import { z } from "zod";
 import { useFileStore } from "~/stores/file";
-import { useModalStore } from "~/stores/modal";
-import PdfSubmitted from "../_modals/PdfSubmitted.vue";
+import { formSchema } from "../_utils/formSchema";
+import type z from "zod";
 
 const fileStore = useFileStore();
-const modalStore = useModalStore();
-
-const formSchema = z
-  .object({
-    rentType: z.literal("전세").or(z.literal("월세")),
-    deposit_hundred_million: z
-      .string()
-      .regex(/^[0-9]*$/)
-      .refine((val) => Number(val) <= 999),
-    deposit_ten_million: z
-      .string()
-      .regex(/^[0-9]?$/)
-      .refine((val) => Number(val) <= 9),
-    deposit_million: z
-      .string()
-      .regex(/^[0-9]{0,3}$/)
-      .refine((val) => Number(val) <= 999),
-    monthlyRent_hundred: z.string().regex(/^[0-9]*$/),
-    monthlyRent_ten_thousand: z
-      .string()
-      .regex(/^[0-9]{0,2}$/)
-      .refine((val) => Number(val) <= 99),
-    detailed_address_dong: z.string().min(1),
-    detailed_address_ho: z.string().min(1),
-    selected_file: z.union([z.instanceof(File), z.null()]),
-    selected_example: z.string(),
-  })
-  .refine((data) => {
-    const hasFile = data.selected_file;
-    const hasExample = data.selected_example.length > 0;
-    return hasFile || hasExample;
-  })
-  .refine((data) => {
-    if (
-      data.deposit_hundred_million?.length &&
-      data.deposit_ten_million?.length &&
-      data.deposit_million?.length
-    ) {
-      return (
-        data.rentType === "전세" ||
-        (data.monthlyRent_hundred?.length && data.monthlyRent_ten_thousand?.length)
-      );
-    }
-    return false;
-  });
 
 const form = useForm({
   defaultValues: {
@@ -67,17 +21,8 @@ const form = useForm({
     selected_example: "",
   },
   validators: { onChange: formSchema, onSubmit: formSchema },
-  onSubmit: async ({ value }) => {
-    const totalDeposit =
-      (Number(value.deposit_hundred_million) || 0) * 1_0000_0000 +
-      (Number(value.deposit_ten_million) || 0) * 1000_0000 +
-      (Number(value.deposit_million) || 0) * 100_0000;
-    const totalMonthlyRent =
-      (Number(value.monthlyRent_hundred) || 0) * 1000000 +
-      (Number(value.monthlyRent_ten_thousand) || 0) * 10000;
-
-    console.log(totalDeposit, totalMonthlyRent, value.selected_example, value.selected_file);
-    modalStore.open("pdf-submitted");
+  onSubmit: (data) => {
+    emit("submit", data.value);
   },
 });
 
@@ -89,8 +34,27 @@ watch(
         form.setFieldValue("selected_file", fileStore.selectedFile);
         form.setFieldValue("selected_example", "");
       } else {
+        // 예시 파일 선택 시
         form.setFieldValue("selected_file", null);
         form.setFieldValue("selected_example", String(fileStore.selectedExample));
+
+        const exampleNo = String(fileStore.selectedExample).match(/\d+/)?.[0];
+        switch (exampleNo) {
+          case "1":
+            form.setFieldValue("detailed_address_dong", "1");
+            form.setFieldValue("detailed_address_ho", "914");
+            break;
+          case "2":
+            form.setFieldValue("detailed_address_dong", "");
+            form.setFieldValue("detailed_address_ho", "202");
+            break;
+          case "3":
+            form.setFieldValue("detailed_address_dong", "가");
+            form.setFieldValue("detailed_address_ho", "204");
+            break;
+          default:
+            break;
+        }
       }
     } else {
       form.setFieldValue("selected_file", null);
@@ -100,11 +64,15 @@ watch(
   },
   { immediate: true }
 );
+
+const emit = defineEmits<{
+  submit: [data: z.infer<typeof formSchema>];
+}>();
 </script>
 
 <template>
   <form
-    class="flex flex-col gap-[40px] py-[20px]"
+    class="flex flex-col gap-[40px] pt-[20px]"
     @submit="
       (e) => {
         e.preventDefault();
@@ -157,6 +125,7 @@ watch(
                 :id="field.name"
                 :name="field.name"
                 :value="field.state.value"
+                placeholder="0"
                 type="text"
                 autocomplete="off"
                 :class="[
@@ -178,6 +147,7 @@ watch(
                 :id="field.name"
                 :name="field.name"
                 :value="field.state.value"
+                placeholder="0"
                 type="text"
                 autocomplete="off"
                 :class="[
@@ -199,6 +169,7 @@ watch(
                 :id="field.name"
                 :name="field.name"
                 :value="field.state.value"
+                placeholder="0"
                 type="text"
                 autocomplete="off"
                 :class="[
@@ -228,6 +199,7 @@ watch(
                     :id="field.name"
                     :name="field.name"
                     :value="field.state.value"
+                    placeholder="0"
                     type="text"
                     autocomplete="off"
                     :class="[
@@ -249,6 +221,7 @@ watch(
                     :id="field.name"
                     :name="field.name"
                     :value="field.state.value"
+                    placeholder="0"
                     type="text"
                     autocomplete="off"
                     :class="[
@@ -334,7 +307,4 @@ watch(
       </template>
     </form.Subscribe>
   </form>
-
-  <!-- 모달 -->
-  <PdfSubmitted />
 </template>
diff --git a/app/pages/analyze/_modals/PdfSubmitted.vue b/app/pages/analyze/_modals/PdfSubmitted.vue
index 8860228..d8df77e 100644
--- a/app/pages/analyze/_modals/PdfSubmitted.vue
+++ b/app/pages/analyze/_modals/PdfSubmitted.vue
@@ -1,10 +1,72 @@
 <script setup lang="ts">
 import CheckIcon from "~/assets/icon/check.svg";
 import { useModalStore } from "~/stores/modal";
+import { useMutationState } from "@tanstack/vue-query";
+import type { AnalyzeSubmitResponse } from "../_api/types/AnalyzeSubmitResponse";
+import type { BaseResponse } from "~/utils/api";
 
 const modalStore = useModalStore();
 
-const PROGRESS = ref(50);
+// Track mutation state to show real progress
+const mutationState = useMutationState({
+  filters: { mutationKey: ["analyze-submit"] },
+  select: (mutation) => ({
+    status: mutation.state.status,
+    data: mutation.state.data as BaseResponse<AnalyzeSubmitResponse> | undefined,
+    error: mutation.state.error,
+  }),
+});
+
+// Calculate progress based on mutation status
+const PROGRESS = computed(() => {
+  const latestState = mutationState.value?.[0];
+  if (!latestState) return 0;
+
+  switch (latestState.status) {
+    case "idle":
+      return 0;
+    case "pending":
+      return 50;
+    case "success":
+      return 100;
+    case "error":
+      return 0;
+    default:
+      return 0;
+  }
+});
+
+// Show different messages based on status
+const statusMessage = computed(() => {
+  const latestState = mutationState.value?.[0];
+  if (!latestState) return "제출 준비 중...";
+
+  switch (latestState.status) {
+    case "pending":
+      return "분석이 완료되면 결과 페이지로\n이동하니 잠시만 기다려주세요.";
+    case "success":
+      return "분석이 완료되었습니다!\n결과 페이지로 이동합니다.";
+    case "error":
+      return "분석 중 오류가 발생했습니다.\n다시 시도해주세요.";
+    default:
+      return "분석이 완료되면 결과 페이지로\n이동하니 잠시만 기다려주세요.";
+  }
+});
+
+// Watch for mutation completion and navigate to result page
+watch(
+  () => mutationState.value,
+  (states) => {
+    const latestState = states?.[0];
+    if (latestState?.status === "success" && latestState.data?.data?.reportId) {
+      setTimeout(() => {
+        modalStore.close("pdf-submitted");
+        navigateTo(`/analyze/result/${latestState.data?.data.reportId}`);
+      }, 2 * 1000);
+    }
+  },
+  { deep: true }
+);
 </script>
 
 <template>
@@ -12,16 +74,15 @@ const PROGRESS = ref(50);
     id="pdf-submitted"
     size="small"
     :buttons="undefined"
+    :backdrop-close="false"
     @close="modalStore.close('pdf-submitted')"
   >
     <CheckIcon :font-controlled="false" filled="false" class="mx-auto h-[80px] w-[80px]" />
     <div class="flex flex-col gap-[30px]">
       <div class="mt-[25px]">
         <h1 class="text-center text-[32px] font-[600] text-foreground">제출이 완료되었습니다.</h1>
-        <p class="mt-[20px] text-center text-[24px] font-[400] text-gray-8f">
-          분석이 완료되면 결과 페이지로
-          <br />
-          이동하니 잠시만 기다려주세요.
+        <p class="mt-[20px] whitespace-pre-line text-center text-[24px] font-[400] text-gray-8f">
+          {{ statusMessage }}
         </p>
       </div>
       <!-- 진행바 -->
diff --git a/app/pages/analyze/_modals/PdfUpload.vue b/app/pages/analyze/_modals/PdfUpload.vue
index 362bcbc..858d836 100644
--- a/app/pages/analyze/_modals/PdfUpload.vue
+++ b/app/pages/analyze/_modals/PdfUpload.vue
@@ -84,36 +84,36 @@ const handleSubmit = async () => {
       <div class="flex items-center gap-[40px]">
         <img
           src="~/assets/image/pdf-example.png"
-          alt="등기부등본 예시 1"
+          alt="예시파일1_등기부등본.pdf"
           :class="[
             'h-[220px] w-[220px] cursor-pointer rounded-[10px] object-cover object-top transition duration-100 ease-in-out',
-            fileStore.selectedExample === 'example1'
+            fileStore.selectedExample === '예시파일1_등기부등본.pdf'
               ? 'ring-[5px] ring-primary'
               : 'ring-1 ring-gray-b4',
           ]"
-          @click="handleExampleSelect('example1')"
+          @click="handleExampleSelect('예시파일1_등기부등본.pdf')"
         />
         <img
           src="~/assets/image/pdf-example.png"
-          alt="등기부등본 예시 2"
+          alt="예시파일2_등기부등본.pdf"
           :class="[
             'h-[220px] w-[220px] cursor-pointer rounded-[10px] object-cover object-top transition duration-100 ease-in-out',
-            fileStore.selectedExample === 'example2'
+            fileStore.selectedExample === '예시파일2_등기부등본.pdf'
               ? 'ring-[5px] ring-primary'
               : 'ring-1 ring-gray-b4',
           ]"
-          @click="handleExampleSelect('example2')"
+          @click="handleExampleSelect('예시파일2_등기부등본.pdf')"
         />
         <img
           src="~/assets/image/pdf-example.png"
-          alt="등기부등본 예시 3"
+          alt="예시파일3_등기부등본.pdf"
           :class="[
             'h-[220px] w-[220px] cursor-pointer rounded-[10px] object-cover object-top transition duration-100 ease-in-out',
-            fileStore.selectedExample === 'example3'
+            fileStore.selectedExample === '예시파일3_등기부등본.pdf'
               ? 'ring-[5px] ring-primary'
               : 'ring-1 ring-gray-b4',
           ]"
-          @click="handleExampleSelect('example3')"
+          @click="handleExampleSelect('예시파일3_등기부등본.pdf')"
         />
       </div>
       <label
diff --git a/app/pages/analyze/_utils/calculations.ts b/app/pages/analyze/_utils/calculations.ts
new file mode 100644
index 0000000..f583935
--- /dev/null
+++ b/app/pages/analyze/_utils/calculations.ts
@@ -0,0 +1,22 @@
+export interface MoneyFormValues {
+  deposit_hundred_million?: string;
+  deposit_ten_million?: string;
+  deposit_million?: string;
+  monthlyRent_hundred?: string;
+  monthlyRent_ten_thousand?: string;
+}
+
+// Helper function to calculate total deposit amount
+export const calculateDepositAmount = (data: MoneyFormValues): number => {
+  const hundredMillion = Number(data.deposit_hundred_million || 0) * 100_000_000;
+  const tenMillion = Number(data.deposit_ten_million || 0) * 10_000_000;
+  const million = Number(data.deposit_million || 0) * 1_000_000;
+  return hundredMillion + tenMillion + million;
+};
+
+// Helper function to calculate total monthly rent amount
+export const calculateMonthlyRentAmount = (data: MoneyFormValues): number => {
+  const hundred = Number(data.monthlyRent_hundred || 0) * 1_000_000;
+  const tenThousand = Number(data.monthlyRent_ten_thousand || 0) * 10_000;
+  return hundred + tenThousand;
+};
diff --git a/app/pages/analyze/_utils/formSchema.ts b/app/pages/analyze/_utils/formSchema.ts
new file mode 100644
index 0000000..6aad7d2
--- /dev/null
+++ b/app/pages/analyze/_utils/formSchema.ts
@@ -0,0 +1,52 @@
+import z from "zod";
+import { calculateDepositAmount, calculateMonthlyRentAmount } from "./calculations";
+
+export const formSchema = z
+  .object({
+    rentType: z.literal("전세").or(z.literal("월세")),
+    deposit_hundred_million: z
+      .string()
+      .regex(/^[0-9]*$/)
+      .refine((val) => Number(val) <= 999),
+    deposit_ten_million: z
+      .string()
+      .regex(/^[0-9]?$/)
+      .refine((val) => Number(val) <= 9),
+    deposit_million: z
+      .string()
+      .regex(/^[0-9]{0,3}$/)
+      .refine((val) => Number(val) <= 999),
+    monthlyRent_hundred: z
+      .string()
+      .regex(/^[0-9]*$/)
+      .refine((val) => Number(val) <= 999),
+    monthlyRent_ten_thousand: z
+      .string()
+      .regex(/^[0-9]{0,2}$/)
+      .refine((val) => Number(val) <= 99),
+    detailed_address_dong: z.string(),
+    detailed_address_ho: z.string(),
+    selected_file: z.union([z.instanceof(File), z.null()]),
+    selected_example: z.string(),
+  })
+  .refine((data) => {
+    const hasFile = data.selected_file;
+    const hasExample = data.selected_example.length > 0;
+    return hasFile || hasExample;
+  })
+  .refine((data) => {
+    const totalDeposit = calculateDepositAmount(data);
+    const totalMonthlyRent = calculateMonthlyRentAmount(data);
+
+    // Deposit must always be greater than 0
+    if (totalDeposit <= 0) {
+      return false;
+    }
+
+    // If rent type is "월세", monthly rent must also be greater than 0
+    if (data.rentType === "월세" && totalMonthlyRent <= 0) {
+      return false;
+    }
+
+    return true;
+  });
diff --git a/app/pages/analyze/index.vue b/app/pages/analyze/index.vue
index 9379efa..9ae35f6 100644
--- a/app/pages/analyze/index.vue
+++ b/app/pages/analyze/index.vue
@@ -1,3 +1,90 @@
+<script setup lang="ts">
+import PDFUploadPanel from "./_components/PDFUploadPanel.vue";
+import FormPanel from "./_components/FormPanel.vue";
+import type { formSchema } from "./_utils/formSchema";
+import { calculateDepositAmount, calculateMonthlyRentAmount } from "./_utils/calculations";
+import type z from "zod";
+import { useMutation } from "@tanstack/vue-query";
+import type { AnalyzeSubmitResponse } from "./_api/types/AnalyzeSubmitResponse";
+import { apiInstance, type BaseResponse } from "~/utils/api";
+import { useModalStore } from "~/stores/modal";
+import PdfSubmitted from "./_modals/PdfSubmitted.vue";
+
+const modalStore = useModalStore();
+
+const { mutate: submit } = useMutation<
+  BaseResponse<AnalyzeSubmitResponse>,
+  Error,
+  z.infer<typeof formSchema>
+>({
+  mutationKey: ["analyze-submit"],
+  mutationFn: async (data) => {
+    const isMonthlyRent = data.rentType === "월세" ? "1" : "0";
+
+    const deposit = calculateDepositAmount(data).toString();
+
+    const monthlyRent =
+      data.rentType === "전세" ? "0" : calculateMonthlyRentAmount(data).toString();
+
+    // Build detailed address
+    let detailAddress = "";
+    if (data.detailed_address_dong && data.detailed_address_ho) {
+      detailAddress = `${data.detailed_address_dong}동 ${data.detailed_address_ho}호`;
+    } else if (data.detailed_address_dong) {
+      detailAddress = `${data.detailed_address_dong}동`;
+    } else if (data.detailed_address_ho) {
+      detailAddress = `${data.detailed_address_ho}호`;
+    }
+
+    let isExample = "0";
+    let fileToUpload: File;
+
+    if (data.selected_example) {
+      // 예시 파일 불러오기
+      isExample = data.selected_example.match(/\d+/)?.[0] || "1";
+
+      // 예시 파일 PDF fetch
+      const response = await fetch(`/pdf/${data.selected_example}`);
+      const blob = await response.blob();
+
+      fileToUpload = new File([blob], data.selected_example, { type: "application/pdf" });
+    } else {
+      // 직접 업로드함
+      isExample = "0";
+      fileToUpload = data.selected_file!;
+    }
+
+    const formData = new FormData();
+    formData.append(
+      "file",
+      fileToUpload,
+      data.selected_example ? data.selected_example : data.selected_file?.name // 예시 파일 이름 또는 직접 업로드 파일 이름
+    );
+
+    const queryParams = new URLSearchParams({
+      isMonthlyRent,
+      deposit,
+      monthlyRent,
+      detailAddress,
+      isExample,
+    });
+
+    return apiInstance
+      .post(`/analysis-reports/analysis-result?${queryParams.toString()}`, formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      })
+      .then((res) => res.data);
+  },
+});
+
+const handleSubmit = (data: z.infer<typeof formSchema>) => {
+  modalStore.open("pdf-submitted");
+  submit(data);
+};
+</script>
+
 <template>
   <main>
     <div class="px-[90px] py-[120px]">
@@ -6,13 +93,17 @@
       </h1>
       <div class="mt-[60px] flex justify-center gap-[60px]">
         <PDFUploadPanel />
-        <FormPanel />
+        <FormPanel @submit="handleSubmit" />
       </div>
+      <!-- 광고 배너 -->
+      <img
+        src="~/assets/image/ad-banner.png"
+        alt="광고 배너"
+        class="mx-auto mt-[105px] w-full max-w-[1200px] rounded-[20px]"
+      />
     </div>
   </main>
-</template>
 
-<script setup>
-import PDFUploadPanel from "./_components/PDFUploadPanel.vue";
-import FormPanel from "./_components/FormPanel.vue";
-</script>
+  <!-- 모달 -->
+  <PdfSubmitted />
+</template>
diff --git a/app/pages/analyze/result/[reportId]/_api/types/AnalyzeResultResponse.ts b/app/pages/analyze/result/[reportId]/_api/types/AnalyzeResultResponse.ts
new file mode 100644
index 0000000..e7aacc5
--- /dev/null
+++ b/app/pages/analyze/result/[reportId]/_api/types/AnalyzeResultResponse.ts
@@ -0,0 +1,11 @@
+export interface AnalyzeResultResponse {
+  reportId: number;
+  analysisReportUrl: string;
+  address: string;
+  safetyScore: number;
+  summary: string;
+  comment: string;
+  safetyDescription: string;
+  insuranceDescription: string;
+  warning: "WARN" | "DEFAULT";
+}
diff --git a/app/pages/analyze/result/_components/ProcessAndDisclaimer.vue b/app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue
similarity index 100%
rename from app/pages/analyze/result/_components/ProcessAndDisclaimer.vue
rename to app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue
diff --git a/app/pages/analyze/result/_components/ProcessStep.vue b/app/pages/analyze/result/[reportId]/_components/ProcessStep.vue
similarity index 100%
rename from app/pages/analyze/result/_components/ProcessStep.vue
rename to app/pages/analyze/result/[reportId]/_components/ProcessStep.vue
diff --git a/app/pages/analyze/result/[reportId]/_components/WarningChip.vue b/app/pages/analyze/result/[reportId]/_components/WarningChip.vue
new file mode 100644
index 0000000..d54dfd9
--- /dev/null
+++ b/app/pages/analyze/result/[reportId]/_components/WarningChip.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import WarningHouse from "~/assets/icon/warning-house.svg";
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center gap-[12px] rounded-full border-[1.5px] border-destructive bg-[#FFE5E5] px-[25px] py-[13px]"
+  >
+    <WarningHouse :font-controlled="false" filled="false" class="h-[24px] w-[31px]" />
+    <span class="text-[20px] font-[700] text-destructive">
+      셋방살이에서 사기 신고 접수된 이력이 있는 매물입니다.
+    </span>
+  </div>
+</template>
diff --git a/app/pages/analyze/result/[reportId]/index.vue b/app/pages/analyze/result/[reportId]/index.vue
new file mode 100644
index 0000000..c82f8a7
--- /dev/null
+++ b/app/pages/analyze/result/[reportId]/index.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query";
+import ProcessAndDisclaimer from "./_components/ProcessAndDisclaimer.vue";
+import { apiInstance } from "~/utils/api";
+import type { AnalyzeResultResponse } from "./_api/types/AnalyzeResultResponse";
+
+const reportId = useRoute().params.reportId;
+
+const { data } = useQuery<BaseResponse<AnalyzeResultResponse>>({
+  queryKey: ["analyze-result", reportId],
+  queryFn: () => apiInstance.get(`/user/${reportId}/analysis-reports`).then((res) => res.data),
+});
+</script>
+
+<template>
+  <main>
+    <div class="flex flex-col gap-[25px]">
+      <h1 class="mt-[40px] text-center text-[28px] font-[700] text-primary">
+        등기부등본 분석 결과
+      </h1>
+      <div class="mx-auto">
+        <SafetyTypeChip :score="data?.data.safetyScore || null" />
+      </div>
+    </div>
+    <!-- 분석 결과 -->
+    <div class="flex gap-[80px] px-[150px] pt-[50px]">
+      <!-- PDF -->
+      <embed
+        :src="data?.data.analysisReportUrl"
+        type="application/pdf"
+        class="min-w-[475px] max-w-[475px] overflow-hidden rounded-[15px]"
+      />
+      <div class="flex flex-col gap-[30px] overflow-y-auto">
+        <!-- 한 줄 평가 -->
+        <section class="block space-y-[8px]">
+          <header class="flex items-center gap-[8px]">
+            <h2 class="text-[24px] font-[500] text-foreground">
+              안전지수
+              <span class="font-[600] text-primary">{{ data?.data.safetyScore }} 점</span>
+              <span class="text-[16px] font-[500]">{{ " " }}/ 10점</span>
+            </h2>
+            <div>
+              <StarRatings :rating="data?.data.safetyScore! / 2" :size="26" />
+            </div>
+          </header>
+          <p class="text-[20px] font-[500] text-foreground">
+            {{ data?.data.summary }}
+          </p>
+        </section>
+
+        <!-- 지수 선정 이유 -->
+        <section class="block space-y-[8px]">
+          <header class="space-y-[4px]">
+            <h2 class="text-[20px] font-[600] text-primary">지수 선정 이유</h2>
+            <div class="h-[1px] w-full rounded-full bg-primary"></div>
+          </header>
+          <p class="text-[18px] font-[400] text-foreground">
+            {{ data?.data.safetyDescription }}
+          </p>
+        </section>
+
+        <!-- 보증보험 가입 여부 -->
+        <section class="block space-y-[8px]">
+          <header class="space-y-[4px]">
+            <h2 class="text-[20px] font-[600] text-primary">보증보험 가입 여부</h2>
+            <div class="h-[1px] w-full rounded-full bg-primary"></div>
+          </header>
+          <p class="text-[18px] font-[400] text-foreground">
+            {{ data?.data.insuranceDescription }}
+          </p>
+        </section>
+      </div>
+    </div>
+
+    <!-- 분석 절차 -->
+    <ProcessAndDisclaimer />
+  </main>
+</template>
diff --git a/app/pages/analyze/result/index.vue b/app/pages/analyze/result/index.vue
deleted file mode 100644
index 4aebb89..0000000
--- a/app/pages/analyze/result/index.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import ProcessAndDisclaimer from "./_components/ProcessAndDisclaimer.vue";
-
-const RATING = ref(4.5);
-</script>
-
-<template>
-  <main>
-    <div class="flex flex-col gap-[25px]">
-      <h1 class="mt-[40px] text-center text-[28px] font-[700] text-primary">
-        등기부등본 분석 결과
-      </h1>
-      <div class="mx-auto rounded-full bg-primary px-[40px] py-[15px]">
-        <h2 class="text-center text-[28px] font-[600] text-gray-fe">
-          크게 걱정하지 않아도 되는 집
-        </h2>
-      </div>
-    </div>
-    <!-- 분석 결과 -->
-    <div class="flex gap-[80px] px-[150px] pt-[50px]">
-      <img
-        src="~/assets/image/analysis-result-example.png"
-        alt="분석 결과 예시"
-        class="w-[475px]"
-      />
-      <div class="flex flex-col gap-[30px] overflow-y-auto">
-        <!-- 한 줄 평가 -->
-        <section class="block space-y-[8px]">
-          <header class="flex items-center gap-[8px]">
-            <h2 class="text-[24px] font-[500] text-foreground">
-              안전지수
-              <span class="font-[600] text-primary">7점</span>
-              <span class="text-[16px] font-[500]">{{ " " }}/ 10점</span>
-            </h2>
-            <div>
-              <StarRatings :rating="RATING" :size="26" />
-            </div>
-          </header>
-          <p class="text-[20px] font-[500] text-foreground">
-            큰 법적 위험 없이 비교적 안전한 집이지만, 근저당이 있는 만큼 주의는 필요한 수준이에요.
-            보증보험 가입 가능성도 높은 편이라 전월세 계약을 고려해볼 만한 조건이라고 볼 수
-            있습니다.
-          </p>
-        </section>
-
-        <!-- 지수 선정 이유 -->
-        <section class="block space-y-[8px]">
-          <header class="space-y-[4px]">
-            <h2 class="text-[20px] font-[600] text-primary">지수 선정 이유</h2>
-            <div class="h-[1px] w-full rounded-full bg-primary"></div>
-          </header>
-          <p class="text-[18px] font-[400] text-foreground">
-            등기부등본을 확인해본 결과, 가처분, 가압류, 가등기 등 권리관계에 중대한 영향을 줄 수
-            있는 위험요소는 전혀 없었습니다. 다만 근저당권이 설정되어 있긴 하지만, 설정 금액과
-            비교해보았을 때 이 집의 공시지가나 최근 실거래가 기준으로 볼 때 보증금을 회수하는데 있어
-            큰 위험은 아니라고 판단되었어요. 이런 점들을 종합해봤을 때, 전체적으로 전세보증금에 대한
-            회수 가능성은 양호한 편이며, 지나치게 우려할 수준은 아닙니다.
-          </p>
-        </section>
-
-        <!-- 보증보험 가입 여부 -->
-        <section class="block space-y-[8px]">
-          <header class="space-y-[4px]">
-            <h2 class="text-[20px] font-[600] text-primary">보증보험 가입 여부</h2>
-            <div class="h-[1px] w-full rounded-full bg-primary"></div>
-          </header>
-          <p class="text-[18px] font-[400] text-foreground">
-            등기부상 확인 결과 위험도가 낮고, 근저당권의 비중도 과하지 않기 때문에 보증보험 심사에서
-            긍정적으로 평가될 수 있어요. 다만, 집주인의 세금 체납 여부, 주택 수, 임대사업자 등록
-            여부 등에 따라 실제 가입 가능 여부는 달라질 수 있으니, 계약 전에는 꼭 보증보험 가입 가능
-            여부를 한 번 더 확인해보는 것을 추천드려요.
-          </p>
-        </section>
-      </div>
-    </div>
-
-    <!-- 분석 절차 -->
-    <ProcessAndDisclaimer />
-  </main>
-</template>
diff --git a/app/pages/checklist/_components/CheckCard.vue b/app/pages/checklist/_components/CheckCard.vue
index e7a5a24..5fe092d 100644
--- a/app/pages/checklist/_components/CheckCard.vue
+++ b/app/pages/checklist/_components/CheckCard.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="relative z-0 rounded-bl-2xl rounded-br-2xl rounded-tl-2xl rounded-tr-2xl bg-neutral-100 px-7 pb-9 pt-6"
+    class="relative z-0 rounded-bl-[15px] rounded-br-[15px] rounded-tl-[15px] rounded-tr-[15px] bg-gray-f5 px-7 pb-9 pt-6"
     :style="{ width: cardWidth, height: cardHeight }"
   >
     <img
-      class="absolute left-0 top-0 z-10 w-full rounded-tl-2xl rounded-tr-2xl object-cover"
+      class="absolute left-0 top-0 z-10 w-full rounded-tl-[15px] rounded-tr-[15px] object-cover"
       :src="img"
       alt="사진"
       :style="{ height: cardImgHeight }"
diff --git a/app/pages/checklist/_components/CheckTipBox.vue b/app/pages/checklist/_components/CheckTipBox.vue
index d9ed594..3a7b49f 100644
--- a/app/pages/checklist/_components/CheckTipBox.vue
+++ b/app/pages/checklist/_components/CheckTipBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-2xl bg-neutral-100 px-[50px] py-[30px]"
+    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-[15px] bg-gray-f5 px-[50px] py-[30px]"
   >
     <div
-      class="flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-500 text-4xl text-white"
+      class="flex h-16 w-16 items-center justify-center rounded-[15px] bg-primary text-[40px] text-background"
     >
       {{ checkNum }}
     </div>
diff --git a/app/pages/checklist/index.vue b/app/pages/checklist/index.vue
index e7bef46..9648c5d 100644
--- a/app/pages/checklist/index.vue
+++ b/app/pages/checklist/index.vue
@@ -1,17 +1,18 @@
 <template>
-  <div class="flex flex-col items-center justify-start">
+  <div class="mb-[200px] flex flex-col items-center justify-start">
     <div
-      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-2xl bg-neutral-100 py-[35px]"
+      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-[15px] bg-gray-f5 py-[35px]"
     >
       <img src="~/assets/image/checklistIcon.jpg" alt="체크리스트" class="h-[147px] w-[107px]" />
       <div
-        class="justify-start px-[40px] py-[10px] text-center font-['Pretendard'] text-3xl font-semibold leading-10 text-zinc-900"
+        class="justify-start px-[40px] py-[20px] text-center text-[32px] font-[600] text-gray-1a"
       >
         부동산 퀴즈 풀고 크레딧 받기
       </div>
 
       <button
-        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-[#2D8AE7] font-['Pretendard'] text-[32px] font-semibold leading-10 text-white"
+        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-primary text-[28px] font-[500] text-background"
+        @click="gotoQuiz"
       >
         퀴즈풀기
       </button>
@@ -19,10 +20,8 @@
     <div class="mt-[90px] flex w-[896px] flex-col">
       <section class="mb-[80px]">
         <div class="mb-[60px] text-center">
-          <div class="font-['Pretendard'] text-4xl font-bold leading-[58px] text-blue-500">
-            잠깐!
-          </div>
-          <span class="font-['Pretendard'] text-4xl font-bold leading-[58px] text-zinc-900">
+          <div class="text-[40px] font-[700] leading-[58px] text-primary">잠깐!</div>
+          <span class="text-[40px] font-[700] leading-[58px] text-gray-1a">
             집 구하기 전 확인하셨나요?
           </span>
         </div>
@@ -30,46 +29,26 @@
         <div class="mb-[80px] flex justify-center">
           <div class="grid grid-cols-2 items-start gap-x-[70px] gap-y-[50px]">
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="One">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  보증보험 가입
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  가능 여부 확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">보증보험 가입</span>
+                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
-              <div
-                class="justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 보증보험을 가입하면 보증금 피해 발생 시
                 <br />
                 보증금의 일부나 전액을 배상 받을 수 있습니다.
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="Two">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  중개업자 신원
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">중개업자 신원</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span
-                  class="whitespace-nowrap font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500"
-                >
+                <span class="whitespace-nowrap text-[18px] font-[400] text-primary">
                   국토부 중개사 조회 사이트
                 </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-[400] text-gray-1a">
                   에서 중개사의 자격
                   <br />
                   여부를 확인해야합니다. 무자격자에게 계약하면
@@ -79,68 +58,40 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Three">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  등기부등본
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">등기부등본</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
-                  등기부등본은 부동산 또는
-                </span>
-                <span class="font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500">
-                  대법원 인터넷등기소
-                </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-normal text-gray-1a">등기부등본은 부동산 또는</span>
+                <span class="text-[18px] font-semibold text-primary">대법원 인터넷등기소</span>
+                <span class="text-[18px] font-normal text-gray-1a">
                   를 통해 반드시 확인해야할 정보입니다.
                   <br />
                   실제 집주인이 누구인지 확인하고 근저당이나 압류 여부를 확인할 수 있습니다.
                   <br />
                 </span>
-                <span
-                  class="font-['Pretendard'] text-base font-normal leading-relaxed text-zinc-900"
-                >
+                <span class="text-base font-normal text-gray-1a">
                   <br />
                 </span>
-                <span class="font-['Pretendard'] text-sm font-semibold leading-snug text-blue-500">
+                <span class="text-[14px] font-[400] text-primary">
                   TIP!
                   <br />
                 </span>
-                <span
-                  class="font-['Pretendard'] text-base font-normal leading-relaxed text-zinc-900"
-                >
+                <span class="text-base font-normal text-gray-1a">
                   등기부등본은 변경 가능성이 있기에 입주 전 반드시 한번 더 확인해야합니다!
                 </span>
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Four">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  확정일자 및 전입신고
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  가능 여부 확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">확정일자 및 전입신고</span>
+                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
-              <div
-                class="justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 확정일자와 전입신고가 가능해야지만 보증금을 법적으로 보호할 수 있습니다.
               </div>
-              <div
-                class="mt-[25px] justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="mt-[25px] justify-start text-[18px] font-[400] text-gray-1a">
                 다만, 상가주택이나 불법건축물 등의 경우 불가할 수도 있기에 반드시 사전에
                 확인해야합니다.
               </div>
@@ -151,23 +102,15 @@
         <div class="flex justify-center">
           <CheckCard :img="Five" card-width="896px" card-height="764px" card-img-height="533px">
             <div class="justify-start">
-              <span class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500">
-                선순위 계약자
-              </span>
-              <span class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900">
-                확인
-              </span>
-              <div class="w-[836px] justify-start">
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
-                  입주하기 전 반드시
-                </span>
-                <span
-                  class="font-['Pretendard'] text-lg font-normal leading-7 text-blue-500"
-                ></span>
-                <span class="font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500">
+              <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
+              <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              <div class="mt-[10px] w-[836px] justify-start">
+                <span class="text-[18px] font-[400] text-gray-1a">입주하기 전 반드시</span>
+                <span class="text-[18px] font-[400] text-primary"></span>
+                <span class="text-[18px] font-semibold text-primary">
                   주민센터나 정부24에서 전세입자의 전출 여부를 확인
                 </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-[400] text-gray-1a">
                   해야 합니다.
                   <br />
                   만약 전세입자가 전출신고를 하지 않고 여전히 전입신고 상태를 유지하고 있다면,
@@ -182,31 +125,23 @@
         </div>
       </section>
       <div
-        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-400"
+        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-[#B4B4B4]"
       ></div>
       <section class="mt-[80px]">
-        <div class="mb-[34px] font-['Pretendard'] text-4xl font-bold leading-[58px] text-blue-500">
-          등기부등본 위조 확인 TIP
-        </div>
+        <div class="mb-[34px] text-[40px] font-[700] text-primary">등기부등본 위조 확인 TIP</div>
         <div class="flex flex-col gap-[44px]">
           <CheckTipBox check-num="1">
             <div class="w-[634px] justify-start">
-              <div class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
+              <div class="text-[32px] font-normal text-gray-1a">
                 등기부등본은 말소된 내역이 포함된
               </div>
-              <span class="font-['Pretendard'] text-3xl font-semibold leading-[50px] text-blue-500">
-                등기사항 전부 증명서 유형
-              </span>
-              <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                으로 발급 받아야합니다.
-              </span>
+              <span class="text-[32px] font-semibold text-primary">등기사항 전부 증명서 유형</span>
+              <span class="text-[32px] font-normal text-gray-1a">으로 발급 받아야합니다.</span>
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="2">
-            <div
-              class="justify-start font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900"
-            >
+            <div class="justify-start text-[32px] font-normal text-gray-1a">
               가압류, 가처분, 가등기, 근저당권 등에 대해 말소된
               <br />
               내역을 찾아야 합니다.
@@ -215,9 +150,7 @@
 
           <CheckTipBox check-num="3">
             <div class="w-[634px] justify-start">
-              <div
-                class="justify-start font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900"
-              >
+              <div class="justify-start whitespace-nowrap text-[32px] font-normal text-gray-1a">
                 말소된 이력에 대해 임대인에게 채권자로부터 채권변제
                 <br />
                 확인서 발급을 꼭 요청해야합니다.
@@ -228,17 +161,11 @@
           <CheckTipBox check-num="4">
             <div class="w-[634px] justify-start">
               <div class="justify-start whitespace-nowrap">
-                <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                  요청을 거부한다면,
-                </span>
-                <span
-                  class="font-['Pretendard'] text-3xl font-semibold leading-[50px] text-blue-500"
-                >
+                <span class="text-[32px] font-normal text-gray-1a">요청을 거부한다면,</span>
+                <span class="text-[32px] font-semibold text-primary">
                   해당 매물은 피하는 것이 안전
                 </span>
-                <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                  합니다.
-                </span>
+                <span class="text-[32px] font-normal text-gray-1a">합니다.</span>
               </div>
             </div>
           </CheckTipBox>
@@ -256,4 +183,8 @@ import Four from "~/assets/image/checkFour.jpg";
 import Five from "~/assets/image/checkFive.jpg";
 import CheckCard from "./_components/CheckCard.vue";
 import CheckTipBox from "./_components/CheckTipBox.vue";
+
+const gotoQuiz = () => {
+  navigateTo("/quiz");
+};
 </script>
diff --git a/app/pages/community/_components/CommentItem.vue b/app/pages/community/_components/CommentItem.vue
index aead75f..ca4e2f5 100644
--- a/app/pages/community/_components/CommentItem.vue
+++ b/app/pages/community/_components/CommentItem.vue
@@ -2,19 +2,11 @@
   <div
     class="box-border flex h-[200px] w-[400px] cursor-pointer flex-col rounded-[10px] p-[30px] hover:bg-blue-50"
   >
-    <div
-      class="mb-[5px] justify-start font-['Pretendard'] text-lg font-semibold leading-tight text-zinc-900"
-    >
-      {{ writer }}
-    </div>
-    <div
-      class="mb-[15px] justify-start font-['Pretendard'] text-base font-normal leading-tight text-neutral-400"
-    >
+    <div class="mb-[5px] justify-start text-lg font-semibold leading-tight text-gray-1a">익명</div>
+    <div class="mb-[15px] justify-start text-base font-normal text-gray-b4">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div
-      class="mb-[10px] justify-start font-['Pretendard'] text-base font-normal leading-normal text-zinc-900"
-    >
+    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
       {{ comment }}
     </div>
     <div class="flex items-start justify-start gap-[20px]">
@@ -27,17 +19,13 @@
         ></FilledLike>
 
         <Like v-else class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div
-          class="justify-start font-['Pretendard'] text-base font-normal leading-none text-zinc-400"
-        >
+        <div class="justify-start text-base font-normal text-gray-b4">
           {{ likeCount }}
         </div>
       </div>
       <div class="flex justify-start gap-[10px]">
         <CommentIcon class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div
-          class="justify-start font-['Pretendard'] text-base font-normal leading-none text-zinc-400"
-        >
+        <div class="justify-start text-base font-normal text-gray-b4">
           {{ commentCount }}
         </div>
       </div>
@@ -82,7 +70,7 @@ const { mutate: clickLike } = useMutation({
   onSuccess: (data) => {
     console.log("좋아요 생성 성공:", data);
     queryClient.invalidateQueries({
-      queryKey: ["replies", props.postId],
+      queryKey: ["post", props.postId],
     });
   },
   onError: (error) => {
@@ -119,7 +107,7 @@ const handleDelete = () => {
 const props = defineProps({
   writer: {
     type: String,
-    default: "",
+    default: "작성자",
   },
   date: {
     type: String,
diff --git a/app/pages/community/_components/CommentWrap.vue b/app/pages/community/_components/CommentWrap.vue
index a55ae18..d0262dc 100644
--- a/app/pages/community/_components/CommentWrap.vue
+++ b/app/pages/community/_components/CommentWrap.vue
@@ -4,48 +4,46 @@
       class="my-[30px] box-border flex h-[60px] cursor-pointer items-center justify-start rounded-[10px] border-[#B4B4B4] px-[15px] py-[25px] outline outline-[1.50px] outline-offset-[-1.50px] outline-zinc-400"
       @click="handlePostModal"
     >
-      <div class="justify-start font-['Pretendard'] text-[20px] font-medium text-zinc-400">
+      <div class="justify-start text-[20px] font-medium text-gray-b4">
         선택 지역의 리뷰 게시글을 작성해보세요.
       </div>
       <Stick class="ml-[50px] h-[60px]" filled="false" :font-controlled="false"></Stick>
       <Pencil class="ml-[20px] h-[22px] w-[22px]" filled="false" :font-controlled="false"></Pencil>
     </div>
 
-    <div class="justify-start text-2xl font-semibold text-zinc-900">
-      <span class="font-['Pretendard'] text-2xl font-semibold text-blue-500">
+    <div class="justify-start text-[24px] font-semibold text-zinc-900">
+      <span class="text-[24px] font-semibold text-primary">
         {{ selectedAddress || "지역을 선택해주세요" }}
       </span>
       의 리뷰 게시글
     </div>
 
     <div class="mt-[28px] flex gap-[254px]">
-      <div class="justify-start text-2xl font-semibold text-zinc-900">
-        <span class="font-['Pretendard'] text-2xl font-semibold text-zinc-900">총 {{ " " }}</span>
-        <span class="font-['Pretendard'] text-2xl font-semibold text-blue-500">
+      <div class="justify-start text-[24px] font-semibold text-zinc-900">
+        <span class="text-[24px] font-semibold text-gray-1a">총 {{ " " }}</span>
+        <span class="text-[24px] font-semibold text-primary">
           {{ posts?.length || 0 }}
         </span>
-        <span class="font-['Pretendard'] text-2xl font-semibold text-zinc-900">개</span>
+        <span class="font-['Pretendard'] text-2xl font-semibold text-gray-1a">개</span>
       </div>
       <div class="relative">
         <div
-          class="flex h-8 w-20 items-center justify-center gap-1 rounded-[5px] border border-zinc-400 bg-white"
+          class="flex h-8 w-20 items-center justify-center gap-1 rounded-[5px] border border-gray-b4 bg-background"
           @click="handleToggle"
         >
-          <p
-            class="cursor-pointer justify-start font-['Pretendard'] text-sm font-semibold leading-normal text-zinc-400"
-          >
+          <p class="cursor-pointer justify-start text-[16px] font-semibold text-gray-b4">
             {{ selectedOption }}
           </p>
           <DropDownIcon class="h-[19px] w-[19px]" filled="false" :font-controlled="false" />
         </div>
         <div
           v-if="ToggleOpen"
-          class="absolute left-0 top-full z-10 mt-1 w-20 rounded-[5px] border bg-white shadow-lg"
+          class="absolute left-0 top-full z-10 mt-1 w-20 rounded-[5px] border bg-background shadow-lg"
         >
           <div
             v-for="option in options"
             :key="option"
-            class="cursor-pointer px-3 py-2 text-sm font-semibold text-zinc-400 hover:bg-gray-50"
+            class="cursor-pointer px-3 py-2 text-[16px] font-semibold text-gray-b4 hover:bg-gray-50"
             @click="selectOption(option)"
           >
             {{ option }}
@@ -55,18 +53,18 @@
     </div>
 
     <div v-if="isLoading" class="mt-[21px] flex h-[526px] w-[400px] items-center justify-center">
-      <div class="text-zinc-400">게시글을 불러오는 중...</div>
+      <div class="text-gray-b4">게시글을 불러오는 중...</div>
     </div>
 
     <div v-else-if="error" class="mt-[21px] flex h-[526px] w-[400px] items-center justify-center">
-      <div class="text-red-500">게시글을 불러오는데 실패했습니다.</div>
+      <div class="text-destructive">게시글을 불러오는데 실패했습니다.</div>
     </div>
 
     <div
       v-else-if="!posts || posts.length === 0"
       class="mt-[21px] flex h-[526px] w-[400px] items-center justify-center"
     >
-      <div class="text-zinc-400">아직 작성된 게시글이 없습니다.</div>
+      <div class="text-gray-b4">아직 작성된 게시글이 없습니다.</div>
     </div>
 
     <!-- 게시글 목록 -->
@@ -79,19 +77,19 @@
           :writer="post.userId.toString()"
           :date="post.createdAt"
           :comment="post.content"
-          :comment-count="0"
+          :comment-count="post.commentCount"
           :like-count="post.likeCount"
           :user-id="1"
           :post-id="post.postId"
           @click="handlePostClick(post.postId)"
         />
 
-        <div v-if="openedPostId === post.postId" class="mt-[10px] bg-gray-50 p-4">
+        <div v-if="openedPostId === post.postId" class="relative mt-[10px] bg-gray-50 p-4">
           <div v-if="isReplyLoading" class="text-zinc-400">댓글을 불러오는 중...</div>
           <!-- <div v-else-if="isReplyError" class="text-red-500">댓글을 불러오는데 실패했습니다.</div> -->
           <div v-for="reply in replyData?.data" :key="reply?.postId" class="mb-[10px] last:mb-0">
             <ReplyItem
-              :writer="'작성자'"
+              :writer="'익명'"
               :date="reply.createdAt"
               :comment="reply.content"
               class="border border-gray-200 bg-white shadow-sm"
@@ -100,7 +98,9 @@
           <div v-if="!replyData || replyData.data.length === 0" class="mb-[30px] text-zinc-400">
             댓글이 없습니다.
           </div>
-          <PostReply :post-id="post.postId" :opened-post-id="openedPostId"></PostReply>
+          <div class="sticky bottom-0">
+            <PostReply :post-id="post.postId" :opened-post-id="openedPostId"></PostReply>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/pages/community/_components/PostReply.vue b/app/pages/community/_components/PostReply.vue
index 240b844..de9176f 100644
--- a/app/pages/community/_components/PostReply.vue
+++ b/app/pages/community/_components/PostReply.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative box-border flex h-[62px] w-[350px] items-center justify-start rounded-[10px] border-[1.50px] border-zinc-300 bg-white p-[30px]"
+    class="relative box-border flex h-[62px] w-[360px] items-center justify-start rounded-[10px] border-[1.50px] border-gray-d9 bg-background p-[30px]"
   >
     <div class="absolute left-0">
       <input
@@ -10,26 +10,23 @@
       />
     </div>
     <button
-      v-if="replyContent.length > 0"
-      class="absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-zinc-300 px-[21px] py-[16px]"
+      v-if="hasContent"
+      :disabled="isSubmitting"
+      :class="[
+        'absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] px-[21px] py-[16px] transition-colors',
+        isSubmitting ? 'cursor-not-allowed bg-gray-300' : 'hover:bg-primary-dark bg-primary',
+      ]"
+      @click="handleSubmit"
     >
-      <SendIcon
-        filled="false"
-        :font-controlled="false"
-        class="h-[30px] w-[30px]"
-        @click="handleSubmit"
-      ></SendIcon>
+      <SendIcon filled="false" :font-controlled="false" class="h-[30px] w-[30px]" />
     </button>
+
     <button
-      v-if="replyContent.trim() !== 0"
-      class="absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-primary px-[21px] py-[16px]"
+      v-else
+      disabled
+      class="absolute right-0 top-0 flex cursor-not-allowed items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-zinc-300 px-[21px] py-[16px]"
     >
-      <SendIcon
-        filled="false"
-        :font-controlled="false"
-        class="h-[30px] w-[30px]"
-        @click="handleSubmit"
-      ></SendIcon>
+      <SendIcon filled="false" :font-controlled="false" class="h-[30px] w-[30px] opacity-50" />
     </button>
   </div>
 </template>
@@ -57,13 +54,14 @@ const { mutate: createReply } = useMutation({
   },
   onSuccess: (data) => {
     console.log("댓글생성 성공:", data);
-    //게시글 목록 캐시 무효화 (새로 고침)
+    // 게시글 목록도 새로고침 (commentCount 업데이트를 위해)
+    queryClient.invalidateQueries({
+      queryKey: ["posts"],
+    });
+    //댓글 목록 캐시 무효화 (새로 고침)
     queryClient.invalidateQueries({
       queryKey: ["replies", props.postId],
     });
-    alert("게시글이 성공적으로 등록되었습니다!");
-    // emit("success");
-    // emit("close");
   },
   onError: (error) => {
     console.error("댓글생성 실패:", error);
@@ -80,4 +78,8 @@ const handleSubmit = () => {
   createReply({ replyContent: replyContent.value, userId: 1, postId: props.postId });
   replyContent.value = "";
 };
+
+const hasContent = computed(() => {
+  return replyContent.value.trim().length > 0;
+});
 </script>
diff --git a/app/pages/community/_components/ReplyItem.vue b/app/pages/community/_components/ReplyItem.vue
index 0ed0309..737f166 100644
--- a/app/pages/community/_components/ReplyItem.vue
+++ b/app/pages/community/_components/ReplyItem.vue
@@ -1,24 +1,18 @@
 <template>
   <div
-    class="hover:bg-gray-70 box-border flex h-[200px] cursor-pointer flex-col rounded-[10px] p-[30px]"
+    class="hover:bg-gray-70 box-border flex h-[150px] cursor-pointer flex-col rounded-[10px] p-[30px]"
   >
-    <div
-      class="mb-[5px] justify-start font-['Pretendard'] text-lg font-semibold leading-tight text-zinc-900"
-    >
+    <div class="mb-[5px] justify-start text-[20px] font-semibold leading-tight text-gray-1a">
       {{ writer }}
     </div>
-    <div
-      class="mb-[15px] justify-start font-['Pretendard'] text-base font-normal leading-tight text-neutral-400"
-    >
+    <div class="mb-[15px] justify-start text-base font-normal text-gray-8f">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div
-      class="mb-[10px] justify-start font-['Pretendard'] text-base font-normal leading-normal text-zinc-900"
-    >
+    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
       {{ comment }}
     </div>
 
-    <div class="hidden h-48 w-96 rounded-[10px] bg-blue-50" />
+    <div class="hidden h-48 w-96 rounded-[10px] bg-secondary" />
   </div>
 </template>
 
diff --git a/app/pages/community/_components/SearchBar.vue b/app/pages/community/_components/SearchBar.vue
index 5431c2d..a2540ce 100644
--- a/app/pages/community/_components/SearchBar.vue
+++ b/app/pages/community/_components/SearchBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="absolute left-[155px] top-[90px]">
     <div
-      class="relative z-50 flex h-[70px] items-center justify-center gap-[20px] rounded-[100px] bg-white px-[50px] py-5 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.15)] outline outline-[3px] outline-[rgb(var(--primary))]"
+      class="relative z-50 flex h-[70px] items-center justify-center gap-[20px] rounded-[100px] bg-background px-[50px] py-5 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.15)] outline outline-[3px] outline-[rgb(var(--primary))]"
     >
       <div class="flex items-center gap-[20px]">
         <BlueSearch class="h-[30px] w-[30px]" filled="false" :font-controlled="false"></BlueSearch>
diff --git a/app/pages/community/_modals/PostComment.vue b/app/pages/community/_modals/PostComment.vue
index 8375711..c4f7a3b 100644
--- a/app/pages/community/_modals/PostComment.vue
+++ b/app/pages/community/_modals/PostComment.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="flex h-[653px] w-[880px] flex-col items-center justify-start rounded-2xl bg-white px-[52px] py-[60px]"
+    class="flex flex-col items-start justify-start rounded-2xl bg-background px-[52px] py-[60px]"
   >
     <!-- 헤더 -->
-    <div class="mb-[37px] flex w-full items-center">
+    <div class="mb-[20px] flex items-center justify-center">
       <BackIcon
         filled="false"
         :font-controlled="false"
@@ -12,31 +12,31 @@
       />
       <div
         v-if="selectedAddress"
-        class="mr-[198px] justify-start text-[32px] font-semibold text-zinc-900"
+        class="mr-[198px] justify-start whitespace-nowrap text-[32px] font-[600] text-gray-1a"
       >
-        <span class="text-[32px] font-semibold text-blue-500">
+        <span class="text-[32px] font-semibold text-primary">
           {{ selectedAddress }}
         </span>
         에 게시글 작성
       </div>
-      <div v-else class="mr-[198px] justify-start text-[32px] font-semibold text-zinc-900">
+      <div v-else class="mr-[198px] justify-start text-[32px] font-semibold text-gray-1a">
         지역을 검색해주세요.
       </div>
       <button
-        class="inline-flex items-center justify-center gap-2.5 rounded-[10px] bg-blue-500 px-[30px] py-[10px]"
+        class="inline-flex items-center justify-center gap-2.5 whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[10px]"
         @click="handleSubmit"
       >
-        <div class="box-border justify-start text-[28px] font-semibold text-white">등록</div>
+        <div class="box-border justify-start text-[28px] font-[600] text-background">등록</div>
       </button>
     </div>
 
     <!-- 구분선 -->
-    <div class="mb-[37px] h-[1px] w-[768px] bg-[#B4B4B4]"></div>
+    <div class="mb-[20px] h-[1px] w-full bg-[#B4B4B4]"></div>
 
     <!-- 입력 영역 -->
     <textarea
       v-model="postContent"
-      class="h-[400px] w-[768px] resize-none rounded-[10px] p-4 text-[28px] focus:border-blue-500 focus:outline-none"
+      class="h-[400px] w-full resize-none rounded-[10px] text-[28px] focus:border-primary focus:outline-none"
       :placeholder="placeholderText"
       style="font-size: 28px; color: #b4b4b4"
     ></textarea>
@@ -135,8 +135,8 @@ const handleSubmit = () => {
 
 <style scoped>
 textarea::placeholder {
-  font-size: 18px;
+  font-size: 24px;
   color: #b4b4b4;
-  line-height: 1.5;
+  line-height: 1.8;
 }
 </style>
diff --git a/app/pages/community/index.vue b/app/pages/community/index.vue
index 9ad3a09..6122565 100644
--- a/app/pages/community/index.vue
+++ b/app/pages/community/index.vue
@@ -1,31 +1,34 @@
 <template>
   <div class="relative flex justify-center">
     <div
-      class="absolute left-[120px] top-0 z-20 h-[871px] w-[488px] rounded-br-[30px] rounded-tr-[30px] bg-white shadow-[10px_15px_6px_0px_rgba(0,0,0,0.15)]"
+      class="absolute left-[120px] top-0 z-20 h-[871px] w-[488px] rounded-br-[30px] rounded-tr-[30px] bg-background shadow-[10px_15px_6px_0px_rgba(0,0,0,0.15)]"
     >
-      <div v-if="currentTab === 'community'" class="sticky top-[15px] flex justify-center">
+      <div
+        v-if="currentTab === 'community'"
+        class="sticky top-0 flex justify-center bg-background pt-[15px]"
+      >
         <div
-          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-fe"
+          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] text-[24px] font-[500] text-gray-fe"
           @click="handleTabCommunity"
         >
           커뮤니티
         </div>
         <div
-          class="cursor-pointer rounded-full px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-b4"
+          class="cursor-pointer rounded-full px-[70px] py-[15px] text-[24px] font-[500] text-gray-b4"
           @click="handleTabStore"
         >
           제휴매장
         </div>
       </div>
-      <div v-else class="sticky top-[15px] flex justify-center">
+      <div v-else class="sticky top-0 flex justify-center bg-background pt-[15px]">
         <div
-          class="cursor-pointer rounded-full px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-b4"
+          class="cursor-pointer rounded-full px-[70px] py-[15px] text-[24px] font-[500] text-gray-b4"
           @click="handleTabCommunity"
         >
           커뮤니티
         </div>
         <div
-          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-fe"
+          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] font-['Pretendard'] text-[24px] font-[500] text-gray-fe"
           @click="handleTabStore"
         >
           제휴매장
@@ -36,9 +39,7 @@
           <div v-if="!roadCode || !buildingNumber">
             <div class="mt-[264px] flex flex-col items-center justify-center gap-[30px]">
               <MapIcon class="h-[122px] w-[110px]" filled="false" :font-controlled="false" />
-              <div
-                class="justify-start text-center text-[26px] font-medium leading-9 text-neutral-400"
-              >
+              <div class="justify-start text-center text-[26px] font-medium text-gray-8f">
                 지도에서 위치를 검색하여
                 <br />
                 커뮤니티 게시글을 확인하세요.
@@ -63,7 +64,7 @@
     </div>
     <div
       id="map"
-      class="absolute left-[598px] top-0 z-10 h-[871px] w-[897px] rounded-[20px] bg-black"
+      class="absolute left-[598px] top-0 z-10 h-[871px] w-[897px] rounded-[20px] bg-gray-1a"
     >
       <SearchBar @search-address="searchAddress"></SearchBar>
     </div>
@@ -71,7 +72,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import MapIcon from "~/assets/icon/mapIcon.svg";
 import SearchBar from "./_components/SearchBar.vue";
 import CommentWrap from "./_components/CommentWrap.vue";
@@ -152,6 +153,29 @@ const loadKakaoMapScript = () => {
 };
 
 const kakaoRef = ref(null);
+const route = useRoute();
+
+// 네비바에서 검색해서 온 경우를 처리하는 함수
+const handleNavbarSearch = () => {
+  if (route.query.roadCode && route.query.buildingNumber && route.query.address) {
+    const suggestion = {
+      rnMgtSn: route.query.roadCode,
+      buldMnnm: route.query.buildingNumber,
+      roadAddrPart1: route.query.address,
+    };
+    searchAddress(suggestion);
+  }
+};
+
+// 라우트 쿼리 파라미터 변경을 감지하여 UI 업데이트
+watch(
+  () => route.query,
+  () => {
+    handleNavbarSearch();
+  },
+  { immediate: false }
+);
+
 onMounted(async () => {
   const kakao = await loadKakaoMapScript();
   kakaoRef.value = kakao;
@@ -169,6 +193,9 @@ onMounted(async () => {
     position: new kakao.maps.LatLng(37.4979, 127.0276),
     map: map.value,
   });
+
+  // 초기 로드 시 네비바에서 검색해서 온 경우 처리
+  handleNavbarSearch();
 });
 
 const searchAddress = (suggestion) => {
diff --git a/app/pages/credit/_components/StoreItem.vue b/app/pages/credit/_components/StoreItem.vue
index bf026a9..68f81a0 100644
--- a/app/pages/credit/_components/StoreItem.vue
+++ b/app/pages/credit/_components/StoreItem.vue
@@ -10,7 +10,7 @@
       <div
         class="h-12 w-auto justify-start font-['Pretendard'] text-[20px] font-normal leading-[50.31px] text-zinc-900"
       >
-        주소 : {{ address }}
+        {{ address }}
       </div>
     </div>
   </div>
diff --git a/app/pages/credit/creditStore.vue b/app/pages/credit/creditStore.vue
index 75bc4cd..f1cb180 100644
--- a/app/pages/credit/creditStore.vue
+++ b/app/pages/credit/creditStore.vue
@@ -3,10 +3,10 @@
     <div class="flex justify-center gap-5">
       <div class="h-[60px] justify-start">
         <div class="justify-start">
-          <div class="font-['Pretendard'] text-xl font-semibold text-zinc-900">
+          <div class="font-['Pretendard'] text-xl font-[500] text-zinc-900">
             사용 가능한 제휴 매장이 가까이 있습니다.
           </div>
-          <div class="font-['Pretendard'] text-xl font-semibold text-blue-500">
+          <div class="font-['Pretendard'] text-xl font-[600] text-blue-500">
             지금 제휴처를 확인하고, 크레딧을 사용해보세요.
           </div>
         </div>
@@ -21,7 +21,7 @@
           현재 보유 크레딧 :
         </span>
         <span class="font-['Pretendard'] text-xl font-semibold leading-10 text-blue-500">
-          1,500P
+          {{ currentCredit.toLocaleString() }}
         </span>
       </div>
       <div
@@ -33,11 +33,11 @@
         >
           생성
         </button>
-        <div
-          class="absolute left-[21px] top-0 justify-start font-['Pretendard'] text-base font-semibold leading-10 text-zinc-900"
-        >
-          1,000
-        </div>
+        <input
+          v-model="usingCredit"
+          class="absolute left-[21px] top-0 justify-start font-['Pretendard'] text-base font-semibold leading-10 text-zinc-900 outline-none"
+          placeholder="사용할 크레딧 입력"
+        />
       </div>
     </div>
     <div class="h-[480px] overflow-y-auto overflow-x-hidden">
@@ -49,7 +49,7 @@
         />
         <div v-if="index !== dummy.length - 1" class="my-[43px]">
           <div
-            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-400"
+            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-[#D9D9D9]"
           />
         </div>
       </div>
@@ -67,11 +67,28 @@
 import StoreItem from "./_components/StoreItem.vue";
 import storeImage from "~/assets/image/storeImage.jpg";
 import BarcodeModal from "./_modals/Barcode.vue";
+import VictoryImg from "~/assets/image/victorySuper.jpg";
+import FlowerImg from "~/assets/image/flowerGimbap.jpg";
+import Amisan from "~/assets/image/amisan.jpg";
 
 const showBarcodeModal = ref(false);
+const currentCredit = ref(1500); //현재 크레딧 = 현재크레딧 - 입력크레딧
+const usingCredit = ref(null); //입력 크레딧
+
+const handleCredit = () => {
+  if (usingCredit.value) {
+    if (usingCredit.value <= currentCredit.value) {
+      currentCredit.value = currentCredit.value - usingCredit.value;
+    } else {
+      alert("사용 금액이 현재 크레딧을 초과할 수 없습니다.");
+      showBarcodeModal.value = false;
+    }
+  }
+};
 
 const openBarcodeModal = () => {
   showBarcodeModal.value = true;
+  handleCredit();
 };
 
 const closeBarcodeModal = () => {
@@ -81,21 +98,21 @@ const closeBarcodeModal = () => {
 const dummy = ref([
   {
     id: 0,
-    storeName: "중앙톤 스토어1",
-    address: "서울 서초구 양재로 232",
-    image: storeImage,
+    storeName: "영광수퍼",
+    address: "서울 서대문구 연희로 204",
+    image: VictoryImg,
   },
   {
     id: 1,
-    storeName: "중앙톤 스토어2",
-    address: "서울 서초구 양재로 232",
-    image: storeImage,
+    storeName: "봄꽃김밥",
+    address: "서울 서대문구 연희로36길 10",
+    image: FlowerImg,
   },
   {
     id: 2,
-    storeName: "중앙톤 스토어3",
-    address: "서울 서초구 양재로 232",
-    image: storeImage,
+    storeName: "아미산",
+    address: "서울 서대문구 연희로32길 151",
+    image: Amisan,
   },
   {
     id: 3,
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7e37011..bd7cd6b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -34,8 +34,8 @@ onMounted(() => {
     position: "fixed",
     top: 0,
     left: 0,
-    width: "100vw",
-    height: "100vh",
+    width: "100%",
+    height: "100%",
     zIndex: 10,
   });
 
@@ -43,8 +43,8 @@ onMounted(() => {
     position: "fixed",
     top: 0,
     left: 0,
-    width: "100vw",
-    height: "100vh",
+    width: "100%",
+    height: "100%",
     zIndex: -1,
   });
 
@@ -139,8 +139,8 @@ onMounted(() => {
         position: "fixed",
         top: 0,
         left: 0,
-        width: "100vw",
-        height: "100vh",
+        width: "100%",
+        height: "100%",
         opacity: 1,
         zIndex: 10,
       });
@@ -149,8 +149,8 @@ onMounted(() => {
         position: "fixed",
         top: 0,
         left: 0,
-        width: "100vw",
-        height: "100vh",
+        width: "100%",
+        height: "100%",
         zIndex: -1,
       });
     },
@@ -201,7 +201,7 @@ onUnmounted(() => {
       <!-- 히어로 -->
       <div
         ref="heroContent"
-        class="relative z-10 flex h-full items-center justify-center px-[100px] py-[300px]"
+        class="relative z-10 flex h-full w-full items-center justify-center px-[100px] py-[300px]"
       >
         <div class="flex flex-col items-center gap-[30px]">
           <!-- Animated h1 -->
@@ -219,6 +219,7 @@ onUnmounted(() => {
           <button
             ref="heroButton"
             class="rounded-[15px] bg-gray-fe px-[50px] py-[15px] text-[24px] font-[600] text-primary"
+            @click="navigateTo('/analyze')"
           >
             내 등기부등본 분석하기
           </button>
diff --git a/app/pages/my/index.vue b/app/pages/my/index.vue
index d7861b2..93b6b2f 100644
--- a/app/pages/my/index.vue
+++ b/app/pages/my/index.vue
@@ -30,22 +30,22 @@ console.log(data);
       <MyCredit :credit="data?.data.credit ?? 0" />
       <h1 class="text-[36px] font-[600] text-foreground">
         현재 내가 작성한 게시글 수
-        <span class="font-[700] text-primary">5개</span>
+        <span class="font-[700] text-primary">{{ data?.data.postCount ?? "-" }}개</span>
       </h1>
       <div class="mb-[100px] flex flex-col gap-[30px]">
         <PostAchievementCard
           :completed="(data?.data.postCount ?? 0) >= 3"
-          achievement="게시글 3개"
+          achievement="게시글 1개"
           :credit="500"
         />
         <PostAchievementCard
           :completed="(data?.data.postCount ?? 0) >= 10"
-          achievement="게시글 10개"
+          achievement="게시글 5개"
           :credit="700"
         />
         <PostAchievementCard
           :completed="(data?.data.postCount ?? 0) >= 30"
-          achievement="게시글 30개"
+          achievement="게시글 15개"
           :credit="1000"
         />
       </div>
diff --git a/app/pages/quiz/Correct.vue b/app/pages/quiz/Correct.vue
new file mode 100644
index 0000000..b141337
--- /dev/null
+++ b/app/pages/quiz/Correct.vue
@@ -0,0 +1,16 @@
+<template>
+  <Explain>
+    <template #result>
+      <div class="mb-[30px] text-[48px] font-[700] text-[#2D8AE7]">정답입니다.</div>
+    </template>
+    <template #resultExplain>
+      <div class="text-[28px] font-[600] text-[#1A1A1A]">
+        전입신고를 하면 확정일자가 자동으로 부여된다.
+      </div>
+    </template>
+  </Explain>
+</template>
+
+<script setup>
+import Explain from "./_components/Explain.vue";
+</script>
diff --git a/app/pages/quiz/False.vue b/app/pages/quiz/False.vue
new file mode 100644
index 0000000..4660f49
--- /dev/null
+++ b/app/pages/quiz/False.vue
@@ -0,0 +1,16 @@
+<template>
+  <Explain>
+    <template #result>
+      <div class="mb-[30px] text-[48px] font-[700] text-[#FF615E]">오답입니다.</div>
+    </template>
+    <template #resultExplain>
+      <div class="text-[28px] font-[600] text-[#1A1A1A]">
+        정답: 전입신고를 하면 확정일자가 자동으로 부여된다.
+      </div>
+    </template>
+  </Explain>
+</template>
+
+<script setup>
+import Explain from "./_components/Explain.vue";
+</script>
diff --git a/app/pages/quiz/_api/types/quiz.ts b/app/pages/quiz/_api/types/quiz.ts
new file mode 100644
index 0000000..00f3695
--- /dev/null
+++ b/app/pages/quiz/_api/types/quiz.ts
@@ -0,0 +1,11 @@
+export interface QuizResponse {
+  quizId: number;
+  title: string;
+  optionOne: string;
+  optionTwo: string;
+  optionThree: string;
+  optionFour: string;
+  correctAnswer: number;
+  isCorrect: boolean;
+  explanation: string;
+}
diff --git a/app/pages/quiz/_components/Explain.vue b/app/pages/quiz/_components/Explain.vue
new file mode 100644
index 0000000..7532998
--- /dev/null
+++ b/app/pages/quiz/_components/Explain.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex items-center justify-center">
+    <div class="flex flex-col items-start justify-start">
+      <slot name="result"></slot>
+      <slot name="resultExplain"></slot>
+      <div
+        class="my-[40px] h-0 w-[1003px] outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-300"
+      ></div>
+      <div class="flex flex-col items-start">
+        <div class="justify-start text-[28px] font-[600] leading-[50px] text-zinc-900">해설:</div>
+        <div class="mb-[50px] justify-start text-[28px] font-[600] leading-[50px] text-zinc-900">
+          전입신고가 되었더라도
+          <span class="text-primary">확정일자는 별도로</span>
+          받아야 합니다.
+        </div>
+        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+          1. 보증금 보호를 위해 전입신고는 필수다.
+        </div>
+        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+          2. 전입신고는 동사무소나 온라인에서 할 수 있다.
+        </div>
+        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+          4. 전입신고를 하면 주민등록 주소가 해당 집으로 변경된다.
+        </div>
+        <div class="mt-[40px] flex gap-[500px]">
+          <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+            -> 나머지 보기는 모두 맞는 사실입니다.
+          </div>
+          <button
+            class="item-center flex justify-center rounded-[10px] bg-primary px-[27px] py-[15px] text-[45px] text-white"
+            @click="handleModal"
+          >
+            ->
+          </button>
+        </div>
+      </div>
+      <div
+        v-if="isModalOpen"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-900/40"
+      >
+        <CompleteQuiz @close="closeModal" @check-credit="handleCreditCheck" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CompleteQuiz from "../_modals/CompleteQuiz.vue";
+
+const isModalOpen = ref(false);
+const handleModal = () => {
+  isModalOpen.value = true;
+};
+
+const closeModal = () => {
+  isModalOpen.value = !isModalOpen.value;
+};
+const handleCreditCheck = () => {
+  navigateTo("/my");
+  console.log("크레딧 페이지로 이동");
+};
+</script>
diff --git a/app/pages/quiz/_modals/CompleteQuiz.vue b/app/pages/quiz/_modals/CompleteQuiz.vue
new file mode 100644
index 0000000..7a51b0c
--- /dev/null
+++ b/app/pages/quiz/_modals/CompleteQuiz.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="flex h-[487px] w-[676px] flex-col items-center rounded-[15px] bg-white px-[100px] py-[60px]"
+  >
+    <CheckIcon filled="false" :font-controlled="false" class="h-[95px] w-[95px]"></CheckIcon>
+    <div
+      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-3xl font-semibold text-zinc-900"
+    >
+      문제 풀이가 완료되었습니다
+    </div>
+    <div class="mb-[30px] justify-start text-center">
+      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
+        참여 감사합니다.
+        <br />
+        감사 크레딧
+      </span>
+      <span class="font-['Pretendard'] text-2xl font-semibold leading-6 text-blue-500">500P</span>
+      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
+        가 적립되었습니다.
+      </span>
+    </div>
+    <div class="flex gap-10">
+      <button
+        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-[#B4B4B4] text-[26px] font-semibold text-white"
+        @click="handleClose"
+      >
+        닫기
+      </button>
+      <button
+        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-blue-500 text-[26px] font-semibold text-white"
+        @click="handleCreditCheck"
+      >
+        크레딧 확인
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CheckIcon from "~/assets/icon/achievement-circle-filled.svg";
+
+const emit = defineEmits(["close", "checkCredit"]);
+
+const handleClose = () => {
+  emit("close");
+  navigateTo("/");
+};
+
+const handleCreditCheck = () => {
+  emit("checkCredit");
+  emit("close");
+  navigateTo("/my");
+};
+</script>
diff --git a/app/pages/quiz/index.vue b/app/pages/quiz/index.vue
new file mode 100644
index 0000000..5f61041
--- /dev/null
+++ b/app/pages/quiz/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="mb-[100px] flex flex-col items-center justify-center">
+    <div class="text-[40px] font-[700] text-gray-1a">
+      다음 중 전입신고에 대한 설명으로 옳지 않은 것은?
+    </div>
+    <div class="mt-[50px] flex flex-col gap-[40px]">
+      <div
+        :class="[
+          'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
+          selectedOption === 1
+            ? 'border-[3px] border-primary bg-secondary'
+            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+        ]"
+        @click="selectOption(1)"
+      >
+        보증금 보호를 위해 전입신고는 필수다.
+      </div>
+      <div
+        :class="[
+          'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
+          selectedOption === 2
+            ? 'border-[3px] border-primary bg-secondary'
+            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+        ]"
+        @click="selectOption(2)"
+      >
+        전입신고는 동사무소나 온라인에서 할 수 있다.
+      </div>
+      <div
+        :class="[
+          'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
+          selectedOption === 3
+            ? 'border-[3px] border-primary bg-secondary'
+            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+        ]"
+        @click="selectOption(3)"
+      >
+        전입신고를 하면 확정일자가 자동으로 부여된다.
+      </div>
+      <div
+        :class="[
+          'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
+          selectedOption === 4
+            ? 'border-[3px] border-primary bg-secondary'
+            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+        ]"
+        @click="selectOption(4)"
+      >
+        전입신고를 하면 주민등록 주소가 해당 집으로 변경된다.
+      </div>
+    </div>
+    <button
+      class="mt-[50px] flex items-center justify-center rounded-[10px] bg-[#B4B4B4] px-[182px] py-[15px] text-[32px] font-[600] text-gray-fe hover:bg-primary"
+      @click="goToResult"
+    >
+      확인하기
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { apiInstance } from "~/utils/api";
+import { useMutation } from "@tanstack/vue-query";
+import type { QuizResponse } from "./_api/types/quiz";
+import type { BaseResponse } from "~/utils/api";
+
+const selectedOption = ref<number | null>(null); //선택한 정답 저장
+
+const submitQuizMutation = useMutation({
+  mutationFn: async (answerData: { selectedOption: number; quizId: number; userId: number }) => {
+    const response = await apiInstance.put("v1/quiz/result", answerData);
+    return response.data as BaseResponse<QuizResponse>;
+  },
+  onSuccess: (response) => {
+    console.log("사용자가 선택한 옵션 (화면):", selectedOption.value);
+    console.log("API로 전송된 값:", selectedOption);
+    console.log("정답:", response.data.correctAnswer);
+    console.log("판정 결과:", response.data.isCorrect);
+    console.log("전체 응답:", response);
+    console.log("퀴즈 제출 성공:", response);
+    if (response.data.isCorrect === true) {
+      console.log("정답! Correct 페이지로 이동");
+      navigateTo("/quiz/Correct");
+    } else {
+      navigateTo("/quiz/False");
+    }
+  },
+  onError: (error) => {
+    console.error("퀴즈 제출 실패:", error);
+    alert("퀴즈 제출에 실패했습니다. 다시 시도해주세요.");
+  },
+});
+
+const selectOption = (optionNumber: number) => {
+  selectedOption.value = optionNumber;
+};
+
+const goToResult = () => {
+  if (selectedOption.value === null) {
+    alert("답을 선택해주세요.");
+    return;
+  }
+
+  submitQuizMutation.mutate({
+    selectedOption: selectedOption.value,
+    quizId: 1,
+    userId: 1,
+  });
+};
+</script>
diff --git a/app/pages/report/_components/Upload.vue b/app/pages/report/_components/Upload.vue
index 86056fe..b242011 100644
--- a/app/pages/report/_components/Upload.vue
+++ b/app/pages/report/_components/Upload.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="relative z-10 flex h-[439px] w-[341px] flex-col items-center gap-[30px]">
-    <div class="justify-start text-center text-[26px] font-normal leading-loose text-zinc-900">
+  <div class="relative z-10 flex h-[439px] w-[341px] flex-col items-center gap-[25px]">
+    <div class="justify-start text-center text-[24px] font-[400] leading-loose text-foreground">
       {{ fileName }}
     </div>
-    <div class="flex h-96 w-80 flex-col items-center rounded-2xl bg-blue-50 py-[40px] pt-[47px]">
+    <div
+      class="flex w-[341px] flex-col items-center rounded-[15px] bg-secondary px-[40px] py-[47px]"
+    >
       <CloudIcon
         alt="cloud"
         class="mb-[20px] h-[60px] w-[60px]"
@@ -11,37 +13,29 @@
         :font-controlled="false"
       />
       <button
-        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-blue-500 px-[30px] py-[8px] text-center font-['Pretendard'] text-[18px] font-[600] leading-7 text-white"
+        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[8px] text-center text-[18px] font-[500] leading-7 text-gray-fe"
         @click="openModal"
       >
         {{ btnName }}
       </button>
       <div
-        class="mb-[20px] justify-start text-center font-['Pretendard'] text-xl font-normal leading-loose text-neutral-400"
+        class="mb-[20px] justify-start text-center font-['Pretendard'] text-[20px] font-[400] text-gray-8f"
       >
         - 업로드 유의사항 -
       </div>
-      <div class="flex flex-col justify-center text-center leading-6">
-        <div class="font-['Pretendard'] text-xl font-normal text-neutral-400">
-          파일 형식 : PDF 지원 (1개)
-        </div>
-        <div class="font-['Pretendard'] text-xl font-normal text-neutral-400">
-          파일 크기 : 50MB 이내
-        </div>
+      <div class="flex flex-col justify-center text-center">
+        <div class="text-[20px] font-normal text-gray-8f">파일 형식 : PDF 지원 (1개)</div>
+        <div class="text-[20px] font-normal text-gray-8f">파일 크기 : 50MB 이내</div>
       </div>
     </div>
     <div class="flex flex-col items-center justify-center gap-[15px]">
-      <div
-        class="justify-start text-center font-['Pretendard'] text-xl font-semibold leading-loose text-neutral-400"
-      >
+      <div class="justify-start text-center text-[20px] font-[600] text-gray-8f">
         업로드 된 파일
       </div>
       <div
-        class="flex h-[90px] w-[341px] items-center justify-center gap-[30px] rounded-[10px] border border-neutral-400 bg-white"
+        class="flex h-[90px] w-[341px] items-center justify-center gap-[30px] rounded-[10px] border border-gray-8f bg-background"
       >
-        <div
-          class="justify-start text-center font-['Pretendard'] text-[20px] font-normal leading-6 text-zinc-900"
-        >
+        <div class="justify-start text-center text-[20px] font-[400] text-foreground">
           {{ displayFileName }}
         </div>
         <TrashIcon
@@ -57,8 +51,8 @@
       v-if="modalStore.isOpen('pdf-select')"
       class="fixed inset-0 z-50 flex items-center justify-center"
     >
-      <div class="absolute inset-0 bg-zinc-900/40" @click="closeModal"></div>
-      <div class="z-60 relative">
+      <div class="absolute inset-0 bg-[rgba(26,26,26,0.40)]" @click="closeModal"></div>
+      <div class="relative z-[9999]">
         <PdfUploadModal @close="closeModal" />
       </div>
     </div>
@@ -66,8 +60,8 @@
       v-if="modalStore.isOpen('report-select')"
       class="fixed inset-0 z-50 flex items-center justify-center"
     >
-      <div class="absolute inset-0 bg-zinc-900/40" @click="closeModal"></div>
-      <div class="z-60 relative">
+      <div class="absolute inset-0 bg-[rgba(26,26,26,0.40)]" @click="closeModal"></div>
+      <div class="relative z-[9999]">
         <ReportUploadModal @close="closeModal" />
       </div>
     </div>
diff --git a/app/pages/report/_modals/UploadComplete.vue b/app/pages/report/_modals/UploadComplete.vue
index f952450..fd3ba84 100644
--- a/app/pages/report/_modals/UploadComplete.vue
+++ b/app/pages/report/_modals/UploadComplete.vue
@@ -1,33 +1,31 @@
 <template>
   <div
-    class="flex h-[487px] w-[676px] flex-col items-center rounded-[15px] bg-white px-[100px] py-[60px]"
+    class="flex h-[487px] w-[676px] flex-col items-center rounded-[15px] bg-background px-[100px] py-[60px]"
   >
     <CheckIcon filled="false" :font-controlled="false" class="h-[95px] w-[95px]"></CheckIcon>
     <div
-      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-3xl font-semibold text-zinc-900"
+      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-[32px] font-[600] text-gray-1a"
     >
       신고 접수가 완료되었습니다.
     </div>
     <div class="mb-[30px] justify-start text-center">
-      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
+      <span class="text-[24px] font-[400] leading-6 text-gray-8f">
         소중한 신고 감사합니다.
         <br />
         감사 크레딧
       </span>
-      <span class="font-['Pretendard'] text-2xl font-semibold leading-6 text-blue-500">500P</span>
-      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
-        가 적립되었습니다.
-      </span>
+      <span class="text-[24px] font-[600] leading-6 text-primary">500P</span>
+      <span class="text-[24px] font-[400] leading-6 text-gray-8f">가 적립되었습니다.</span>
     </div>
     <div class="flex gap-10">
       <button
-        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-[#B4B4B4] text-[26px] font-semibold text-white"
+        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-gray-b4 text-[26px] font-[600] text-background"
         @click="handleClose"
       >
         닫기
       </button>
       <button
-        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-blue-500 text-[26px] font-semibold text-white"
+        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-primary text-[26px] font-[600] text-background"
         @click="handleCreditCheck"
       >
         크레딧 확인
diff --git a/app/pages/report/index.vue b/app/pages/report/index.vue
index 9e478d2..e911b89 100644
--- a/app/pages/report/index.vue
+++ b/app/pages/report/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col items-center">
+  <div class="mt-[30px] flex flex-col items-center">
     <div class="flex flex-col items-center justify-center leading-10">
-      <div class="font-['Pretendard'] text-[28px] font-bold leading-10 text-[#2D8AE7]">
+      <div class="text-[28px] font-bold leading-10 text-primary">
         신고해주신 정보는 다른 임차인들의 피해 예방을 위해 소중히 활용 됩니다.
       </div>
-      <div class="font-['Pretendard'] text-[28px] font-bold leading-10 text-[#2D8AE7]">
+      <div class="text-[28px] font-bold leading-10 text-primary">
         신고시 소중한 제보에 감사한 마음을 담아 크레딧을 드립니다.
       </div>
       <div class="mt-[50px] flex h-[643px] justify-center gap-[80px]">
@@ -19,15 +19,13 @@
           type="pdf"
         ></Upload>
       </div>
-      <div
-        class="mt-[40px] justify-start font-['Pretendard'] text-2xl font-normal text-neutral-400"
-      >
+      <div class="mt-[40px] justify-start text-[24px] font-[400] text-gray-8f">
         ※ 상기 서류가 모두 구비되어야 신고 접수가 가능합니다.
       </div>
       <button
         :class="[
-          'mb-[160px] mt-[35px] flex h-20 w-[762px] items-center justify-center rounded-[10px] text-3xl font-semibold leading-7',
-          fileStore.canSubmit ? 'bg-blue-500 text-white' : 'bg-zinc-400 text-white',
+          'mb-[160px] mt-[35px] flex h-20 w-[762px] items-center justify-center rounded-[10px] text-3xl font-[600]',
+          fileStore.canSubmit ? 'bg-primary text-background' : 'bg-gray-b4 text-background',
         ]"
         :disabled="!fileStore.canSubmit"
         @click="handleReport"
@@ -36,7 +34,7 @@
       </button>
       <div
         v-if="isModalOpen"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-900/40"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(26,26,26,0.40)]"
       >
         <UploadComplete @close="closeModal" @check-credit="handleCreditCheck" />
       </div>
diff --git a/app/utils/getSafetyTypeByScore.ts b/app/utils/getSafetyTypeByScore.ts
index b29e866..1d1de92 100644
--- a/app/utils/getSafetyTypeByScore.ts
+++ b/app/utils/getSafetyTypeByScore.ts
@@ -1,6 +1,8 @@
 import { SafetyType } from "~/types/SafetyType";
 
-const getSafetyTypeByScore = (score: number) => {
+const getSafetyTypeByScore = (score: number | null) => {
+  if (score === null) return null;
+
   if (score >= 7) return SafetyType.Safe;
   if (score >= 3) return SafetyType.Caution;
   return SafetyType.Dangerous;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index caa0979..fe8cfca 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,7 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
   modules: [
-    "@nuxt/devtools",
+    // "@nuxt/devtools",
     "@nuxt/image",
     "@nuxt/fonts",
     "@pinia/nuxt",
@@ -22,4 +22,9 @@ export default defineNuxtConfig({
       kakaoJavascriptKey: process.env.KAKAO_JAVASCRIPT_KEY,
     },
   },
+  app: {
+    head: {
+      viewport: "width=device-width, initial-scale=1",
+    },
+  },
 });
diff --git a/public/font/PretendardVariable.woff2 b/public/font/PretendardVariable.woff2
deleted file mode 100644
index 49c54b5..0000000
Binary files a/public/font/PretendardVariable.woff2 and /dev/null differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8ac2fc7..00ebf49 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -23,6 +23,9 @@ export default <Partial<Config>>{
         foreground: "rgb(var(--foreground) / <alpha-value>)",
       },
     },
+    screens: {
+      desktop: "1440px",
+    },
   },
   content: [
     "app/**/*.{vue,js,jsx,mjs,ts,tsx}",