Feat/#112: 공지사항 페이지에서 학교, 학과 공지사항을 분리해서 보여줄 수 있는 UI 구현

[hwinkr]

🤠 개요

• 공지사항 페이지 내부에서 학교, 학과 공지사항을 분리해서 보여줄 수 있도록 했어요

💫 설명

• announceKeyword를 사용해서, 비동기 데이터를 가져와요
  • 이렇게 한 이유는 state 사용할 경우 새로고침할 경우 문제가 생기고(앱이라서 새로고침 할 일은 없겠지만,,,)
  • setState 호출로 인해서 불필요한 리렌더링도 발생할 수 있기 때문에, URL을 파싱하기로 했어요.
• 현재 사용자가 보고 있는 공지사항을 강조해주기 위해서 기존에 사용중이던 Button 컴포넌트에 스타일을 외부에서 주입할 수 있도록 변경했어요.
  • 프로토타입을 작성할 때, 피그마에서는 버튼의 배경색이 아닌 css border의 bottom-line을 통해서 강조했어요.
  • 하지만, 개발을 시작하고 나서 버튼의 배경색을 GREEN으로 고정했고 고정된 배경색을 사용중인 컴포넌트도 너무 많아서 지금 배경색을 외부에서 주입하도록 변경하기에는 오버헤드가 너무 클 것 같다는 판단을 했어요.
  • 따라서, 버튼의 배경색을 변경해야 하는 경우에만 외부에서 주입하도록 하기 위해서ButtonHTMLAttributes<HTMLButtonElement>이 타입을 확장해서 Button 컴포넌트의 prop을 재정의 했어요!
• informCard 컴포넌트에 추가된 majorRequired prop
  • 학교 공지사항은 전공이 선택되지 않아도 보여주기로 결정했고, 따라서 공지사항 페이지 자체는 전공 선택되지 않아도 방문할 수 있도록 해야 했어요.
  • 따라서, 졸업요건 카드만 전공을 선택해야 사용할 수 있도록 해야 했는데 전공이 필요한지 아닌지를 외부에서 주입하기로 결정했어요

📷 스크린샷 (Optional)

[pp449]

아니면 피그마 프로토타입에서 색만 변경해서 사용하는건 어떨까요..?

버튼이 크기가 있어서 시각적으로 조금 부담스러운거 같아요..

[hwinkr]

아니면 피그마 프로토타입에서 색만 변경해서 사용하는건 어떨까요..?

버튼이 크기가 있어서 시각적으로 조금 부담스러운거 같아요..

흠..의견을 듣고 보니 저도 그렇게 느껴지네요.
그러면 둘 다 background-color을 흰색으로 설정한 후 텍스트 컬러로 강조할 수 있도록 수정하겠습니다!

[pp449]

굿 좋아요~~