fix: 온보딩 수정v1.4

Docent-Inc · Feb 8, 2024 · 5ef51cb · 5ef51cb
1 parent c1dbb33
commit 5ef51cb
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 41 deletions.
diff --git a/assets/images/onboarding/ic_onboarding_1.svg b/assets/images/onboarding/ic_onboarding_1.svg
diff --git a/assets/images/onboarding/ic_onboarding_2.svg b/assets/images/onboarding/ic_onboarding_2.svg
diff --git a/assets/images/onboarding/ic_onboarding_3.svg b/assets/images/onboarding/ic_onboarding_3.svg
diff --git a/assets/images/onboarding/ic_onboarding_4.svg b/assets/images/onboarding/ic_onboarding_4.svg
diff --git a/assets/scss/icon.scss b/assets/scss/icon.scss
@@ -872,4 +872,28 @@
         center/cover;
     background-size: contain;
     display: block;
+}
+
+.ic_onboarding_1 {
+    background: url("../images/onboarding/ic_onboarding_1.svg") no-repeat center/cover;
+    background-size: contain;
+    display: block;
+}
+
+.ic_onboarding_2 {
+    background: url("../images/onboarding/ic_onboarding_2.svg") no-repeat center/cover;
+    background-size: contain;
+    display: block;
+}
+
+.ic_onboarding_3 {
+    background: url("../images/onboarding/ic_onboarding_3.svg") no-repeat center/cover;
+    background-size: contain;
+    display: block;
+}
+
+.ic_onboarding_4 {
+    background: url("../images/onboarding/ic_onboarding_4.svg") no-repeat center/cover;
+    background-size: contain;
+    display: block;
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -42,7 +42,7 @@ const router = useRouter();
 
 onMounted(() => {
   const isOnboarding = window.localStorage.getItem("isOnboarding");
-  if (!isOnboarding) {
+  if (isOnboarding) {
     router.replace(`/onboarding`);
     return;
   }

diff --git a/pages/onboarding/index.vue b/pages/onboarding/index.vue
@@ -1,44 +1,51 @@
 <template>
     <div class="viewport">
         <!-- (1) 헤더 -->
-        <div class="header">
-            <div class="onboarding-title">튜토리얼</div>
+<!--        <div class="header">-->
+<!--            <div class="onboarding-title">튜토리얼</div>-->
 
-            <div class="onboarding-skip" @click="goSignIn">건너뛰기</div>
-        </div>
+<!--            <div class="onboarding-skip" @click="goSignIn">건너뛰기</div>-->
+<!--        </div>-->
 
         <!-- (2) 본문  -->
         <div class="layout">
-            <div class="contents" ref="scrollableRef">
-                <ExampleChatBox
-                    v-for="(chat, idx) in exampleList"
-                    :key="idx"
-                    :chat="chat"
-                    class="chat-box"
-                />
-            </div>
+            <v-icon class="ic_onboarding_1" v-if="page_number===1"/>
+            <v-icon class="ic_onboarding_2" v-else-if="page_number===2"/>
+            <v-icon class="ic_onboarding_3" v-else-if="page_number===3"/>
+            <v-icon class="ic_onboarding_4" v-else-if="page_number===4"/>
+<!--            <div class="contents" ref="scrollableRef">-->
+<!--                <ExampleChatBox-->
+<!--                    v-for="(chat, idx) in exampleList"-->
+<!--                    :key="idx"-->
+<!--                    :chat="chat"-->
+<!--                    class="chat-box"-->
+<!--                />-->
+<!--            </div>-->
         </div>
         <div class="bottom">
-            <div
-                class="onabording-button animate__animated animate__fadeIn"
-                v-if="showButton"
-                @click="push2List"
-            >
-                오늘은 인상깊은 날이다. 나만의 공간에서 나를 도와줄 기록 비서
-                Looi와 만나게 되었다. 기록 열심히 해야지!
+<!--            <div-->
+<!--                class="onabording-button animate__animated animate__fadeIn"-->
+<!--                v-if="showButton"-->
+<!--                @click="push2List"-->
+<!--            >-->
+<!--                오늘은 인상깊은 날이다. 나만의 공간에서 나를 도와줄 기록 비서-->
+<!--                Looi와 만나게 되었다. 기록 열심히 해야지!-->
+<!--            </div>-->
+            <div class="onabording-button" @click="next">
+                다음
             </div>
 
-            <div class="chat-loading" v-if="isLoading">
-                <img src="@/assets/images/pages/chat/loading-dot.gif" />
-            </div>
-
-            <div
-                class="button primary animate__animated animate__fadeIn"
-                v-if="showStartButton"
-                @click="goSignIn"
-            >
-                Looi 가입하러 가기
-            </div>
+<!--            <div class="chat-loading" v-if="isLoading">-->
+<!--                <img src="@/assets/images/pages/chat/loading-dot.gif" />-->
+<!--            </div>-->
+
+<!--            <div-->
+<!--                class="button primary animate__animated animate__fadeIn"-->
+<!--                v-if="showStartButton"-->
+<!--                @click="goSignIn"-->
+<!--            >-->
+<!--                Looi 가입하러 가기-->
+<!--            </div>-->
         </div>
     </div>
 </template>
@@ -50,6 +57,11 @@ import ChatResult from "../../components/chat/ChatBox.vue";
 export default {
     name: "Chat",
     components: { ExampleChatBox, ChatResult },
+    data() {
+        return {
+            page_number: 0,
+        }
+    }
 };
 </script>
 
@@ -64,7 +76,8 @@ import OnboardingJSON from "@/assets/json/onboarding.json";
  * Data
  */
 const router = useRouter();
-
+const { $native } = useNuxtApp();
+let page_number = ref(0);
 const exampleList = ref([]);
 const showButton = ref(false);
 const isLoading = ref(false);
@@ -80,8 +93,13 @@ watch(
 /**
  * LifeCycle
  */
+onBeforeMount(() => {
+    $native.controlSafeArea(true);
+});
+
 onMounted(() => {
     push1List(OnboardingJSON[0]);
+    page_number.value++;
 });
 
 /**
@@ -92,6 +110,15 @@ onMounted(() => {
  * 4. push4List [보고서 예시 ~ 시작]
  */
 
+async function next() {
+    if(page_number.value === 4) {
+        goSignIn();
+        return;
+    }
+    page_number.value++;
+    console.log(page_number.value)
+}
+
 // 1. [인사 ~ 버튼 클릭 전]
 async function push1List() {
     const list = OnboardingJSON[0];
@@ -186,6 +213,9 @@ const updateChatBoxCss = () => {
 
 <style lang="scss" scoped>
 @import "@/assets/scss/variables.scss";
+.viewport {
+    overflow-x: hidden;
+}
 .layout {
     height: calc(100%);
     height: calc(
@@ -196,8 +226,9 @@ const updateChatBoxCss = () => {
         100% - (env(safe-area-inset-bottom) + env(safe-area-inset-top))
     );
 
-    padding-top: 60px;
+    //padding-top: 60px;
     padding-bottom: 10rem;
+    overflow: hidden; /* 컨테이너 밖으로 나가는 이미지 부분을 숨김 */
     background: $gradient_bg_light;
 }
 
@@ -243,16 +274,16 @@ const updateChatBoxCss = () => {
 .bottom {
     width: 100%;
     max-width: 500px;
-    min-height: 10rem;
-    background: rgba(255, 255, 255, 0.5);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
+    min-height: 5rem;
+    background: rgba(255, 255, 255, 255);
+    //-webkit-backdrop-filter: blur(16px);
+    //backdrop-filter: blur(16px);
 
     display: flex;
     justify-content: center;
     align-items: center;
 
-    padding: 1.5rem 0 3rem;
+    padding: 2rem 0 2rem;
     z-index: 998;
     position: fixed;
     bottom: 0;
@@ -262,8 +293,9 @@ const updateChatBoxCss = () => {
     .onabording-button {
         border-radius: 12px;
         background: var(--CTA_accent, #9398ff);
-        box-shadow: 0px 8px 30px 0px rgba(70, 96, 250, 0.46);
+        //box-shadow: 0px 8px 30px 0px rgba(70, 96, 250, 0.46);
 
+        text-align: center;
         color: $vc-white;
 
         /* b2/b2_bold_14 */
@@ -291,4 +323,8 @@ const updateChatBoxCss = () => {
         }
     }
 }
+.ic_onboarding_1, .ic_onboarding_2, .ic_onboarding_3, .ic_onboarding_4 {
+    width: 100%;
+    height: 120%;
+}
 </style>
diff --git a/pages/report/[id].vue b/pages/report/[id].vue
@@ -113,6 +113,7 @@ import { useUserStore } from "~/store/user";
 import { useReportService } from "../../services/report";
 import Image from "~/components/common/Image.vue";
 import BackBtn from "~/components/common/buttons/BackBtn.vue";
+const { $native } = useNuxtApp();
 
 export default {
     name: "Report",
@@ -152,6 +153,7 @@ export default {
             Object.assign(this.data, res.data);
             Object.assign(this.content, res.data.content);
         }
+        $native.controlSafeArea(false);
     },
 };
 </script>

diff --git a/pages/report/index.vue b/pages/report/index.vue
@@ -64,7 +64,7 @@
 import ReportItems from "../../components/report/ReportItems.vue";
 import Icon from "~/components/common/Icon.vue";
 import InfiniteLoading from "v3-infinite-loading";
-
+const { $native } = useNuxtApp();
 import { mapState } from "pinia";
 import { useUserStore } from "~/store/user";
 
@@ -101,6 +101,7 @@ export default {
             this.list_count = res.data.list_count;
             this.reports = res.data.reports;
         }
+        $native.controlSafeArea(false);
     },
     methods: {
         async loadMore() {

diff --git a/pages/signin/index.vue b/pages/signin/index.vue
@@ -46,7 +46,7 @@ import { useAuthService } from "../../services/auth";
 import Toast from "~/components/common/Toast.vue";
 import { isIOS } from "~/utils/utils";
 import Icon from "~/components/common/Icon.vue";
-
+const { $native } = useNuxtApp();
 export default {
     components: { Toast, Icon },
     data() {
@@ -69,6 +69,7 @@ export default {
     },
     mounted() {
         this.isIOS = isIOS();
+        $native.controlSafeArea(false);
     },
 };
 </script>