feat: RetroNoticeModal 구현

[Klomachenko]

🎟️ Related Ticket: #20

✏️ Description

• RetroNoticeModal을 figma에 맞게 구현하였습니다.

🧩 How

• 해당 Modal은 KanBan Board를 사용하는 페이지 구간에서 사용됩니다.
• 달라지는 부분은 없습니다.
• 내부에 들어가는 콘텐츠, 제목의 경우 변경의 소지가 적어, 상수화를 진행하였습니다.
  • constants 폴더에서 확인이 가능합니다.

export const RETRO_NOTICE_CONTENT = [
  '1. 지속적인 개선 : 스프린트 회고를 통해 팀은 지난 스프린트에서 무엇이 잘되었는지, 무엇이 문제였는지를 파악하고, 이를 바탕으로 개선 계획을 수립합니다. 이는 팀의 성장과 발전에 필수적입니다.',
  '2. 팀워크 강화 : 팀원들이 함께 회고를 진행함으로써 서로의 의견을 듣고 이해하며, 팀워크를 강화하는 기회가 됩니다.',
  '3. 문제 해결 : 스프린트 회고를 통해 팀 내 문제나 이슈를 시기적절하게 파악하고 해결할 수 있습니다.',
];

export const RETRO_NOTICE_TITLE = '스프린트 회고의 중요성'; 

• 상수는 아래와 같이 사용합니다.

const RetroNoticeModal = () => {
  return (
    <>
      <RetroNoticeTitle>{RETRO_NOTICE_TITLE}</RetroNoticeTitle>
      <RetroNoticeWrapper>
        <RetroNoticeContent>
          {RETRO_NOTICE_CONTENT.map((content, index) => (
            <div key={index}>{content}</div>
          ))}
        </RetroNoticeContent>
      </RetroNoticeWrapper>
    </>
  );
};

⚠️ PR 참고 사항

• 제목 부분은 background-color: white에 z-index를 부여하는 것으로 구현하였습니다.

📸 Screen Shot

✅ Todo Check

• RetroNoticeModal 컴포넌트 구현

💬 �리뷰 요구사항

• 적절한 상수화가 이뤄졌는지 확인해주세요. @yunn23

Etc.

• 서윤님의 경우에도 상수화를 진행할 부분이 있는지 확인해보시면 좋을 것 같습니다!

[cr-gpt]

Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information

[github-actions]

Code review by ChatGPT

[github-actions]

이 코드 패치는 안정적으로 보입니다. 그러나 몇 가지 개선 제안이 있습니다:

1. CSS 속성인 'font-size: 20px'를 상수로 정의하여 재사용 가능하게 만들 수 있습니다.
2. RetroNoticeTitle의 위치 속성을 고정 값 대신 상대 값으로 지정하여 화면 크기에 따라 유연하게 조정할 수 있습니다.
3. RETRO_NOTICE_CONTENT에 대한 key로 index를 사용하고 있습니다. 그러나 content가 변경되면 index가 변경될 수 있으므로 안정적인 key를 사용하는 것이 좋습니다.

이러한 개선 사항을 고려하면 코드의 유지 보수성과 확장성이 더욱 향상될 것입니다.

[github-actions]

이 코드는 RETRO_NOTICE_CONTENT와 RETRO_NOTICE_TITLE 상수를 내보내는 JavaScript 모듈의 간단한 코드 패치입니다.

개선 제안:

1. 주석 추가: 각 항목에 대한 설명 또는 주석을 추가하여 코드의 가독성을 높일 수 있습니다.
2. 코드 일관성 유지: 변수명 및 코드 스타일을 통일하여 가독성과 유지보수성을 높일 수 있습니다.
3. 문자열 리팩토링: 긴 문자열을 다수 작은 문자열로 분리하여 가독성을 향상시키고 문자열 조작을 용이하게 할 수 있습니다.

버그 위험:

1. 오탈자 및 문법 오류: 문자열 내용에 오탈자나 문법 오류가 있는지 확인이 필요합니다.

코드는 기능적으로 문제는 없지만, 주석 추가와 코드 일관성을 유지하는 등의 개선이 필요하고 문자열 내용에 대한 오탈자나 문법 오류 확인이 필요합니다.

[github-actions]

이 코드 패치에 대한 간단한 코드 리뷰를 해 드리겠습니다.

1. 잠재적 버그 리스크:

• RetroNoticeModal 컴포넌트를 import하였지만 해당 컴포넌트를 실제로 사용하지 않고 있습니다. TaskCardInput 컴포넌트로 변경된데도 불구하고 가져온 컴포넌트를 사용하는 것이 좋습니다.

2. 개선 제안:

• Klomachenko 함수 혹은 컴포넌트의 이름이 명확하지 않습니다. 기능이나 내용을 더 잘 반영하는 이름을 선택하는 것이 좋습니다.
• TaskCardInput와 RetroNoticeModal 컴포넌트의 사이즈(width, height)를 props로 전달하는 것 대신 CSS를 활용하여 스타일링 하는 것이 더 유연할 수 있습니다.

이상입니다. 이 코드 리뷰가 도움이 되었기를 바랍니다.