Skip to content

[feat] 결과 페이지 큐레이션 인라인 전환 #423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maehwasoo merged 19 commits into from
Feb 3, 2026
Merged

[feat] 결과 페이지 큐레이션 인라인 전환 #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
a65dcac
feat: 결과 페이지 좋아요 섹션 제거
maehwasoo Feb 2, 2026
e52392c
feat: 결과 큐레이션 인라인 전환
maehwasoo Feb 2, 2026
e9dad1e
feat: 결과 이미지 태그 및 스팟 UI 제거
maehwasoo Feb 2, 2026
b8d49ef
feat: 상품 카드 최대 UI 적용
maehwasoo Feb 2, 2026
5e20ed9
feat: 큐레이션 카드 링크 및 데이터 연결
maehwasoo Feb 2, 2026
4069e27
fix: vanilla-extract selector 오류 수정
maehwasoo Feb 3, 2026
c371754
fix: 카드 링크 키보드 전파 차단
maehwasoo Feb 3, 2026
ea81786
fix: 찜 수 아이콘 색상 정합
maehwasoo Feb 3, 2026
9127cbb
style: 필터 칩 스타일 피그마 반영
maehwasoo Feb 3, 2026
a43b9c9
style: 큐레이션 섹션 간격 피그마 반영
maehwasoo Feb 3, 2026
76da6f3
fix: 찜 수 하트 아이콘 XS 적용
maehwasoo Feb 3, 2026
657cfa4
fix: 링크 버튼 줄바꿈 방지
maehwasoo Feb 3, 2026
ecb0bff
fix: 감지 캐시 중복 저장 방지
maehwasoo Feb 3, 2026
ae344fa
fix: 큐레이션 prefetch 및 스크롤 정합
maehwasoo Feb 3, 2026
414f829
style: 카드 컬러칩 및 role 정리
maehwasoo Feb 3, 2026
81ef50f
fix: 큐레이션 영역 내부 스크롤로 제한
maehwasoo Feb 3, 2026
4092635
refactor: 결과 페이지 상단바 높이 상수화
maehwasoo Feb 3, 2026
4d7666c
refactor: 상단바 높이 토큰 통일
maehwasoo Feb 3, 2026
864ac0d
refactor: 상단바 높이 layoutVars로 통합
maehwasoo Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/pages/generate/components/filterChip/FilterChip.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import { colorVars } from '@styles/tokens/color.css';
export const filterChip = recipe({
base: {
height: '3.6rem',
padding: '0rem 1.4rem',
padding: '0 1.2rem',
textAlign: 'center',
borderRadius: '999px',
...fontStyle('body_r_14'),
...fontStyle('body_r_13'),
backgroundColor: colorVars.color.gray000,
color: colorVars.color.gray500,
border: `1px solid ${colorVars.color.gray300}`,
transition:
Expand All @@ -18,10 +19,10 @@ export const filterChip = recipe({
variants: {
selected: {
true: {
...fontStyle('body_m_14'),
backgroundColor: colorVars.color.primary_light2,
color: colorVars.color.primary,
border: `1px solid ${colorVars.color.primary}`,
...fontStyle('body_m_13'),
backgroundColor: colorVars.color.gray999,
color: colorVars.color.gray000,
borderColor: 'transparent',
},
false: {},
},
Expand Down
9 changes: 6 additions & 3 deletions src/pages/generate/pages/result/ResultPage.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ import { recipe } from '@vanilla-extract/recipes';
import { fontStyle } from '@/shared/styles/fontStyle';
import { animationTokens } from '@/shared/styles/tokens/animation.css';

import { layoutVars } from '@styles/global.css';
import { colorVars } from '@styles/tokens/color.css';

export const wrapper = style({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
minHeight: '66.7rem',
width: '100%',
height: `calc(100dvh - ${layoutVars.titleNavBarHeight})`, // TitleNavBar height
overflow: 'hidden',
});
Comment on lines 10 to 16
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Feb 3, 2026

Choose a reason for hiding this comment

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

P2 Badge Allow curation list to scroll within viewport

Setting the result page wrapper to a fixed 100dvh height with overflow: hidden means the page itself no longer scrolls. The new inline curation section can exceed the viewport on smaller screens, but resultSection doesn’t take the wrapper height, so the curation list isn’t constrained and gets clipped instead of scrollable (even though the curation content defines overflowY: auto). Users won’t be able to reach lower cards. Consider letting the wrapper scroll, or make resultSection flex to the wrapper height so the curation content can scroll inside.

Useful? React with 👍 / 👎.


export const resultSection = style({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
height: '100%',
minHeight: 0,
overflow: 'hidden',
});

export const imgArea = recipe({
Expand Down
Loading