[FE] feature: 제출할 리뷰를 한 번에 볼 수 있는 preview 모달 제작

[ImxYJL]

• resolves [FE] 제출할 리뷰를 한 번에 볼 수 있는 프리뷰 모달을 만든다. #280

---

🚀 어떤 기능을 구현했나요 ?

새로운 모달 형식인 ContentModal 제작

• 기존의 다른 모달들에 비해 긴 content를 보여주는 데 특화된 모달입니다. (maxHeight 증가 및 스크롤바 적용)
• 처음엔 모달 컨텐츠에 집중할 수 있도록 아예 명시적인 닫기 버튼 없이 esc나 배경 클릭만으로 모달을 닫을 수 있도록 하려 했는데, 그래도 닫기 버튼이 아예 없는 건 불친절하다고 생각해서 모달 최상단에 닫기 버튼(X)을 배치했습니다.
• 그렇다고 닫기 버튼을 하단 sticky로 두자니 과하게 자리를 차지하는 느낌이고, 그냥 하단에 두면 사용자가 닫기 버튼을 찾기 위해 스크롤을 쭉 내려야 하는 문제가 있습니다.
• 그래서 상단에 작게 X 버튼을 배치해서 사용자가 필요할 때 직관적으로 찾을 수 있도록 했습니다.

프리뷰 모달 임시 스타일링

• 프리뷰 모달에서까지 누구에게 쓰는 것인지, 어떤 프로젝트인지를 보여줄 필요는 없다고 생각해서 별도로 표시하지 않았고 컴팩트하게 질문-답변 카드만 보여주고 있습니다.
  • X 버튼과 이하 Content를 위한 gap 때문에 모달 상단부가 조금 비어 보이는 느낌은 있습니다.
• 리뷰를 작성할 때는 단일 카드 형식으로 질문과 답변을 받았으나 프리뷰 모달에서는 모든 카드를 세로로 보여줘야 했습니다.
• 기존 카드 스타일을 그대로 가져오고 카드 사이에 gap을 주러고 했는데, 현재 스타일상 질문이 보라색 배경이라 gap이 없어도 개별 카드를 식별할 수 있었습니다.
• 어차피 카드가 식별되므로 별도의 gap을 부여하는 것은 불필요하게 스크롤 길이만 늘인다고 생각해서 적용하지 않았습니다.
• 현재 화이트톤의 깔끔한 디자인이 적용되어 있기 때문에 투박한 스크롤바가 생기는 것은 옳지 않다고 생각해서 일단 스크롤은 가능하나 스크롤바를 없앤 상황입니다.
  • 또 Content의 길이가 어느 정도 보장되어 있고 사용자도 Content의 길이를 대충 가늠해볼 수 있기 때문에 스크롤바가 없어도 큰 혼란은 없을 거라고 생각했습니다.

CheckItem 리팩토링

• 기존에는 해당 컴포넌트가 읽기 전용으로 사용될 수도 있다는 점을 간과해서 handleClick이 필수였고 readOnly 속성이 없었습니다.
  • 리뷰를 볼 때도 이 컴포넌트를 사용할 수 있도록 핸들러를 선택 옵션으로 변경했습니다.
  • input에서 type이 checkbox인 요소에는 readonly 속성이 적용되지 않는다고 해서 우회적으로 읽기 전용 컴포넌트 처리를 했습니다. (아래에서 자세히 설명)
  • 읽기 전용 처리가 없으면 체크박스에 마우스를 가져다 댔을 때 항상 포인터가 클릭할 수 있는 것처럼 변합니다.

🔥 어떻게 해결했나요 ?

• Checkbox에 읽기 전용 타입 추가
  • 어차피 input 동작 여부는 disabled로 다룰 수 있는 만큼 단지 스타일(마우스 포인터 스타일링)만을 위한 속성이라고 생각해서 styleType에 $를 달고 있는 속성을 추가했습니다.
  • styles 파일에서 이를 받아 pointer-events를 none으로 설정합니다.
  • 기본적으로 체크박스는 사용자와 상호작용해야 한다고 생각해서, 즉 읽기 전용인 상황이 특수하다고 생각해서 기본값은 false로 주고 필요할 때 true로 명시적으로 사용하도록 만들었습니다.

// 새 스타일 인터페이스
export interface CheckboxStyleProps {
  $isReadonly?: boolean; // 추가
  $style?: React.CSSProperties;
}

// styles
export const CheckboxContainer = styled.div<CheckboxStyleProps>`
  ...

  ${(props) => props.$isReadonly && 'pointer-events: none;'}
`;

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 누락된 타입이나 내용이 없을까요?
• TempPage를 App에서 불러오면 모달을 바로 테스트해볼 수 있습니다.

📚 참고 자료, 할 말

• 아직 develop 브랜치에 카드 형식의 레이아웃 및 스타일이 없어서 임의로 3차데모 로컬 시연 브랜치에서 QuestionCard와 ReviewWritingCard를 가져왔습니다.
• 위의 복사해온 컴포넌트도 그렇고 import해온 다른 요소들도 조만간 이 모달 컴포넌트의 폴더 위치가 달라질 것 같아 별도의 indexing 없이 임시로(마구잡이로?) 가져온 상태입니다. 모킹 데이터를 위한 타입들도 임시 타입이라 이름을 성심성의껏 짓지 않았습니다^_^...
• 임의로 스타일링한 거라 많은 의견 받습니다~~~
• 이제 곧 모달 수정사항 반영해서 리팩토링해야겠지,,,

[BadaHertz52]

고생했어!!!

[chysis]

미리보기 모달 만드느라 고생했어요! 컨벤션 관련해서 코멘트 하나 남겼어요. 👍

[chysis]

컨벤션에 맞게 handleChange로 수정해야 할 것 같아요

[soosoo22]

드디어 프리뷰 모달이!!!! 수고했어요!!