Skip to content

feat: [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용#59

Merged
youngminss merged 5 commits intomainfrom
feature/qa-for-global-bg-and-route
Feb 5, 2026
Merged

feat: [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용#59
youngminss merged 5 commits intomainfrom
feature/qa-for-global-bg-and-route

Conversation

@youngminss
Copy link
Member

@youngminss youngminss commented Feb 3, 2026

🎯 feat: [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용

Global body background color, Root 컴포넌트 box shadow, semantic color token 업데이트 및 지역 옵션 정렬 수정

📑 작업 상세 내역

  • Global body에 bg-website 배경색 적용
  • Layout Root 컴포넌트에 shadow-drop 그림자 효과 적용
  • shadow.css 파일 추가 및 globals.css에 import
  • Semantic color token 업데이트
    • Background: website 토큰 추가
    • Surface: active, dark 토큰 추가 / disabled 값 변경
    • Text: disabled 값 변경 (gray-400 → gray-300)
    • Border: inverse 토큰 추가 / strong 토큰 제거
    • Icon: strong 토큰 추가
    • Button: inverse, inverseHover, inverseDisabled 토큰 추가 / tertiaryDisabled 값 변경
  • REGION_OPTIONS label 오름차순 정렬 (강남역 → 공덕역 → 홍대입구역)
  • format script에 css 파일 확장자 추가
  • css 파일 포맷팅 수정 (trailing whitespace, indentation, newline)

🙏 리뷰 요청 사항

  • Semantic color token 변경 사항이 기존 컴포넌트에 영향을 주는지 확인 부탁드립니다.

📃 참고 자료

🖼️ 작업 결과물

image

youngminss and others added 3 commits February 4, 2026 00:53
지역 옵션을 label 기준 오름차순으로 정렬
- 변경 전: 홍대입구역 → 강남역 → 공덕역
- 변경 후: 강남역 → 공덕역 → 홍대입구역

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@youngminss youngminss self-assigned this Feb 3, 2026
@github-actions github-actions bot requested a review from RookieAND February 3, 2026 16:43
@youngminss youngminss added ✨ Feature 기능 개발 📤 In Progress 현재 작업 중인 PR 입니다. labels Feb 3, 2026
@github-actions github-actions bot added ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 and removed 📤 In Progress 현재 작업 중인 PR 입니다. labels Feb 3, 2026
@youngminss youngminss added 🧑‍🎨 Style 스타일 변경 및 퍼블리싱 and removed ✨ Feature 기능 개발 labels Feb 3, 2026
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @youngminss, I'm Gemini Code Assist1! 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

  • 전역 배경색 적용: 서비스 전체에 일관된 배경색을 적용하기 위해 body 태그에 ygi:bg-bg-website 클래스를 추가했습니다.
  • Layout Root 그림자 효과 추가: 메인 레이아웃 컨테이너인 Root 컴포넌트에 ygi:shadow-drop 클래스를 적용하여 그림자 효과를 추가했습니다.
  • 새로운 스타일 정의 및 색상 상수 업데이트: 그림자 효과를 위한 shadow.css 파일을 새로 추가하고, 전역 배경색 및 기타 UI 요소에 사용될 새로운 색상 상수(bg.website, surface.active, surface.dark 등)를 color.tscolor.css에 정의했습니다.
  • 지역 옵션 순서 변경: 의견 수렴을 위한 지역 옵션 목록에서 '홍대' 지역의 순서를 변경했습니다.

🧠 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
  • app/globals.css
    • src/styles/shadow.css 파일을 임포트하여 전역 스타일로 그림자 정의를 포함시켰습니다.
  • app/layout.tsx
    • body 태그에 ygi:bg-bg-website 클래스를 추가하여 전역 배경색을 설정했습니다.
  • src/components/layout/Root.tsx
    • Root 컴포넌트의 최상위 divygi:shadow-drop 클래스를 적용하여 그림자 효과를 추가했습니다.
  • src/constants/color.ts
    • bg.website 색상 상수를 추가했습니다.
    • surface 객체에 activedark 색상 상수를 추가하고 기존 항목들의 순서를 조정했습니다.
    • text.disabled의 색상 값을 변경했습니다.
    • border.inverse 색상 상수를 추가했습니다.
    • icon.strong 색상 상수를 추가했습니다.
    • button 객체에 inverse, inverseHover, inverseDisabled 색상 상수를 추가하고 tertiaryDisabled의 색상 값을 변경했습니다.
  • src/constants/gathering/opinion/region.ts
    • REGION_OPTIONS 배열 내에서 HONGDAE 지역의 순서를 변경했습니다.
  • src/styles/color.css
    • --color-bg-website CSS 변수를 새로 정의했습니다.
    • --color-surface-active--color-surface-dark CSS 변수를 새로 정의하고 surface 관련 변수들의 순서를 조정했습니다.
    • --color-text-disabled CSS 변수의 값을 변경했습니다.
    • --color-border-inverse CSS 변수를 새로 정의했습니다.
    • --color-icon-strong CSS 변수를 새로 정의했습니다.
    • --color-button-tertiary-disabled CSS 변수의 값을 변경하고 --color-button-inverse, --color-button-inverse-hover, --color-button-inverse-disabled CSS 변수를 새로 정의했습니다.
  • src/styles/shadow.css
    • shadow-drop CSS 변수를 정의하는 새로운 파일을 추가했습니다.
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.

Footnotes

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

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

레이아웃 스타일 변경과 관련된 코드 수정 사항을 검토했습니다. src/components/layout/Root.tsx 파일에서 스타일 가이드 위반 사항을 발견하여 수정 의견을 남깁니다.

@github-actions github-actions bot added ✨ Feature 기능 개발 and removed 🧑‍🎨 Style 스타일 변경 및 퍼블리싱 ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 labels Feb 3, 2026
youngminss and others added 2 commits February 4, 2026 01:52
prettier format 대상에 css 파일 포함

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- trailing whitespace 제거
- indentation 통일
- 파일 끝 newline 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@youngminss youngminss added the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Feb 3, 2026
@github-actions github-actions bot added ✨ Feature 기능 개발 and removed ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 ✨ Feature 기능 개발 labels Feb 3, 2026
@youngminss youngminss added the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Feb 3, 2026
Copy link
Collaborator

@RookieAND RookieAND left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@youngminss youngminss removed the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Feb 5, 2026
@youngminss youngminss merged commit 384b56f into main Feb 5, 2026
7 checks passed
RookieAND pushed a commit that referenced this pull request Feb 16, 2026
* feat: global Layout Root 컴포넌트에 box shadow 적용

* feat: 업데이트된 semantic color token 추가 및 global body background color 추가

* fix: REGION_OPTIONS label 오름차순 정렬

지역 옵션을 label 기준 오름차순으로 정렬
- 변경 전: 홍대입구역 → 강남역 → 공덕역
- 변경 후: 강남역 → 공덕역 → 홍대입구역

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* chore: format script에 css 파일 확장자 추가

prettier format 대상에 css 파일 포함

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* style: css 파일 포맷팅 수정

- trailing whitespace 제거
- indentation 통일
- 파일 끝 newline 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
github-actions bot pushed a commit that referenced this pull request Feb 16, 2026
## 1.0.0-beta.1 (2026-02-16)

### Features

* [#70](#70) ([#72](#72)) ([b676e0e](b676e0e))
* [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d))
* [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f))
* api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41)
* Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607))
* Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f))
* Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc))
* DotsLoader 컴포넌트 추가  ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49)
* GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa))
* GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded))
* IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c)
* InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2))
* Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71))
* Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f))
* Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf))
* Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a))
* Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05))
* Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0))
* 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34)
* 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20))
* 프로젝트 폴더 구조 반영 ([e54962d](e54962d))

### Bug Fixes

* 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4))
* 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231))
* Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56)
* cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d))
* CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8))
* Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9))
* Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1))
* Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da))
* nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75))
* PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12))
* 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844))
* 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52))
* 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65)
* 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed))
* 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f))
* 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da))
* 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1))
* 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e))
* 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025))

### Code Refactoring

* Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17))

### Build System

* Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163))

### Documentation

* 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))
github-actions bot pushed a commit that referenced this pull request Feb 16, 2026
## 1.0.0 (2026-02-16)

### Features

* [#70](#70) ([#72](#72)) ([b676e0e](b676e0e))
* [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d))
* [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f))
* analytics 개선 및 네이버 서치 어드바이저 등록 ([#88](#88)) ([4372aa5](4372aa5))
* api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41)
* Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607))
* Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f))
* Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc))
* DotsLoader 컴포넌트 추가  ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49)
* GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa))
* GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded))
* IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c)
* InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2))
* Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71))
* Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f))
* Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf))
* Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a))
* Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05))
* Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0))
* 모임 생성 완료 페이지 UI 리뉴얼 ([#89](#89)) ([17a3fc1](17a3fc1))
* 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34)
* 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20))
* 프로젝트 폴더 구조 반영 ([e54962d](e54962d))

### Bug Fixes

* 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4))
* 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231))
* Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56)
* cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d))
* CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8))
* Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9))
* Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1))
* Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da))
* nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75))
* PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12))
* 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844))
* 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52))
* 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65)
* 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed))
* 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f))
* 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da))
* 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1))
* 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e))
* 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025))

### Code Refactoring

* Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17))

### Build System

* Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163))

### Documentation

* 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants