[Feature/BAR-225] 맞춤법 검사 결과 카드 UI 구현

[dmswl98]

Summary

구현 내용 및 작업한 내역을 요약해서 적어주세요

• refactor(api/spell-check): api 반환 데이터 구조 변경
• feat: 맞춤법 검사 카드 구현
• feat: 맞춤법 버튼 클릭시 맞춤법 검사 카드 보이기

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점을 적어주세요

2024-02-06.10.47.03.mov

• hover, active 상태에 따라 색상이 변해야 하는 아이콘의 경우 컴포넌트로 작성했어요.
• 아직 WRITE_INPUT_EXAMPLE 값으로 맞춤법 검사를 진행하고 있는데, 추후 사용자가 작성한 글에 따라 맞춤법 검사를 진행하도록 구현할 예정입니다.
• api/spell-check의 반환 데이터 구조를 변경해보았는데 괜찮은지....ㅎㅎ
• 맞춤법 결과에 대한 스타일링 부분 로직이 효율적인지 봐주세요.

export interface Suggestion {
  /* 맞춤법 오류 종류 */
  type: keyof typeof SPELLCHECK_TYPE;
  /* 맞춤법 오류 어절 */
  errorToken: string;
  /* 맞춤법 정정 어절 */
  correct: string;
}

export interface SpellCheckResult {
  suggestions: Suggestion[];
  correction: string; // 맞춤법 오류가 모두 정정된 문장
}

const getStyledSuggestion = (result: SpellCheckResult) => {
  const { suggestions, correction } = result;

  const init: (string | React.JSX.Element)[] = [];
  // 맞춤법 정정 어절 -> '안녕하세요|드립니다 다름이|추가해 주실'
  const pattern = suggestions.map(({ correct }) => correct).join('|');
  // 맞춤법 정정 어절 기반의 정규식 생성 -> /안녕하세요|드립니다 다름이|추가해 주실/g
  const regex = new RegExp(`${pattern}`, 'g');

  const splitedCorrection = correction.split(regex);
  const matches = correction.match(regex)!;

  // 맞춤법 정정 어절에 각 맞춤법 타입(spell, space, doubt)에 맞는 스타일링 적용
  const styledSuggestionTag = suggestions.map(({ type, correct }) => (
    <StyledSuggestion key={correct} type={type}>
      {correct}
    </StyledSuggestion>
  ));

  // 기존 문장에 스타일링 적용된 어절 삽입
  const styledSuggestion = splitedCorrection.reduce(
    (arr, element, index) =>
      matches[index]
        ? [...arr, element, styledSuggestionTag[index]]
        : [...arr, element],
    init,
  );

  return styledSuggestion;
};

How To Test

PR의 기능을 확인하는 방법을 상세하게 적어주세요

const WritePage = () => {
  const writeInput = useInput({ id: 'write-input' });

  return (
    <WritePageTab
      write={
        <>
          <WriteGuide />
          <WriteHistory data={MOCK} />
          <WriteTodayCard /> // 추가
          <WriteInput inputProps={writeInput} />
        </>
      }
      template={null}
    />
  );
};

[miro-ring]

@dmswl98

[miro-ring]

reduce를 사용해서 정리할 수 있지 않을까요?

[dmswl98]

5e3bfae 반영해두었습니다!

[miro-ring]

요 형태로 사용하는게 더 편하신가요?

[dmswl98]

fc8df1c svg로 변경해두었습니다!

[dmswl98]

@dongkyun-dev 말씀해주신 부분 모두 반영해두었습니다~

최종 디자인 수정 사항

[miro-ring]

이렇게 뎁스 깊어지는건 절대경로 사용하면 어떨까요?

[dmswl98]

308cc12 적용해두었습니다!

[miro-ring]

fill 속성에만 적용해도 괜찮을 것 같아요

[dmswl98]

ec5b8b2 적용해두었습니당

[miro-ring]

고생하셧습니다!