[Feat] 변환 컴포넌트 개발

[yellow-jam]

⚙️ 기능 설명

변환 페이지에서 보여지는 단계별 변환 과정 컴포넌트를 만듭니다.

✅ To-do

공통

• [x] 기본 틀 디자인, convertBoxStyles.ts에 중복 컴포넌트 정의
• [x] 튜토리얼 작성 (data가 undefined/존재함 기준으로 분기처리)
• [x] px를 vw, vh, rem으로 변환하기 width: calc(1rem + 20vw) 연산자 양 옆 띄어쓰기 필수

  NovelBox

• [x] file upload input
• [ ] file upload form Formik로 작성

  CharacterBox

• [x] 등장인물 추가/삭제 Chip List Component
• [x] 등장인물 하이라이트 표시

  ScriptBox

• [x] 문자열 출력 (textarea)
• [ ] #15

  StoryboardBox

• [ ] #12

  StatisticsBox

• [ ] 통계 컴포넌트 개발

📑 참고 자료

[yellow-jam]

• 컴포넌트 모양

• data가 undefined인 경우 tutorial 표시

[otcroz]

혹시 px를 vw, vh, rem으로 변환하기 체크 되어있던데 예시로 써준 width: calc(1rem+20vw)를 적용한 예시가 있을까요? 이 코드 어디서 찾은건지 궁금해요.

[yellow-jam]

@otcroz 제가 아직 코드에서 사용한 적은 없고 임의로 써둔 예시입니다! calc()는 CSS에서 지원하는 함수이며 단위가 제각각인 수치를 연산해야 할 때 사용합니다. https://developer.mozilla.org/ko/docs/Web/CSS/calc

border-radius 속성 외에는 px 단위를 모두 rem과 %로 교체해서 todo 체크했습니다.