pre project 기능 구현

UI merge

각자 만든 UI를 pull request 를 통하여 dev-front branch에 merge 했다. 각자 맡은 페이지에서 작업해서 그런지 생각보다 충돌이 많이 일어나지는 않았다. App.js에서만 어느정도 충돌이 일어나고 나머지는 무난하게 병합된 것 같다. issue와 pull request 를 연결하니까 pull request가 병합되니 바로 issue가 닫혔다. 

중간에 pull request를 main에 요청해서 main 에 병합되는 사소한(?) 실수가 있었지만 revert로 어떻게든 돌려놓았다. 그다음에 무서워서 일단 main branch는 보호하도록 설정을 해놓았다.

 

백엔드 쪽이 아직 구현이 완성되지 않아서 일단 프론트쪽은 기능 구현을 먼저 하기로 했다.

 

기능 구현

질문 리스트 페이지 

아직 데이터가 없어서 임시로 예전에 사용했던 아고라 스테이츠 더미 데이터를 json server를 통해 받아서 렌더링하도록 구성해놓았다.  

 

질문 리스트가 렌더링되는 페이지에서 메인 기능은 크게 2가지로, 오른쪽 위에 sorting 버튼을 누르면 해당 조건으로 리스트를 정렬하는 기능과 페이지네이션이 있다.

 

 sorting 같은 경우 뼈대만 구성해놓았고, 데이터의 형식이 정해지면 해당 형식에 맞게 sorting하도록 코드를 작성하면 될 것 같다. 함수를 컴포넌트에 넣으니 너무 길어지는것 같아서 util 함수로 따로 작성했다.

 

페이지네이션의 경우 stackoverflow와 비슷하게 5페이지 이상 넘어가면 현재페이지 기준으로 -2~ +2 페이지까지 나타나게 하고, 첫페이지와 끝 페이지로 갈 수 있는 버튼이 조건부로 렌더링 되도록 로직을 작성해보았다.

엣지 케이스가 은근히 많아서 여러가지로 실험해보면서 로직을 조금씩 수정했는데, 아직도 엣지케이스가 남아있을까 걱정이된다.. 그래도 이번에 3번째로 페이지네이션을 구현해보는데 조금 익숙해진 것 같기도 하다.

오른쪽의 페이지당 질문 개수도 적절한 로직을 작성하여 렌더링이 되도록 해주었다. 

 

페이지 이동을 하거나 페이지당 질문개수를 바꾸어도 스크롤이 그대로 있는것이 조금 불편하게 느껴져서 해당 버튼을 누르면 스크롤이 가장 상단으로 이동할 수 있도록 버튼 이벤트에 scrollTo 메서드를 추가해줬다.

 

 

질문 작성 페이지

질문 작성 페이지에서의 기능은 작성된 질문을 서버로 보내는 기능이 메인이다. 작성된 질문을 보내는것 POST 요청만 하면 되기 때문에 API 문서에 따라 코드를 작성하면 된다. 

 

title을 작성할 때 title 작성 helper가 오른쪽에 표시되고, next를 누르면 next 버튼이 없어짐과 동시에 detail 본문을 작성하는 div박스가 활성화 되도록 코드를 작성해보았다. detail 본문을 작성할 때는 detail helper가 표시되고, detail 본문을 다 작성하고 next를 누르면 유효성 검사(20자 이상)를 거쳐서 tryAndExpect 본문 박스가 활성화 된다. 모든 본문을 작성하고 next를 누르면 submit 버튼이 활성화 되고 submit 버튼을 누르면 POST 요청을 할 수 있도록 기능을 작성했다.

 

div 박스 비활성화는 따로 div박스 내부를 전부 비활성화 하는 방법은 없는 것 같아서 조건부로 빈 div 박스를 해당 본문 div 박스를 덮어쓰도록 렌더링 하고, next 버튼을 누르면 빈 div박스가 없어지도록 코드를 작성했다. helper 박스는 해당 input 박스가 focus되면 나타나고, focus out되면(blur) 없어지도록 이벤트를 걸어주었다.

 본문 에디터 같은경우 react-quill을 사용하기로 해서 넣어놓았는데, 기본 스타일은 뭔가 허전해보여서 좀 더 에디터 기능을 추가하는 것을 제안해봐야 할 것 같다.

 

 

주저리주저리...

원래 페이지별로 브랜치를 만들어서 따로 작업하기로 했는데, 아무생각없이 작업하다가 한 브랜치 안에서 두개의 페이지를 모두 작성해버렸다.. 그래서 하던것을 뒤로 좀 돌려서 커밋하고 브랜치를 옮겨서 다시 작업했는데, 기능구현을 마무리하고 보니 처음 작업한 브랜치에 섞여있는 부분을 몇군데 발견했다... 벌써부터 conflict 걱정이 매우 들기 시작했다.. 

 

서버랑 통신을 하는 부분이 기대되고 걱정되기도 한다. 이제 4일정도 남은거 같은데 완성할 수 있을지... 코드를 작성한게 별로 없는거 같은데 시간이 너무 빨리가는것 같다.