fix: 빌드 에러 해결

Author: SUN

apps/client/src/api/album.ts

@@ -1,14 +1,20 @@
-import { api } from "@/api";
+import { api, isClientApiConfigured } from "@/api";
 import { AlbumType, IGetAlbumListResponse, IGetAlbumRequest, IGetAlbumResponse } from "type";
 
 export const getAlbumList = async ({ type, page, size }: { type: AlbumType; page: number; size: number }) => {
+  if (!isClientApiConfigured()) {
+    return { albums: [], totalAlbums: 0 };
+  }
   const { data } = await api.get<IGetAlbumListResponse>("/albums", {
     params: { type, page, size },
   });
   return data;
 };
 
 export const getAlbum = async ({ id }: IGetAlbumRequest) => {
+  if (!isClientApiConfigured()) {
+    throw new Error("Client API base URL is not configured");
+  }
   const { data } = await api.get<IGetAlbumResponse>(`/albums/${id}`);
 
   return data;

apps/client/src/api/index.ts

@@ -1,5 +1,9 @@
 import axios from "axios";
 
+const origin = process.env.NEXT_PUBLIC_AXIOS_DEFAULT_BASEURL?.replace(/\/$/, "") ?? "";
+
+export const isClientApiConfigured = () => origin.length > 0;
+
 export const api = axios.create({
-  baseURL: `${process.env.NEXT_PUBLIC_AXIOS_DEFAULT_BASEURL}/api/client`,
+  baseURL: origin ? `${origin}/api/client` : "",
 });

apps/client/src/api/youtube.ts

@@ -1,17 +1,23 @@
 import { IGetLiveResponse } from "type/src/youtube";
-import { api } from ".";
+import { api, isClientApiConfigured } from ".";
 import { IGetYoutubeResponse, YoutubeType } from "type";
 
 export interface IGetYoutbeRequest {
   videoType: YoutubeType;
   videoCount?: number;
 }
 export const getLive = async () => {
+  if (!isClientApiConfigured()) {
+    return { live: { url: "", updatedAt: 0 } };
+  }
   const { data } = await api.get<IGetLiveResponse>("/live");
   return data;
 };
 
 export const getYoutube = async (type: YoutubeType) => {
+  if (!isClientApiConfigured()) {
+    return { videos: [], totalVideos: 0 };
+  }
   const { data } = await api.get<IGetYoutubeResponse>("/videos", {
     params: { type },
   });

apps/client/src/constants/innerMenus/about.ts

@@ -22,7 +22,7 @@ export const officerType: IOfficerType[] = [
   { label: "retired", type: "원로목사" },
   { label: "senior", type: "담임목사" },
   { label: "associate", type: "목사" },
-  { label: "cooperativePastor", type: "협동목사" },
+  { label: "otherAssociate", type: "협동목사" },
   { label: "evangelist", type: "전도사" },
   { label: "missionary", type: "선교사" },
   { label: "elder", type: "장로" },

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
-    "build:client": "turbo run build --filter=client",
+    "build:client": "dotenv -- turbo run build --filter=client",
     "build:client-renewal": "turbo run build --filter=client-renewal",
     "build:admin": "turbo run build --filter=admin",
     "dev": "turbo dev",

packages/firebase/firebase.ts

@@ -1,11 +1,6 @@
-// Import the functions you need from the SDKs you need
-import { initializeApp } from "firebase/app";
+import { getApps, initializeApp, type FirebaseApp } from "firebase/app";
 
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
-
-// Your web app's Firebase configuration
-const firebaseConfig = {
+const envConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
   authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
   projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
@@ -14,5 +9,36 @@ const firebaseConfig = {
   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
 };
 
-// Initialize Firebase
-export const firebase = initializeApp(firebaseConfig);
+/** next build 등 환경 변수가 없을 때 initializeApp만 통과시키기 위한 자리 표시자(실제 Auth/네트워크 호출은 하지 않음). */
+const BUILD_PLACEHOLDER_CONFIG = {
+  apiKey: "AIzaSy0000000000000000000000000000000",
+  authDomain: "build-placeholder.firebaseapp.com",
+  projectId: "build-placeholder",
+  storageBucket: "build-placeholder.appspot.com",
+  messagingSenderId: "000000000000",
+  appId: "1:000000000000:web:0000000000000000000000",
+} as const;
+
+function resolveConfig() {
+  if (envConfig.apiKey) {
+    return {
+      apiKey: envConfig.apiKey,
+      authDomain: envConfig.authDomain ?? "",
+      projectId: envConfig.projectId ?? "",
+      storageBucket: envConfig.storageBucket,
+      messagingSenderId: envConfig.messagingSenderId,
+      appId: envConfig.appId,
+    };
+  }
+  return { ...BUILD_PLACEHOLDER_CONFIG };
+}
+
+export function getFirebaseApp(): FirebaseApp {
+  const existing = getApps()[0];
+  if (existing) {
+    return existing;
+  }
+  return initializeApp(resolveConfig());
+}
+
+export const firebase = getFirebaseApp();

packages/firebase/src/auth.ts

@@ -1,19 +1,44 @@
-import { createUserWithEmailAndPassword, getAuth, signInWithEmailAndPassword } from "firebase/auth";
-import { firebase } from "../firebase";
+import {
+  createUserWithEmailAndPassword,
+  getAuth,
+  signInWithEmailAndPassword,
+  type Auth,
+} from "firebase/auth";
 
-export const auth = getAuth(firebase);
+import { getFirebaseApp } from "../firebase";
+
+let authInstance: Auth | undefined;
+
+function getAuthSingleton(): Auth {
+  if (!authInstance) {
+    authInstance = getAuth(getFirebaseApp());
+  }
+  return authInstance;
+}
+
+/** next build SSG 시 모듈 로드만으로 getAuth가 돌지 않도록 지연 초기화합니다. */
+export const auth = new Proxy({} as Auth, {
+  get(_target, prop, _receiver) {
+    const instance = getAuthSingleton();
+    const value = Reflect.get(instance as object, prop, instance);
+    if (typeof value === "function") {
+      return (value as (...args: unknown[]) => unknown).bind(instance);
+    }
+    return value;
+  },
+});
 
 // FIXME: test
 export const getTest = () => {
-  return auth.name;
+  return getAuthSingleton().name;
 };
 
 export const postLogin = async ({ email, password }: { email: string; password: string }) => {
-  const userCredential = await signInWithEmailAndPassword(auth, email, password);
+  const userCredential = await signInWithEmailAndPassword(getAuthSingleton(), email, password);
   return userCredential;
 };
 
 export const postSignup = async ({ email, password }: { email: string; password: string }) => {
-  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+  const userCredential = await createUserWithEmailAndPassword(getAuthSingleton(), email, password);
   return userCredential.user;
 };