Skip to content

fix(web): 한국어 문구와 모션 접근성을 다듬는다 #260

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
pbk95120 merged 1 commit into from
Sep 1, 2026
Merged

fix(web): 한국어 문구와 모션 접근성을 다듬는다 #260

Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions apps/web/app/(tabs)/mypage/_components/inquiry-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ export function InquirySheet({ open, onOpenChange }: InquirySheetProps) {
궁금한 점이나 불편한 점이 있으신가요?
<br />
{openChatUrl
? "카카오톡 오픈채팅으로 편하게 문의해주세요."
: "아래 주소로 편하게 문의해주세요."}
? "카카오톡 오픈채팅으로 편하게 문의해 주세요."
: "아래 주소로 편하게 문의해 주세요."}
</p>
{/*
이메일로 떨어진 경우에만 주소를 보여준다. `openExternal`은 실패해도 false만 돌려주므로
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/goal/_components/goal-detail-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function GoalDetailSkeleton() {
</div>

<div className="flex flex-col gap-4 px-5 pt-8">
{/* 서비스 사용기간 / 목표일까지 */}
{/* 서비스 사용 기간 / 목표일까지 */}
<section className="flex rounded-2xl bg-gray-50 p-5">
<div className="flex flex-1 flex-col gap-0.5">
<Skeleton className="h-5 w-24 bg-gray-100" />
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/goal/_components/goal-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export function GoalDetail() {
<div className="flex flex-col gap-4 px-5 pt-8">
<section className="flex rounded-2xl bg-gray-50 p-5">
<div className="flex flex-1 flex-col gap-0.5">
<p className="text-body-b2-500 text-gray-700">서비스 사용기간</p>
<p className="text-body-b2-500 text-gray-700">서비스 사용 기간</p>
<p className="text-headline-h2-700 text-gray-900">{goal.usageMonths}개월째</p>
</div>
<div className="flex flex-1 flex-col gap-0.5">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/goal/_components/goal-edit-sheet.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ describe("GoalEditSheet", () => {
});
fireEvent.click(screen.getByRole("button", { name: "완료" }));

expect(screen.getByText("목표 기간은 3개월 이상으로 입력해주세요.")).toBeInTheDocument();
expect(screen.getByText("목표 기간은 3개월 이상으로 입력해 주세요.")).toBeInTheDocument();
expect(updateGoal).not.toHaveBeenCalled();
});

Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/goal/_components/goal-edit-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function GoalEditSheet({

// 하한은 입력 중에 막지 않으므로 여기서 거른다 — 넘기면 서버가 400으로 되돌린다.
if (periodMonths != null && periodMonths < MIN_GOAL_PERIOD_MONTHS) {
setSubmitError(`목표 기간은 ${MIN_GOAL_PERIOD_MONTHS}개월 이상으로 입력해주세요.`);
setSubmitError(`목표 기간은 ${MIN_GOAL_PERIOD_MONTHS}개월 이상으로 입력해 주세요.`);
return;
}

Expand Down
8 changes: 4 additions & 4 deletions apps/web/app/mission/history/_components/mission-history.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,13 @@ function HistoryLoading() {
<div aria-label="미션 내역 불러오는 중" className="flex flex-col gap-6 px-5" role="status">
{Array.from({ length: 3 }, (_, index) => (
<div className="flex flex-col gap-2.5" key={index}>
<div className="h-[21px] w-24 animate-pulse rounded bg-gray-50" />
<div className="h-[21px] w-24 animate-pulse rounded bg-gray-50 motion-reduce:animate-none" />
<div className="flex h-[91px] items-center justify-between">
<div className="flex flex-col gap-2">
<span className="h-[34px] w-28 animate-pulse rounded bg-gray-50" />
<span className="h-[21px] w-16 animate-pulse rounded bg-gray-50" />
<span className="h-[34px] w-28 animate-pulse rounded bg-gray-50 motion-reduce:animate-none" />
<span className="h-[21px] w-16 animate-pulse rounded bg-gray-50 motion-reduce:animate-none" />
</div>
<span className="h-[91px] w-[117px] animate-pulse rounded-full bg-gray-50" />
<span className="h-[91px] w-[117px] animate-pulse rounded-full bg-gray-50 motion-reduce:animate-none" />
</div>
</div>
))}
Expand Down
8 changes: 4 additions & 4 deletions apps/web/app/mission/new/_components/mission-creation-chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ export function MissionCreationChat() {
className="w-[287px]"
current={1}
helper="하나만 선택 가능해요."
prompt="미션을 생성하고 싶은 카테고리를 선택해주세요."
prompt="미션을 생성하고 싶은 카테고리를 선택해 주세요."
promptClassName="whitespace-nowrap"
>
<Controller
Expand Down Expand Up @@ -373,7 +373,7 @@ export function MissionCreationChat() {
<div className="flex flex-col gap-4">
<ChatQuestion
current={4}
helper="직접 입력해주세요."
helper="직접 입력해 주세요."
prompt={amountQuestion(selectedItem, selectedCategory)}
/>
{completedThrough >= 3 && amountWon ? (
Expand Down Expand Up @@ -406,8 +406,8 @@ export function MissionCreationChat() {
const fieldError = isAmount ? errors.baselineAmountWon : errors.baselineFrequency;
const visibleFieldError = field.value ? fieldError : undefined;
const errorMessage = isAmount
? "1원 이상 2,000,000원 이하로 입력해주세요."
: "횟수는 최소 1회 이상 최대 10회 이하로 입력해주세요.";
? "1원~200만원 사이로 입력해 주세요."
: "횟수는 1~10회로 입력해 주세요.";
return (
<div className="flex flex-col gap-1">
<ChatComposer
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/mission/new/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ describe("NewMissionPage", () => {
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
fireEvent.change(frequencyInput, { target: { value: "11" } });

const error = await screen.findByText("횟수는 최소 1회 이상 최대 10회 이하로 입력해주세요.");
const error = await screen.findByText("횟수는 1~10회로 입력해 주세요.");
expect(error).toHaveAttribute("role", "alert");
expect(frequencyInput).toHaveAttribute("aria-describedby", error.id);
expect(screen.getByRole("button", { name: "답변 보내기" })).toBeDisabled();
Expand Down
6 changes: 3 additions & 3 deletions apps/web/app/onboarding/(questions)/age/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ describe("AgeOnboardingPage", () => {
const input = screen.getByRole("textbox", { name: "생년월일" });
fireEvent.change(input, { target: { value: "19990229" } });

expect(screen.getByText("올바른 날짜를 입력해주세요.")).toBeInTheDocument();
expect(screen.getByText("올바른 날짜를 입력해 주세요.")).toBeInTheDocument();
expect(input).toHaveAttribute("aria-invalid", "true");
expect(screen.getByRole("button", { name: "다음" })).toBeDisabled();
expect(patchOnboardingProfile).not.toHaveBeenCalled();
Expand All @@ -118,7 +118,7 @@ describe("AgeOnboardingPage", () => {
const input = screen.getByRole("textbox", { name: "생년월일" });
fireEvent.change(input, { target: { value: "20991231" } });

expect(screen.getByText("오늘 이전 날짜로 입력해주세요.")).toBeInTheDocument();
expect(screen.getByText("오늘 이전 날짜로 입력해 주세요.")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "다음" })).toBeDisabled();
expect(patchOnboardingProfile).not.toHaveBeenCalled();
});
Expand All @@ -140,7 +140,7 @@ describe("AgeOnboardingPage", () => {
target: { value: todayDigits },
});

expect(screen.getByText("오늘 이전 날짜로 입력해주세요.")).toBeInTheDocument();
expect(screen.getByText("오늘 이전 날짜로 입력해 주세요.")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "다음" })).toBeDisabled();
});
});
4 changes: 2 additions & 2 deletions apps/web/app/onboarding/(questions)/age/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ export default function AgeOnboardingPage() {
const birthDateError = !hasBirthDateFormat
? undefined
: !isRealBirthDate(birthDate)
? "올바른 날짜를 입력해주세요."
? "올바른 날짜를 입력해 주세요."
: !isPastBirthDate(birthDate)
? "오늘 이전 날짜로 입력해주세요."
? "오늘 이전 날짜로 입력해 주세요."
: undefined;
const { isSaving, saveError, saveProfile } = useSaveOnboardingProfile();
const isSubmittingRef = useRef(false);
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/onboarding/(questions)/month/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function MonthlyIncomeAndSavingsOnboardingPage() {
<LabelSlider
amount={field.value}
amountLabel="월급"
helperMessage="매월 월급이 다르다면 평균으로 설정해주세요."
helperMessage="매월 월급이 다르다면 평균으로 설정해 주세요."
maxAmount={MAX_MONTHLY_AMOUNT_SLIDER_VALUE}
onAmountChange={field.onChange}
/>
Expand All @@ -75,7 +75,7 @@ export default function MonthlyIncomeAndSavingsOnboardingPage() {
<LabelSlider
amount={field.value}
amountLabel="월 저축액"
helperMessage="매월 저축액이 다르다면 평균으로 설정해주세요."
helperMessage="매월 저축액이 다르다면 평균으로 설정해 주세요."
maxAmount={MAX_MONTHLY_AMOUNT_SLIDER_VALUE}
onAmountChange={field.onChange}
/>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/app/onboarding/(questions)/period/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function InvestmentPeriodOnboardingPage() {
<h1 className="text-pretty text-headline-h2-700 text-black">
자산을 모으고 싶은
<br />
목표기간을 입력해주세요
목표 기간을 입력해 주세요
</h1>
<p className="mt-1 text-body-b1-400 text-gray-700">
목표 기간에 따라 추천 목표 금액이 달라져요
Expand All @@ -33,7 +33,7 @@ export default function InvestmentPeriodOnboardingPage() {
<div className="mt-12 flex flex-col gap-4">
<div className="flex h-[50px] flex-col gap-1">
<p className="text-title-t1-700 text-gray-900">
목표기간 {formatGoalPeriod(field.value)}
목표 기간 {formatGoalPeriod(field.value)}
</p>
<p className="text-caption-c1-500 text-gray-500">
6개월 단위로 최대 3년까지 설정할 수 있어요.
Expand All @@ -49,7 +49,7 @@ export default function InvestmentPeriodOnboardingPage() {
max={MAX_GOAL_PERIOD_MONTHS}
min={0}
step={6}
thumbLabels={["목표기간"]}
thumbLabels={["목표 기간"]}
value={[field.value === "" ? 0 : field.value]}
onValueChange={([nextPeriodMonths]) => {
if (nextPeriodMonths !== undefined) {
Expand Down
10 changes: 5 additions & 5 deletions apps/web/app/onboarding/(questions)/single-choice-pages.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe("period onboarding page", () => {
<InvestmentPeriodOnboardingPage />
</OnboardingFormProvider>,
);
const slider = screen.getByRole("slider", { name: "목표기간" });
const slider = screen.getByRole("slider", { name: "목표 기간" });
for (let index = 0; index < 4; index += 1) {
fireEvent.keyDown(slider, { key: "ArrowRight" });
}
Expand All @@ -32,20 +32,20 @@ describe("period onboarding page", () => {
});
});

it("0년부터 3년까지 6개월 단위로 목표기간을 선택한다", () => {
it("0년부터 3년까지 6개월 단위로 목표 기간을 선택한다", () => {
render(
<OnboardingFormProvider>
<InvestmentPeriodOnboardingPage />
</OnboardingFormProvider>,
);

const slider = screen.getByRole("slider", { name: "목표기간" });
const slider = screen.getByRole("slider", { name: "목표 기간" });
expect(slider).toHaveAttribute("aria-valuemin", "0");
expect(slider).toHaveAttribute("aria-valuemax", "36");
expect(screen.getByText("목표기간 0년")).toBeInTheDocument();
expect(screen.getByText("목표 기간 0년")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "다음" })).toBeDisabled();
fireEvent.keyDown(slider, { key: "ArrowRight" });
expect(slider).toHaveAttribute("aria-valuenow", "6");
expect(screen.getByText("목표기간 6개월")).toBeInTheDocument();
expect(screen.getByText("목표 기간 6개월")).toBeInTheDocument();
});
});
2 changes: 1 addition & 1 deletion apps/web/app/onboarding/_components/net-worth-slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function NetWorthSlider({ netWorthAmount, onNetWorthAmountChange }: NetWo
<div className="flex flex-col gap-1">
<p className="text-title-t1-700 text-gray-900">자산 {formatNumber(netWorthAmount)}만원</p>
<p className="text-caption-c1-500 text-gray-500">
현재 투자 및 예/적금 자산 모두 총합을 입력해주세요.
현재 투자 및 예/적금 자산을 모두 합한 금액을 입력해 주세요.
</p>
</div>
<div className="flex flex-col gap-4">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/onboarding/check/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ describe("OnboardingCheckPage", () => {
expect(screen.getByLabelText("월 저축액은 어느 정도인가요?")).toHaveValue("100만원");
expect(screen.getByLabelText("현재 순자산은 어느 정도 인가요?")).toHaveValue("2,000만원");
expect(
screen.getByLabelText("서비스를 사용하여 자산을 모으고 싶은 기간을 입력해주세요."),
screen.getByLabelText("서비스를 사용해 자산을 모으고 싶은 기간을 입력해 주세요."),
).toHaveValue("3년");
expect(screen.getAllByRole("textbox")).toHaveLength(6);
for (const input of screen.getAllByRole("textbox")) {
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/onboarding/check/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default function OnboardingCheckPage() {
/>
<ReviewField
id="review-goal-period"
label="서비스를 사용하여 자산을 모으고 싶은 기간을 입력해주세요."
label="서비스를 사용해 자산을 모으고 싶은 기간을 입력해 주세요."
value={
profile.goalPeriodMonths === null
? "입력되지 않음"
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/profile/edit/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ describe("ProfileEditPage", () => {
fireEvent.change(netWorth, { target: { value: "" } });
fireEvent.click(screen.getByRole("button", { name: "완료" }));

expect(screen.getByText("현재 순자산을 입력해주세요.")).toBeInTheDocument();
expect(screen.getByText("현재 순자산을 입력해 주세요.")).toBeInTheDocument();
expect(updateOnboardingProfile).not.toHaveBeenCalled();
});

Expand Down
8 changes: 4 additions & 4 deletions apps/web/app/profile/edit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,15 @@ export default function ProfileEditPage() {
const netWorthManwon = Number(draft.netWorthManwon);

if (!isValidPastDate(birthDate)) {
setSubmitError("올바른 생년월일을 입력해주세요.");
setSubmitError("올바른 생년월일을 입력해 주세요.");
return;
}
if (!draft.monthlySalaryManwon || !draft.monthlySavingManwon) {
setSubmitError("월급과 월 저축액을 입력해주세요.");
setSubmitError("월급과 월 저축액을 입력해 주세요.");
return;
}
if (!draft.netWorthManwon) {
setSubmitError("현재 순자산을 입력해주세요.");
setSubmitError("현재 순자산을 입력해 주세요.");
return;
}
if (monthlySavingManwon > monthlySalaryManwon) {
Expand Down Expand Up @@ -229,7 +229,7 @@ export default function ProfileEditPage() {

{isPending ? (
<div aria-label="내 정보 불러오는 중" className="px-5 pt-4" role="status">
<div className="h-72 animate-pulse rounded-xl bg-gray-50" />
<div className="h-72 animate-pulse rounded-xl bg-gray-50 motion-reduce:animate-none" />
</div>
) : null}

Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ export default function ProfilePage() {
>
{PROFILE_FIELDS.map(([label]) => (
<div className="flex flex-col gap-1" key={label}>
<span className="h-5 w-24 animate-pulse rounded bg-gray-50" />
<span className="h-12 w-full animate-pulse rounded-xl bg-gray-50" />
<span className="h-5 w-24 animate-pulse rounded bg-gray-50 motion-reduce:animate-none" />
<span className="h-12 w-full animate-pulse rounded-xl bg-gray-50 motion-reduce:animate-none" />
</div>
))}
</div>
Expand Down
Loading