Merge pull request #224 from coldsurfers/release/surf-tree-v1.0.6

release(surf-tree): v1.0.6

.github/workflows/ci-cd.surf-tree.yml

@@ -24,6 +24,13 @@ jobs:
         run: |
           echo "SURF_TREE_DOMAIN_CERT_ARN=${{ secrets.SURF_TREE_DOMAIN_CERT_ARN }}" >> .env
           echo "SURF_TREE_DOMAIN_NAME=${{ secrets.SURF_TREE_DOMAIN_NAME }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_API_KEY=${{ secrets.SURF_TREE_FIREBASE_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=${{ secrets.SURF_TREE_FIREBASE_AUTH_DOMAIN }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ secrets.SURF_TREE_FIREBASE_PROJECT_ID }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=${{ secrets.SURF_TREE_FIREBASE_STORAGE_BUCKET }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.SURF_TREE_FIREBASE_MESSAGING_SENDER_ID }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_APP_ID=${{ secrets.SURF_TREE_FIREBASE_APP_ID }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.SURF_TREE_FIREBASE_MEASUREMENT_ID }}" >> .env
 
       - name: SST Next.js template action
         uses: ./.github/workflows/composites/sst-nextjs-template

apps/coldsurf-io/package.json

@@ -13,7 +13,7 @@
     "@emotion/css": "*",
     "@emotion/react": "*",
     "@emotion/styled": "*",
-    "firebase": "^11.1.0",
+    "firebase": "*",
     "framer-motion": "*",
     "lucide-react": "*",
     "next": "15.1.2",

apps/surf-tree/.env.sample

@@ -1,2 +1,9 @@
 SURF_TREE_DOMAIN_NAME=
-SURF_TREE_DOMAIN_CERT_ARN=
+SURF_TREE_DOMAIN_CERT_ARN=
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=

apps/surf-tree/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsurfers/surf-tree",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -14,6 +14,7 @@
     "@emotion/react": "*",
     "@emotion/styled": "*",
     "cheerio": "^1.0.0",
+    "firebase": "*",
     "framer-motion": "*",
     "lucide-react": "*",
     "next": "15.1.0",

apps/surf-tree/src/app/(lib)/firebase/firebase.constants.ts

@@ -0,0 +1,9 @@
+export const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+}

apps/surf-tree/src/app/(lib)/firebase/firebase.ts

@@ -0,0 +1,28 @@
+// Import the functions you need from the SDKs you need
+import { Analytics, getAnalytics } from 'firebase/analytics'
+import { FirebaseApp, initializeApp as fbInitializeApp } from 'firebase/app'
+import { firebaseConfig } from './firebase.constants'
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+/**
+ * only for client side
+ */
+export class Firebase {
+  private analytics: Analytics
+  private app: FirebaseApp
+
+  constructor() {
+    // Initialize Firebase
+    this.app = fbInitializeApp(firebaseConfig)
+    this.analytics = getAnalytics(this.app)
+  }
+
+  static initializeApp() {
+    if (process.env.NODE_ENV === 'development') {
+      return
+    }
+    const app = fbInitializeApp(firebaseConfig)
+    return getAnalytics(app)
+  }
+}

apps/surf-tree/src/app/(lib)/firebase/index.ts

@@ -0,0 +1 @@
+export * from './firebase'

apps/surf-tree/src/app/(lib)/index.ts

@@ -0,0 +1 @@
+export * from './firebase'

apps/surf-tree/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import { OceanRoadThemeContext } from '@/contexts'
+import { FirebaseContext, OceanRoadThemeContext } from '@/contexts'
 import type { Metadata } from 'next'
 import { Noto_Sans_KR } from 'next/font/google'
 
@@ -74,7 +74,9 @@ export default function RootLayout({
             `,
           }}
         />
-        <OceanRoadThemeContext>{children}</OceanRoadThemeContext>
+        <FirebaseContext>
+          <OceanRoadThemeContext>{children}</OceanRoadThemeContext>
+        </FirebaseContext>
       </body>
     </html>
   )

apps/surf-tree/src/contexts/firebase-context/firebase-context.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { Firebase } from '@/app/(lib)'
+import { PropsWithChildren, useEffect } from 'react'
+
+export function FirebaseContext({ children }: PropsWithChildren) {
+  useEffect(() => {
+    function initFirebase() {
+      Firebase.initializeApp()
+    }
+    initFirebase()
+  }, [])
+
+  return <>{children}</>
+}

apps/surf-tree/src/contexts/firebase-context/index.ts

@@ -0,0 +1 @@
+export * from './firebase-context'

apps/surf-tree/src/contexts/index.ts

@@ -1 +1,2 @@
+export * from './firebase-context'
 export * from './ocean-road-theme-context'

package.json

@@ -66,7 +66,8 @@
     "serverless-plugin-monorepo": "0.11.0",
     "sst": "3.4.28",
     "lucide-react": "0.469.0",
-    "react-lite-youtube-embed": "2.4.0"
+    "react-lite-youtube-embed": "2.4.0",
+    "firebase": "11.1.0"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.12.1",