Develop - v1.1.4

app.vue

@@ -15,30 +15,21 @@
 import { SW } from "./registerServiceWorker";
 
 onMounted(() => {
+    // Service Worker 세팅
     if ("serviceWorker" in navigator) {
         SW();
     }
-    //// START - IOS APP인 경우 vh 로직
-    // const userAgent = navigator.userAgent.toLowerCase();
-    // if (
-    //     userAgent.includes("iphone") ||
-    //     userAgent.includes("ipod") ||
-    //     userAgent.includes("ipad")
-    // ) {
-    //     document.documentElement.style.setProperty("--vh", "1vh");
-    // } else {
-    //// END
 
-    // 초기 뷰포트 높이 설정
+    // Viewport 세팅
     let vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty("--vh", `${vh}px`);
 
-    // 창 크기가 변경될 때마다 뷰포트 높이 업데이트
     window.addEventListener("resize", () => {
         vh = window.innerHeight * 0.01;
         document.documentElement.style.setProperty("--vh", `${vh}px`);
     });
-    // }
+
+    // Clarity 세팅
     (function (c, l, a, r, i, t, y) {
         c[a] =
             c[a] ||
@@ -51,7 +42,18 @@ onMounted(() => {
         y = l.getElementsByTagName(r)[0];
         y.parentNode.insertBefore(t, y);
     })(window, document, "clarity", "script", "jsur0l64cq");
+
+    //  Google Tag Manager
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-NJPB6T5D');
 });
+
+/**
+ * Head
+ */
 useHeadSafe({
     script: [{ id: "xss-script", innerHTML: 'alert("xss")' }],
     meta: [{ "http-equiv": "refresh", content: "0;javascript:alert(1)" }],
@@ -65,12 +67,14 @@ useSeoMeta({
     ogTitle: "나만의 기록 비서 Looi",
     description: `당신의 기록을 더욱 쉽고 가치있게!`,
     ogDescription: `당신의 기록을 더욱 쉽고 가치있게!`,
-    ogImage: "https://kr.object.ncloudstorage.com/looi/%EA%B7%B8%EB%9E%98%ED%94%BD%20%EF%BC%86%20%EC%8D%B8%EB%84%A4%EC%9D%BC%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png",
+    ogImage:
+        "https://kr.object.ncloudstorage.com/looi/%EA%B7%B8%EB%9E%98%ED%94%BD%20%EF%BC%86%20%EC%8D%B8%EB%84%A4%EC%9D%BC%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png",
     twitterCard: "summary_large_image",
     ogType: "website",
     ogSiteName: "나만의 기록 비서 Looi",
     twitterTitle: "나만의 기록 비서 Looi",
     twitterDescription: `당신의 기록을 더욱 쉽고 가치있게!`,
-    twitterImage: "https://kr.object.ncloudstorage.com/looi/%EA%B7%B8%EB%9E%98%ED%94%BD%20%EF%BC%86%20%EC%8D%B8%EB%84%A4%EC%9D%BC%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png",
+    twitterImage:
+        "https://kr.object.ncloudstorage.com/looi/%EA%B7%B8%EB%9E%98%ED%94%BD%20%EF%BC%86%20%EC%8D%B8%EB%84%A4%EC%9D%BC%20%EC%9D%B4%EB%AF%B8%EC%A7%80.png",
 });
 </script>

models/auth.ts

@@ -52,3 +52,14 @@ export interface SocialCallbackModel {
     is_signup: boolean;
     user_name: string;
 }
+
+/**
+ * SignupModel
+ */
+export interface SignupModel {
+    nickname?: string;
+    mbti?: string;
+    age?: string;
+    gender?: string;
+    push_token?: string;
+}

models/diary.ts

@@ -62,6 +62,7 @@ interface Diary {
     is_completed?: boolean;
     resolution?: string;
     main_keyword?: string; // TODO: string[]
+    share_id?: string;
 }
 
 /**

nuxt.config.ts

@@ -76,5 +76,7 @@ export default defineNuxtConfig({
             mode: "client",
         },
         "~/plugins/axios",
+        "~/plugins/native", // Native App 함수 호출
+        "~/plugins/functions", // Receive From Native App (JavaScript Functions)
     ],
 });

pages/callback/apple.vue

@@ -11,6 +11,8 @@
 import { useUserStore } from "~/store/user";
 import { useAuthService } from "../../services/auth";
 
+const { $native } = useNuxtApp();
+
 const { getSocialCallback } = useAuthService();
 const route = useRoute();
 const router = useRouter();
@@ -24,7 +26,7 @@ onMounted(async () => {
     console.log(">> apple res", res);
 
     if (res.success) {
-        // 로그인 성공 시, 쿠키/store 세팅
+        // 로그인 성공 시, 쿠키/store 세팅, FCMToken 저장
         const { setAccessToken, setRefreshToken, setUser } = useUserStore();
         const now = new Date();
         const accessTokenExpires = new Date(
@@ -47,6 +49,9 @@ onMounted(async () => {
         setAccessToken(res.data.access_token);
         setRefreshToken(res.data.refresh_token);
 
+        // App에 FCM Token 요청
+        $native.reqFCMToken();
+
         if (res.data.is_signup) {
             router.push(`/profile/starter`);
             return;

pages/callback/kakao.vue

@@ -11,6 +11,8 @@
 import { useUserStore } from "~/store/user";
 import { useAuthService } from "../../services/auth";
 
+const { $native } = useNuxtApp();
+
 const { getSocialCallback } = useAuthService();
 const route = useRoute();
 const router = useRouter();
@@ -22,7 +24,7 @@ onMounted(async () => {
     const res = await getSocialCallback("kakao", route.query.code);
 
     if (res.success) {
-        // 로그인 성공 시, 쿠키/store 세팅
+        // 로그인 성공 시, 쿠키/store 세팅, FCMToken 저장
         const { setAccessToken, setRefreshToken, setUser } = useUserStore();
         const now = new Date();
         const accessTokenExpires = new Date(
@@ -45,6 +47,9 @@ onMounted(async () => {
         setAccessToken(res.data.access_token);
         setRefreshToken(res.data.refresh_token);
 
+        // App에 FCM Token 요청
+        $native.reqFCMToken();
+
         if (res.data.is_signup) {
             router.push(`/profile/starter`);
             return;

pages/diary/[id].vue

@@ -329,30 +329,34 @@ export default {
             }
         },
         async shareURL() {
-            const url = window.location.href;
-            // "https://docent.zip/share/${this.diary.id}?type=${this.type}"
-
-            try {
-                if (!navigator?.clipboard?.writeText)
-                    throw new Error(
-                        "복사 기능이 제공되지 않는 브라우저입니다.",
-                    );
-
-                // 클립보드에 복사
-                window.navigator.clipboard
-                    .writeText(url.replace("diary", "share"))
-                    .then(() => {
-                        this.$eventBus.$emit("onConfirmModal", {
-                            title: "URL이 복사되었습니다.",
-                        });
-                    });
-            } catch (e) {
-                console.error(e);
-                this.$eventBus.$emit("onConfirmModal", {
-                    title: "URL 복사에 실패하였습니다",
-                    desc: e.message,
+          const baseUrl = window.location.href.split("/").slice(0, 3).join("/");
+          let url = `${baseUrl}/share/${this.diary.share_id}`;
+          if (this.type === "1") {
+            url += "?type=1";
+          } else if (this.type === "2") {
+            url += "?type=2";
+          }
+          try {
+            if (!navigator?.clipboard?.writeText)
+              throw new Error(
+                  "복사 기능이 제공되지 않는 브라우저입니다.",
+              );
+
+            // 클립보드에 복사
+            window.navigator.clipboard
+                .writeText(url)
+                .then(() => {
+                  this.$eventBus.$emit("onConfirmModal", {
+                    title: "URL이 복사되었습니다.",
+                  });
                 });
-            }
+          } catch (e) {
+            console.error(e);
+            this.$eventBus.$emit("onConfirmModal", {
+              title: "URL 복사에 실패하였습니다",
+              desc: e.message,
+            });
+          }
         },
         handleEditMode(type) {
             this.isEditMode = true;

pages/share/[id].vue

@@ -1,7 +1,7 @@
 <template>
-    <section class="viewport" :style="dynamicBackgrond">
+    <section class="viewport">
         <div class="header">
-            <div class="button" @click="router.replace('/')">
+            <div class="button" @click="Download">
                 <Icon class="logo_look_small" />
                 <span>Looi 체험해보기</span>
             </div>
@@ -40,10 +40,13 @@
             />
 
             <!-- 3. 바텀시트 영역 -->
-            <div class="bottom-container" :style="bottomTextColor">
+            <div class="bottom-container">
                 <div class="bottom-diary">
                     <div class="bottom-diary-content">
-                        <div class="bottom-diary-content-title">
+                        <div v-if="type == 1" class="bottom-diary-content-title">
+                            <Icon class="ic_memo" /> 꿈 내용
+                        </div>
+                        <div v-else-if="type == 2" class="bottom-diary-content-title">
                             <Icon class="ic_memo" /> 일기 내용
                         </div>
                         <div class="bottom-diary-content-desc">
@@ -76,18 +79,15 @@
     </section>
 </template>
 <script setup>
-const { getShareMorningdiary, getShareNightdiary } = useDiaryService();
+const { getSharedDiary } = useDiaryService();
 const router = useRouter();
 const route = useRoute();
 
 const params = route.params;
 const query = route.query;
 
 const record = await useAsyncData(`content-${params.id}`, async () => {
-    const res =
-        query.type === "1"
-            ? await getShareMorningdiary(params.id)
-            : await getShareNightdiary(params.id);
+    const res = await getSharedDiary(params.id);
 
     if (res.success) {
         return res.data?.diary || null;
@@ -130,73 +130,26 @@ export default {
             isOpen: false,
         };
     },
-    computed: {
-        dynamicBackgrond() {
-            let background_color = `rgb(0, 0, 0)`;
-            let text_color = "#fff";
-
-            if (this.diary.background_color) {
-                const colorList = JSON.parse(this.diary.background_color);
-
-                if (colorList.length > 1) {
-                    background_color = `linear-gradient(rgb${colorList[0]}, rgb${colorList[1]})`;
-                    text_color = getTextColorForBackground(
-                        colorList.map((color) => `rgb${color}`),
-                    );
-                } else {
-                    background_color = `rgb${colorList[0]}`;
-                    text_color = getTextColorForBackground([
-                        `rgb${colorList[0]}`,
-                    ]);
-                }
-            }
-
-            return {
-                background: background_color,
-                color: text_color,
-            };
-        },
-        bottomTextColor() {
-            let text_color = "#fff";
-
-            if (this.diary.background_color) {
-                const colorList = JSON.parse(this.diary.background_color);
-
-                if (colorList.length > 1) {
-                    text_color = getTextColorForBackground([
-                        `rgb${colorList[1]}`,
-                    ]);
-                } else {
-                    text_color = getTextColorForBackground([
-                        `rgb${colorList[0]}`,
-                    ]);
-                }
-            }
-
-            return {
-                color: text_color,
-            };
-        },
-        bottomSheetTitle() {
-            let type = this.type === "1" ? "꿈 해석" : "일기";
-            if (this.type === "2" && !this.isOpen) type = "일기 자세히"; // 일기의 경우, '자세히' 보기
-
-            const open = !this.isOpen ? "보기" : "닫기";
-
-            return `${type} ${open}`;
-        },
+    methods: {
+      async Download(){
+        const userAgent = window.navigator.userAgent.toLowerCase();
+        if(/iPhone|iPad|iPod|macintosh|mac/i.test(userAgent)){
+          const url = "https://apps.apple.com/kr/app/looi-%EC%9E%90%EA%B8%B0%EA%B4%80%EB%A6%AC%EB%A5%BC-%EB%8F%84%EC%99%80%EC%A3%BC%EB%8A%94-ai-%EA%B8%B0%EB%A1%9D-%EB%B9%84%EC%84%9C/id6474598684";
+          window.open(url, "_blank");
+        }
+        else if(/android/i.test(userAgent)){
+          const url = "https://play.google.com/store/apps/details?id=zip.docent.looi";
+          window.open(url, "_blank");
+        }
+      },
     },
     async mounted() {
-        const { getShareMorningdiary, getShareNightdiary } = useDiaryService();
+        const { getSharedDiary } = useDiaryService();
 
         const id = this.$route.params.id;
-        const type = this.$route.query.type;
-        this.type = type;
+        this.type = this.$route.query.type;
 
-        const res =
-            type === "1"
-                ? await getShareMorningdiary(id)
-                : await getShareNightdiary(id);
+        const res = await getSharedDiary(id);
 
         if (!res.success) {
             this.$eventBus.$emit("onConfirmModal", {

pages/signin/index.vue

@@ -52,7 +52,7 @@ export default {
     data() {
         return {
             isOAuthFailed: false,
-            isIOS: isIOS(),
+            isIOS: false,
         };
     },
     methods: {
@@ -67,6 +67,9 @@ export default {
             }
         },
     },
+    mounted() {
+        this.isIOS = isIOS();
+    },
 };
 </script>
 

plugins/functions.js

@@ -0,0 +1,23 @@
+/**
+ * functions.js
+ * (App -> Web 앱에서 JavaScript 함수 호출)
+ */
+
+import { useAuthService } from "~/services/auth";
+
+export default defineNuxtPlugin((nuxtApp) => {
+    const resFCMToken = async (token) => {
+        console.log("✈️Hybrid Function Called: \n", token);
+        const res = await useAuthService().signup({ push_token: token });
+        if (res.success) {
+            console.log("*FCM 토큰 등록 성공", res);
+        }
+
+        return true;
+    };
+
+    // Native 앱에서 사용할 수 있도록 window 객체에 할당
+    if (typeof window !== "undefined") {
+        window.resFCMToken = resFCMToken;
+    }
+});