[fix] 소개페이지 카드 위치 조정

[oesnuj]

#️⃣연관된 이슈

#818

📝작업 내용

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

1. 메인 페이지 동아리 카드 디자인 변경으로 어색해진 UI를 살짝 다듬었습니다.

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

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

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 소개 섹션의 카드 배치 위치 조정으로 화면 레이아웃 개선

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
moadong	Ready	Preview	Comment	Nov 9, 2025 9:58am

[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.
• You can also validate your configuration using the online YAML validator.
• 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

IntroSection 컴포넌트의 카드 이미지 배치 위치를 조정했습니다. 첫 번째 카드의 top 값을 300px에서 280px로, 두 번째 카드의 top 값을 300px에서 330px로 변경하여 소개 페이지의 시각적 레이아웃을 개선했습니다.

Changes

Cohort / File(s)	변경 사항
카드 포지션 조정 frontend/src/pages/IntroducePage/components/sections/1.IntroSection/IntroSection.tsx	cardPositions 배열의 첫 번째 요소 top: 300px → 280px, 두 번째 요소 top: 300px → 330px로 수정

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

• 단순 숫자 값 변경으로 로직 검토 불필요
• 시각적 배치 조정만 포함
• 다른 코드 영역에 영향 없음

Possibly related issues

• [fix] MOA-309 소개 페이지 카드 이미지 UI 수정 #818: 소개 페이지의 카드 이미지 레이아웃 조정으로 동일한 UI/UX 개선 목표를 공유합니다.

Suggested labels

🛠Fix

Suggested reviewers

• seongwon030
• seongje973
• lepitaaar

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목은 'IntroSection' 컴포넌트의 카드 위치 조정을 명확하게 설명하며 변경사항과 직접 관련됨.
Linked Issues check	✅ Passed	변경사항이 MOA-309 이슈의 '소개 페이지 카드 이미지 UI 수정' 목표와 일치하며, IntroSection의 카드 위치 조정이 UI 수정 요구사항을 충족함.
Out of Scope Changes check	✅ Passed	모든 변경사항이 카드 위치 조정에만 국한되어 있으며, 연결된 이슈(MOA-309)의 범위 내에 있음.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#818-update-intro-card-images-MOA-309

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/src/pages/IntroducePage/components/sections/1.IntroSection/IntroSection.tsx (1)

21-26: 매직 넘버를 명명된 상수로 교체 고려

cardPositions 배열에 하드코딩된 픽셀 값들이 사용되고 있습니다. 코딩 가이드라인에 따르면 가독성과 유지보수성을 위해 매직 넘버를 명명된 상수로 교체하는 것이 권장됩니다.

다음과 같이 리팩토링을 고려해보세요:

+const CARD_POSITIONS = {
+  CARD_1_TOP: '280px',
+  CARD_1_LEFT: '-300px',
+  CARD_2_TOP: '330px',
+  CARD_2_LEFT: '-630px',
+  CARD_3_TOP: '280px',
+  CARD_3_RIGHT: '-220px',
+  CARD_4_TOP: '310px',
+  CARD_4_RIGHT: '-580px',
+} as const;
+
 const cardPositions = [
-  { top: '280px', left: '-300px' },
-  { top: '330px', left: '-630px' },
-  { top: '280px', right: '-220px' },
-  { top: '310px', right: '-580px' },
+  { top: CARD_POSITIONS.CARD_1_TOP, left: CARD_POSITIONS.CARD_1_LEFT },
+  { top: CARD_POSITIONS.CARD_2_TOP, left: CARD_POSITIONS.CARD_2_LEFT },
+  { top: CARD_POSITIONS.CARD_3_TOP, right: CARD_POSITIONS.CARD_3_RIGHT },
+  { top: CARD_POSITIONS.CARD_4_TOP, right: CARD_POSITIONS.CARD_4_RIGHT },
 ];

As per coding guidelines

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira 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 0942f1b and f1d3455.

📒 Files selected for processing (1)

• frontend/src/pages/IntroducePage/components/sections/1.IntroSection/IntroSection.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/IntroducePage/components/sections/1.IntroSection/IntroSection.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/IntroducePage/components/sections/1.IntroSection/IntroSection.tsx

🔇 Additional comments (1)

frontend/src/pages/IntroducePage/components/sections/1.IntroSection/IntroSection.tsx (1)

22-23: 카드 위치 조정 변경사항 승인

첫 번째 카드의 top 위치를 280px로, 두 번째 카드를 330px로 조정하여 카드 간 시각적 간격을 개선했습니다. PR 목표와 일치하며 의도된 레이아웃 개선으로 보입니다.

[seongwon030]

소개페이지 카드 겹친부분 디자인 수정해주신 것 잘 봤어요 ~~