diff --git a/frontend/src/constants/APPLICATION_FORM.ts b/frontend/src/constants/APPLICATION_FORM.ts index af483410e..1900049a9 100644 --- a/frontend/src/constants/APPLICATION_FORM.ts +++ b/frontend/src/constants/APPLICATION_FORM.ts @@ -1,19 +1,23 @@ export const APPLICATION_FORM = { + APPLICATION_DESCRIPTION: { + placeholder: '지원서 설명을 입력해주세요 (최대 3000자)', + maxLength: 3000, + }, QUESTION_TITLE: { - placeholder: '질문 제목을 입력해주세요(최대 20자)', - maxLength: 20, + placeholder: '질문 제목을 입력해주세요(최대 50자)', + maxLength: 50, }, QUESTION_DESCRIPTION: { - placeholder: '질문 설명을 입력해주세요(최대 300자)', - maxLength: 300, + placeholder: '질문 설명을 입력해주세요(최대 200자)', + maxLength: 200, }, SHORT_TEXT: { - placeholder: '답변입력란(최대 20자)', - maxLength: 20, + placeholder: '답변입력란(최대 100자)', + maxLength: 100, }, LONG_TEXT: { - placeholder: '답변입력란(최대 500자)', - maxLength: 500, + placeholder: '답변입력란(최대 1000자)', + maxLength: 1000, }, CHOICE: { placeholder: '항목(최대 20자)', diff --git a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts index d45507d06..e7bccb892 100644 --- a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts +++ b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts @@ -17,34 +17,10 @@ export const FormTitle = styled.input` } `; -export const FormDescription = styled.textarea` - width: 100%; - min-height: 120px; - height: auto; - resize: none; - overflow: hidden; - border: none; - outline: none; - margin-bottom: 24px; - padding: 12px; - - &::placeholder { - color: #c5c5c5; - transition: opacity 0.15s; - } - - &:focus::placeholder { - opacity: 0; - } - - &:hover { - border: 1px solid #ccc; - } -`; - export const QuestionContainer = styled.div` display: flex; flex-direction: column; + margin-top : 40px; gap: 83px; `; diff --git a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx index 987ed8e28..bc5476820 100644 --- a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx +++ b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx @@ -11,6 +11,8 @@ import { useAdminClubContext } from '@/context/AdminClubContext'; import { useGetApplication } from '@/hooks/queries/application/useGetApplication'; import createApplication from '@/apis/application/createApplication'; import updateApplication from '@/apis/application/updateApplication'; +import CustomTextArea from '@/components/common/CustomTextArea/CustomTextArea'; +import { APPLICATION_FORM } from '@/constants/APPLICATION_FORM'; const ApplicationEditTab = () => { const { clubId } = useAdminClubContext(); @@ -21,8 +23,6 @@ const ApplicationEditTab = () => { const [formData, setFormData] = useState(INITIAL_FORM_DATA); - const descriptionRef = useRef(null); - useEffect(() => { if (data) { setFormData(data); @@ -84,11 +84,6 @@ const ApplicationEditTab = () => { ...prev, description: value, })); - if (descriptionRef.current) { - descriptionRef.current.style.height = 'auto'; - descriptionRef.current.style.height = - descriptionRef.current.scrollHeight + 'px'; - } }; const handleTitleChange = (id: number) => (value: string) => @@ -162,13 +157,16 @@ const ApplicationEditTab = () => { onChange={(e) => handleFormTitleChange(e.target.value)} placeholder='지원서 제목을 입력하세요' > - handleFormDescriptionChange(e.currentTarget.value)} - placeholder='지원서 설명을 입력하세요' - > - + onChange={(e) => handleFormDescriptionChange(e.target.value)} + placeholder={APPLICATION_FORM.APPLICATION_DESCRIPTION.placeholder} + maxLength={APPLICATION_FORM.APPLICATION_DESCRIPTION.maxLength} + showMaxChar + width="100%" + /> + {formData.questions.map((question, index) => (