just commit

project-ait · Oct 23, 2023 · dfaf355 · dfaf355
1 parent b8e25f6
commit dfaf355
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@iconify/svelte": "^3.1.4",
     "@tiptap/core": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
     "@tiptap/pm": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
     "autoprefixer": "^10.4.16",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
@@ -1,24 +1,31 @@
 <script lang="ts">
   import { InsertBeforeSplitContent } from "$lib/utils/InsertBeforeSplitContent";
   import { createEditor, Editor, EditorContent } from "svelte-tiptap";
+  import Placeholder from "@tiptap/extension-placeholder";
   import StarterKit from "@tiptap/starter-kit";
   import { Extension } from "@tiptap/core";
   import { NodeState } from "$lib/stores/NodeState";
   import { onMount } from "svelte";
   import type { Readable } from "svelte/store";
   import { goto } from "$app/navigation";
+  import Icon from "@iconify/svelte";
 
   let test = false;
   let SubmitNode: HTMLButtonElement;
   let editor: Readable<Editor>;
 
   function onSubmit() {
+    if ($editor.getText().replaceAll("\n", "") === "") return;
     if ($NodeState) {
       InsertBeforeSplitContent(
         $editor.getText({ blockSeparator: "\n" }),
         test,
         $NodeState
       );
+      $NodeState.scrollTo({
+        top: $NodeState.scrollHeight,
+        behavior: "smooth",
+      });
       $editor.commands.setContent(``);
     } else {
       goto("/1");
@@ -39,23 +46,49 @@
 
   onMount(() => {
     editor = createEditor({
-      extensions: [StarterKit, CustomEnter],
+      extensions: [
+        StarterKit,
+        CustomEnter,
+        Placeholder.configure({
+          placeholder: "메세지를 입력해주세요",
+        }),
+      ],
       content: `Hello World`,
     });
   });
 </script>
 
 <form on:submit|preventDefault={onSubmit} class="input-form">
   <EditorContent editor={$editor} />
-  <button bind:this={SubmitNode} type="submit">Enter</button>
+  <button class="submit-btn" bind:this={SubmitNode} type="submit">
+    <i><Icon icon="formkit:submit" /></i>
+  </button>
 </form>
 
 <style>
   .input-form {
     position: absolute;
-    bottom: 0;
+    bottom: 5%;
     right: 40%;
     transform: translate(50%, -50%);
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .submit-btn {
+    position: absolute;
+    top: 50%;
+    right: 3%;
+    transform: translate(0, -50%);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .submit-btn i {
+    color: white;
+    font-size: 20px;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
   import { SettingState } from "$lib/stores/SettingState";
+  import { DarkMode } from "$lib/utils/DarkMode";
 
   let isDark = false;
+
+  $: isDark = JSON.parse(localStorage.getItem("isDark") || "false");
+
   function onChange() {
-    const body = document.body;
-    if (isDark) {
-      body.classList.add("dark");
-    } else {
-      body.classList.remove("dark");
-    }
+    DarkMode(isDark);
+    localStorage.setItem("isDark", String(isDark));
   }
   function onClose() {
-    $SettingState = false;
+    $SettingState.isOpen = false;
   }
 </script>
 
@@ -23,27 +23,30 @@
       <span />
     </label>
   </li>
-  <button on:click={onClose}>Close</button>
+  <button class="settings-close" on:click={onClose}>Close</button>
 </ul>
 
 <style>
   .settings-container {
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
     padding: 20px;
     width: 500px;
+    min-height: 300px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    border: 1px solid white;
     border-radius: 10px;
     background-color: #202123;
   }
 
   .settings-container li {
     display: flex;
     align-items: center;
+    padding-bottom: 20px;
+    border-bottom: 1px solid lightgray;
   }
 
   .settings-container li h1 {
@@ -96,4 +99,16 @@
     transform: translate(130%, -50%) rotateZ(200deg);
     box-shadow: inset 10px 0px 0px 0px lightgray;
   }
+
+  .settings-close {
+    padding: 10px;
+    border-radius: 10px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+  }
+
+  .settings-close:hover {
+    background-color: lightgray;
+  }
 </style>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { SettingState } from "$lib/stores/SettingState";
   import Icon from "@iconify/svelte";
+
   function onSetting() {
-    $SettingState = true;
+    $SettingState.isOpen = true;
   }
 </script>
 
-<div class="side-container">
-  <!-- 나중에 <i />에 icon 추가 -->
+<div class="side-container dark:bg-dark bg-lightdark">
   <!--  -->
   <div class="side-btns">
     <div class="side-top-btns">
@@ -20,7 +20,7 @@
       </button>
     </div>
     <ul class="side-chats">
-      {#each new Array(15).fill("") as arr, i}
+      {#each new Array(1).fill("") as arr, i}
         <li class="side-chat">
           <a href="/test" class="side-chat-btn">
             <div class="side-chat-title">
@@ -40,7 +40,7 @@
       {/each}
     </ul>
   </div>
-  <!-- / -->
+  <!--  -->
   <div class="side-auth">
     <div class="side-profile">
       <a href="/login" class="side-profile-info">
@@ -49,7 +49,7 @@
         </span>
         <span class="side-profile-name">Profile</span>
       </a>
-      <button class="side-profile-opt">
+      <button on:click={onSetting} class="side-profile-opt">
         <i><Icon icon="iwwa:option-horizontal" /></i>
       </button>
     </div>
@@ -78,15 +78,11 @@
   }
 
   .side-container {
-    position: fixed;
-    top: 0;
-    left: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 280px;
     height: 100vh;
-    background-color: #202123;
     padding: 8px 12px;
   }
 
@@ -272,4 +268,6 @@
     right: 5%;
     transform: translate(0, -50%);
   }
+
+  /* Media */
 </style>
diff --git a/src/lib/stores/SettingState.ts b/src/lib/stores/SettingState.ts
@@ -1,3 +1,9 @@
 import { writable } from "svelte/store";
 
-export const SettingState = writable<boolean>(false);
+interface SettingProp {
+  isOpen: boolean;
+}
+
+export const SettingState = writable<SettingProp>({
+  isOpen: false,
+});
diff --git a/src/lib/utils/DarkMode.ts b/src/lib/utils/DarkMode.ts
@@ -0,0 +1,8 @@
+export function DarkMode(isDark: boolean) {
+  const html = document.documentElement;
+  if (isDark) {
+    html.classList.add("dark");
+  } else {
+    html.classList.remove("dark");
+  }
+}
diff --git a/src/lib/utils/InsertBeforeSplitContent.ts b/src/lib/utils/InsertBeforeSplitContent.ts
@@ -4,15 +4,15 @@ const ChatBlock = `<div class="chat-main">
       </div>
       <div id="content" class="chat-content"></div>
     </div>
-    <div>Btn</div>`;
+    </div>`;
 
 export function InsertBeforeSplitContent(
   content: string,
   isUser: boolean,
   ParentNode: Element
 ) {
-  const splitedContent = content.split(" ");
-
+  const replaceContent = content.replaceAll(" ", String.fromCharCode(160));
+  const splitedContent = replaceContent.split(String.fromCharCode(160));
   // ParentNode에 삽일할 엘리먼트 생성 후 class 추가
   const NewElement = document.createElement("div");
   NewElement.classList.add(`chat-block`);

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,26 +1,37 @@
 <script lang="ts">
+  import "./styles.css";
   import { NodeState } from "$lib/stores/NodeState";
+  import { SettingState } from "$lib/stores/SettingState";
   import Input from "$lib/components/Input.svelte";
   import Sidebar from "$lib/components/Sidebar.svelte";
-  import "./styles.css";
   import Settings from "$lib/components/Settings.svelte";
-  import { SettingState } from "$lib/stores/SettingState";
+  import { onMount } from "svelte";
+  import { DarkMode } from "$lib/utils/DarkMode";
+
+  onMount(() => {
+    const isDark = JSON.parse(localStorage.getItem("isDark") || "false");
+    DarkMode(isDark);
+  });
 </script>
 
-<div class="app">
-  <!-- Header 필요시 Header Component 추가 -->
-  <main>
-    <Sidebar />
-    {#if $SettingState}
-      <Settings />
-    {/if}
-    {#if $NodeState}
-      <Input />
-    {/if}
-    <slot />
-  </main>
-  <!-- Footer 필요시 Footer Component 추가 -->
-</div>
+{#if typeof window !== "undefined"}
+  <div class="app">
+    <!-- Header 필요시 Header Component 추가 -->
+    <main>
+      <Sidebar />
+      {#if $SettingState.isOpen}
+        <Settings />
+      {/if}
+      {#if $NodeState}
+        <Input />
+      {/if}
+      <div class="main-width dark:bg-lightdark">
+        <slot />
+      </div>
+    </main>
+    <!-- Footer 필요시 Footer Component 추가 -->
+  </div>
+{/if}
 
 <style>
   main {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -7,10 +7,11 @@
 </svelte:head>
 
 <!-- About 페이지 또는 채팅 공간 만드는 페이지 -->
-<div class="main main-width" />
+<div class="main" />
 
 <style>
-  .main-width {
-    background-color: #343540;
+  .main {
+    width: 100%;
+    height: 100%;
   }
 </style>
diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
@@ -11,14 +11,16 @@
   });
 </script>
 
-<div bind:this={ChatNode} class="chat-blocks main-width" />
+<div bind:this={ChatNode} class="chat-blocks" />
 
 <style>
   .chat-blocks {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #343540;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
     padding: 100px 0;
   }
 </style>