[refactor] 관리자 페이지에서 지원서 제작 시 글자 수 제한 수정 by oesnuj · Pull Request #568 · Moadong/moadong

oesnuj · 2025-07-22T09:51:58Z

#️⃣연관된 이슈

#566

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지/동영상 첨부 가능)

1. `APPLICATION_FORM.ts` 글자수 변경 사항 적용

질문 제목, 설명, 단답형, 장문형 필드의 maxLength 및 placeholder 값을 수정했습니다.
구체적인 내용은 코드레빗이...

2. 지원서 설명 `CustomTextArea`로 교체

지원서 설명 입력란에 글자 수 제한(3000자)를 적용하고, CustomTextArea로 교체해 UI/UX를 개선했습니다.
어제 @성원이 잘 만들어둔 스타일드 컴포넌트가 있었지만, 동일한 UI 구조의 customArea가 이미 있어서 업그레이드(?)했습니다.
게다가 maxLength, showMaxChar도 내장돼 있어서 검증 + UI/UX까지 나이스했습니다 😎

🫡 참고사항

QuestionTitle 글자 수 제한이 늘면서 UI 깨짐 현상 발생 중~
질문 입력창 줄바꿈 되게 하면 해결될 듯!

Summary by CodeRabbit

New Features
- 지원서 설명 입력란이 추가되었습니다.
Enhancements
- 질문 제목 입력란의 최대 글자 수가 50자로 늘어나고, 안내 문구가 변경되었습니다.
- 질문 설명 입력란의 최대 글자 수가 200자로 줄어들고, 안내 문구가 변경되었습니다.
- 단답형 입력란의 최대 글자 수가 100자로 늘어나고, 안내 문구가 변경되었습니다.
- 장문 입력란의 최대 글자 수가 1000자로 늘어나고, 안내 문구가 변경되었습니다.
Style
- 질문 컨테이너 상단에 여백이 추가되었습니다.
- 지원서 설명 입력란에 커스텀 텍스트 에어리어가 적용되었습니다.

netlify · 2025-07-22T09:52:03Z

✅ Deploy Preview for moadong ready!

Name	Link
🔨 Latest commit	`c86dd12`
🔍 Latest deploy log	https://app.netlify.com/projects/moadong/deploys/687f60e87888d30008e509b1
😎 Deploy Preview	https://deploy-preview-568--moadong.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 46 Accessibility: 89 Best Practices: 92 SEO: 92 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2025-07-22T09:52:04Z

Warning

`.coderabbit.yaml` has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

"""

Walkthrough

APPLICATION_FORM 상수의 필드들(placeholder 및 maxLength 값)이 수정되고, application description 입력란이 기존 textarea에서 CustomTextArea 컴포넌트로 교체되었습니다. 관련 스타일 컴포넌트(FormDescription)가 삭제되었으며, QuestionContainer의 스타일이 일부 조정되었습니다.

Changes

파일/경로	변경 요약
frontend/src/constants/APPLICATION_FORM.ts	APPLICATION_DESCRIPTION 필드 추가, 기존 필드들의 placeholder 및 maxLength 값 수정
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts	FormDescription styled component 삭제, QuestionContainer에 margin-top: 40px 추가
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx	textarea를 CustomTextArea로 교체, useRef 및 동적 높이 조절 로직 제거, 관련 이벤트 핸들러 및 prop 수정

Estimated code review effort

2 (~15분)

Possibly related issues

[refactor] 관리자 페이지에서 지원서 제작 시 글자 수 제한 수정 #566: 어드민 신청서 생성 페이지의 문자수 제한 및 placeholder 관련 요구사항을 다루고 있어 이번 PR의 변경사항과 직접적으로 연관됨.

Possibly related PRs

[feature] 지원서 질문 추가/삭제 및 장문형 질문 타입 구현 #454: CustomTextArea 컴포넌트 도입 및 APPLICATION_FORM의 maxLength 속성 추가와 직접적으로 연결됨.
[feature] 관리자 지원서 페이지에 설명을 추가한다 #563: FormDescription styled textarea 추가 및 application description 입력 로직을 도입한 PR로, 이번 PR에서 해당 부분이 삭제 및 교체됨.
[feature] 지원서의 설명을 확인할 수 있다. #556: 백엔드 엔티티 및 요청/응답 레코드에 application description과 title 길이 제한을 확장하는 PR로, 프론트엔드 상수 및 UI 변경과 도메인 개념이 연관됨.

Suggested labels

✨ Feature, 🔨 Refactor
"""

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 76f7ba5 and c86dd12.

📒 Files selected for processing (1)

frontend/src/constants/APPLICATION_FORM.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

frontend/src/constants/APPLICATION_FORM.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Redirect rules - moadong
GitHub Check: Header rules - moadong
GitHub Check: Pages changed - moadong

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (3)

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx (2)
1-1: 사용하지 않는 import를 제거해주세요.

useRef가 더 이상 사용되지 않는 것 같습니다. CustomTextArea 컴포넌트로 교체하면서 ref 관련 로직이 제거되었기 때문입니다.
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
169-169: QuestionContainer 태그의 불필요한 공백을 제거해주세요.

컴포넌트 태그의 닫는 부분에 불필요한 공백이 있습니다.
-        <Styled.QuestionContainer  >
+        <Styled.QuestionContainer>
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts (1)
23-23: 매직넘버를 명명된 상수로 교체하는 것을 고려해주세요.

코딩 가이드라인에 따라 매직넘버 40을 명명된 상수로 추출하면 유지보수성이 향상됩니다.

파일 상단에 다음과 같이 상수를 정의하는 것을 고려해주세요:
+const SPACING = {
+  QUESTION_CONTAINER_TOP: '40px',
+} as const;
+
 export const QuestionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top : 40px;
+  margin-top: ${SPACING.QUESTION_CONTAINER_TOP};
   gap: 83px;
 `;

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 44a0728 and 76f7ba5.

📒 Files selected for processing (3)

frontend/src/constants/APPLICATION_FORM.ts (1 hunks)
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts (1 hunks)
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx (2 hunks)

📓 Path-based instructions (2)

frontend/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (frontend/.cursorrules)

frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.

Files:

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx
frontend/src/constants/APPLICATION_FORM.ts

frontend/**/*.tsx

📄 CodeRabbit Inference Engine (frontend/.cursorrules)

frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.

Files:

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx

🧠 Learnings (3)

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts (2)

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx (10)

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Choose field-level or form-level cohesion based on form requirements.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.

frontend/src/constants/APPLICATION_FORM.ts (2)

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.

🧰 Additional context used

📓 Path-based instructions (2)

frontend/**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (frontend/.cursorrules)

frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.

Files:

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts
frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx
frontend/src/constants/APPLICATION_FORM.ts

frontend/**/*.tsx

📄 CodeRabbit Inference Engine (frontend/.cursorrules)

frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.

Files:

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.tsx