[Fix] 글자 수와 required dot 위치 수정

[eonseok-jeon]

Related Issue : Closes #290

---

🧑‍🎤 Summary

• 글자 수와 required dot 위치 수정

🧑‍🎤 Screenshot

🧑‍🎤 Comment

질문을 \n를 이용하여 구분을 해줘요

예)

파일을 입력해주세요.
(단, 파일만 입력해주세요.)

파일은 500MB 이내로 업로드 해주셔야 해요.

=> ['파일을 입력해주세요.', '(단, 파일만 입력해주세요.)', ' ', '파일은 500MB 이내로 업로드 해주셔야 해요.'] 이렇게 길이 4의 배열이 나와요

이때 첫 ' ' (빈 스트링)이 나오기 전까지가 핵심 질문이라 이를 추출하는 render 함수(renderQuestions)를 아래와 같이 만들었어요

const renderQuestions = (questions: string[], limit: number) =>
  questions.slice(0, limit).map((item, idx) => (
    <Fragment key={`${item}-${idx}`}>
      {item}
      {idx !== limit - 1 && '\n'}
    </Fragment>
  ));

그 이후의 나머지 부분을 추출하는 render 함수(renderRestQuestions)는 아래와 같아요

const renderRestQuestions = (questions: string[]) =>
  questions.slice(firstEmptyIndex).map((item, idx) => (
    <Fragment key={`${item}-${idx}`}>
      {item} {`\n`}
    </Fragment>
  ));

renderQuestions의 limit은 첫 번째로 ' '가 나타나는 index 입니다
왜냐면 이 앞에서 끊어줘야 해서요!!
이는 아래와 같은 방식으로 찾고 있어요

const firstEmptyIndex = questionArray.indexOf('');

근데 추가 설명 없이 짧은 한 문장의 질문일 경우 indexOf 했을 때 -1이 뜨기 때문에 slice(firstEmptyIndex)를 사용할 수 없었어요
그래서 이에 대한 분기 처리도 해주었습니다 :)

{firstEmptyIndex === -1 ? children : renderQuestions(questionArray, firstEmptyIndex)}

{firstEmptyIndex !== -1 && ( //... }

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend with    Cloudflare Pages

Latest commit:	5420b72
Status:	✅  Deploy successful!
Preview URL:	https://13efad5c.sopt-recruiting-frontend.pages.dev
Branch Preview URL:	https://fix--290-max-count-position.sopt-recruiting-frontend.pages.dev

View logs

[lydiacho]

코드 모두 확인헀습니다 :)

현재 빈 개행을 기준으로 첫번째 질문을 코어질문으로 여기도록 로직을 구현했는데,
메이커스 리크루팅 때는 저희가 질문을 넣어서 상관없지만, 추후 매기수 바뀌는 솝트 임원진들에게 맡기기 위해서는 사용방법이 조금 더 쉽고 범용적이어도 된다는 생각이 들기도 해요.
슬랙으로 우려 지점으로 말씀드렸던 것처럼 첫번째 개행이 코어 질문의 기준이 충분히 아닐 수도 있기 때문에 추후에는 저희가 현재 하고있는 <플레이스홀더> <선택> 이런 친구들처럼, 코어 질문과 부가 설명을 구분짓는 구분자 키워드가 하나 딱 정해지면 더 직관적이고 좋을 것 같아요

우선 이렇게 배포하고 추후에 수정해봅시다!!
고생하셨습니다 💯

[eonseok-jeon]

@lydiacho 진짜 너무 좋은데영?
다음 기수 때 어드민 페이지 작업하면서 저런 것들 다 제거해 봅시다~~