[Style] UI 재수정 by bini0918 · Pull Request #98 · checkmo2025/FE

bini0918 · 2026-02-16T18:20:19Z

📌 개요 (Summary)

변경 사항에 대한 간략한 요약을 적어주세요.
[style] UI 재수정 #96
global.css에 애니메이션 추가
피드백 내용 반영해 UI 수정
baseline-browser-mapping 설치 (dev pull 후 오류나길래 설치함)

🛠️ 변경 사항 (Changes)

📸 스크린샷 (Screenshots)

(UI 변경 사항이 있다면 첨부해주세요)

✅ 체크리스트 (Checklist)

빌드가 성공적으로 수행되었나요? (pnpm build)
린트 에러가 없나요? (pnpm lint)
불필요한 콘솔 로그나 주석을 제거했나요?

vercel · 2026-02-16T18:20:24Z

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

Project	Deployment	Actions	Updated (UTC)
check-mo	Ready	Preview	Feb 16, 2026 6:20pm

coderabbitai · 2026-02-16T18:20:30Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch style-96-ui-change

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

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.}

gemini-code-assist · 2026-02-16T18:20:47Z

Summary of Changes

Hello @bini0918, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 인터페이스의 전반적인 개선에 중점을 둡니다. 다양한 페이지와 컴포넌트에서 레이아웃과 스타일을 조정하여 사용자 경험을 향상시키고, 새로운 애니메이션을 도입하여 시각적 상호작용을 풍부하게 합니다. 또한, 핵심 종속성을 업데이트하고 댓글 및 공지사항 관리 기능을 개선하여 애플리케이션의 안정성과 기능성을 강화했습니다.

Highlights

UI/UX 개선: 도서 상세 페이지, 메인 페이지, 스토리 작성 페이지, 스토리 목록 페이지, 댓글 섹션, 검색 결과 카드, 도서 선택 모달, 헤더, 검색 모달 등 여러 UI 컴포넌트의 레이아웃과 스타일이 피드백을 반영하여 재조정되었습니다. 반응형 디자인과 시각적 일관성이 향상되었습니다.
애니메이션 추가: 전역 CSS에 fade-in 및 slide-down 키프레임 애니메이션과 유틸리티 클래스가 추가되어 모달 및 기타 UI 요소에 부드러운 전환 효과를 적용할 수 있게 되었습니다.
종속성 업데이트: baseline-browser-mapping 종속성이 package.json 및 pnpm-lock.yaml 파일에서 업데이트되었습니다.
댓글 기능 개선: 새로운 댓글이 목록의 가장 위에 추가되도록 댓글 추가 로직이 변경되어 최신 댓글을 더 쉽게 확인할 수 있습니다.
공지사항 페이지 기능 추가: 그룹 공지사항 페이지에 페이지네이션 기능이 추가되었으며, 공지사항 작성 버튼의 위치와 스타일이 조정되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

package.json
- baseline-browser-mapping 종속성이 업데이트되었습니다.
pnpm-lock.yaml
- baseline-browser-mapping 버전이 업데이트되었고, 여러 패키지 해상도에서 libc 사양이 제거되었습니다.
src/app/(main)/books/[id]/page.tsx
- BookStoryCard가 BookStoryCardLarge로 교체되었고, 메인 컨테이너의 최대 너비와 스토리 카드 그리드 간격이 조정되었습니다.
src/app/(main)/page.tsx
- h2 태그 스타일링이 제거되었고, onSubscribeClick 콘솔 로그가 업데이트되었으며, 스토리 카드 레이아웃이 조정되었습니다.
src/app/(main)/stories/new/page.tsx
- 책 선택 모달이 열려 있을 때 헤더 요소가 숨겨지도록 조건부 블록으로 래핑되었고, 모바일 전용 뒤로가기 버튼이 제거되었으며, 메인 콘텐츠 영역의 패딩이 조정되었습니다.
src/app/(main)/stories/page.tsx
- 탭 바의 상단 여백이 조정되었고, 탭 항목에 overflow-x-auto 및 shrink-0 스타일이 추가되었으며, 스토리 카드 그리드가 flex-wrap 및 justify-center를 사용하여 반응형으로 변경되었습니다.
src/app/globals.css
- fade-in 및 slide-down 키프레임 애니메이션과 해당 @utility 클래스가 추가되었습니다.
src/app/groups/[id]/admin/notice/new/page.tsx
- 문자열 리터럴이 작은따옴표에서 큰따옴표로 변경되었고, 모바일 전용 뒤로가기 버튼이 제거되었으며, 공지사항 작성 섹션의 패딩이 조정되었습니다.
src/app/groups/[id]/notice/page.tsx
- 이전/다음 버튼과 페이지 번호가 있는 페이지네이션 기능이 추가되었고, '공지사항 추가' 버튼의 위치와 스타일이 조정되었습니다.
src/components/base-ui/Comment/comment_list.tsx
- 답글 입력 필드의 너비가 min-w-0으로 변경되었고, 답글 버튼의 스타일이 shrink-0으로 조정되었습니다.
src/components/base-ui/Comment/comment_section.tsx
- 새로운 댓글을 목록의 끝이 아닌 시작 부분에 추가하도록 로직이 변경되었습니다.
src/components/base-ui/Search/search_bookresult.tsx
- 메인 컨테이너에서 max-w-[1040px]가 제거되었고, 제목 및 저자 잘림 처리가 조정되었으며, 연필 아이콘 버튼 스타일이 개선되었습니다.
src/components/layout/BookSelectModal.tsx
- 모달의 상단 위치가 top-[108px]에서 top-[60px]로 조정되었고, 검색 결과 레이아웃이 개선되었습니다.
src/components/layout/Header.tsx
- 헤더 패딩(py-5에서 py-3.5)이 조정되었고, 아이콘 컨테이너에 오른쪽 여백이 추가되었습니다.
src/components/layout/SearchModal.tsx
- animate-fade-in 및 animate-slide-down 유틸리티 클래스가 적용되었고, 모달의 상단 위치가 조정되었으며, 검색 입력 및 추천 도서 섹션의 레이아웃이 반응형으로 개선되었습니다.

Activity

bini0918 님이 UI 재수정 및 피드백 반영을 위해 이 PR을 생성했습니다.
이 PR에는 종속성 업데이트와 다양한 UI 컴포넌트의 스타일 및 레이아웃 조정이 포함되어 있습니다.
새로운 CSS 애니메이션 유틸리티 클래스가 추가되어 UI 전환 효과를 개선했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

이 PR은 전반적인 UI 개선과 애니메이션 추가에 중점을 둔 것으로 보입니다. global.css에 fade-in 및 slide-down 애니메이션을 추가하고, 이를 검색 모달에 적용하여 사용자 경험을 향상시켰습니다. 또한, 다양한 페이지에서 반응형 레이아웃을 개선하고, 코드 포맷팅을 일관성 있게 수정했습니다. 몇 가지 중복되는 스타일 클래스를 정리하고 불필요한 클래스를 제거하면 코드 유지보수성이 더욱 향상될 것입니다. 전반적으로 UI를 더 깔끔하고 일관성 있게 만드는 좋은 변경 사항입니다.

gemini-code-assist · 2026-02-16T18:22:16Z

src/app/(main)/books/[id]/page.tsx

-      <p className="text-Gray-7 body_1 t:subhead_1 mb-5">
-        도서 선택 <span className="text-primary-2">{bookData.title}</span> 중
-      </p>
+    <div className="mx-auto px-4 py-6 t:px-6 t:py-8">


이 div에 적용된 mx-auto 클래스는 불필요해 보입니다. width나 max-width가 설정되어 있지 않아 부모 요소의 전체 너비를 차지하게 되므로, mx-auto는 아무런 효과가 없습니다. 내부 div에서 이미 mx-auto를 사용하여 콘텐츠를 중앙 정렬하고 있으므로, 외부 div의 mx-auto는 제거하여 코드를 더 간결하게 만들 수 있습니다.

Suggested change

<div className="mx-auto px-4 py-6 t:px-6 t:py-8">

<div className="px-4 py-6 t:px-6 t:py-8">

gemini-code-assist · 2026-02-16T18:22:16Z

src/components/layout/SearchModal.tsx

-      <div className="mx-auto w-full max-w-[1440px] px-4 py-3 t:px-10 t:py-4">
-        <div className="flex items-center gap-3">
+      <div className="mx-auto w-full max-w-[1440px] px-4 py-3 t:py-4">
+        <div className="w-full t:w-[683px] d:w-[1400px] t:mx-auto flex items-center gap-3">


반복되는 w-full t:w-[683px] d:w-[1400px] t:mx-auto 클래스들을 공통 컨테이너 컴포넌트로 추출하는 것을 고려해 보세요. 이렇게 하면 코드 중복을 줄이고 유지보수성을 높일 수 있습니다. 예를 들어, SearchModalContainer와 같은 컴포넌트를 만들어 이 레이아웃을 재사용할 수 있습니다.

bini0918 added 14 commits February 17, 2026 01:36

style: 헤더 높이 수정

824ccdb

style: 헤더에 양옆 여백 추가

ff0d0c5

style: 책이야기 반응형 수정

309dcd7

style: 홈화면 여백 맞추기

1449764

style: 댓글 최신순으로 배열

a39c8b9

style: 대댓글 반응형 수정

8325a9a

style: 책이야기 작성 상단 반응형 수정

5146a95

style: 검색 모달 반응형 수정

7747f82

style: 검색 모달 애니메이션 추가

fc3f28b

style: 책이야기카드 사이 간격 조정

cd7be42

style: 공지사항 페이지네이션 추가

86ab527

style: 페이지네이션 반응형 추가

524c1ba

style: 페이지네이션 반응형 수정

f55edb8

style: 공지사항 작성 모바일 여백 추가

b10d661

gemini-code-assist bot reviewed Feb 16, 2026

View reviewed changes

shinwokkang merged commit 1ea3d5a into dev Feb 17, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Style] UI 재수정#98

[Style] UI 재수정#98
shinwokkang merged 14 commits intodevfrom
style-96-ui-change

bini0918 commented Feb 16, 2026 •

edited

Loading

Uh oh!

vercel bot commented Feb 16, 2026

Uh oh!

coderabbitai bot commented Feb 16, 2026

Review skipped

Uh oh!

gemini-code-assist bot commented Feb 16, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 16, 2026

Uh oh!

gemini-code-assist bot Feb 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

	<div className="mx-auto px-4 py-6 t:px-6 t:py-8">
	<div className="px-4 py-6 t:px-6 t:py-8">

Conversation

bini0918 commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 개요 (Summary)

🛠️ 변경 사항 (Changes)

📸 스크린샷 (Screenshots)

✅ 체크리스트 (Checklist)

Uh oh!

vercel bot commented Feb 16, 2026

Uh oh!

coderabbitai bot commented Feb 16, 2026

Review skipped

Uh oh!

gemini-code-assist bot commented Feb 16, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

bini0918 commented Feb 16, 2026 •

edited

Loading