[DEPLOY] 3차 배포

.nuxtignore

@@ -0,0 +1 @@
+app/pages/**/*.ts

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]" />

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>

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));

app/pages/analyze/_api/types/AnalyzeSubmitResponse.ts

@@ -0,0 +1,4 @@
+export interface AnalyzeSubmitResponse {
+  reportId: number;
+  processingStatus: string;
+}