# 5/25 수

- [x] 로고, 메뉴 (숙소, 체험, 온라인체험) 마이페이지 기능을 하는 버튼이 GNB 상단에 위치한다.
- [x] 메뉴들은 hover 효과가 있다.

- [ ] Mini Search Bar 를 누르면 Search Bar 와 Category 가 나오고 Mini Search Bar 는 숨겨진다
- [ ] Header 이외의 영역 (Main 등) 을 누르면 다시 Mini Search Bar 로 돌아온다.
- [ ] 위 효과에 애니메이션을 추가한다 (Mini 가 Big 으로 커지는 것 처럼 느껴지게)

- [ ] UserInfo 버튼을 누르면 메뉴 아이템들이 애니메이션 효과와 함께 내려온다
- [ ] 로그인 된 상태와 아닌 상태에 Menu Item 이 다르다

- GNB 아래에는 검색바가 위치한다.
- 검색바에서 체크인/체크아웃 영역을 클릭하면 여행기간을 입력할 수 있는 **캘린더**가 모달창으로 뜬다.
- 캘린더는 2개월간의 일정을 볼 수 있다
- 화살표를 누르면 캘린더가 슬라이딩 된다.
- 검색바가 활성화되면 Focus 상태로 변한다
- 이미 지난 날짜 및 이미 예약된 날짜는 선택할 수 없다
x

- 내일은..
- 리뷰받고 고칠거있으면 고치고
- 헤더말고도 아래 정적 레이아웃 추가로 넣는거
- 애니메이션 깊게보지말고(2시간이내?) 모달(아무거나) 띄우는거까지 시도

### PR

### 환경셋팅 설정관리

1. eslint에서 아래와 같이 해당 에러를 잡기 위해 tsconfig 파일에 rules-import/extensions에 해당 속성을 적용하여 에러를 잡아도 괜찮은지 궁금합니다.

'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],


2. header isFocus 상태시 body 영역을 클릭하면 다시 작은 SearchBar로 돌아가는 함수입니다.

tagName으로 BODY일때 체킹하면서 state값을 변경하였는데, BODY 내에 다른 태그(Main Page, Footer)들을 눌렀을때는 정상적으로 동작하지 않아 해당 로직을 어떤식으로 수정할지 고민중입니다.

- Header에서 관리되고 있는 isFocus 상태를 Context 상태로 따로 빼서, Outlet 컴포넌트에 이벤트리스너를 달아야할지? 아니면 다른 좋은방법이 있는지 궁금합니다!

const closeBigSearchBar = useCallback(
    (e: MouseEvent) => {
      if (isFocus) {
        // e.target이 헤더 이외일때 setIsFocus(false)
        const target = e.target as HTMLInputElement;
        if (target.tagName === 'BODY') setIsFocus(false);
      }
    },
    [isFocus],
  );