프론트엔드 부트캠프 62일차, 팀 프로젝트(8) - api요청해보기! Next 네비게이션 활성/비활성 표시
지금 문제점 : 모바일에서 보면 main으로 넘어갈 수 있는 방법이 없다...
지금 현재 넘어갈 수 있는 방법은 Enter나 esc누르는 것 밖에 없기 때문이다ㅠㅠ
그리고 모바일에서 hover event... 카드 뒤집기 되는지도 확인해봐야 한다.
useEffect(() => {
const handleKey = (event: KeyboardEvent) => {
if (event.key === "Escape" || event.key === "Enter") {
window.removeEventListener("keydown", handleKey);
router.push("/home");
}
};
const clickKey = (event: MouseEvent) => {
console.log(event);
};
window.addEventListener("keydown", handleKey);
window.addEventListener("click", clickKey);
}, []);handleKey는 원래 있었고, clickKey를 넣어서 랜딩에서 클릭하면 넘어가게 할까 했는데 일단 이건 취소 !
랜딩 페이지 반응형으로 만들기
일단 가운데 로고 글자가 모바일 사이즈가 되면 column이 되게 해서 부러지게 만들었다!
일러스트레이터로 로고 분리해놔서 가능했음..!~
텍스트 크기는 em이었는데 부모 크기가 vw기준이어서 그런지 변화가 없어서 vw로 바꿨다.
이렇게 줄어든다! 달 크기는 굳이 안바꿔도 될 것 같아서 아직 안 바꿨다. 문 크기는 vw로 바꿔줌
일단 1차 수정 끝
이제 테마 리스트 hover... 모바일에서 봤을 때 어떻게 해야할 것인가?ㅠ
한 번 누르면 뒤집히고 그걸 또 누르면 상세로들어가지게?
그리고 테마 상세 반응형 했다고 한 건데 잘려있다.
--이건 추후 수정하기로 ,,,~ -
fetchThemes로 가져온 정보! 정원이랑 요금은 없었지만... 어쨌든 타이틀과 나이제한은 잘 받아와진다!
오랜만에 type 정리도 했다...ㅎㅎ 자꾸 까먹네
자간 letter-spacing
어간 word-spacing
행간 line-height
어제했던 반응형 수정하는데
이렇게 오른쪽 끝이 남는다!!!!!
이건 수님한테 물어봐야할 것 같아서 추후 수정~예정..
이번엔 다른 문제,
메뉴 누르고 뒤로가기를 누르면 바뀐 걸 인식 못해서 actived표시가 안됐었는데! 그걸 밑에처럼 고쳤었다.
useEffect(() => {
if (!router.asPath.includes(activedMenu)) {
setActivedMenu(router.asPath);
}
}, [router.asPath]);근데 이건 또 새로고침하니까 문제가 생긴다.
처음엔 useEffect()가 새로고침하면 작동이 안되던가? 하면서 이상한 뻘짓하다가
console.log찍어보면서 activedMenu가 스테이트라서 새로고침하면 날아간다는 게 문제란 걸 찾았다.
그래서 activedMenu가 비어있으면 router.asPath를 넣어주는 걸 추가했다.
useEffect(() => {
if (!router.asPath.includes(activedMenu) || activedMenu === "") {
setActivedMenu(router.asPath);
}
}, [router.asPath]);(현재 주소와 activedMenu가 같지 않거나 activedMenu가 비어있다면 activedMenu를 지금 주소로 바꿔줘!)
const NAVIGATION_MENUS = [
{ name: "매장", page: "/cafe" },
{ name: "테마", page: "/theme" },
];그리고 asPath랑 내가 지정해놓은 NAVIGATION_MENUS가 항상 같진 않잖아?
예를들어 theme의 detail로 들어가면 theme/themeId 이렇게... 뒤에 뭐가 붙으니까! 완전히 일치하는 게 아님
그래서
MENU 맵을 돌릴 때
isActive={props.activedMenu.includes(el.page)}
isActive 속성을 includes했냐 안했냐로 true,false 값을 준다!
오늘은 드디어드디어 css 전체적으로 손보기...! 근데 중간에 충돌날 부분이 생겨서 그 부분은 빼고 머지된 상태!
테마 디테일 반응형 부분 수정했는데 오히려 태블릿 사이즈가 어려웠다 =ㅅ- 그래도 어찌저찌 했고, 커뮤니티 수정하고 매장도 조금 수정했었는데 부리님이 관리자하면서 건드셨다고 해서 그냥 빼놨다. 로고도 아예 다른 폰트로 + 소문자로 바꿨다. 폰트 두 개 투표에 올린 뒤 더 많은 표를 받은 애로 바꿨다. 헤더는 어제 그려본거 적용했는데 너무 붕 뜬 느낌? 이라고 하셔서 오늘 다시 그려볼 계획... 너무 배고파! 오늘 하루종일 먹은 게 없는데 배는 왜 아픈걸까,,, 근데 집오니까 거의 낫는 매직..ㅋ뭘까ㅎ
fetchThemes해봤다! 드디어 api를... 아니 맨날 쓸땐 싫었는데 지금은 막 기능을 하고 싶다ㅎㅎ퍼블리싱 너무 힘드네요.... 그리고 기능은 끝이 있지만 퍼블리싱은 끝이 없잖아!!!~~~~~~ 아무튼 api,, 난 수정할 거 몇 개 못 찾았는데 수님이 엄청 많이 찾아주셔가지구... 정말 다행이라고 느꼈다. 나는 못느끼고 지나갔을 법한 것까지! 그래서 오늘 회의는 한 시간 넘게 진행됐다. token에 대해서 얘기도 하고 그랬는데, 회의록을 쓰면서도 조금씩 이해를 못하고 지나가는 느낌? 그래도 한 번 짚고 넘어갈 수 있어서 좋다.
이제 난... 늦었지만 토마토라도 먹고 핀터레스트랑 언스플래쉬에서 자료를 모아서 배너 그리기를 해봐야겠다~~~ 하하 너무 배고파 ㅠ-ㅠ오늘은 9시 전쯤에 나왔다. 빨리 나온 날!!! 무려 팀에서 1등으로.,..두둥
🐻 프론트엔드
- 퍼블리싱 마무리, 관리자 페이지 작업
🐻❄️ 백엔드
- api
🍚 점심
- 못 먹음ㅠ_ㅠ
🍬 간식
- 유산균 먹음...
☕️ 커피
- X
🎵 노래
- Sweet Dreams, My Dear
- 우산이 되어줄게
- 맞네
- 물고기(Pisces)
- [메이플레이리스트] 산뜻한 구름의 선율, 당신의 마음을 둥실둥실 가볍게 만들어줄 플레이리스트
- [메이플레이리스트] 따분한 오후, 잠시 기분전환하기 좋은 플레이리스트 (Lofi! 신기하고 좋아)
👀 비고
- 퍼블리싱은 해도해도 끝이 없어서 여유있을 틈이 없구나,,,