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 님 익스텐션중에 테일윈드 프리티어가 있울거에요! 그거 찾아서 깔면 앞으로는 이 이슈는 안나올것 같아요

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

manNomi

너무 깔끔하게 작업해주셔서 좋내요!!
시작이 좋아서 앞으로가 기대되요

추가로 별건아니지만 브랜치명을 조금더 상세하게 가져가도 좋을것 같아요
따로 규칙을 정하진 않지만
fix :style 보다는 fix : style-token 등 다소 모호한 표현보다는 상세하게 가져가도 좋을듯 해요

리뷰남긴거 확인하고 한번 수정해주셔도 좋을것 같아요!

manNomi · 2026-01-19T08:34:43Z

tailwind.config.ts

        "gray-c": {
          "100": "#ececec",
+          "200": "#e5e7eb",
+          "300": "#f9fafb",


피그마상에서도 해당 디자인을 가져가나요?
색상이 원래 없었는데 달라져서 그런지 확인한번 해주셔도 좋을것 같아요
피그마 디자인 토큰에 없는 색상인데 누락된것인지 gray-c가 원래 존재하는지 피그마 dev모드 로 확인 해주시면 좋겠네요.

요약

피그마 dev모드에서 색상확인

피그마 dev 모드에서 디자인토큰이 gray-c 인지 확인

manNomi · 2026-01-19T08:35:57Z

src/styles/globals.css

+
+:root {
+  --radius: 8px;
+}


root 에서 수정하는것이 아닌 테일윈드 config에서 border가 누락된건지 보는게 좋아보여요!
root.css는 전역적인 css지만 저희는 테일윈드로 css 유틸리티를 제어하니까요!

결론
테일윈드 config 값이 제대로 들어가는지 확인필요

manNomi · 2026-01-19T08:36:42Z

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"


@enunsnv 님 익스텐션중에 테일윈드 프리티어가 있울거에요! 그거 찾아서 깔면 앞으로는 이 이슈는 안나올것 같아요

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

manNomi requested changes Jan 19, 2026

View reviewed changes

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 •

edited

Loading

Uh oh!

manNomi Jan 19, 2026

Uh oh!

coderabbitai bot Jan 19, 2026

Uh oh!

manNomi left a comment

Uh oh!

manNomi Jan 19, 2026

Uh oh!

manNomi Jan 19, 2026

Uh oh!

manNomi Jan 19, 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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manNomi Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

manNomi left a comment

Choose a reason for hiding this comment

Uh oh!

manNomi Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

manNomi Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

manNomi Jan 19, 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

coderabbitai bot Jan 18, 2026 •

edited

Loading