[DEPLOY] Final

app/components/Navbar.vue

@@ -1,5 +1,7 @@
 <template>
-  <nav class="sticky top-0 z-[999] flex w-full items-center justify-center bg-background py-[40px]">
+  <nav
+    class="sticky top-0 z-[999] flex w-full items-center justify-center whitespace-nowrap 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,7 +63,7 @@
     <!-- 검색바 -->
     <div class="relative ml-[70px]">
       <div
-        class="flex items-center gap-[12px] rounded-full border-[1.5px] border-gray-b4 px-[30px] py-[15px]"
+        class="flex min-w-max 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

app/pages/community/index.vue

@@ -85,11 +85,33 @@ useHead({
 });
 
 const currentTab = ref("community");
+
+// Initialize tab based on query parameter
+const initializeTab = () => {
+  const tabParam = route.query.tab;
+  if (tabParam === "store" || tabParam === "community") {
+    currentTab.value = tabParam;
+  } else {
+    currentTab.value = "community";
+  }
+};
+
 const handleTabStore = () => {
   currentTab.value = "store";
+  // Update query parameter
+  navigateTo({
+    path: "/community",
+    query: { ...route.query, tab: "store" },
+  });
 };
+
 const handleTabCommunity = () => {
   currentTab.value = "community";
+  // Update query parameter
+  navigateTo({
+    path: "/community",
+    query: { ...route.query, tab: "community" },
+  });
 };
 const roadCode = ref(null);
 const buildingNumber = ref(null);
@@ -169,13 +191,20 @@ const handleNavbarSearch = () => {
 // 라우트 쿼리 파라미터 변경을 감지하여 UI 업데이트
 watch(
   () => route.query,
-  () => {
+  (newQuery) => {
     handleNavbarSearch();
+    // Handle tab parameter changes
+    if (newQuery.tab && (newQuery.tab === "store" || newQuery.tab === "community")) {
+      currentTab.value = newQuery.tab;
+    }
   },
   { immediate: false }
 );
 
 onMounted(async () => {
+  // Initialize tab based on query parameter
+  initializeTab();
+
   const kakao = await loadKakaoMapScript();
   kakaoRef.value = kakao;
 

app/pages/credit/_api/types/CreditResponse.ts

@@ -0,0 +1,3 @@
+export interface CreditResponse {
+  credit: number;
+}

app/pages/credit/creditStore.vue

@@ -63,22 +63,76 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query";
 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";
+import { apiInstance } from "~/utils/api";
+import type { CreditResponse } from "./_api/types/CreditResponse";
 
 const showBarcodeModal = ref(false);
-const currentCredit = ref(1500); //현재 크레딧 = 현재크레딧 - 입력크레딧
-const usingCredit = ref(null); //입력 크레딧
+const usingCredit = ref<number | null>(null);
+const currentCredit = ref(0); // This will hold the current credit amount for frontend calculations
+
+const CREDIT_STORAGE_KEY = "user_credit_1"; // Key for localStorage
+
+// Function to get credit from localStorage
+const getCreditFromStorage = (): number | null => {
+  if (import.meta.client) {
+    const stored = localStorage.getItem(CREDIT_STORAGE_KEY);
+    return stored ? parseInt(stored, 10) : null;
+  }
+  return null;
+};
+
+// Function to save credit to localStorage
+const saveCreditToStorage = (credit: number) => {
+  if (import.meta.client) {
+    localStorage.setItem(CREDIT_STORAGE_KEY, credit.toString());
+  }
+};
+
+// Initialize credit from localStorage if available
+onMounted(() => {
+  const storedCredit = getCreditFromStorage();
+  if (storedCredit !== null) {
+    currentCredit.value = storedCredit;
+  }
+});
+
+// Fetch credit data from API only once
+const { data: creditData } = useQuery<BaseResponse<CreditResponse>>({
+  queryKey: ["hasCredit", 1],
+  queryFn: () => apiInstance.get("v1/hascredit/1").then((res) => res.data),
+});
+
+// Watch for API data and initialize currentCredit if not already set from localStorage
+watch(
+  creditData,
+  (newData) => {
+    if (newData?.data.credit && currentCredit.value === 0) {
+      const storedCredit = getCreditFromStorage();
+      // Only use API data if localStorage is empty
+      if (storedCredit === null) {
+        currentCredit.value = newData.data.credit;
+        saveCreditToStorage(newData.data.credit);
+      }
+    }
+  },
+  { immediate: true }
+);
 
 const handleCredit = () => {
   if (usingCredit.value) {
     if (usingCredit.value <= currentCredit.value) {
+      // Subtract credit on frontend
       currentCredit.value = currentCredit.value - usingCredit.value;
+      // Persist to localStorage
+      saveCreditToStorage(currentCredit.value);
     } else {
       alert("사용 금액이 현재 크레딧을 초과할 수 없습니다.");
       showBarcodeModal.value = false;

app/utils/api.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 
 export const apiInstance = axios.create({
   baseURL: "https://api.setbangsari.com/api/",
-  timeout: 30 * 1000,
+  timeout: 1 * 60 * 1000,
 });
 
 export interface BaseResponse<T> {