32. 항해99 Final Project- 그님스 저희팀에게 귀여운 로고가 생겼어요 [로고 자랑글, 진행상황 보여드립니다! 그리고 저희 노션 대공개!] feat. 리액트 네비게이션바 조건문으로 레이아웃설정하기
디자이너님께서 작업해주신 귀여운 저희 로고입니다! 예쁘죠?
로고가 있는거랑 없는게 차이가 꽤 크죠!
확실히 귀여워졌군요..
저희팀의 노션에도 이렇게 로고를 적극활용하고있습니다 ㅎㅎ
혹시 저희의 노션이 궁금하신 분이 계시다면!!!
👉🏻
https://mountainous-promise-a24.notion.site/99-_Gnims-_-67a550352fb543b2b880f2998a5d2af2
메인페이지입니다!! 닉네임과 프로필이미지가 뜨고, 이미지에선 보이지 않지만 아래에도 예쁜 네비게이션바가 있습니다 ㅎㅎ
메인페이지에서 일정카드를 누르면 이렇게 상세보기를 할 수 있습니다. 현재는 제가 신정님께 같이 가자는 초대요청을 보내두었고, 아직 수락을 안해주셨군요!!
그렇다면 제가 한번 H2console을 이용해 강제로 수락을 해보겠습니다 ㅎㅎㅎ
그러면 이렇게 참여자에 신정님과 제가 같이 뜨는걸 볼 수 있습니다! 와 😊🎉🎉🎉
카드색상디자인이 정해지면 메인페이지에서도 설정한 카드색상으로 세팅되게 변경할건데, 정해질 색상이 매우 궁금하군요 !
스포해주세요 디자이너님 😳😳
그리고 깨알같이 내용을 작성하지 않고 혼자만의 일정 (참여자가 없는 일정!) 일 경우엔 이렇게 귀여운 멘트가 뜬답니다 .. ㅎㅎ
디자인은 곧 바뀔 것 같아요!
로그인페이지와 회원가입페이지에는 top과 bottom에 네비게이션바가 없어요. 로그인 이전엔 navigation bar에서 진입할 수 있는 메인 홈, 마이페이지, 팔로우로 진입할 수 있으면 안되니까요!
네비게이션바를 비롯해서 레이아웃작업을 며칠 전에 전면수정을 했어요!
관련해서는 조만간 포스팅할 것 같습니다 😄
간단히 말씀드리자면,
useState로 header를 가장 위에 두게합니다.
저희가 topNavigationBar가 두 종류에요!
그래서 useLocation을 이용해 현재 위치를 찾아 요구되는 네비게이션바를 switch조건문을 이용해 적용시킵니다
BottomNavi의 자리에는 삼항연산자를 이용해 로그인, 회원가입일땐 null을 주고, 그 외에 모든 페이지들은 BottomNavi를 두게했습니다!
const pagePathName = useLocation();
const [header, setHeader] = useState(null);
const id = pagePathName.pathname.split("/")[2];
console.log(id);
useEffect(() => {
const userId = window.localStorage.getItem("userId");
const pageName = pagePathName.pathname;
switch (pageName) {
case "/":
if (userId !== null) {
setHeader(() => <TopNavBar />);
} else {
setHeader(() => <TopNavTitleBar></TopNavTitleBar>);
}
break;
case "/main":
setHeader(() => <TopNavBar />);
break;
case `/detail/${id}`:
setHeader(() => <TopNavBar />);
break;
case "/schedule":
setHeader(() => <TopNavTitleBar>일정 추가</TopNavTitleBar>);
break;
...<Container>
{header}
<Slider>{children}</Slider>
{pagePathName.pathname === "/Login" ||
pagePathName.pathname === "/signup" ||
pagePathName.pathname === "/signup/setProfileName" ||
pagePathName.pathname === "/signup/setProfileImg" ||
? null : (
<BottomNavi />
)}
</Container>이 천재적인 코드는 승주님 작품입니다...
다음엔 에러핸들링관련한 포스팅으로 돌아오겠습니다!
읽어주셔서 감사합니다