Merge pull request #8 from Team-inglo/feat/IGW-18/3-header

[Feat/igw-18/3-header] - header 컴포넌트 제작하기

src/components/Common/Header/ActionHeader.tsx

@@ -0,0 +1,60 @@
+import BackButtonIcon from '@/assets/icons/BackButtonIcon.svg?react';
+import LikeIcon from '@/assets/icons/LikeIcon.svg?react';
+import ShareIcon from '@/assets/icons/ShareIcon.svg?react';
+import ColumnMenuIcon from '@/assets/icons/ColumnMenuIcon.svg?react';
+
+type HeaderProps = {
+  hasBackButton: boolean; // 뒤로 가기 버튼 여부
+  onClickBackButton?: () => void;
+  onClickLikeButton: () => void;
+  onClickShareButton: () => void;
+  onClickMenuButton: () => void;
+  title: string; // 페이지 제목
+};
+
+const ActionHeader = ({
+  hasBackButton,
+  onClickBackButton,
+  onClickLikeButton,
+  onClickShareButton,
+  onClickMenuButton,
+  title,
+}: HeaderProps) => {
+  return (
+    <section className="w-full h-[3.5rem] px-[0.75rem] py-[0.5rem] flex justify-between items-center bg-white">
+      <div className="flex items-center">
+        {hasBackButton && (
+          <button
+            className="mr-[0.5rem] p-[0.5rem] rounded-[0.75rem] border border-solid border-[#ECECEC]"
+            onClick={onClickBackButton}
+          >
+            <BackButtonIcon />
+          </button>
+        )}
+        <p className="ml-[0.5rem] head-3">{title}</p>
+      </div>
+      <div className="flex gap-[0.125rem] ">
+        <button
+          className="w-[2.188rem] flex justify-center items-center"
+          onClick={onClickLikeButton}
+        >
+          <LikeIcon />
+        </button>
+        <button
+          className="w-[2.188rem] flex justify-center items-center"
+          onClick={onClickShareButton}
+        >
+          <ShareIcon />
+        </button>
+        <button
+          className="w-[2.188rem] flex justify-center items-center"
+          onClick={onClickMenuButton}
+        >
+          <ColumnMenuIcon />
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default ActionHeader;

src/components/Common/Header/BaseHeader.tsx

@@ -0,0 +1,46 @@
+import BackButtonIcon from '@/assets/icons/BackButtonIcon.svg?react';
+import RowMenuIcon from '@/assets/icons/RowMenuIcon.svg?react';
+
+type HeaderProps = {
+  hasBackButton: boolean; // 뒤로 가기 버튼 여부
+  onClickBackButton?: () => void;
+  hasMenuButton: boolean; // 메뉴 버튼 여부
+  onClickMenuButton?: () => void;
+  title?: string; // 페이지 제목
+};
+
+const BaseHeader = ({
+  hasBackButton,
+  onClickBackButton,
+  hasMenuButton,
+  onClickMenuButton,
+  title,
+}: HeaderProps) => {
+  return (
+    <section className="w-full h-[3.5rem] px-[0.75rem] py-[0.5rem] flex justify-between items-center bg-white">
+      {hasBackButton ? (
+        <button
+          className="p-[0.5rem] rounded-[0.75rem] border border-solid border-[#ECECEC]"
+          onClick={onClickBackButton}
+        >
+          <BackButtonIcon />
+        </button>
+      ) : (
+        <div></div>
+      )}
+      {title ? <span className="head-3">title</span> : <div></div>}
+      {hasMenuButton ? (
+        <button
+          className="p-[0.5rem] rounded-[0.75rem] border border-solid border-[#ECECEC]"
+          onClick={onClickMenuButton}
+        >
+          <RowMenuIcon />
+        </button>
+      ) : (
+        <div></div>
+      )}
+    </section>
+  );
+};
+
+export default BaseHeader;

src/components/Common/Header/TextFieldHeader.tsx

@@ -0,0 +1,64 @@
+import BackButtonIcon from '@/assets/icons/BackButtonIcon.svg?react';
+import SearchIcon from '@/assets/icons/SearchIcon.svg?react';
+import FilterIcon from '@/assets/icons/FilterIcon.svg?react';
+import CircleDeleteIcon from '@/assets/icons/CircleDeleteIcon.svg?react';
+import { useState } from 'react';
+
+type HeaderProps = {
+  onClickBackButton: () => void;
+  onClickSearchButton: (value: string) => void;
+  onClickFilterButton?: () => void;
+  placeholder: string;
+};
+
+const TextFieldHeader = ({
+  onClickBackButton,
+  onClickSearchButton,
+  onClickFilterButton,
+  placeholder,
+}: HeaderProps) => {
+  const [value, setValue] = useState<string>('');
+
+  const onClickDeleteButton = () => {
+    setValue('');
+  };
+
+  return (
+    <section className="w-full h-[3.5rem] px-[0.5rem] flex justify-between items-center bg-white border-b border-solid border-[#1E1926]">
+      <button
+        className="p-[0.5rem] rounded-[0.75rem] border border-solid border-[#ECECEC]"
+        onClick={onClickBackButton}
+      >
+        <BackButtonIcon />
+      </button>
+      <div className="flex-1 flex items-center">
+        <input
+          className="flex-1 p-[0.5rem] body-3 text-[#1E1926]"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={placeholder}
+        />
+        {value && (
+          <button onClick={onClickDeleteButton}>
+            <CircleDeleteIcon />
+          </button>
+        )}
+      </div>
+      <div className="flex items-center">
+        {onClickFilterButton && (
+          <button className="px-[0.5rem]" onClick={onClickFilterButton}>
+            <FilterIcon />
+          </button>
+        )}
+        <button
+          className="px-[0.5rem]"
+          onClick={() => onClickSearchButton(value)}
+        >
+          <SearchIcon />
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default TextFieldHeader;