[ #94 | Fix ] SearchBar에 StatusBadge 적용

[hywznn]

🛰️ Issue Number

이슈번호: #94

🪐 작업 내용

<작업 사진>

<구현 요약>
제가 지난번에 서치바를 제작할 때 힘들게 만들어 놓으신 statusBadge적용을 안하고 직접 삼항연산자로 구현을 했습니다.
이를 수정했습니다.

<커밋 설명>
사실상 중요한 커밋은 StatusBadge 말고는 도르마무 했습니다.

import { createPortal } from 'react-dom';
import { ReactNode } from 'react';

export default function Portal({ children }: { children: ReactNode }) {
  if (typeof window === 'undefined') return null;
  const el = document.getElementById('portal-root') || document.body;
  return createPortal(children, el);
}

-> 이 부분은 서치바 드롭다운을 최상단 레이어로 오게 하기 위해서 Portlas 라는 구조를 사용하면 될 것이라 생각했는데
이게 캐러셀이나 기존에 설정한 input.tsx보다 위로 오게는 성공하였으나 단점이 실시간 페이지 이동에 따라 계산을 해야합니다.

이 구글 페이지를 예시로 보면 고정되어있는데 이제 고정되어있지 않게 되는 것이죠

하지만 이를 안쓰고 stacking context요소들을 제거해서 적용하려 하였으나 이미 main content에 적용된 것들을 깨뜨려야해서 돌아가는 길이 되어버린 것이죠

둘 중 어느 방식을 채택해야할지 몰라서 일단 상태뱃지부터 PR올립니다.

📚 Reference

https://ko.legacy.reactjs.org/docs/portals.html

✅ Check List

• 코드가 정상적으로 컴파일되나요?
• merge할 브랜치의 위치를 확인했나요?
• Label을 지정했나요?
• 코드 스타일을 eslint/prettier로 맞췄나요?

[hywznn]

Portal.tsx는 page-layout 폴더에 헤더 레이아웃 사이드바와 같이 비치해 두었습니다.

[youjin-hong]

빠르게 어푸르브