From c5235febb37d868870cbf36e9f546d9dbf05bebc Mon Sep 17 00:00:00 2001
From: song-yeonghyun <dudgus907@naver.com>
Date: Sat, 4 Nov 2023 00:12:30 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Design:=20=EC=B1=97=EB=B4=87=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=EB=94=94=EC=9E=90=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#
---
 components/genine/BotChat.vue  | 10 ++++++
 components/genine/UserChat.vue |  9 +++++
 package-lock.json              |  1 -
 pages/profile/edit.vue         |  2 +-
 pages/search/genine.vue        | 64 ++++++++++++++++++++++++++++++++++
 5 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 components/genine/BotChat.vue
 create mode 100644 components/genine/UserChat.vue
 create mode 100644 pages/search/genine.vue

diff --git a/components/genine/BotChat.vue b/components/genine/BotChat.vue
new file mode 100644
index 0000000..c0ba6e5
--- /dev/null
+++ b/components/genine/BotChat.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="flex flex-col ml-4">
+    <p class="text-lg font-medium">Genine</p>
+    <div
+      class="justify-center py-4 rounded-tr-xl px-3 rounded-bl-xl rounded-br-xl bg-[#fefefe] border border-[#e6e8eb]"
+    >
+      안녕하세요 Genine임 ㅋㅋㅎㅇ
+    </div>
+  </div>
+</template>
diff --git a/components/genine/UserChat.vue b/components/genine/UserChat.vue
new file mode 100644
index 0000000..681a320
--- /dev/null
+++ b/components/genine/UserChat.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col ml-4">
+    <div
+      class="justify-center py-4 px-3 rounded-bl-xl rounded-br-xl rounded-tl-xl bg-[#1f8ce6] text-white"
+    >
+      안녕하세요 Genine임 ㅋㅋㅎㅇ
+    </div>
+  </div>
+</template>
diff --git a/package-lock.json b/package-lock.json
index 221afc4..4fc2ffb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3495,7 +3495,6 @@
     },
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
-      "devOptional": true,
       "inBundle": true,
       "license": "MIT"
     },
diff --git a/pages/profile/edit.vue b/pages/profile/edit.vue
index f291778..2bfba78 100644
--- a/pages/profile/edit.vue
+++ b/pages/profile/edit.vue
@@ -7,7 +7,7 @@
         <SideNavigation :active-button="4" class="mt-20"> </SideNavigation>
         <div class="mt-20 w-full bg-[#F4F6F8] ml-48 flex-col">
           <div class="flex relative flex-col mt-20 mx-20">
-            <div class="">
+            <div>
               <button
                 class="flex flex-row justify-start items-center h-8 pl-2 pr-4 rounded-lg hover:bg-[#e9ecef]"
                 @click="$router.back()"
diff --git a/pages/search/genine.vue b/pages/search/genine.vue
new file mode 100644
index 0000000..f0fd421
--- /dev/null
+++ b/pages/search/genine.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <TopBarApp />
+
+    <div class="flex h-screen flex-col">
+      <div class="flex flex-grow flex-row">
+        <SideNavigation :active-button="1" class="mt-20"></SideNavigation>
+        <main class="mt-20 flex flex-grow bg-[#F4F6F8] ml-48">
+          <div class="flex flex-grow flex-col m-20">
+            <div>
+              <button
+                class="flex flex-row justify-start items-center h-8 pl-2 pr-4 rounded-lg hover:bg-[#e9ecef]"
+                @click="$router.back()"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="w-5 h-5"
+                  preserveAspectRatio="xMidYMid meet"
+                >
+                  <path
+                    d="M12.5 15L7.5 10L12.5 5"
+                    stroke="#1F8CE6"
+                    stroke-width="1.66667"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  ></path>
+                </svg>
+                <p class="text-sm font-medium text-center ml-2 text-[#1f8ce6]">
+                  이전으로 돌아가기
+                </p>
+              </button>
+            </div>
+
+            <div
+              class="flex w-full h-full justify-between rounded-2xl bg-white border border-[#e6e8eb] mt-3 flex-col"
+            >
+              <div class="flex flex-col justify-start items-start gap-1">
+                <GenineBotChat />
+                <GenineUserChat />
+              </div>
+
+              <div class="flex items-end bottom-0 content-end h-12 mx-10 mb-9">
+                <input
+                  class="flex pl-4 items-center flex-grow h-12 rounded-lg bg-[#f4f6f8] border border-[#e6e8eb]"
+                  type="text"
+                  placeholder="궁금하신 내용을 입력해주세요"
+                />
+                <button
+                  class="flex items-center justify-center h-12 w-24 rounded-lg text-[#646f7c] text-sm bg-[#E0E0E0] ml-2"
+                >
+                  전송하기
+                </button>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>