refactor(STUDY-308): 태블릿 화면에서 2열로 보이도록 그리드 추가

[KwonDeaGeun]

Summary by CodeRabbit

스타일

• 스터디 목록 카드와 그리드 레이아웃의 간격·정렬이 정돈되어 화면별 배치가 더 일관되게 표시됩니다.
• 카드가 전체 너비에 맞춘 단순한 레이아웃으로 조정되어 항목의 가독성과 세로 정렬이 개선되었습니다.
• 타이포그래피와 레이블(레벨/카테고리/시간/참여자/강사) 표시가 균일하게 정리되었습니다.
• 로딩/오류 상태의 레이아웃이 단순화되었습니다.

리팩터

• 사용자 관점 동작은 변경되지 않았고 내부 렌더 구조가 정리되었습니다.

[coderabbitai]

Warning

Rate limit exceeded

@KwonDeaGeun has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 24 minutes and 10 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Walkthrough

StudyListPage.tsx의 JSX 구조와 클래스 네이밍이 재정렬되었습니다. 렌더 흐름(헤더·생성 버튼·로딩·에러·스터디 리스트)은 유지되며 카드/그리드 레이아웃과 일부 클래스(카드 너비, 그리드 구성)가 단순화·조정되었습니다. 공용 API(프롭·데이터 흐름)는 변경되지 않았습니다.

Changes

Cohort / File(s)	Summary
StudyList 페이지 리팩터 src/pages/StudyListPage.tsx	JSX 마크업 재구성 및 들여쓰기 정리, 그리드와 카드 렌더링 구조 간소화, 카드 너비 제약 제거(명시적 sm:w-[300px] 등 삭제)로 전체 너비 기반 카드 레이아웃으로 변경, 로딩·에러 분기 단순화, 스터디 항목 필드 접근/타이포그래피 정규화, import/클래스명 미세 조정. 공용 인터페이스 불변.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 태블릿 화면에서 그리드 레이아웃을 2열로 추가하는 것을 명확하게 설명하고 있으며, 실제 변경사항(그리드 구조 단순화 및 레이아웃 조정)과 관련이 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/StudyListPage.tsx (1)

64-64: ⚠️ Potential issue | 🟠 Major

sm:w-[300px] 고정 너비가 새 그리드 레이아웃과 충돌합니다.

sm 브레이크포인트(640px) 이상에서 카드 너비가 300px로 고정되어, md:grid-cols-2 그리드 셀을 채우지 못하고 빈 공간이 생깁니다. 그리드가 카드 너비를 제어하도록 sm:w-[300px]을 제거하는 것을 권장합니다.

🔧 수정 제안

-                                className="w-full min-w-0 cursor-pointer border-gray-200 transition-shadow hover:shadow-md sm:w-[300px]"
+                                className="w-full min-w-0 cursor-pointer border-gray-200 transition-shadow hover:shadow-md"

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/pages/StudyListPage.tsx`:
- Around line 58-61: The Card element in StudyListPage (the JSX Card with
key={study.id} and onClick={() => onViewStudyDetail(study.id)}) uses a fixed
responsive width class `sm:w-[250px]` which conflicts with the grid column
sizing; remove `sm:w-[250px]` from the Card's className so the card uses
`w-full` to fill its grid cell, and if you need to cap card width instead use
`sm:max-w-[250px]` or constrain the grid container (e.g., `max-w-screen-...`)
rather than forcing a fixed cell width.

🧹 Nitpick comments (1)

src/pages/StudyListPage.tsx (1)

66-79: 모집 상태 판별 조건이 중복되어 있습니다.

Lines 69-70과 75-76에 동일한 조건(participantCount < maxParticipants || maxParticipants === 0)이 반복됩니다. 변수로 추출하면 가독성과 유지보수성이 좋아집니다.

제안된 수정

카드 렌더링 블록 상단에서 변수를 추출:

            studies.map((study: StudyListItem) => {
+             const isRecruiting =
+               study.participantCount < study.maxParticipants ||
+               study.maxParticipants === 0;
+             return (
              <Card
                key={study.id}
                ...
              >
                <CardContent className="p-6">
                  <div className="space-y-3">
                    <div>
                      <Badge
                        variant="secondary"
                        className={`${
-                         study.participantCount < study.maxParticipants ||
-                         study.maxParticipants === 0
+                         isRecruiting
                            ? "bg-blue-100 text-blue-800"
                            : "bg-gray-100 text-gray-800"
                        }`}
                      >
-                       {study.participantCount < study.maxParticipants ||
-                       study.maxParticipants === 0
+                       {isRecruiting
                          ? "모집중"
                          : "모집완료"}
                      </Badge>
                    </div>
                    ...
                  </div>
                </CardContent>
-             </Card>
+             </Card>);
+           })