[#164] feat: main-header 구현

Donggrina · Jun 21, 2024 · 346d83e · 346d83e
1 parent f3d2442
commit 346d83e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/components/common/Header/Header.module.scss b/components/common/Header/Header.module.scss
@@ -12,10 +12,8 @@
   border-bottom: 1px solid var(--main-color);
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
-  .leftArrow {
+  .leftIcon {
     position: absolute;
-    width: 24px;
-    height: 24px;
     margin: auto 0;
     left: 16px;
     top: 50%;
@@ -27,4 +25,11 @@
     height: 16px;
     margin: auto;
   }
+  .rightIcon {
+    position: absolute;
+    margin: auto 0;
+    right: 28px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 }
diff --git a/components/common/Header/back-header/index.tsx b/components/common/Header/back-header/index.tsx
@@ -11,8 +11,8 @@ export function Header() {
   };
   return (
     <header className={styles.header}>
-      <button className={styles.leftArrow} onClick={handleClick}>
-        <Image src="/images/header/arrow-left-black.svg" alt="뒤로 가기" fill />
+      <button className={styles.leftIcon} onClick={handleClick}>
+        <Image src="/images/header/arrow-left-black.svg" alt="뒤로 가기" width={24} height={24} />
       </button>
       <div className={styles.imageBox}>
         <Link href="/family">

diff --git a/components/common/Header/main-header/index.tsx b/components/common/Header/main-header/index.tsx
@@ -9,16 +9,24 @@ export function Header() {
   const handleClick = () => {
     router.back();
   };
+
+  const handleSearchClick = () => {
+    console.log('검색페이지 url 필요');
+    // router.push() : 검색페이지 url 필요
+  };
   return (
     <header className={styles.header}>
-      <button className={styles.leftArrow} onClick={handleClick}>
-        <Image src="/images/header/arrow-left-black.svg" alt="뒤로 가기" fill />
+      <button className={styles.leftIcon} onClick={handleClick}>
+        <Image src="/images/header/mypage-icon.svg" alt="마이페이지 아이콘" width={20} height={20} />
       </button>
       <div className={styles.imageBox}>
         <Link href="/family">
           <Image src="/images/header/logo.svg" alt="로고" fill />
         </Link>
       </div>
+      <button className={styles.rightIcon} onClick={handleSearchClick}>
+        <Image src="/images/header/search.svg" alt="검색 아이콘" width={20} height={20} />
+      </button>
     </header>
   );
 }