검색창을 띄우는 버튼을 누르면 검색창으로 페이지 이동이 완전하게 이루어져야 하는데, 자꾸만 검색창이 페이지 가운데에 뜨고 양 옆 부분으로는 다른 컴포넌트가 보이는 기현상이 일어났다. z-index 문제인가 싶어서 검색창을 0까지 내려보기도 했는데 , 그런 식으로 해결되는 문제는 아니었다. 왜냐하면 두 컴포넌트의 url이 겹쳤기 때문이었다...^^ 아무리 관련 있는 컴포넌트라지만 url 분기를 제대로 안 하다니, 순식간에 해결되는 걸 보고 허무와 충격을 동시에 느꼈다.
카테고리 이름을 클릭하면 카테고리별로 뉴스 목록이 나타나는 페이지에서는 카테고리가 달라질 때마다 브라우저 주소창 위 타이틀이 달라져야 했다. 구글링 해서 react-helmet 을 설치하니 컴포넌트별로 메타 태그에도 손을 댈 수 있었다. 사용법도 간단했다. 앞으로도 애용할 것 같다.
사용자가 이메일 주소와 닉네임을 입력하면 해당 데이터를 서버로 넘겨서, 서버에서 메일을 발송하기로 했다. axios를 적용해 작업을 완료했다.
검색창에서 검색어를 입력하면 주소창에 검색어를 들어가게 한 후, 곧바로 검색 결과 페이지로 이동시킨 다음 거기서 그 주소창의 검색어를 다시 따서 서버에 보내 관련 뉴스 목록을 받아오는 axios 코드를 다른 프론트 분과 함께 짰다. 버튼을 클릭하면 최신순과 관련순으로도 받아올 수 있도록 했다.
배포해도 수정은 가능하니 일단 배포를 했다. 백엔드 분들도 데이터가 어떻게 펼쳐지는지를 보고 싶으실 텐데 지금까지 프론트에서 공유해주는 화면만 보셨으니 답답하셨을 것 같다는 생각이 들었기 때문이다. 수고했다는 말을 들을 때마다 프론트가 들이는 시간이 상대적으로 많다는 이유로 항상 공이 프론트에게 많이 돌아가게 되는 것 같아 민망스럽다. 협업해서 함께 만든 건데. 언제나 한결같이 배려해주시는 백엔드 분들 덕분에 수월하게 마무리 되어 가는 중이다.
내일 할 일
다른 프론트 분이 로딩 스피너를 달아주셨는데, 스피너 자체가 조금 늦게 뜨거나 해당 컴포넌트에 데이터를 불러오지 않은 모습을 한번 띄운 후 뜨는 미운 모습을 보여서 다시 함께 방법을 연구해보기로 했다.
카테고리 메뉴는 클릭하면 그 밑에 언더라인이 뜨는데 다른 페이지로 이동하기 전까지는 그게 유지된다. 하지만 내가 구현한 걸로는 마우스 클릭이 유지되는 상태에서만 언더라인이 잠깐 뜨고 사라진다. 이 부분 해결이 필요하다.
footer에 마우스를 올리면 글자가 옆으로 흐르는 애니메이션이 적용되어 있다. 구현해보도록 한다.
상세 페이지에서는 프로그레스바가 뜨는데, 스크롤 막대의 위치에 따라 최상단에서는 보이지 않다가 어느 지점에 이르면 나타난다. 이것도 연구하기.
상세 페이지 뉴스 제목 위 카테고리를 클릭하면 해당 카테고리의 뉴스 목록 페이지로 이동하게 한다. 어려울 것 같진 않다.