insert icons

project-ait · Oct 23, 2023 · 1bece55 · 1bece55
1 parent 469b178
commit 1bece55
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 81 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@iconify/svelte": "^3.1.4",
     "@tiptap/core": "^2.1.12",
     "@tiptap/pm": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
@@ -12,32 +12,35 @@
   let SubmitNode: HTMLButtonElement;
   let editor: Readable<Editor>;
 
-  const DisableEnter = Extension.create({
-    addKeyboardShortcuts() {
-      return {
-        Enter: () => {
-          SubmitNode.click();
-          return true;
-        },
-      };
-    },
-  });
   function onSubmit() {
     if ($NodeState) {
       InsertBeforeSplitContent(
         $editor.getText({ blockSeparator: "\n" }),
         test,
         $NodeState
       );
+      console.log($editor.getHTML());
       $editor.commands.setContent(``);
     } else {
       goto("/1");
     }
     test = !test;
   }
+
+  const CustomEnter = Extension.create({
+    addKeyboardShortcuts() {
+      return {
+        Enter: () => {
+          SubmitNode.click();
+          return true;
+        },
+      };
+    },
+  });
+
   onMount(() => {
     editor = createEditor({
-      extensions: [StarterKit, DisableEnter],
+      extensions: [StarterKit, CustomEnter],
       content: `Hello World`,
     });
   });

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Icon from "@iconify/svelte";
 </script>
 
 <div class="side-container">
@@ -7,61 +8,71 @@
   <div class="side-btns">
     <div class="side-top-btns">
       <a href="/" class="side-new">
-        <i />
+        <i><Icon icon="ph:chat-bold" /></i>
         <span>New Chat</span>
       </a>
-      <a href="/" class="side-close"><i /></a>
+      <button class="side-close">
+        <i><Icon icon="mdi:close-outline" /></i>
+      </button>
     </div>
     <ul class="side-chats">
       {#each new Array(15).fill("") as arr, i}
         <li class="side-chat">
           <a href="/test" class="side-chat-btn">
             <div class="side-chat-title">
-              <i />
+              <i><Icon icon="ic:outline-chat" /></i>
               <span>Chat Btn</span>
             </div>
           </a>
           <div class="side-chat-edit">
-            <a href="/">
-              <i />
-            </a>
-            <a href="/">
-              <i />
-            </a>
+            <button>
+              <i><Icon icon="material-symbols:delete-outline" /></i>
+            </button>
+            <button>
+              <i><Icon icon="tabler:edit" /></i>
+            </button>
           </div>
         </li>
       {/each}
     </ul>
   </div>
   <!-- / -->
   <div class="side-auth">
-    <a href="/login" class="side-profile">
-      <div class="side-profile-info">
+    <div class="side-profile">
+      <a href="/login" class="side-profile-info">
         <span class="side-profile-img">
           <img alt="" />
         </span>
         <span class="side-profile-name">Profile</span>
-      </div>
-      <div class="side-profile-opt">
-        <i />
-      </div>
-    </a>
-    <a href="/login" class="side-profile">
-      <div class="side-profile-info">
+      </a>
+      <button class="side-profile-opt">
+        <i><Icon icon="iwwa:option-horizontal" /></i>
+      </button>
+    </div>
+    <div class="side-profile">
+      <a href="/login" class="side-profile-info">
         <span class="side-profile-img">
           <img alt="" />
         </span>
         <span class="side-profile-name">Profile</span>
-      </div>
-      <div class="side-profile-opt">
-        <i />
-      </div>
-    </a>
+      </a>
+      <button class="side-profile-opt">
+        <i><Icon icon="iwwa:option-horizontal" /></i>
+      </button>
+    </div>
   </div>
   <!--  -->
 </div>
 
 <style>
+  .side-container i {
+    color: white;
+    font-size: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .side-container {
     position: fixed;
     top: 0;
@@ -105,18 +116,10 @@
     cursor: pointer;
   }
 
-  .side-new i {
-    display: block;
-    margin-right: 10px;
-    width: 15px;
-    height: 15px;
-    border-radius: 10px;
-    background-color: white;
-  }
-
   .side-new span {
     font-size: 14px;
     color: white;
+    margin-left: 10px;
   }
 
   .side-close {
@@ -131,13 +134,6 @@
     cursor: pointer;
   }
 
-  .side-close i {
-    width: 15px;
-    height: 15px;
-    border-radius: 10px;
-    background-color: white;
-  }
-
   /*  */
 
   .side-chats {
@@ -146,8 +142,10 @@
     align-items: center;
     width: 100%;
     height: 500px;
+    border-top: 1px solid #474749;
     border-bottom: 1px solid #474749;
     overflow-y: auto;
+    padding-top: 10px;
   }
 
   .side-chat {
@@ -178,18 +176,10 @@
     align-items: center;
   }
 
-  .side-chat .side-chat-btn .side-chat-title i {
-    display: block;
-    width: 30px;
-    height: 30px;
-    border-radius: 10px;
-    background-color: white;
-    margin-right: 10px;
-  }
-
   .side-chat .side-chat-btn .side-chat-title span {
     font-size: 16px;
     color: white;
+    margin-left: 10px;
   }
 
   .side-chat .side-chat-edit {
@@ -203,7 +193,7 @@
     align-items: center;
   }
 
-  .side-chat .side-chat-edit a {
+  .side-chat .side-chat-edit button {
     cursor: pointer;
     background-color: transparent;
     border: none;
@@ -213,14 +203,6 @@
     margin-right: 10px;
   }
 
-  .side-chat .side-chat-edit a i {
-    display: block;
-    width: 15px;
-    height: 15px;
-    border-radius: 10px;
-    background-color: white;
-  }
-
   /*  */
 
   .side-auth {
@@ -242,8 +224,8 @@
     padding: 10px;
     background-color: transparent;
     border: none;
-    overflow: hidden;
     cursor: pointer;
+    position: relative;
   }
 
   .side-profile:hover {
@@ -253,6 +235,8 @@
   .side-profile-info {
     display: flex;
     align-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   .side-profile-img {
@@ -275,15 +259,13 @@
   }
 
   .side-profile-opt {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .side-profile-opt i {
-    width: 15px;
-    height: 15px;
-    border-radius: 10px;
-    background-color: white;
+    position: absolute;
+    z-index: 999;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    top: 50%;
+    right: 5%;
+    transform: translate(0, -50%);
   }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { NodeState } from "$lib/stores/NodeState";
   import Input from "$lib/components/Input.svelte";
   import Sidebar from "$lib/components/Sidebar.svelte";
   import "./styles.css";
@@ -8,7 +9,9 @@
   <!-- Header 필요시 Header Component 추가 -->
   <main>
     <Sidebar />
-    <Input />
+    {#if $NodeState}
+      <Input />
+    {/if}
     <slot />
   </main>
   <!-- Footer 필요시 Footer Component 추가 -->

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -6,6 +6,7 @@
   <meta name="description" content="Svelte demo app" />
 </svelte:head>
 
+<!-- About 페이지 또는 채팅 공간 만드는 페이지 -->
 <div class="main main-width" />
 
 <style>

diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { NodeState } from "$lib/store/NodeState";
+  import { NodeState } from "$lib/stores/NodeState";
   import { onDestroy, onMount } from "svelte";
 
   let ChatNode: HTMLDivElement;