[Feat] admin을 통해 등록된 placeholder 파싱하여 추가

[lydiacho]

Related Issue : Closes #267

---

🧑‍🎤 Summary

Admin에서 <플레이스홀더>로 명시된 placeholder 텍스트를 추출 후 textarea에 주입시켜줍니다

🧑‍🎤 Screenshot

2024-07-30.5.03.41.mov

🧑‍🎤 Comment

1. question 요소에서 문자열에 <플레이스홀더>가 포함되어있는 요소에 한해서
2. <플레이스홀더> 구분자를 통해 문자열 분리 후 1번 index 문자열을 추출하고 (구분자 뒤에 있는 문자열 추출)
3. trim()을 통해 혹시 모를 앞뒤 공백을 제거해주어 파싱

const parsedPlaceholder = question.includes('<플레이스홀더>') && question.split('<플레이스홀더>')[1].trim();

4. placeholder 속성 값 분기

• isFile 일 경우 : 링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)
• isFile이 아니고, placeholder가 존재할 경우 : placeholder 값
• isFile이 아니고, placeholder도 undefined일 경우 : 빈문자열

placeholder={
  isFile
    ? '링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)'
    : parsedPlaceholder || ''
}

[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.

[eonseok-jeon]

오우,,!!

그 admin에 <플레이스홀더> 넣은 이유는 서버에서 파싱해주기 때문인데요
실제로 받아오는 데이터 보면 placeholder 라는 데이터가 있을 거예요

"questions": [
  {
    "id": 169,
    "question": "질문입니다. <선택> <파일> <플레이스홀더>여기는 플레이스 홀더야",
    "value": "질문입니다.",
    "order": 1,
    "urls": null,
    "isFile": true,
    "optional": true,
    "placeholder": "여기는 플레이스 홀더야",
    "charLimit": 1000
  },
  // ...

그래서

{filteredQuestions?.map(({ value, charLimit, id, urls, isFile, placeholder, optional })

이런 식으로 바로 placeholder를 사용해 주면 됩니다ㅜ

(+) 추가로 optional 데이터도 있으니 required 여부 optional인지 동적으로 넣어주시면 감사드리겠습니다~~

[eonseok-jeon]

추가로 file에 대한 placeholder는 저희가 임의대로 설정한 거라
만약 모집 파트에서 파일 질문에 대한 placeholder를 설정했을 경우 이를 우선시 해줘야 해요!!

파일 질문인데 placeholder가 있다 -> 해당 placeholder 표시
파일 질문인데 placeholder가 없다 -> 링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.) 표시

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend with    Cloudflare Pages

Latest commit:	2e0540e
Status:	✅  Deploy successful!
Preview URL:	https://d46dbf09.sopt-recruiting-frontend.pages.dev
Branch Preview URL:	https://feat--267-placeholder.sopt-recruiting-frontend.pages.dev

View logs

[lydiacho]

@eonseok-jeon 아 잠결에 제가 프론트가 처리해도된다.. 는 내용에만 꽂혀서 샘플데이터 안보고 구현해버렸네요 ㅠㅠ 리소스 전혀 안든 작업이라 괜찮습니다 🙃 서버 데이터 활용하도록 바꿔놓았고, 언석님이 작업하신 유의사항 이슈와 conflict 나던 것도 해결해두었습니다!
optional도 추가해주었습니다

[eonseok-jeon]

@lydiacho 확인했어여! 고생 완전 많으셨습니다ㅜㅜ