[모각코] 모현에서 모먹지?(2-1) - Home꾸미기:Header,Footer

프로젝트 정리/모현에서 모먹지

[모각코] 모현에서 모먹지?(2-1) - Home꾸미기:Header,Footer

래모 2022. 8. 17. 23:44

Header을 먼저 만들어봅시다

header는 크게 위 사진과 같이 4가지를 구현하는 것으로 나뉜다

Header의 컴포넌트 구성

1️⃣ 로고

로고는 아주 간단하다!

로고를 클릭하면 /home/location으로 이동하게 할 것이다.

그냥 Link사용해주면됨

<Logo onClick>
    <Link to ="/home/location">
        <span>모현에서</span>
        <span>모먹지</span>
    </Link>
</Logo>

저 onClick은 나중에 category설정에서 recoil을 이용한 state를 관리하기 위해 넣어준 것이다.

2️⃣ 검색창

react-hook-form을 이용해줄 것이다.

https://sand8594.tistory.com/36

[React] React Hook Form

설치방법 npm install react-hook-form 이전 코드 import React, { useState } from "react"; import {useForm} from 'react-hook-form'; function TodoList() { const [toDo, setToDo] = useState(""); const [to..

sand8594.tistory.com

useForm을 사용해서 register과 handleSubmit를 가져온다

onValid함수로 검색창에 단어 입력시 navigate를 통해 경로로 이동시켜준다

const navigate = useNavigate();
const { register, handleSubmit } = useForm();
const onValid = (data) => {
    navigate(`/search?keyword=${data.keyword}`)
}
...
<Search
onSubmit= {handleSubmit(onValid)}
>
    <Input 
        {...register("keyword", { required: true, minLength: 2 })}
        placeholder='search'/>
    <button>
        🔍︎
    </button>    
</Search>

3️⃣ 사용자이름

사실 여기는 지금 딱히 쓸게 없다.

localStroage를 통해서 user의 이름을 관리해줄것인데 이게 내 파트가 아니라...

다른 팀원이 만들어준 다음에 다시 포스팅 해보자

아무튼 현재 코드는 이렇다.

const [user,setUser] = useState("김주원");
...
<Welcome>
    <span>반가워요,</span>
    <span>{user}</span>
    <span>님!</span>
</Welcome>

4️⃣ Profile설정

이 부분도 localStroage와 굉장히 관련된 부분이다

왼쪽 버튼은 자신이 스크랩한 정보를 보여줄 수 있는 페이지로 이동하도록 하고

오른쪽 버튼은 사용자 이름을 변경할 수 있게한다.

마찬가지로 locaStroage 부분이 완료되면 포스팅하도록 하겠다.

<Item>
    <Link to = "/bookmark">
        <Bookmark >
            <FiBookmark/>
        </Bookmark>
    </Link>
</Item>
<Item>
    <Link to = "/profile">
        <Profile >
            <FiUser/>
        </Profile>
    </Link>
</Item>