[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 5주차 후기

 

 

 

이번주에는 Alert 컴포넌트 제작과 코드 분석 페이지 퍼블리싱 작업을 진행했다.

 

1.Alert 컴포넌트

디자인이 중간에 수정되면서 Alert 컴포넌트가 생겼다. 코드를 분석할 때 alert으로 상태를 표시하고 프로그래스 바를 파일 아래로 옮겨 디자인이 간소화되었다. 정보알림이라고 이름이 붙은 alert를 보면 모래시계가 기울여져 있는데, 이 속성은 animate-spin으로 돌아가도록 지정했다. 원래 정보알림은 대기중에 해당하는 alert인데, storybook용으로 만들었기에 저렇게 설정되어 있다.

 

 

 

코드의 props를 잠깐 살펴보면 isShow는 button을 보일지 말지 설정하는 것이고 linkHref와 buttonProps로 버튼에 설정될 페이지 이동과 onClick 이벤트를 대비한 모습니다. 그리고 아래의 isAlertDisplayed 상태는 원래 isVisible이라는 이름으로 Alert의 엑스버튼이 동작하도록 만든 상태였는데, 이름이 isShow와 비슷하다는 리뷰를 받아서 저렇게 명확한 이름으로 수정했다.

 

 

2. 코드 분석 페이지 디자인 수정

 

 

보이는 것처럼 코드 분석 페이지의 디자인이 수정되었는데, 맨 윗줄은 호버링하면서 별모양의 북마크버튼이 활성화된 모습니다. 그것을 클릭하면 세번째줄처럼 색이 채워진 상태로 유지된다. 이 부분의 상태관리가 생각보다 어려웠는데, 좀 더 쉬운 방법을 알아내야 겠다는 생각이 들었다. 좋아요/북마크는 대부분의 애플리케이션에 존재하기에 좀 더 간소화된 코드를 찾는다면 두고두고 사용할 수 있을 것 같았다. 그리고 가장 아랫줄은 파일을 선택했을 때의 모습이다.

 

그리고 내가 만들었던 infoBoxDetail 컴포넌트도 수정되었는데, 내부에 수정된 코드가 들어간다. 저 수정된 코드는 AI를 거치면서 lineNumber를 key값으로 하여 객체의 배열로 응답값을 받는데, 아마 map함수로 반복하여 띄우게 될 것 같다.

 

이번주에는 여러 공부를 하느라 포스팅에 쓸 내용이 적은데, 이제 프로젝트 기간의 막바지인만큼 조금 더 최선을 다해야겠다는 생각이 들었다.

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 과정(B-log) 리뷰로 작성 되었습니다.