diff --git a/frontend/src/constants/INITIAL_FORM_DATA.ts b/frontend/src/constants/INITIAL_FORM_DATA.ts index 2e7e82aaa..6a04e3a36 100644 --- a/frontend/src/constants/INITIAL_FORM_DATA.ts +++ b/frontend/src/constants/INITIAL_FORM_DATA.ts @@ -2,6 +2,7 @@ import { ApplicationFormData } from '@/types/application'; const INITIAL_FORM_DATA: ApplicationFormData = { title: '', + description: '', questions: [ //맨 처음은 이름 { diff --git a/frontend/src/mocks/data/mockData.ts b/frontend/src/mocks/data/mockData.ts index 45c93df72..3a246039b 100644 --- a/frontend/src/mocks/data/mockData.ts +++ b/frontend/src/mocks/data/mockData.ts @@ -24,6 +24,7 @@ export interface Question { export const mockData: ApplicationFormData = { title: '2025_2_지원서', + description: '2025_2_지원서 설문지입니다.', questions: [ { id: 1, diff --git a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts index cc9650e56..d45507d06 100644 --- a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts +++ b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts @@ -17,6 +17,31 @@ 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; diff --git a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx index 957e736cf..987ed8e28 100644 --- a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx +++ b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import QuestionBuilder from '@/pages/AdminPage/components/QuestionBuilder/QuestionBuilder'; import { QuestionType } from '@/types/application'; import { Question } from '@/types/application'; @@ -21,6 +21,8 @@ const ApplicationEditTab = () => { const [formData, setFormData] = useState(INITIAL_FORM_DATA); + const descriptionRef = useRef(null); + useEffect(() => { if (data) { setFormData(data); @@ -77,6 +79,18 @@ const ApplicationEditTab = () => { })); }; + const handleFormDescriptionChange = (value: string) => { + setFormData((prev) => ({ + ...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) => updateQuestionField(id, 'title', value); @@ -148,6 +162,12 @@ const ApplicationEditTab = () => { onChange={(e) => handleFormTitleChange(e.target.value)} placeholder='지원서 제목을 입력하세요' > + handleFormDescriptionChange(e.currentTarget.value)} + placeholder='지원서 설명을 입력하세요' + > {formData.questions.map((question, index) => (