Skip to content

Test: 네비게이션 검증 test 추가 #205

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

Closed
seueooo wants to merge 10 commits into from
Closed

Test: 네비게이션 검증 test 추가 #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9a18470
refactor: 모든 페이지에 main 태그 추가
seueooo Aug 25, 2025
8ea8bef
test: 전체 흐름 검증을 위한 통합테스트 작성
seueooo Aug 25, 2025
5da5a30
refactor: 탭 키로 focus를 이동할 수 있도록 navbar에 tabIndex 추가
seueooo Aug 25, 2025
4bcfa6c
test: home페이지 네비게이션, 렌더링 관련 테스트 작성
seueooo Aug 25, 2025
ec1413c
refactor: 한 페이지 내의 중복된 main 태그 삭제
seueooo Aug 25, 2025
89d99f2
test: navigation 검증
seueooo Aug 25, 2025
52ae8ca
feat: home button에 tabIndex 추가하여 접근성 개선
seueooo Aug 25, 2025
331d9b7
test: 성능 측정 테스트 코드 작성
seueooo Aug 25, 2025
a4f1f71
chore: 테스트 관련 리드미, 스크립트
seueooo Aug 25, 2025
0dbb8b3
refactor: button -> link 태그로 변경
seueooo Aug 25, 2025
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 app/(auth)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const LoginPage = () => {
<LogoImage />
</Link>
</header>
<div className={styles.contentsContainer}>
<main className={styles.contentsContainer}>
<h1 className={styles.title}>
5초 만에 로그인하고 <br />
모든 기능을 사용해보세요!
Expand All @@ -58,7 +58,7 @@ const LoginPage = () => {
구글 계정으로 계속하기
</button>
</div>
</div>
</main>
</div>
);
};
Expand Down
18 changes: 7 additions & 11 deletions app/(main)/_components/home-button-section/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,15 @@ import * as styles from "./home-button-section.css";
const HomeButtonSection = () => {
return (
<div className={styles.container}>
<Link href={PATH.EXPLORE}>
<button className={styles.exploreButton}>
타임캡슐 보러가기
<div className={styles.lineInteractContainer}>
<div className={styles.lineInteract}></div>
</div>
</button>
<Link href={PATH.EXPLORE} className={styles.exploreButton} tabIndex={0}>
타임캡슐 보러가기
<div className={styles.lineInteractContainer}>
<div className={styles.lineInteract}></div>
</div>
</Link>

<Link href={PATH.CREATE_CAPSULE}>
<button type="button" className={styles.button}>
타임캡슐 만들기
</button>
<Link href={PATH.CREATE_CAPSULE} className={styles.button}>
타임캡슐 만들기
</Link>
Comment on lines +10 to 19
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 25, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

CTA를 Link로 바꾼 뒤 테스트 쿼리(role=button)와 불일치합니다

현재 CTA는 Next.js <Link>로 변경되어 ARIA role이 "link"입니다. 반면 본 PR에 포함된 e2e/헬퍼는 "button" 역할로 쿼리하고 있어 실패합니다. 네비게이션 목적의 요소는 링크가 맞으니 컴포넌트를 다시 버튼으로 되돌리기보다는 테스트/헬퍼 쪽을 "link"로 정정하는 것을 권장합니다. 관련 수정 제안을 tests/navigation.spec.ts 및 tests/utils/test-helpers.ts 코멘트에 첨부했습니다.

</div>
);
Expand Down
3 changes: 2 additions & 1 deletion app/(main)/explore/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,15 @@ const Explore = () => {
<RevealMotion>
<TitleSection />
</RevealMotion>
<main>
<SelectTabSection
handleSort={handleSort}
onSelect={handleSelect}
selectedTab={selectedTab}
/>
<AddCapsuleButton />
<CardContainer capsules={allCapsules} isLoading={isPending} />

</main>
<div ref={footerRef}>
<Footer />
{isFetchingNextPage && <LoadingSpinner loading={true} size={20} />}
Expand Down
3 changes: 2 additions & 1 deletion app/(main)/my-capsule/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,14 @@ const MyCapsule = () => {
<RevealMotion>
<TitleSection />
</RevealMotion>
<main>
<SelectTabSection
onSelect={handleSelect}
selectedTab={selectedTab}
handleSort={handleSort}
/>
<CardContainer capsules={allCapsules} isLoading={isPending} />

</main>
<div ref={footerRef} className={styles.footer}>
{isFetchingNextPage && <LoadingSpinner loading={true} size={20} />}
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/(main)/setting/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const Setting = () => {
return (
<div className={styles.settingPage}>
<UserGreetingSection userName={userInfo?.result.nickname || ""} />
<div className={styles.itemsContainer}>
<main className={styles.itemsContainer}>
<SettingSection category="서비스 정보">
{EXTERNAL_LINKS.map((link) => (
<SettingItem key={link.label} onClick={() => window.open(link.url, "_blank")}>
Expand Down Expand Up @@ -73,7 +73,7 @@ const Setting = () => {
</SettingItem>
</SettingSection>
<p className={styles.warningText}>*회원탈퇴는 '문의하기'를 이용해주세요. </p>
</div>
</main>
</div>
);
};
Expand Down
2 changes: 2 additions & 0 deletions app/(sub)/capsule-detail/[invite-code]/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const CapsuleDetailPage = () => {
joinLettersCount={result.letterCount}
/>
</RevealMotion>
<main>
<CapsuleImage imageUrl={result.beadVideoUrl} />
<div className={styles.container}>
<RevealMotion delay={0.8}>
Expand All @@ -138,6 +139,7 @@ const CapsuleDetailPage = () => {
<OpenInfoSection openAt={formatDateTime(result.openAt)} />
</RevealMotion>
</div>
</main>
<ResponsiveFooter capsuleData={data} isLoggedIn={isLoggedIn} />
{result.status !== "WRITABLE" && <InfoToast status={result.status} />}
</>
Expand Down
4 changes: 2 additions & 2 deletions app/(sub)/create-capsule/_components/steps/intro-step/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const IntroStep = ({ handleNextStep }: Props) => {
};

return (
<main className={styles.container}>
<div className={styles.container}>
<RevealMotion>
<TitleCaption
title={
Expand Down Expand Up @@ -78,7 +78,7 @@ const IntroStep = ({ handleNextStep }: Props) => {
<Button variant="primary" text="다음" onClick={handleClickNext} disabled={!titleField.value?.trim()} />
</div>
</RevealMotion>
</main>
</div>
);
};

Expand Down
4 changes: 2 additions & 2 deletions app/(sub)/create-capsule/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const CreateCapsule = () => {
isHomeButton={false}
/>
)}
<div className={styles.container}>
<main className={styles.container}>
<FormProvider {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
Expand All @@ -134,7 +134,7 @@ const CreateCapsule = () => {
</Funnel>
</form>
</FormProvider>
</div>
</main>
</>
);
};
Expand Down
3 changes: 2 additions & 1 deletion app/(sub)/search/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,10 @@ const SearchContent = () => {

return (
<div>
<main>
<SearchBarSection keyword={keyword} />
<CardContainer capsules={allCapsules} isLoading={isLoading} keyword={keyword} />

</main>
<div ref={footerRef}>
{isFetchingNextPage && <LoadingSpinner loading={true} size={20} />}
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function NotFound() {
const router = useRouter();

return (
<div className={styles.container}>
<main className={styles.container}>
<NoneImage width={120} height={65} />
<p className={styles.title}>페이지를 찾을 수 없습니다.</p>
<p className={styles.description}>
Expand All @@ -21,6 +21,6 @@ export default function NotFound() {
>
홈으로 돌아가기
</button>
</div>
</main>
);
}
2 changes: 1 addition & 1 deletion shared/ui/floating-stars-container/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function FloatingStarsContainer(props: FloatingStarsProps) {
}

return (
<div className={styles.container}>
<div className={`${styles.container} floating-stars`}>
{stars.map((star) => (
<motion.div
key={star.id}
Expand Down
14 changes: 9 additions & 5 deletions shared/ui/navbar/navbar-main/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,33 +29,34 @@ const NavbarMain = () => {
isMenuOpen ? styles.navHomeStyleOpen : styles.navHomeStyleClose,
)}
>
<Link href={PATH.HOME}>
<Link href={PATH.HOME} tabIndex={0}>
<Logo />
</Link>
<div className={styles.navWrapper}>
<ul className={styles.navList}>
<li>
<Link href={PATH.EXPLORE} className={styles.buttonStyle}>
<Link href={PATH.EXPLORE} className={styles.buttonStyle} tabIndex={0}>
탐색
</Link>
</li>
<li>
<Link href={PATH.MY_CAPSULE} className={styles.buttonStyle}>
<Link href={PATH.MY_CAPSULE} className={styles.buttonStyle} tabIndex={0}>
내 캡슐
</Link>
</li>
<li>
<Link href={PATH.SETTING} className={styles.buttonStyle}>
<Link href={PATH.SETTING} className={styles.buttonStyle} tabIndex={0}>
설정
</Link>
</li>
</ul>
<Link href={PATH.SEARCH} className={styles.searchButtonStyle}>
<Link href={PATH.SEARCH} className={styles.searchButtonStyle} tabIndex={0}>
<SearchIcon width={"2rem"} height={"2rem"} />
</Link>
Comment on lines +53 to 55
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 25, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

아이콘 전용 검색 링크에 접근 가능한 이름 추가 필수.

시각적 텍스트가 없으므로 스크린 리더에 ‘검색’으로 읽히도록 aria-label을 부여해주세요.

-<Link href={PATH.SEARCH} className={styles.searchButtonStyle} tabIndex={0}>
+<Link href={PATH.SEARCH} className={styles.searchButtonStyle} aria-label="검색">
   <SearchIcon width={"2rem"} height={"2rem"} />
 </Link>
📝 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
<Link href={PATH.SEARCH} className={styles.searchButtonStyle} tabIndex={0}>
<SearchIcon width={"2rem"} height={"2rem"} />
</Link>
<Link href={PATH.SEARCH} className={styles.searchButtonStyle} aria-label="검색">
<SearchIcon width={"2rem"} height={"2rem"} />
</Link>
🤖 Prompt for AI Agents 
shared/ui/navbar/navbar-main/index.tsx lines 53-55: the icon-only search link
lacks an accessible name for screen readers; add an aria-label (e.g.,
aria-label="검색") to the Link element so assistive tech reads "검색", keep existing
tabIndex, and ensure the label is localized if needed.

<HamburgerMenuButton
isMenuOpen={isMenuOpen}
onClick={handleMenuClick}
tabIndex={0}
/>
</div>
</nav>
Expand All @@ -72,6 +73,7 @@ const NavbarMain = () => {
href={PATH.EXPLORE}
className={styles.menuItem}
onClick={handleMenuClick}
tabIndex={isMenuOpen ? 0 : -1}
>
탐색
</Link>
Expand All @@ -81,6 +83,7 @@ const NavbarMain = () => {
href={PATH.MY_CAPSULE}
className={styles.menuItem}
onClick={handleMenuClick}
tabIndex={isMenuOpen ? 0 : -1}
>
내 캡슐
</Link>
Expand All @@ -90,6 +93,7 @@ const NavbarMain = () => {
href={PATH.SETTING}
className={styles.menuItem}
onClick={handleMenuClick}
tabIndex={isMenuOpen ? 0 : -1}
>
설정
</Link>
Expand Down
Loading
Loading