[DEPLOY] 어흥콘 배포

app/components/Tooltip.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="relative inline-block">
+    <div
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+      @focus="showTooltip = true"
+      @blur="showTooltip = false"
+    >
+      <slot />
+    </div>
+
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="showTooltip"
+        :class="[
+          'absolute z-50 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-2 text-[16px] font-normal text-white shadow-lg',
+          'pointer-events-none',
+          positionClasses,
+        ]"
+      >
+        {{ content }}
+        <div :class="['absolute h-2 w-2 rotate-45 bg-gray-800', arrowClasses]"></div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+interface Props {
+  content: string;
+  position?: "top" | "bottom" | "left" | "right";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "top",
+});
+
+const showTooltip = ref(false);
+
+const positionClasses = computed(() => {
+  switch (props.position) {
+    case "top":
+      return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
+    case "bottom":
+      return "top-full left-1/2 transform -translate-x-1/2 mt-2";
+    case "left":
+      return "right-full top-1/2 transform -translate-y-1/2 mr-2";
+    case "right":
+      return "left-full top-1/2 transform -translate-y-1/2 ml-2";
+    default:
+      return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
+  }
+});
+
+const arrowClasses = computed(() => {
+  switch (props.position) {
+    case "top":
+      return "top-full left-1/2 transform -translate-x-1/2 -mt-1";
+    case "bottom":
+      return "bottom-full left-1/2 transform -translate-x-1/2 -mb-1";
+    case "left":
+      return "left-full top-1/2 transform -translate-y-1/2 -ml-1";
+    case "right":
+      return "right-full top-1/2 transform -translate-y-1/2 -mr-1";
+    default:
+      return "top-full left-1/2 transform -translate-x-1/2 -mt-1";
+  }
+});
+</script>

app/pages/analyze/_components/FormPanel.vue

@@ -4,6 +4,7 @@ import { useForm } from "@tanstack/vue-form";
 import { useFileStore } from "~/stores/file";
 import { formSchema } from "../_utils/formSchema";
 import type z from "zod";
+import HelpCircle from "~/assets/icon/help-circle.svg";
 
 const fileStore = useFileStore();
 
@@ -92,7 +93,7 @@ const emit = defineEmits<{
             <button
               type="button"
               :class="[
-                'rounded-[10px] border border-primary px-[100px] py-[30px] text-center text-[26px] font-[400] text-primary transition-colors',
+                'rounded-[10px] border border-primary px-[100px] py-[24px] text-center text-[26px] font-[400] text-primary transition-colors',
                 field.state.value === '전세' ? 'border-2 bg-secondary font-[600]' : 'border-1',
               ]"
               @click="field.handleChange('전세')"
@@ -102,7 +103,7 @@ const emit = defineEmits<{
             <button
               type="button"
               :class="[
-                'rounded-[10px] border border-primary px-[100px] py-[30px] text-center text-[26px] font-[400] text-primary transition-colors',
+                'rounded-[10px] border border-primary px-[100px] py-[24px] text-center text-[26px] font-[400] text-primary transition-colors',
                 field.state.value === '월세' ? 'border-2 bg-secondary font-[600]' : 'border-1',
               ]"
               @click="field.handleChange('월세')"
@@ -116,7 +117,19 @@ const emit = defineEmits<{
 
     <!-- 2. 보증금 입력 -->
     <div>
-      <span class="text-[26px] font-[400] text-foreground">2. 보증금 입력</span>
+      <span class="inline-flex items-center gap-2 text-[26px] font-[400] text-foreground">
+        2. 보증금 입력
+        <Tooltip
+          content="보증금은 안전지수 분석에 활용되므로, 해당 매물의 실제 금액을 정확히 입력해 주세요."
+          position="top"
+        >
+          <HelpCircle
+            class="h-[16px] w-[16px] cursor-help text-primary"
+            :font-controlled="false"
+            filled="false"
+          />
+        </Tooltip>
+      </span>
       <div class="mt-4 flex items-center justify-between gap-[15px]">
         <form.Field name="deposit_hundred_million">
           <template #default="{ field }">

app/pages/analyze/index.vue

@@ -10,6 +10,10 @@ import { apiInstance, type BaseResponse } from "~/utils/api";
 import { useModalStore } from "~/stores/modal";
 import PdfSubmitted from "./_modals/PdfSubmitted.vue";
 
+useHead({
+  title: "등기부등본 분석하기",
+});
+
 const modalStore = useModalStore();
 
 const { mutate: submit } = useMutation<

app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue

@@ -16,14 +16,14 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
     <!-- 절차 -->
     <div class="flex justify-center gap-[60px] py-[60px]">
       <!-- Step 1 -->
-      <ProcessStep :step="1" title="등본 업로드">
+      <ProcessStep :step="1" title="전처리">
         <template #icon>
           <AnalysisStep1 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
         <template #description>
-          업로드 한 등본을
+          업로드 한 등기부등본을
           <br />
-          AI가 분석합니다.
+          전처리 후, AI가 분석을 시작합니다.
         </template>
       </ProcessStep>
       <ChevronRightBlue
@@ -37,7 +37,7 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
           <AnalysisStep2 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
         <template #description>
-          등본에서 뭐뭐를 추출, 무엇의 기준을 바탕으로 등본을 계산하여 분석을 진행합니다.
+          등기부등본에서 텍스트를 추출하고, 공인된 기준들을 바탕으로 분석을 진행합니다.
         </template>
       </ProcessStep>
       <ChevronRightBlue
@@ -51,7 +51,7 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
           <AnalysisStep3 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
         <template #description>
-          안전도를 분석하여 위험도 점수를 도출합니다.
+          자체 연구하여 도출한 검증된 안전지수 공식을 바탕으로 위험도 점수를 계산합니다.
           <br />
           <br />
           0-2점: 위험
@@ -71,7 +71,7 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
         <template #icon>
           <AnalysisStep4 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
-        <template #description>AI가 종합하여 최종 결과를 자세히 내보냅니다.</template>
+        <template #description>AI가 분석 결과를 종합하여 최종 결과를 내보냅니다.</template>
       </ProcessStep>
     </div>
 
@@ -82,13 +82,17 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
       >
         <img src="~/assets/image/alien.png" alt="셋방살이" class="h-auto w-[130px]" />
         <span class="mt-[30px] text-[24px] font-[600] text-primary">
-          셋방살이는 (공공기관 이름)의 가이드를 바탕으로 근거를 수립했습니다.
+          셋방살이는 공공기관의 자료와 전문가의 가이드를 바탕으로 근거를 수립했습니다.
         </span>
         <span class="mt-[15px] text-[20px] font-[500] text-gray-66">
-          더 자세한 내용은 (공공기관 이름 또는 우리 노션)을 참고해주세요.
+          더 자세한 내용은
+          <a href="https://www.khug.or.kr/index.jsp" target="_blank" class="text-primary">
+            HUG 주택도시보증공사
+          </a>
+          를 참고해주세요.
         </span>
-        <p class="mt-[25px] text-[20px] font-[500] text-gray-66">
-          AI가 분석한 내용은 실제와 다를 수 있으니 확인용도로만 이용 부탁드립니다.
+        <p class="mt-[25px] text-[16px] font-[500] text-gray-66">
+          AI가 분석한 내용은 실제와 다를 수 있으며,
           <br />
           AI 분석 결과로 인한 문제 발생 시 법적 책임은 본인에게 있음을 알려드립니다.
         </p>

app/pages/analyze/result/[reportId]/index.vue

@@ -3,6 +3,11 @@ import { useQuery } from "@tanstack/vue-query";
 import ProcessAndDisclaimer from "./_components/ProcessAndDisclaimer.vue";
 import { apiInstance } from "~/utils/api";
 import type { AnalyzeResultResponse } from "./_api/types/AnalyzeResultResponse";
+import { useHead } from "#app";
+
+useHead({
+  title: "분석 결과",
+});
 
 const reportId = useRoute().params.reportId;
 

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-[15px] bg-gray-f5 px-[50px] py-[30px]"
+    class="box-border flex 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-[15px] bg-primary text-[40px] text-background"
+      class="flex items-center justify-center rounded-[15px] bg-primary px-[26px] py-[10px] text-[40px] text-background"
     >
       {{ checkNum }}
     </div>