Skip to content

[feature] 관리자 지원서 페이지에 설명을 추가한다 #563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
seongwon030 merged 4 commits into from
Jul 21, 2025
Merged

[feature] 관리자 지원서 페이지에 설명을 추가한다 #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f3f658a
feat: 지원서 설명 스타일 추가
seongwon030 Jul 20, 2025
b36f8ae
feat: 지원서 설명 입력값 별도 state로 관리 및 textarea 자동 높이 조절
seongwon030 Jul 20, 2025
908edd8
feat: 지원서폼 api에 description 필드추가
seongwon030 Jul 21, 2025
68630b2
refactor: description필드 추가에 따른 데이터 변경
seongwon030 Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/constants/INITIAL_FORM_DATA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ApplicationFormData } from '@/types/application';

const INITIAL_FORM_DATA: ApplicationFormData = {
title: '',
description: '',
questions: [
//맨 처음은 이름
{
Expand Down
1 change: 1 addition & 0 deletions frontend/src/mocks/data/mockData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export interface Question {

export const mockData: ApplicationFormData = {
title: '2025_2_지원서',
description: '2025_2_지원서 설문지입니다.',
questions: [
{
id: 1,
Expand Down
25 changes: 25 additions & 0 deletions frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
Comment on lines +20 to +43
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

매직 넘버를 명명된 상수로 교체하고 색상 일관성을 개선하세요.

스타일 컴포넌트에서 하드코딩된 값들(120px, 24px, 12px, #c5c5c5, #ccc)을 명명된 상수로 추출해야 합니다. 또한 FormTitle과 동일한 색상값들이 반복되고 있어 일관성을 위해 공통 상수로 관리하는 것이 좋겠습니다.

+const FORM_COLORS = {
+  PLACEHOLDER: '#c5c5c5',
+  BORDER_HOVER: '#ccc',
+} as const;
+
+const FORM_DIMENSIONS = {
+  MIN_HEIGHT: '120px',
+  MARGIN_BOTTOM: '24px',
+  PADDING: '12px',
+} as const;

 export const FormDescription = styled.textarea`
   width: 100%;
-  min-height: 120px;
+  min-height: ${FORM_DIMENSIONS.MIN_HEIGHT};
   height: auto;
   resize: none;
   overflow: hidden;
   border: none;
   outline: none;
-  margin-bottom: 24px;
-  padding: 12px;
+  margin-bottom: ${FORM_DIMENSIONS.MARGIN_BOTTOM};
+  padding: ${FORM_DIMENSIONS.PADDING};

   &::placeholder {
-    color: #c5c5c5;
+    color: ${FORM_COLORS.PLACEHOLDER};
     transition: opacity 0.15s;
   }

   &:focus::placeholder {
     opacity: 0;
   }

   &:hover {
-    border: 1px solid #ccc;
+    border: 1px solid ${FORM_COLORS.BORDER_HOVER};
   }
 `;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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;
}
`;
// Define related constants near the styled component for clarity
const FORM_COLORS = {
PLACEHOLDER: '#c5c5c5',
BORDER_HOVER: '#ccc',
} as const;
const FORM_DIMENSIONS = {
MIN_HEIGHT: '120px',
MARGIN_BOTTOM: '24px',
PADDING: '12px',
} as const;
export const FormDescription = styled.textarea`
width: 100%;
min-height: ${FORM_DIMENSIONS.MIN_HEIGHT};
height: auto;
resize: none;
overflow: hidden;
border: none;
outline: none;
margin-bottom: ${FORM_DIMENSIONS.MARGIN_BOTTOM};
padding: ${FORM_DIMENSIONS.PADDING};
&::placeholder {
color: ${FORM_COLORS.PLACEHOLDER};
transition: opacity 0.15s;
}
&:focus::placeholder {
opacity: 0;
}
&:hover {
border: 1px solid ${FORM_COLORS.BORDER_HOVER};
}
`;
🤖 Prompt for AI Agents 
In
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts
between lines 20 and 43, replace all hardcoded numeric values and color codes
such as 120px, 24px, 12px, #c5c5c5, and #ccc with named constants defined at the
top of the file or in a shared constants file. Ensure that color values used
here match those in FormTitle by referencing the same color constants to
maintain consistency across components.


export const QuestionContainer = styled.div`
display: flex;
flex-direction: column;
Expand Down
22 changes: 21 additions & 1 deletion frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -21,6 +21,8 @@ const ApplicationEditTab = () => {
const [formData, setFormData] =
useState<ApplicationFormData>(INITIAL_FORM_DATA);

const descriptionRef = useRef<HTMLTextAreaElement>(null);

useEffect(() => {
if (data) {
setFormData(data);
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -148,6 +162,12 @@ const ApplicationEditTab = () => {
onChange={(e) => handleFormTitleChange(e.target.value)}
placeholder='지원서 제목을 입력하세요'
></Styled.FormTitle>
<Styled.FormDescription
ref={descriptionRef}
value={formData.description}
onInput={(e) => handleFormDescriptionChange(e.currentTarget.value)}
placeholder='지원서 설명을 입력하세요'
></Styled.FormDescription>
<Styled.QuestionContainer>
{formData.questions.map((question, index) => (
<QuestionBuilder
Expand Down
1 change: 1 addition & 0 deletions frontend/src/types/application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export interface ChoiceProps extends QuestionComponentProps {

export interface ApplicationFormData {
title: string;
description: string;
questions: Question[];
}

Expand Down