feat: 検索機能

src/app/(use-header)/codes/_components/view/Page/index.module.scss

@@ -1,7 +1,10 @@
 .containers {
-  padding: 70px 0 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 100px;
+  .posts {
+    width: 100%;
+    padding: 70px 0 100px;
+    gap: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }

src/app/(use-header)/codes/_components/view/Page/index.tsx

@@ -13,9 +13,11 @@ export default function Page() {
     <div className={styles.containers}>
       <SearchSection />
 
-      {articles.map((post) => (
-        <Card key={post.id} post={post} />
-      ))}
+      <div className={styles.posts}>
+        {articles.map((post) => (
+          <Card key={post.id} post={post} />
+        ))}
+      </div>
     </div>
   );
 }

src/app/(use-header)/codes/_components/view/SearchSection/index.module.scss

@@ -0,0 +1,34 @@
+.section {
+  padding: 40px 0;
+  text-align: center;
+
+  h3 {
+    padding: 10px 0;
+  }
+
+  .keywords {
+    margin-inline: auto;
+    padding: 0 0 5px 0;
+    width: fit-content;
+    border-bottom: 1px solid $on-background-color;
+    display: flex;
+    gap: 10px;
+
+    * {
+      padding-inline: 0.2rem;
+    }
+
+    input {
+      outline: none;
+      border: none;
+    }
+
+    button {
+      padding: 3px 10px;
+      border-radius: 5px;
+      border: solid 1px $accent-color;
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}

src/app/(use-header)/codes/_components/view/SearchSection/index.tsx

@@ -22,25 +22,40 @@ export default function SearchSection() {
     setValue(e.target.value);
   };
 
+  const deleteWord = (index: number) => {
+    setSearchWords(searchWords.filter((_, i) => i !== index));
+  };
+
   return (
     <section className={styles.section}>
-      <p>
-        {searchWords.map((w) => (
-          <span key={w}>{w}</span>
+      <h3>キーワード検索</h3>
+
+      <label className={styles.keywords} htmlFor="keywords">
+        {searchWords.map((w, i) => (
+          <button
+            key={w}
+            onClick={() => {
+              deleteWord(i);
+            }}
+            type="button"
+          >
+            {w}
+          </button>
         ))}
-      </p>
-      <input
-        onChange={onChange}
-        onCompositionEnd={() => {
-          setIsComposing(false);
-        }}
-        onCompositionStart={() => {
-          setIsComposing(true);
-        }}
-        onKeyDown={onReturnKeyDown}
-        type="text"
-        value={value}
-      />
+        <input
+          id="keywords"
+          onChange={onChange}
+          onCompositionEnd={() => {
+            setIsComposing(false);
+          }}
+          onCompositionStart={() => {
+            setIsComposing(true);
+          }}
+          onKeyDown={onReturnKeyDown}
+          type="text"
+          value={value}
+        />
+      </label>
     </section>
   );
 }