[ON-218] 온서베이 디자인 시스템 전체 변경 #109
Conversation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
설정 및 전역 스타일 granite.config.ts, src/index.css, package.json |
브랜드 색상 기본값을 #15c67f로 변경. 전역 CSS 변수(--main-green, --button-color) 추가. @apps-in-toss/web-framework 버전 업데이트. |
상수 변경 src/constants/formController.ts, src/constants/payment.ts |
Next 버튼 배경색 변경(파랑 → 녹색). 결제 옵션 항목에 disabled?: boolean 추가 및 DESIRED_PARTICIPANTS 항목에 disabled 설정 추가. |
공통 CTA/버튼 스타일 업데이트 src/components/ExitConfirmDialog.tsx, src/components/estimate/*BottomSheet.tsx, src/components/payment/bottomSheet/*, src/pages/QuestionForm/components/bottomSheet/*, src/pages/mypage/components/OrderCancelBottomSheet.tsx, src/pages/mysurvey/components/SurveyFilterBottomSheet.tsx, 다수의 페이지 파일... |
ConfirmDialog.ConfirmButton, BottomSheet.CTA, FixedBottomCTA 등 주요 CTA에 inline style로 --button-background-color: #15c67f`` 적용(프레젠테이션 변경). |
배지·텍스트·리스트 UI src/components/QuestionBadge.tsx, src/components/surveyList/*, src/pages/multi... |
필수/선택 배지 텍스트 단축 및 필수 색상 파랑→녹색 변경. 설문 보상 문구 300원→200원. 리스트/레이블 색상 전환. |
긴급 설문 카드 UI src/components/surveyList/UrgentSurveyList.tsx |
카드 배경 그라디언트를 클래스 기반에서 inline CSS 변수 그라디언트로 전환. 아이콘 컨테이너 색상 변경 및 잔여시간 표시 구조 수정(아이콘 포함). |
결제·견적 관련 변경 src/components/payment/bottomSheet/PaymentBottomSheet.tsx, src/pages/payment/*, src/pages/estimate/* |
PaymentBottomSheet 옵션 타입에 disabled 추가, 선택 시 disabled 옵션 무시 로직 추가. 여러 결제/견적 페이지의 CTA 색상/스타일을 녹색으로 변경. PaymentSuccess에서 Asset 사용 변경(이미지↔아이콘 변경). |
폼/질문 페이지 UI src/pages/QuestionForm/**, src/pages/survey/**, 다수 페이지 |
FixedBottomCTA 및 CTA 버튼 색상/스타일을 녹색으로 통일. 일부 placeholder/문구 수정 및 선택지 활성 색상 파랑→녹색 변경. |
마이페이지 및 설문 관리 src/pages/Mypage.tsx, src/pages/mypage/components/OrderCard.tsx, src/pages/mypage/components/RefundPolicyNotice.tsx, src/pages/mysurvey/** |
충전/배지/컨테이너 배경 등 UI 색상 전환(파랑→녹색). BadgeColor 타입에서 blue→green으로 변경. FilterContent에 style?: React.CSSProperties prop 추가 및 적용. CSV 버튼 레이블/스타일 변경. |
홈·인트로·온보딩 src/pages/home/Home.tsx, src/pages/Intro.tsx, src/pages/Onboarding.tsx |
메인 배너 이미지 변경, 프로모션 합계 계산(단가 300→200 반영), 프로그레스바·온보딩바 색상 녹색으로 변경. FixedBottomCTA 스타일 적용. |
결제/요금 계산 로직 개편 src/utils/estimatePrice.ts, src/utils/paymentCalculator.ts |
기본 가격 모델을 참가자당 200원 보상 + 참가자 수 기반 계층 서비스 수수료(50→5000,100→10000,150→15000,200→20000)로 변경. 연령/지역/성별 추가금 로직을 고정 단가 방식으로 재정의 및 0건 가드 추가. |
NPS 유틸·결과 계산 변경 src/utils/nps.ts (신규), src/pages/result/NpsResultPage.tsx |
NPS 총응답/점수 계산 함수(calculateTotalResponses, calculateNps) 추가 및 NpsResultPage에서 해당 유틸 사용으로 리팩터. UI 바 스타일을 inline gradient로 변경. |
설문 필터링 로직 변경 src/hooks/useUserSurveys.ts |
Active/Closed 필터 로직 수정: ONGOING는 항상 포함, ACTIVE는 deadline 존재 및 미래인 경우만 포함. ActiveSurvey.deadline이 undefined 가능하도록 변경. |
공유 링크 재구성 src/utils/shareSurvey.ts |
webBaseUrl 기반 shareUrl 생성, schemeUrl 포맷 변경(intoss://onsurvey${path}), 환경별 OG 이미지 URL 도입, Toss 공유 호출 흐름 및 clipboard/온서 성공 콜백 처리 간소화. |
Sequence Diagram(s)
mermaid
sequenceDiagram
autonumber
participant User as 사용자(UI)
participant Page as 페이지(예: Survey)
participant ShareUtil as utils/shareSurvey
participant TossAPI as Toss 공유 엔드포인트 / getTossShareLink
User->>Page: 공유 버튼 클릭
Page->>ShareUtil: build shareUrl, schemeUrl, OG_IMAGE_URL
alt production
ShareUtil->>TossAPI: getTossShareLink(schemeUrl, OG_IMAGE_URL)
TossAPI-->>ShareUtil: 공유 링크/응답
ShareUtil-->>User: 브라우저 공유 혹은 리디렉트 (또는 클립보드 복사 대체)
else development / error
ShareUtil->>ShareUtil: navigator.clipboard.writeText(shareUrl)
ShareUtil-->>User: 클립보드 복사 성공 알림 (onShareSuccess?.())
end
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~60 minutes
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목이 주요 변경사항을 정확하게 반영합니다. 전체 디자인 시스템 변경(색상 체계 전환, UI 요소 스타일링)이 핵심이며, 제목이 이를 명확하게 요약합니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
- 📝 Generate docstrings
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| "flex flex-col items-center gap-1 transition-transform duration-150 ease-in-out active:scale-95 cursor-pointer select-none bg-transparent border-none p-0 min-w-[60px] shrink-0", | ||
| nextButton: | ||
| "flex flex-col justify-center items-center bg-[#3E8CF5] rounded-full! w-[75px] h-[60px] transition-all duration-150 ease-in-out active:bg-[#2D6BC7] active:scale-95 hover:bg-[#4A9AFF] select-none border-none p-0", | ||
| "flex flex-col justify-center items-center bg-[#15c67f] rounded-full! w-[75px] h-[60px] transition-all duration-150 ease-in-out active:bg-[#2D6BC7] active:scale-95 hover:bg-[#4A9AFF] select-none border-none p-0", |
There was a problem hiding this comment.
지금 메인 컬러값을 하드코딩해서 넣고 있는데 추후에 이걸 변수로 만들어서 관리하면 더 좋을 것 같습니다
chldsbdud
dismissed stale reviews from coderabbitai[bot] and 78-artilleryman
via
536b107
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/home/Home.tsx (1)
22-265: Sentry 에러 캡처 및 클릭 이벤트 추적을 추가하세요.코딩 가이드라인에 따라 다음을 구현해야 합니다:
- 에러 캡처 (필수):
ongoingSurveysError가 발생했을 때 Sentry로 캡처하여 모니터링이 필요합니다.- UI 클릭 추적 (권장): 주요 버튼 클릭 이벤트에
Sentry.startSpan을 추가하여 사용자 행동을 추적하면 좋습니다.코딩 가이드라인 기준
🔎 Sentry 통합 예시
파일 상단에 Sentry import 추가:
+import * as Sentry from '@sentry/react'; import { closeView } from "@apps-in-toss/web-framework";에러 캡처 추가 (필수):
+ // ongoingSurveysError가 발생한 경우 Sentry로 캡처 + useEffect(() => { + if (ongoingSurveysError) { + Sentry.captureException(ongoingSurveysError, { + tags: { page: 'home', error_type: 'ongoing_surveys_fetch' } + }); + } + }, [ongoingSurveysError]); + return (주요 클릭 이벤트 추적 예시 (권장):
const handleCreateSurvey = () => { + Sentry.startSpan( + { name: 'Create Survey Button Click', op: 'ui.click' }, + (span) => { + span.setAttribute('page', 'home'); + navigate("/createFormStart"); + } + ); - navigate("/createFormStart"); };
🧹 Nitpick comments (1)
src/pages/home/Home.tsx (1)
142-142: z-index 값 관리를 고려해보세요.
z-999는 매우 높은 값입니다. 컴포넌트 전체에서 여러 요소가 동일한 높은 z-index를 사용하고 있어, 향후 레이어링 충돌이 발생할 수 있습니다. 프로젝트 전반에서 구조화된 z-index 스케일(예: CSS 변수 또는 상수)을 정의하는 것을 권장합니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/home/Home.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/sentry.mdc)
**/*.{js,jsx,ts,tsx}: UseSentry.captureException(error)to capture exceptions and log errors in Sentry, particularly in try-catch blocks or areas where exceptions are expected
Create spans for meaningful actions within applications such as button clicks, API calls, and function calls usingSentry.startSpanwith meaningful names and operations
For API calls, useSentry.startSpanwithop: 'http.client'to create spans wrapping fetch or HTTP requests with the formatGET /api/path/{id}
Reference the Sentry logger usingconst { logger } = Sentrywhen implementing logging
Uselogger.fmttemplate literal function to bring variables into structured logs for better log formatting and variable interpolation
Use appropriate logger methods based on severity:logger.trace(),logger.debug(),logger.info(),logger.warn(),logger.error(), andlogger.fatal()
Files:
src/pages/home/Home.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/sentry.mdc)
**/*.{jsx,tsx}: In component action handlers, useSentry.startSpanwithop: 'ui.click'to create spans for button clicks and other UI interactions, and usespan.setAttribute()to add metrics
Import Sentry usingimport * as Sentry from '@sentry/react'when using logging functionality
Files:
src/pages/home/Home.tsx
🔇 Additional comments (5)
src/pages/home/Home.tsx (5)
91-91: 프로모션 금액 계산 변경을 확인하세요.설문당 금액이 300원에서 200원으로 변경되었습니다. 이는 사용자에게 표시되는 프로모션 총액에 직접 영향을 미치는 비즈니스 로직 변경입니다. 의도된 변경사항이 맞는지, 정산/가격 구조 변경과 일치하는지 확인이 필요합니다.
188-188: LGTM!ProgressBar 색상이 새로운 브랜드 컬러(#15c67f)로 올바르게 업데이트되었습니다.
208-208: LGTM!CTA 섹션 배경색이 새로운 디자인 시스템에 맞춰 green-50으로 올바르게 변경되었습니다.
6-6: HomeBanner.png 파일 확인됨 - 배포 시 문제 없음
HomeBanner.png파일이src/assets/디렉토리에 정상적으로 존재하여 import 경로가 올바릅니다. 배포 전 파일 누락에 대한 우려는 해소되었습니다.
229-229: 아이콘이 이미 코드에서 사용 중이므로 존재 여부가 확인됨
icon-document-check-lines-fill아이콘은 현재 src/pages/home/Home.tsx의 Asset.Icon 컴포넌트에서 활발히 사용 중입니다. TDS Mobile의 아이콘 명명 규칙과 일치하며(icon-{type}-{variant}패턴), 코드베이스의 다른 아이콘들(icon-document-contract-mono,icon-o-mono등)과 동일한 방식으로 사용되고 있습니다. 아이콘이 실제로 존재하고 접근 가능한 것으로 보입니다.
📌 주요 변경 사항
이번 PR에는 이전에 만들어두었던 브랜치에서 작업을 이어오면서
변경 사항이 다소 많이 포함되었습니다. 리뷰 시 참고 부탁드립니다.
다음부터는 jira에 올라가있는 작업 단위 분리해서 진행하겠습니다!
✅ 리뷰 요청 사항 (Need Review)
🔗 공유하기 / OG 이미지 관련 안내
현재 공유하기 기능은 아직 배포되지 않은 버전 기준으로 구현되어
실제 공유 링크 및 OG 이미지 노출 여부는 확인이 어려운 상태입니다.
배포 이후에 정상 동작 및 OG 이미지 노출 여부를 추가로 확인할 예정입니다.
🎨 스크린샷 (선택)
2026-01-06.5.online-video-cutter.com.mp4
Summary by CodeRabbit
새로운 기능
버그 수정
개선사항
✏️ Tip: You can customize this high-level summary in your review settings.