[FEAT] 질문게시판 로더 적용 #160
Open
[FEAT] 질문게시판 로더 적용 #160
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…포넌트를 불러 사용할 수 있도록 수정(guest/detail/[programId]/page.tsx)
- 기존에 상위에서 props로 로그인을 한 상태인지 아닌지를 받아와 블러 처리된 ui 혹은 올바른 ui 가 보이도록 되어있던 로직을 수정하여, 로그인한 상태일때 올바르게 참여자 정보를 보여주는 컴포넌트와 로그인하지 않은 상태일때 블러 처리된 ui를 보여주는 컴포넌트를 분리하여 상위에서 필요한 컴포넌트를 불러 사용할 수 있도록 수정하였습니다.
- 분리함에 따라서 컴포넌트의 이름을 수정혀였습니다
(AttendeeInfo -> AttendeeInfoByStatus, AttendeeInfo.container -> AttendeeInfoSection)
- 또한 page 컴포넌트와 section 컴포넌트의 의존성을 줄이기 위해서 기존에 props로 programId값을 받아오던 부분을 각자 section에서 알아서 programId값을 얻어오도록 수정하였습니다. 이때 각 sectoin에서 programId값을 가져오는 로직이 반복되어 이를 커스텀훅으로 만들어 사용하였습니다
고정적으로 사용하는 이미지 혹은 아이콘들은 feature/icons에서 전부 관리하도록 함. 여기서는 index.tsx에서 재수출 하여 한 모듈에서 아이콘 혹은 이미지들을 가져올 수 있도록함 기존에는 로직상에 url이 그대로 박혀있는 경우가 많았으며, 이로 인해서 해당 아이콘 혹은 이미지를 변경하는 등의 작업시 로직 전부를 확인하며 이미지 태그의 url을 확인했어야 했다. 게다가 해당 이미지나 아이콘을 재사용하고자 할 때에도 다시 코드를 복붙하는 방식으로 해야하였기에 유지보수적으로 많은 비용을 지불할 수밖에 없었다. 한 곳에서 컴포넌트로서 관리하게되면 이러한 비용을 줄일 수 있을 것으로 기대한다. #159
…n 내부에서 처리도록 수정 기존에 UserAttendModalSection에서 필요한 programId 값을 page에서 받아오던 부분을 내부에서 받아오도록 수정 #159
질문게시판에 로더를 적용함 질문 게시판은 우선적으로 해당 프로그렘애 참여한 팀을 요청하여 가져온 후, 팀과 programId를 사용해서 해당 프로그램에 해당 팀의 질문을 받아와야만 한다. 이에 따라서 질문게시판이 보이기 위해서 2번의 서버 요청이 직렬로 요청된다. 팀을 요청할 때에는 탭과 게시판이, 질문을 요청할 때는 게시판이 안보이는 상태이므로, 이에 따라서 2번의 쿼리에 맞추어 중첩되게 suspense와 ErrorBoundary를 적용함
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
현재 vercel에서 빌드시에 백엔드 주소를 dns에서 찾지 못하는 버그로 인해서 올바르게 빌드가 안되는 상태입니다. 서버 이전과 관련한 사항같은데, 올바르게 dev 서버가 동작하게 되면, 그때 머지하도록 하겠습니다 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 관련 이슈
closed #159
✨ PR 내용
질문 게시판에 스캘레톤 ui의 로더를 적용하였습니다
고려사항
질문 게시판을 보여주기위해서는, 우선적으로 해당 프로그램에 속해있는 팀을 query로 한번 불러온 이후, 해당 프로그램의 해당 팀의 질문을 요청하는 query를 날리게 됩니다.
이때 보여지는 UI는 아래와 같습니다
질문게시판은 어떠한 ui도 보이지 않습니다
팀 탭은 보이지만, 질문 내용이 보이지 않습니다.
이에 따라서 중첩적으로 suspence를 적용하여 각 상황에서의 로더가 적용되도록 하였습니다
TODO
현재 아무런 질문이 없을 때, 질문이 조금 혹은 많이 있을 때, 그리고 로더 모두 height 크기가 다릅니다.
이에 따라서 추가적인 paint, layout 비용이 발생할 것으로 보이며, 사용자 입장에서도 보고있던 UI가 갑자기 위 또는 아래로 변경되는 것으로 인해 원치않은 시선의 움직임으로 좋은 경험을 주지는 못할 것으로 보입니다.
추후에 잡힌 UI 변경 개발 관련 진행시에 height를 맞추는 작업이 필요해보입니다