Skip to content

[Refactor] 데이트 유형 테스트 닉네임이 나오도록 수정 #110

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
yujin5959 merged 1 commit into from
Aug 14, 2025
Merged

[Refactor] 데이트 유형 테스트 닉네임이 나오도록 수정 #110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion src/pages/dateTest/DatetestResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useQuery } from '@tanstack/react-query';
import type IDateTestResult from '@/types/datetest/datetest';
import type { TRelationTypeResponse } from '@/types/datetest/datetest';

import { useUserGrade } from '@/hooks/home/useUserGrade';

import { getRelationTypes } from '@/api/datetest/datetest';

const resultImages = import.meta.glob('../../images/testResults/*.png', {
Expand Down Expand Up @@ -116,6 +118,8 @@ export default function DateTestResultPage() {
};
});

const { data: gradeData } = useUserGrade();

Comment on lines +121 to +122
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

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

🧹 Nitpick (assertive)

등급 데이터 로딩/오류 상태 미처리 → 화면 품질 저하 가능성

현재는 data만 구조분해하여 로딩 중이거나 실패 시에도 헤더가 “ 님의”처럼 비어 보일 수 있습니다. 로딩/실패 시 대체 텍스트를 보여주면 UX가 개선됩니다. 아래 변경(헤더 라인 수정)만으로도 최소한의 폴백 처리가 가능하니 함께 반영 권장드립니다.

원하시면 isLoading/error까지 반영한 스켈레톤/플레이스홀더 처리 코드도 바로 제안드리겠습니다.

return (
<div className="flex flex-col p-6 max-w-3xl mx-auto">
<div className="rounded-[32px] px-[16px] py-[8px] font-bold text-sm text-center mt-[88px] mb-[16px] w-[143px]" style={{ backgroundColor: bgColor }}>
Expand All @@ -131,7 +135,7 @@ export default function DateTestResultPage() {
</div>

<h1 className="text-3xl font-bold mb-[40px]">
{resultData.typeDescription.preferenceType} 님의
{gradeData?.result.username} 님의
<br />
데이트 취향 유형 결과
</h1>
Comment on lines +138 to 141
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

잠재적 런타임 오류 방지 및 폴백 텍스트 추가

gradeData?.result.username는 result가 undefined일 때 런타임 오류가 날 수 있습니다. 또한 데이터 부재 시 “ 님의”처럼 어색하게 렌더링됩니다. 안전한 옵셔널 체이닝과 폴백을 적용해 주세요.

다음처럼 수정 제안드립니다:

-                {gradeData?.result.username} 님의
+                {(gradeData?.result?.username ?? '사용자')} 님의
📝 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
{gradeData?.result.username} 님의
<br />
데이트 취향 유형 결과
</h1>
{(gradeData?.result?.username ?? '사용자')} 님의
<br />
데이트 취향 유형 결과
</h1>
🤖 Prompt for AI Agents 
In src/pages/dateTest/DatetestResult.tsx around lines 138 to 141, the expression
gradeData?.result.username can throw if result is undefined and will produce
awkward output like " 님의" when username is missing; update the JSX to use safe
optional chaining (gradeData?.result?.username) and provide a sensible fallback
string (e.g., "사용자" or "참가자") so the rendered text reads correctly ("사용자 님의 데이트
취향 유형 결과"), or wrap the entire heading in a conditional that renders a full
fallback heading when data is absent.

Expand Down