import React from "react";
import style from "./header.module.css";
import { useNavigate } from 'react-router-dom';
import backIcon from "../../../assets/imgs/icon-arrow-left.png";
import moreIcon from "../../../assets/imgs/icon-more-vertical.png";
import searchIcon from "../../../assets/imgs/icon-search.png";
export default function Header({ type, IsValue, handleHeaderBtn }) {
const navigate = useNavigate();
const pages = {
"upload": {
btn : "업로드"
},
"modification": {
btn : "저장"
}
}
// 뒤로가기 버튼
const handleBackBtn = () => {
navigate(-1);
}
return (
<section className={`${style.cont_header} ${type === "followers" && style.folloewers}`} >
{type !== "home" &&
<img className={style.btn_back}
src={backIcon}
alt="뒤로 가기"
onClick={handleBackBtn}
/>}
{(type === "upload" || type === "modification") &&
<button className={`${style.btn_save} ${ IsValue && style.active_btn}`}
onClick={handleHeaderBtn}>
{pages[type].btn}
</button>}
{(type === "profile" || type === "post") &&
<img src={moreIcon} alt="더보기버튼" onClick={handleHeaderBtn} />}
{type === "home" && (
<>
<p>데브리마킷</p>
<img src={searchIcon} alt="검색버튼" onClick={handleHeaderBtn} />
</>
)
}
{type === "follower" && <p>follower</p>}
{type === "following" && <p>following</p>}
{type === "search" &&
<input className={style.input_header}
type="text"
placeholder="계정 검색"
onChange={handleSearchKeyword}
/>}
</section>
)
}
JavaScript
복사
요구사항
헤더 마크업 및 컨포넌트 구현
페이지 분석
공통 헤더인 Header컴포넌트를 생성하고 각 페이지마다 props로 구분하여 각자 다른 헤더를 조건부 렌더링할 예정입니다.
뒤로가기 없는 헤더
•
홈
→ "감귤마켓 피드" + 돋보기버튼(검색페이지로 이동)
뒤로가기 있는 헤더
•
검색
→ 뒤로가기 + 검색창(검색기능)
•
your & my 프로필 & post
→ 뒤로가기 + 더보기(모달창)
•
Followers & Following
→ 뒤로가기 + "Followers"
•
Upload & Profile modification & Product modification
→ 뒤로가기 + 저장/업로드 버튼
handleHeaderBtn
각 페이지에서 헤더의 연결된 기능을 사용할 때 각 페이지에서 props로 전달합니다.
handleHeaderBtn에 연결된 함수는 가급적 각자 페이지에서 작성해주세요 (header가 무거워지는 것을 방지)
Header 컴포넌트
export default function Header({ type, IsValue, handleHeaderBtn}) {
//중략
return
{(type === "profile" || type === "post") &&
<img src={moreIcon} alt="더보기버튼" onClick={handleHeaderBtn} />}
JavaScript
복사
Post 페이지
const handleModalBtn = async (e) =>{
//모달 실행
}
return (
<>
<Header type="post"
IsValue = {IsValue}
handleHeaderBtn = {handleModalBtn}/>
//중략
</>
JavaScript
복사
위 코드에서는 헤더의 더보기버튼을 누르면 Post 페이지의 handleModalBtn이 실행됩니다
