[Feat] make notification page

[mike2ox]

📌 개요

• notification page 내부 contents 제작

💻 작업사항

• notification page에서 사용할 search bar, table, pagination, create button을 업로드 합니다

사전 작업

1. env.development가 일부 수정됐습니다.
   NEXT_PUBLIC_ADMIN_MOCK_ENDPOINT 추가
2. 패키지 추가 및 업데이트 반영, 실행

npm i & npm run dev

3. 주소 입력
   http://localhost:3000/admin/notification (참고)

관련이슈

• [Feat] 알림(notification) 페이지 개발 #627

질의

• 현재 SearchBar에 initSearch라는 함수를 전달하는 방식으로 기존 SearchBar을 그대로 쓰고 있는데 코드를 copy&paste해서 admin용으로 새로 분리를 하는게 맞을지 의문입니다.
• 실제 반응과 유사하게 mock api에 405(사용불가 http method)와 401(권한 X)을 계속 붙일까 고민 중입니다

[42sungwook]

전체 조회에 메시지는 안보이는데 의도된건지 궁금해요!
hyunkle님한테 물어보니 추가해야될 것 같다고 하시네요

[mike2ox]

코드에 추가보단 type -> message로 바꿔줘야할 거 같은데 hyunkle님하고 얘기 나눌게 하나 있어서 그때 수정할게요

[mike2ox]

변경 사항

• 기존 inline되어있던 style을 scss파일로 분리했습니다(pagination, table, button)
• message column이 빠져있어서 추가했습니다.
• mock data 업데이트 (random 사용)

고민

• pagination이나 검색을 사용하면 table width가 flex하게 바뀌는거를 확인할 수 있습니다. page내 contents들의 사이즈가 고민입니다.
• 마지막으로 확정한건 notification page에서 announce 타입만 만들 수 있도록 확정해놔서 생성된 notification들을 불러올때도 announce 타입만 오는건지 확인 필요(BE 담당자와 talk)

[raehy19]

정말 정말 수고 많으셨습니다 !!! 여러 컴포넌트에 적용할 수 있게 고민하시면서 이렇게 잘 만들어주셔서 관리자 페이지 남은 것들은 금방 끝날 수 있을 것 같네요 사소한 코멘트 한번 확인해주시면 될것같습니다 ~~ :)

[raehy19]

수정하신거 확인했습니다 고생하셨습니다 !!

[42sungwook]

현재 SearchBar에 initSearch라는 함수를 전달하는 방식으로 기존 SearchBar을 그대로 쓰고 있는데 코드를 copy&paste해서 admin용으로 새로 분리를 하는게 맞을지 의문입니다. -> 이 부분은 기획 단계에서 얘기했을 때 backend에 정확한 intraId값을 주지 않고 일부만 보내줘도 해당 값이 포함된 intraId를 전부 보내준다고 해서 지금의 검색방식이 맞지는 않은 것 같습니다 하지만 지금 쓰는데는 문제가 없어 이슈를 남겨놓고 나중에 바꿔도 될 것 같아요
ex) mo만 검색해도 mosong mosong1 mosong2 유저들을 api로 불러오는게 가능

[mike2ox]

현재 SearchBar에 initSearch라는 함수를 전달하는 방식으로 기존 SearchBar을 그대로 쓰고 있는데 코드를 copy&paste해서 admin용으로 새로 분리를 하는게 맞을지 의문입니다. -> 이 부분은 기획 단계에서 얘기했을 때 backend에 정확한 intraId값을 주지 않고 일부만 보내줘도 해당 값이 포함된 intraId를 전부 보내준다고 해서 지금의 검색방식이 맞지는 않은 것 같습니다 하지만 지금 쓰는데는 문제가 없어 이슈를 남겨놓고 나중에 바꿔도 될 것 같아요 ex) mo만 검색해도 mosong mosong1 mosong2 유저들을 api로 불러오는게 가능

여기서 mo만 검색했을때 mosong1, mosong2가 안뜨는건 당연합니다. 저건 admin용 API가 아니라 매칭 서비스용 API를 그대로 갖다쓴 유저 검색 결과라서 그렇습니다. 말씀하신 부분은 노션에서 /admin/users/searches?q=${keyword} 이 부분인데 담당하신 분이 아직 배포를 못하신걸로 추측해 매칭 서비스용 API를 붙여놓은 상태에요

[42sungwook]

아 그 부분이 문제가 아니었군요. 코드를 그대로 복붙하는게 별로여서 물어보신거라면 서치바를 인터페이스로 만들어서 admin용을 분리해서 쓰는건 어떤가요..?
제가 노션에 정리한 객체지향 부분에 비슷한 예시가 있었던것 같은데 지금 가독성이 떨어져서 빨리 수정해놓겠습니다 // 객체지향 부분은 수정해놨습니다

[mike2ox]

@42sungwook OOP의 interface 개념을 적용하면 좋긴하지만 해당 사례는 HOC를 적용해 보는게 좋지않을까 싶네요
현재 공용으로 사용할 테이블 컴포넌트도 완성형은 HOC 적용한 형태입니다.

정정) HOC가 안쓰이는건 아니지만 함수 컴포넌트에서 대채하는 기술이 custom hook이라고 하네요. custom hook으로 처리하도록 방향을 바꿔봐야겠네요

HOC 참고 : https://satisfactoryplace.tistory.com/163