test : circleci, hkusu workflow test

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,8 +2,6 @@
 
 ## What
 
-## Why
-
 ## How
 
 ## ScreenShot

.github/labeler.yml

@@ -0,0 +1,44 @@
+# labeler "full" schema
+
+# enable labeler on issues, prs, or both.
+enable:
+  issues: false
+  prs: true
+# comments object allows you to specify a different message for issues and prs
+
+comments:
+  issues: |
+    Thanks for opening this issue!
+    I have applied any labels matching special text in your title and description.
+
+    Please review the labels and make any necessary changes.
+
+# Labels is an object where:
+# - keys are labels
+# - values are objects of { include: [ pattern ], exclude: [ pattern ] }
+#    - pattern must be a valid regex, and is applied globally to
+#      title + description of issues and/or prs (see enabled config above)
+#    - 'include' patterns will associate a label if any of these patterns match
+#    - 'exclude' patterns will ignore this label if any of these patterns match
+labels:
+  ":fix: fix":
+    include:
+      - '\bfix\b'
+  ":star2: refactor":
+    include:
+      - '\brefactor\b:'
+  ":blue_book: documentation":
+    include:
+      - '\bdocs\b:'
+  ":broom: chore":
+    include:
+      - '\bchore\b:'
+  ":framed_picture: feat":
+    include:
+      - '\bfeat\b:'
+  ":test_tube: test":
+    include:
+      - '\btest\b:'
+  ":toolbox: ci":
+    include:
+      - '\bci\b:'

.github/workflows/labeler.yml

@@ -0,0 +1,14 @@
+name: Auto Labeler
+on:
+  pull_request_target:
+    types: [opened]
+
+jobs:
+  labeler:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check Labels
+        id: labeler
+        uses: jimschubert/labeler-action@v2
+        with:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

assets/Logo.tsx

@@ -1,8 +1,16 @@
 import Image from "next/image";
-import React from "react";
+import React, { ImgHTMLAttributes } from "react";
 
-const Logo = () => {
-  return <Image src="/assets/logo.png" width={100} height={28} alt="logo" />;
+const Logo = ({ ...props }: ImgHTMLAttributes<HTMLImageElement>) => {
+  return (
+    <Image
+      {...props}
+      src="/assets/logo.png"
+      width={100}
+      height={28}
+      alt="logo"
+    />
+  );
 };
 
 export default Logo;

assets/SearchIcon.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { SVGProps } from "react";
 
-const SearchIcon = () => {
+const SearchIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
   return (
     <svg
+      {...props}
       width="16"
       height="16"
       viewBox="0 0 1664 1664"

components/Header/index.tsx

@@ -25,9 +25,7 @@ const Header = () => {
   return (
     <div className={styles.container}>
       <ul className={styles.navigationList}>
-        <i className={styles.logo}>
-          <Logo />
-        </i>
+        <Logo className={styles.logo} />
         {navigationList.map((nav) => (
           <Link
             key={nav.item}
@@ -44,9 +42,7 @@ const Header = () => {
           placeholder="검색어를 입력하세요..."
           className={styles.searchInput}
         />
-        <i className={styles.searchButton}>
-          <SearchIcon />
-        </i>
+        <SearchIcon className={styles.searchButton} />
       </form>
     </div>
   );