[feature] 지원자 메모가 두 줄이 넘어가면 ...로 처리한다

[seongwon030]

#️⃣연관된 이슈

ex) #667

📝작업 내용

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

• 화면 비율 줄어들어도 자연스럽게 동작합니다. efcaee6

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

• 스타일
  • 지원자 목록의 메모 열을 최대 26자로 제한하고, 23자 이후는 말줄임표(…)로 표시하여 가독성을 개선했습니다.
  • 메모가 없거나 길이가 0인 경우 기존 대체 문구를 유지하며, 사용자의 기존 확인 흐름에 변화가 없습니다.
  • 셀 내용 길이를 균일화하여 표 레이아웃의 안정성과 일관성을 높였으며, 메모 열 외 다른 열과 기능에는 영향을 주지 않습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
moadong	Ready	Preview	Comment	Aug 17, 2025 8:00am

[coderabbitai]

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

지원자 테이블의 메모 렌더링과 스타일을 변경하여, 긴 메모는 문자열 단위로 잘라 앞 23자 뒤에 "..."을 붙이고, CSS로 텍스트 오버플로우(ellipsis)를 적용하도록 처리했습니다. 메모가 없거나 길이 0인 경우 기존 동작을 유지합니다.

Changes

Cohort / File(s)	Change Summary
Applicants memo truncation & styling frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx, frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts	Memo 컬럼 렌더링에서 memo 존재 시 길이 > 26이면 앞 23자 + "..."로 표시하도록 문자열 단위로 절단하는 로직 추가. 스타일 파일에 isMemo 프로프에 따른 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; 규칙 추가로 셀에 말줄임 적용. 다른 컬럼/로직은 변경 없음.

Sequence Diagram(s)

해당 변경은 렌더링 및 스타일 수정에 국한되어 제어 흐름 변경이 아니므로 시퀀스 다이어그램은 생략합니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
메모가 두 줄을 넘어가면 ... 처리 (MOA-168)	❓	문자 수 기준 절단 및 single-line CSS(white-space: nowrap)로 처리되어 "두 줄" 기준(멀티라인 clamp)인지 불확실함.

Out-of-scope changes

해당 PR 내에서 요구된 목표 외의 기능 변경은 발견되지 않았습니다.

Possibly related issues

• [feature] MOA-168 지원자 메모가 두 줄을 넘어가면 ...으로 처리한다 #667: 메모 말줄임 처리 관련 동일 주제 — 두 줄 클램프 요구와 관련.
• Moadong/moadong#666: 긴 메모에 대한 말줄임 처리 요구와 유사.

Possibly related PRs

• [feature] 지원자의 상태와 메모를 변경한다. #651 — ApplicantsTab의 메모 UI/렌더링 변경과 관련된 이전 PR.
• [feature] 지원자 현황 디자인을 적용한다 #659 — ApplicantsTab 스타일/메모 처리 관련 변경사항이 겹침.
• [feature] 동아리 관리자는 지원자를 확인할 수 있다. #612 — ApplicantsTab의 Memo 컬럼 구현 변경과 직접적 연관성 있음.

Suggested labels

✨ Feature

Suggested reviewers

• lepitaaar
• Zepelown

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/#667-memo-long-text-MOA-168

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.
  • 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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: 1

🧹 Nitpick comments (1)

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1)

142-146: 매직 넘버(26, 23)와 중첩 삼항 제거 권장

현재 값 26/23은 의미가 드러나지 않으며(매직 넘버), 중첩 삼항은 가독성을 해칩니다. 만약 문자열 기반 자르기를 유지해야 한다면:

• 상수로 추출해 의미를 드러내고(예: MEMO_MAX_CHARS, MEMO_SLICE_CHARS),
• IIFE나 별도 함수로 조건 분기를 치환하세요.
• 또한 slice는 이모지/결합 문자(서로게이트 페어)를 중간에서 자를 수 있으므로 Intl.Segmenter 기반의 자르기를 고려하세요.

예시(컴포넌트 상단 또는 파일 인접 위치에 상수 정의):

const MEMO_MAX_CHARS = 26;
const MEMO_SLICE_CHARS = 23;

예시(해당 블록 치환 – IIFE로 가독성 개선, 코드 포인트 안전 자르기):

{(() => {
  const memo = item.memo ?? '';
  if (!memo.trim().length) {
    return (
      <span style={{ color: '#989898' }}>
        메모를 입력하지 않았습니다.
      </span>
    );
  }
  if (memo.length > MEMO_MAX_CHARS) {
    // 코드 포인트 단위 자르기(기본 안전), 복잡한 결합 문자까지 안전하게 하려면 Intl.Segmenter 사용
    const safeSlice = Array.from(memo).slice(0, MEMO_SLICE_CHARS).join('') + '...';
    return safeSlice;
  }
  return memo;
})()}

참고: 요구사항은 “두 줄 초과 시 …”이므로, 가능하면 위 대안보다 CSS line-clamp 방식이 더 적합합니다.

📜 Review details

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

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 97aedd5 and c172db7.

📒 Files selected for processing (1)

• frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1 hunks)

🧰 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/ApplicantsTab/ApplicantsTab.tsx

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/ApplicantsTab/ApplicantsTab.tsx

[lepitaaar]

빠른 수정 수고하셨습니다!!

[coderabbitai]

Actionable comments posted: 1

📜 Review details

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

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c172db7 and efcaee6.

📒 Files selected for processing (1)

• frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

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/ApplicantsTab/ApplicantsTab.styles.ts