feat(develop): 서비스 플로우 및 ux 개선

Docent-Inc · Feb 2, 2024 · f87dc7e · f87dc7e
1 parent aa8f158
commit f87dc7e
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 39 deletions.
diff --git a/components/chat/ChatInput.vue b/components/chat/ChatInput.vue
@@ -32,18 +32,18 @@
     </div>
 
     <div class="chat-input">
-        <div class="chat-select-box" v-if="!(mode === 'VOICE' || isGenerating)">
-            <div
-                v-for="(select, idx) in selectList"
-                :key="idx"
-                class="chat-select"
-                :class="{ selected: type === idx + 1 }"
-                @click="onSelect(idx)"
-            >
-                {{ select }}
-            </div>
-            <div class="chat-select" @click="onSelect(-1)">↩︎</div>
-        </div>
+<!--        <div class="chat-select-box" v-if="!(mode === 'VOICE' || isGenerating)">-->
+<!--            <div-->
+<!--                v-for="(select, idx) in selectList"-->
+<!--                :key="idx"-->
+<!--                class="chat-select"-->
+<!--                :class="{ selected: type === idx + 1 }"-->
+<!--                @click="onSelect(idx)"-->
+<!--            >-->
+<!--                {{ select }}-->
+<!--            </div>-->
+<!--            <div class="chat-select" @click="onSelect(-1)">↩︎</div>-->
+<!--        </div>-->
 
         <div class="chat-input-box">
             <div v-if="isGenerating" class="chat-loading">
@@ -294,9 +294,8 @@ export default {
 
     z-index: 997;
     position: fixed;
-    bottom: 9rem;
-    bottom: calc(9rem + env(safe-area-inset-bottom));
-    bottom: calc(9rem + constant(safe-area-inset-bottom));
+    bottom: calc(env(safe-area-inset-bottom));
+    bottom: calc(constant(safe-area-inset-bottom));
 }
 
 .chat-select-box {

diff --git a/layouts/main.vue b/layouts/main.vue
@@ -3,20 +3,20 @@
         <div class="layout">
             <slot />
         </div>
-        <Navigation />
+<!--        <Navigation />-->
     </div>
 </template>
 
 <script lang="ts"></script>
 <style lang="scss" scoped>
 .layout {
-    height: calc(100% - 9rem);
-    height: calc(100% - (9rem + constant(safe-area-inset-bottom)));
-    height: calc(100% - (9rem + env(safe-area-inset-bottom)));
+    height: calc(100%);
+    height: calc(100% - constant(safe-area-inset-bottom));
+    height: calc(100% - env(safe-area-inset-bottom));
 
-    margin-bottom: 9rem;
-    margin-bottom: calc(9rem + constant(safe-area-inset-bottom));
-    margin-bottom: calc(9rem + env(safe-area-inset-bottom));
+    //margin-bottom: 9rem;
+    //margin-bottom: calc(9rem + constant(safe-area-inset-bottom));
+    //margin-bottom: calc(9rem + env(safe-area-inset-bottom));
 
     // 231215 - Toast 중앙정렬 이슈로 추가
     display: flex;

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
         "build:dev": "nuxt build  --dotenv .env.dev",
         "dev": "nuxt dev --dotenv .env.dev",
         "local": "nuxt dev --host --dotenv .env.local",
+        "prod": "nuxt dev --dotenv .env.prod",
         "generate": "nuxt generate  --dotenv .env.prod",
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare"

diff --git a/pages/chat/index.vue b/pages/chat/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="viewport">
         <div class="header">
-            <span class="header-title"> Looi </span>
-            <Icon class="ic_help" @click="isVisible = !isVisible" />
+            <span class="logo_v2 icon" />
+            <Icon class="nav_mypage" @click="navigateTo(`/mypage?tab=diary`)" />
         </div>
 
         <div class="contents" ref="scrollableRef">
@@ -17,7 +17,7 @@
             />
         </div>
 
-        <Navigation />
+<!--        <Navigation />-->
         <ChatInput />
 
         <!-- 토스트 -->
@@ -205,7 +205,7 @@ const updateChatBoxCss = () => {
     background: $gradient_bg_light;
     padding-top: 60px; // header
     // input + CSS 52px 간격 요청 + nav
-    padding-bottom: calc(12.5rem + 52px + 9rem);
+    //padding-bottom: calc(12.5rem + 52px + 9rem);
     // IOS 네비 하단에 배경 X
     // margin-bottom: env(safe-area-inset-bottom);
     // margin-bottom: constant(safe-area-inset-bottom);
@@ -232,4 +232,9 @@ const updateChatBoxCss = () => {
         padding: 6px 42px;
     }
 }
+.nav_mypage {
+  //width: 100%;
+  //height: 100%;
+  //margin-top: 10px;
+}
 </style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
@@ -38,7 +38,7 @@
                 </div>
             </main>
         </div>
-        <Navigation />
+<!--        <Navigation />-->
     </div>
 
     <SimpleModal :isModalOpen="isModalOpen" @close="closeModal">
@@ -163,18 +163,18 @@ export default {
 @import "@/assets/scss/mixins.scss";
 
 .contents {
-    height: calc(100% - (6rem + 9rem));
-    height: calc(100% - (6rem + 9rem + constant(safe-area-inset-top)));
-    height: calc(100% - (6rem + 9rem + env(safe-area-inset-top)));
+    height: calc(100% - (6rem));
+    height: calc(100% - (6rem + constant(safe-area-inset-top)));
+    height: calc(100% - (6rem + env(safe-area-inset-top)));
 
     margin-top: 6rem;
     margin-top: calc(6rem + constant(safe-area-inset-top));
     margin-top: calc(6rem + env(safe-area-inset-top));
     padding: 0;
 
-    margin-bottom: 9rem;
-    margin-bottom: calc(9rem + constant(safe-area-inset-bottom));
-    margin-bottom: calc(9rem + env(safe-area-inset-bottom));
+    //margin-bottom: 9rem;
+    //margin-bottom: calc(9rem + constant(safe-area-inset-bottom));
+    //margin-bottom: calc(9rem + env(safe-area-inset-bottom));
 
     overflow-x: none;
     overflow-y: scroll;

diff --git a/pages/mypage/index.vue b/pages/mypage/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="header">
         <div class="header-top">
-            <span class="mypage-title">마이페이지</span>
-            <v-icon class="ic_setting" @click="goSetting" />
+            <v-icon class="ic_back" @click="navigateTo(`/chat`)" />
+             <v-icon class="ic_setting" @click="goSetting" />
         </div>
     </div>
     <div class="contents">
@@ -19,6 +19,8 @@
         </div>
 
         <!-- (2) 통계 영역 -->
+        <Report />
+
         <div
             class="contents-header-2"
             v-if="highestCountCategory"
@@ -28,6 +30,8 @@
             <p class="status-text">{{ highestCountCategory.message }}</p>
         </div>
 
+
+
         <!-- (3) 콘텐츠 영역 -->
         <div class="contents-header-4">
             <Tags
@@ -73,6 +77,7 @@ import BoardItems from "../../components/diary/BoardItems.vue";
 import Tags from "../../components/diary/Tags.vue";
 import Icon from "~/components/common/Icon.vue";
 import CalendarMain from "~/components/calendar/CalendarMain.vue";
+import Report from "../../components/home/Report.vue";
 
 export default {
     name: "Mypage",
@@ -87,6 +92,7 @@ export default {
         ListItems,
         Icon,
         CalendarMain,
+        Report,
     },
     data() {
         return {
@@ -238,6 +244,7 @@ export default {
         margin-top: 16px;
         padding: 0 2rem;
         height: 32px;
+        margin-bottom: 20px;
 
         display: flex;
         justify-content: space-between;
@@ -251,7 +258,7 @@ export default {
     }
 
     .contents-header-2 {
-        margin: 2rem 0 3rem 0;
+        margin: 3rem 0 3rem 0;
         padding: 0 2rem;
 
         width: 100%;

diff --git a/store/chat.ts b/store/chat.ts
@@ -8,7 +8,7 @@ enum ChatType {
     RESULT = "result",
     LOADING = "loading",
     SELECT = "select", // 231206 - 미사용
-    DEFAULT = "default",
+    DEFAULT = "2",
     SUCCESS = "success",
     FAIL = "fail",
 }
@@ -23,7 +23,7 @@ interface Chat {
 const initialState = () => ({
     chatList: [] as Chat[],
     isGenerating: false,
-    type: 0,
+    type: 2,
     resetFlag: false, // unmounted 시, 초기화 여부 플래그
 });
 
@@ -49,7 +49,7 @@ export const useChatStore = defineStore("chat", {
             const welcomeChat = {
                 is_docent: true,
                 type: ChatType.DEFAULT,
-                text: `${res.data.text} \n기록 예시가 필요한가요?`,
+                text: `${res.data.text}`,
             };
             this.addChat(welcomeChat);
         },