style: stage UI 수정 #352

enunsnv · 2026-01-18T14:03:44Z

작업 내용

Login page

stage border 라디우스 깨짐
폰트 굵기 차이

파견학교 검색 page

border 깨짐 현상
검색 입력 컴포넌트 테두리 색상 변경 필요

특이 사항

일부 디자인 시스템 추가 및 수정

리뷰 요구사항 (선택)

디자인 시스템 변동 사항이 있으므로 현 코드와 같이 수정해도 괜찮은지 검토 부탁드리겠습니다!

coderabbitai · 2026-01-18T14:03:54Z

주요 내용 설명

이 풀 요청은 디자인 시스템의 색상 토큰을 일관되게 업데이트하는 스타일링 개선사항입니다. 기존의 표준 회색 색상(gray-200, gray-50)을 커스텀 회색 팔레트(gray-c-200, gray-c-300)로 대체하고, 전역 CSS에 새로운 반경(radius) 변수를 추가했습니다. 로직이나 기능에는 영향을 주지 않으며, 순수하게 시각적 스타일링만 변경됩니다.

이전 버전

1. 프로필 카드 컨테이너 스타일 업데이트

- `bg-gray-50`에서 `bg-gray-c-300`으로 배경색 변경
- 마진 클래스 순서 조정

2. 검색 바 입력 필드 테두리 색상 변경

- `border-gray-200`에서 `border-gray-c-200`으로 테두리 색상 업데이트
- 클래스 순서가 약간 조정됨

3. 전역 CSS에 반경 변수 추가

- `:root` 블록에 `--radius: 8px` 변수 정의
- 스타일시트 전역에서 사용 가능한 새로운 토큰 제공

4. Tailwind 구성 파일 확장

- `gray-c` 색상 팔레트에 두 가지 새 음영 추가
- `"200": "#e5e7eb"`와 `"300": "#f9fafb"` 정의

예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~10분

제안되는 리뷰어

wibaek

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	작업 내용과 특이 사항이 포함되어 있으나, 관련 이슈 번호가 누락되었습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	제목이 디자인 시스템 추가 및 스타일 수정이라는 실제 변경 사항의 일부를 언급하지만, 주요 변경 내용(CSS 변수 추가, 색상 토큰 정의, UI 컴포넌트 스타일 업데이트)을 구체적으로 설명하지 못하고 있습니다.

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

✨ 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

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

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/app/my/_ui/MyProfileContent/index.tsx`:
- Line 83: 해당 JSX div의 className("bg-gray-c-300 mb-4 rounded-lg p-4")가 프로젝트의
Prettier/Tailwind 클래스 정렬 규칙을 따르지 않아 CI에서 실패합니다; MyProfileContent 컴포넌트의 해당
div(className 속성)를 프로젝트의 표준 Tailwind 클래스 순서로 재정렬하고 저장 전 Prettier 또는 ESLint
--fix를 실행해 자동 정렬을 적용하세요 (대상 식별자: MyProfileContent 내 문제의 div의 className).

In `@src/app/university/search/SearchBar.tsx`:
- Line 62: SearchBar.tsx has a Prettier error due to unordered Tailwind/CSS
classes in the className prop; open the SearchBar component and locate the
className string on the element (the className in SearchBar.tsx) and sort the
classes to match the project's Prettier/Tailwind order used in CI (e.g., group
by layout, box-model, background/border, spacing, typography, state) so the
class list becomes deterministic and CI will pass; update only the className
string ordering and run Prettier to verify.

coderabbitai · 2026-01-18T14:06:39Z

src/app/my/_ui/MyProfileContent/index.tsx

      </div>
      {/* Profile Card */}
-      <div className="mb-4 rounded-lg bg-gray-50 p-4">
+      <div className="bg-gray-c-300 mb-4 rounded-lg p-4">


⚠️ Potential issue | 🟡 Minor

Prettier 오류가 납니다 — 클래스 순서를 정리해주세요.
CI 로그에 맞춰 클래스 순서를 바꿔야 통과합니다.

🧹 수정 제안

- <div className="bg-gray-c-300 mb-4 rounded-lg p-4"> + <div className="mb-4 rounded-lg bg-gray-c-300 p-4">

📝 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

<div className="bg-gray-c-300 mb-4 rounded-lg p-4">

<div className="mb-4 rounded-lg bg-gray-c-300 p-4">

🧰 Tools

🪛 GitHub Actions: CI

[error] 83-83: Prettier formatting issue. Replace bg-gray-c-300 mb-4 rounded-lg with mb-4 rounded-lg bg-gray-c-300.

🤖 Prompt for AI Agents

In `@src/app/my/_ui/MyProfileContent/index.tsx` at line 83, 해당 JSX div의 className("bg-gray-c-300 mb-4 rounded-lg p-4")가 프로젝트의 Prettier/Tailwind 클래스 정렬 규칙을 따르지 않아 CI에서 실패합니다; MyProfileContent 컴포넌트의 해당 div(className 속성)를 프로젝트의 표준 Tailwind 클래스 순서로 재정렬하고 저장 전 Prettier 또는 ESLint --fix를 실행해 자동 정렬을 적용하세요 (대상 식별자: MyProfileContent 내 문제의 div의 className).

coderabbitai · 2026-01-18T14:06:39Z

src/app/university/search/SearchBar.tsx

          type="text"
          placeholder={"해외 파견 학교를 검색하세요."}
-          className="w-full rounded-lg border border-gray-200 bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"
+          className="border-gray-c-200 w-full rounded-lg border bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"


⚠️ Potential issue | 🟡 Minor

Prettier 오류가 납니다 — 클래스 순서를 정리해주세요.
CI 로그와 동일하게 정렬해야 합니다.

🧹 수정 제안

- className="border-gray-c-200 w-full rounded-lg border bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary" + className="w-full rounded-lg border border-gray-c-200 bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"

📝 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

className="border-gray-c-200 w-full rounded-lg border bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"

className="w-full rounded-lg border border-gray-c-200 bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"

🧰 Tools

🪛 GitHub Actions: CI

[error] 62-62: Prettier formatting issue. Replace border-gray-c-200 w-full rounded-lg border with w-full rounded-lg border border-gray-c-200.

🤖 Prompt for AI Agents

In `@src/app/university/search/SearchBar.tsx` at line 62, SearchBar.tsx has a Prettier error due to unordered Tailwind/CSS classes in the className prop; open the SearchBar component and locate the className string on the element (the className in SearchBar.tsx) and sort the classes to match the project's Prettier/Tailwind order used in CI (e.g., group by layout, box-model, background/border, spacing, typography, state) so the class list becomes deterministic and CI will pass; update only the className string ordering and run Prettier to verify.

enunsnv added 3 commits January 10, 2026 00:42

style: border radius 기본값(--radius) 추가

0deb86c

style: gray-c 색상 추가 및 SearchBar border 수정

5c57665

style: gray-c 색상 추가 및 MyProfileContent bg 색상 수정

321ed71

enunsnv requested review from khwww, manNomi and wibaek as code owners January 18, 2026 14:03

enunsnv changed the title ~~Fix/style~~ style: Jan 18, 2026

enunsnv changed the title ~~style:~~ style: stage 스타일 수정 Jan 18, 2026

enunsnv changed the title ~~style: stage 스타일 수정~~ style: stage UI 수정 Jan 18, 2026

coderabbitai bot reviewed Jan 18, 2026

View reviewed changes

manNomi added need_review do not merge labels Jan 18, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

style: stage UI 수정 #352

style: stage UI 수정 #352

Uh oh!

enunsnv commented Jan 18, 2026

Uh oh!

coderabbitai bot commented Jan 18, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Jan 18, 2026

Uh oh!

coderabbitai bot Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div className="bg-gray-c-300 mb-4 rounded-lg p-4">
	<div className="mb-4 rounded-lg bg-gray-c-300 p-4">

	className="border-gray-c-200 w-full rounded-lg border bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"
	className="w-full rounded-lg border border-gray-c-200 bg-k-50 p-3 pl-4 pr-10 text-k-600 focus:border-primary"

style: stage UI 수정 #352

Are you sure you want to change the base?

style: stage UI 수정 #352

Uh oh!

Conversation

enunsnv commented Jan 18, 2026

작업 내용

특이 사항

리뷰 요구사항 (선택)

Uh oh!

coderabbitai bot commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

주요 내용 설명

이전 버전

1. 프로필 카드 컨테이너 스타일 업데이트

2. 검색 바 입력 필드 테두리 색상 변경

3. 전역 CSS에 반경 변수 추가

4. Tailwind 구성 파일 확장

예상 코드 리뷰 노력

제안되는 리뷰어

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Jan 18, 2026 •

edited

Loading