슬기로운 인턴 생활18 [이마고 웍스] 드디어 졸업시험을 본다편

 

새로운 도메인으로 랜딩페이지를 배포한 후, 이것저것 수정 작업을 하고있다.

 

 

 

 

 

b2b landingPage에 faq라는 페이지가 있다.

 

 

 

 

 

 

처음엔 질문-응답-질문-응답 이런 느낌이었는데 카테고리를 생성해서 카테고리를 클릭하면 질의응답이 보이도록 기획과 디자인을 변경했다.

 

 

 

백오피스에서 카테고리를 생성하면 그 카테고리가 title이 되고 

title을 클릭하면 드롭다운에 퀘스쳔과 엔서가 들어있다-!!

 

 

 

 

생각해보니까 백오피스를 연동(?)하는 작업은 또 처음 해보는 것 같다.

연동이라고 하기엔 랜딩페이지에서도 api를 호출해서 사용하지만..? 

백오피스에서의 작업물이 랜딩페이지에 잘~ 반영이 되도록 해야한다.

 

 

 

 

 

 

 

 

b2b LandingPage의 Have a question인데, 

아직 공식 배포가 되지 않았기 때문에 요로코롬 일부만 가져와봤다.

 

 

 

 

 

 

 

 

 

 

여기서 노란색이 title === category인데 !

저걸 클릭하면 회색 바탕의 드롭다운이 나타나는 것이다.

 

그리고 맨 처음 카테고리에 대한 드롭다운은 default 값으로 열림을 받는다.

 

 

 

 

 

문제는...!

이렇게 카테고리가 많다는 것이다.

 

 

처음엔 state 하나만 사용했는데 상태관리를 하나로 하나보니까

여러 개의 드롭다운이 동시에 열리고 동시에 닫히는 문제가 발생했다.

 

또, 맨 처음 카테고리에 대한 드롭다운이 열림상태가 되지 않았다.

 

 

 

 

저번에 작업했던 book a demo 페이지의 체크박스처럼 꽤 고민했다.

 

 

 

 

명한님이 index라는 힌트를 주셨고 

map에서 index를 사용해보았다!

 

 

 

 

 

 

카테고리가 여러 개이기 때문에 map을 사용했다.

 

뉴스카드처럼 컴포넌트로 뺄까 생각도 했는데 onClick이 true, false일 때의 스타일과 애니매이션이 너무 달라서 보류했다.

 

 

item과 index를 받고 타입을 지정했다.

그리고 handler이벤트에 index를 넣어주었다.

 

 

핸들러 이벤트가 발생할 때 index 값을 가지게 되고 동일한 state를 가진 카테고리가 onClick에 대한 반응을 하는..?

 

 

 

 

 

 

whickModal이라는 state에 초기 값으로 0을 넣어준 이유는

맨 처음 카테고리의 드롭다운이 열려있어야하기 때문이다. 

 

 

handleQuestionClick에 index를 넣어주고 if문을 작성했다.

 

if) whichModal이 index를 포함하고 있으면 값이 같은 인덱스를 가진 value가 필터링이 되어 나온다.

else) 여기서 [...whichModal, index] 을 사용한 이유...!
드롭다운 여러 개를 동시에 열어둘 수 있도록 하기 위해서이다.

 

 

 

 

.

.

.

.

.

.

 

 

 

퀘스쳔 페이지 만들면서 인덱스를 제대로 사용하는 방법을 배웠다.

 

단순히 UI 구현만 하는 것보다 이렇게 로직 구현하는 게 더 재미있는 것 같다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

//

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11월은 졸업시험이 무려 3번이나 있는 중요한 달이다.

 

 

오늘도 오후 반차를 쓰고 졸업시험 보러 총총총.......

 

 

 

 

 

 

 

화이띵....

 

 

 

 

 

아참참

 

 

 

 

드디어 나의 티스토리가 구글 검색이 가능해졌다.

 

많관부..