Merge pull request #4 from project-ait/logic

Logic
project-ait · Oct 19, 2023 · 5dfa3c6 · 5dfa3c6
2 parents 2da4986 + 3d51492
commit 5dfa3c6
Show file tree

Hide file tree

Showing 13 changed files with 551 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,24 +1,25 @@
 {
-	"name": "front",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@fontsource/fira-mono": "^4.5.10",
-		"@neoconfetti/svelte": "^1.0.0",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/cookie": "^0.5.1",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module"
+  "name": "front",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "pro": "vite build && vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/cookie": "^0.5.1",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module"
 }
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <svelte>%sveltekit.body%</svelte>
+  </body>
 </html>
diff --git a/src/lib/components/ChatBlock.svelte b/src/lib/components/ChatBlock.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  export let isUser = false;
+</script>
+
+<div class="chat-block {isUser ? 'user-block-bg' : 'ai-block-bg'}">
+  <div class="chat-main">
+    <div class="chat-profile">
+      <!-- ai blcok 인지 user block인지 판별 후 이미지 지정 -->
+      <img alt="" />
+    </div>
+    <div class="chat-content" />
+  </div>
+  <!-- Btn flex 나중에 구현 -->
+  <div>Btn</div>
+</div>
+
+<style>
+  .chat-block {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    height: auto;
+    padding: 20px 40px;
+  }
+
+  .chat-main {
+    width: 100%;
+    display: flex;
+  }
+
+  .chat-profile {
+    min-width: 35px;
+    height: 35px;
+    margin-right: 20px;
+  }
+
+  .chat-profile img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .chat-content {
+    width: 90%;
+    padding: 0 40px;
+    font-size: 15px;
+    color: white;
+    word-break: break-all;
+  }
+
+  /*  */
+
+  .user-block-bg {
+    background-color: transparent;
+  }
+
+  .ai-block-bg {
+    background-color: #444654;
+  }
+</style>
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+
+  export let value = "";
+  // function InsertBeforeSplitContent(content: string[]) {
+  //   const ChatElement = document.createElement("div");
+  //   ParentNode.insertAdjacentElement("afterend", ChatElement);
+  //   for (let i = 0; i < content.length; i++) {
+  //     // setTimeout
+  //     setTimeout(() => {
+  //       ChatElement.innerText += content[i] + String.fromCharCode(160);
+  //     }, Math.min(20, Math.ceil(content.length / 3)) * i);
+  //     // clearTimeout
+  //     clearTimeout(
+  //       setTimeout(() => {
+  //         ChatElement.innerText += content[i] + String.fromCharCode(160);
+  //       }, Math.min(20, Math.ceil(content.length / 3)) * i)
+  //     );
+  //   }
+  // }
+  function onSubmit() {
+    goto("/1");
+  }
+</script>
+
+<form on:submit|preventDefault={onSubmit} class="input-form">
+  <input bind:value type="text" placeholder="Send a message" />
+</form>
+
+<style>
+  .input-form {
+    position: fixed;
+  }
+</style>