🛠️ Refactor: 웹 접근성 강화 (ARIA 속성 및 시맨틱 구조 개선) by skyblue1232 · Pull Request #99 · geulDa/FE

skyblue1232 · 2025-11-09T18:32:59Z

🔥 작업 내용

aria-label, role, aria-describedby 등 시맨틱 접근성 속성 추가
시각적으로 숨기되 스크린리더에만 노출되는 sr-only 클래스 활용
→ 별도 스타일링 불필요 (Tailwind 기본 내장 스타일 사용)
주요 폼 영역 및 리스트 영역에 aria-live 추가로 동적 콘텐츠 대응
role="group", aria-labelledby 구조로 폼·버튼 관계 명확화
공통 컴포넌트 내 접근성 중복 제거 (상위 단에서 역할 제어)

리팩토링 목적

공통 컴포넌트 구조 개선 및 접근성(Accessibility) 강화
코드 일관성 및 유지보수성 향상을 위한 구조 리팩토링
불필요한 스타일 중복 제거 및 시맨틱 마크업 정리

⚙️ 기술 포인트

React + Next.js + TypeScript 기반 접근성 리팩토링
TailwindCSS + sr-only 접근성 스타일 유틸리티 활용
WAI-ARIA 표준 준수 및 스크린리더 대응 로직 추가
재사용 가능한 컴포넌트 구조 확립 (ARIA role 상위 위임 방식)

🤔 추후 작업 사항

키보드 포커스 이동 시 outline 커스텀 및 focus-visible 상태 개선
Lighthouse 접근성 지표 기반 상세 검수 및 회귀 테스트 진행
향후 공통 Button / Input 컴포넌트에 aria-flow 확장 예정

🔗 관련 이슈

close [refactor] 웹 접근성 개선 - ARIA 속성 및 시맨틱 마크업 적용 #95

PR Point (To Reviewer)

aria-* 속성 적용 시, UI나 인터랙션에 영향이 없는지 확인 부탁드립니다.
sr-only 적용된 부분의 의도(스크린리더용 설명) 확인 부탁드립니다.
컴포넌트 내 role 부여 범위가 논리적으로 적절한지 검토 바랍니다.

📸 피그마 스크린샷 or 기능 GIF

Summary by CodeRabbit

릴리스 노트

새로운 기능
- 키보드로 상호작용 가능한 컨트롤 확대(Enter/Space로 액션 트리거)
개선사항
- 앱 전반에 걸쳐 스크린리더용 ARIA 레이블 및 역할 대폭 추가
- 대화형 요소(아이콘·버튼·토글·카드)의 접근성·상태 표현 개선
- 이미지, 로딩, 빈 상태 등에 적절한 대체 텍스트/역할 추가
- 날짜 선택 컴포넌트에 명시적 레이블 지원 추가

vercel · 2025-11-09T18:33:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Nov 9, 2025 7:05pm

coderabbitai · 2025-11-09T18:33:12Z

Walkthrough

웹 애플리케이션 전반에 ARIA 속성과 시맨틱 마크업을 추가하고 일부 컴포넌트에 키보드 상호작용(Enter/Space)과 아이콘의 상호작용 플래그를 도입했습니다. 동작 로직은 유지된 채 접근성 메타데이터와 키보드 핸들러가 추가되었습니다.

Changes

Cohort / File(s)	변경 요약
인증/로딩 `src/pages/auth/index.tsx`, `src/pages/loading/index.tsx`	SVG에 `aria-hidden`/`focusable` 추가; 로딩 컨테이너에 `role="status"`, `aria-live` 등 접근성 속성 추가
채팅 `src/pages/chatbot/index.tsx`, `src/pages/chatbot/components/ChattingBubble.tsx`, `src/pages/chatbot/components/ChattingInput.tsx`	채팅 로그·버블·입력·전송 버튼에 `role`, `aria-live`, `aria-label` 등 ARIA 속성 추가
이벤트 관련 `src/pages/events/index.tsx`, `src/pages/events/[id].tsx`, `src/pages/events/components/DateTag.tsx`	날짜/이미지/정보/목록에 `aria-label` 추가; `DateTag`에 날짜 범위 설명용 `aria-label` 추가
메인/보드/스탬프/비디오 `src/pages/main/index.tsx`, `src/pages/main/Board.tsx`, `src/pages/main/HiddenReward.tsx`, `src/pages/main/Node.tsx`, `src/pages/main/PostCard.tsx`, `src/pages/main/components/board/Boardgame.tsx`, `src/pages/main/components/stampBoard/Progress.tsx`, `src/pages/main/components/stampBoard/Stamp.tsx`, `src/pages/main/components/video/VideoPlayer.tsx`	여러 페이지에 `role="main"`/`aria-label` 추가; `Boardgame`에 `handleCellClick`로 네비게이션 중앙화, 활성 셀에 `role="button"`, `tabIndex`, Enter/Space 지원; Progress/Stamp에 ARIA 속성; VideoPlayer 일부 aria 제거
지도 / 결과 / 태그 `src/pages/map/result/Map.tsx`, `src/pages/map/result/components/ResultMap.tsx`, `src/pages/map/result/components/TagGroup.tsx`, `src/pages/map/components/CourseSelectSection.tsx`	루트를 `main`으로 변경 및 `role="main"` 추가; `ResultMap`에서 `aria-labelledby` 제거; `TagGroup`에 `aria-pressed`/`aria-label` 추가; `CourseSelectSection` 항목을 `role="listitem"`로 래핑
마이페이지 / 프로필 `src/pages/mypage/index.tsx`, `src/pages/mypage/events/[id].tsx`, `src/pages/mypage/postcard/[id].tsx`, `src/pages/mypage/components/ProfilePhoto.tsx`	페이지 본문에 `role="main"`/aria-label 추가; 섹션별 aria-label 추가; 프로필 이미지에 `alt` 추가
공용 컴포넌트: 아이콘/카드/플립/탭/DatePicker `src/shared/icons/components/icon.tsx`, `src/shared/components/container/EventCard.tsx`, `src/shared/components/flipCard/FlipCard.tsx`, `src/shared/components/tab/BottomNav.tsx`, `src/shared/components/datePicker/DatePicker.tsx`	`Icon`에 `isInteractive`/`pressed` props 추가 및 키보드(onKeyDown) 동작 도입; `EventCard` Heart 아이콘을 상호작용 가능으로 변경(aria-label 토글); `FlipCard`에 `role="button"`, `tabIndex`, `aria-pressed`, Enter/Space 핸들러 추가; `BottomNav` aria-label 텍스트 변경; `DatePicker`에 `ariaLabel` prop 추가

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant FlipCard
  participant Icon
  participant Boardgame
  participant Router

  rect `#E6F7FF`
    Note over User,FlipCard: FlipCard에 키보드 활성화 추가
    User->>FlipCard: press Enter/Space
    FlipCard->>FlipCard: toggle flip state (aria-pressed 업데이트)
  end

  rect `#FFF4E6`
    Note over User,Icon: Icon의 interactive 모드 (isInteractive)
    User->>Icon: click / press Enter/Space
    Icon->>Icon: handleKeyDown → 호출된 onClick 실행 (aria-pressed 반영)
  end

  rect `#F0FFF4`
    Note over User,Boardgame: Boardgame 네비게이션 중앙화
    User->>Boardgame: click or press Enter/Space on active cell
    Boardgame->>Boardgame: handleCellClick(label)
    Boardgame->>Router: router.push(`/main/Node?label=${label}`)
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

주의 검토 포인트:
- src/shared/icons/components/icon.tsx: isInteractive/pressed 추가로 기존 사용처에서 props 미전달 시 동작 검증 및 키보드 이벤트 포워딩 여부 확인
- src/pages/main/components/board/Boardgame.tsx: handleCellClick 집약 후 라우팅 인자·키보드 이벤트(Enter/Space) 및 aria-label 일관성 확인
- src/shared/components/flipCard/FlipCard.tsx: 키보드 토글 시 상태와 aria-pressed 동기화 확인
- src/shared/components/container/EventCard.tsx: Heart 아이콘의 pressed/색상 및 aria-label 토글의 일관성 확인

Possibly related PRs

✨Feat: 챗봇페이지 제작 #83 — 채팅 컴포넌트들(ChattingBubble, ChattingInput, chatbot 페이지`)과 직접적으로 연관된 접근성 변경이 있음.
🐛Fix &✨Feat: 컨테이너 좋아요 버튼 활성화 & small Event Card 추가 #82 — EventCard 및 아이콘 관련 상호작용/ARIA 변경과 중복되는 작업이 있어 코드 레벨 연관성이 높음.
✨Feat: main페이지 board판 #51 — Board/Boardgame 관련 네비게이션 및 접근성 개선 변경과 직접 연결됨.

Suggested reviewers

KongMezu
jjangminii

Poem

🐰 깡총깡총 키를 두드리며,
aria를 심고 길을 열었네,
Enter와 Space로 대답하며,
화면 너머 목소리도 들리네 —
작은 당근 축하 한 입 🥕

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 웹 접근성 강화와 ARIA 속성 및 시맨틱 구조 개선을 명확히 설명하며, 변경사항의 주요 목적을 잘 반영합니다.
Description check	✅ Passed	PR 설명은 템플릿 구조를 따르며 작업 내용, 리팩토링 목적, 기술 포인트, 추후 작업, 이슈 링크, 검토 포인트를 포함합니다.
Linked Issues check	✅ Passed	PR의 모든 변경사항(aria-label, role, sr-only 추가, 컴포넌트 접근성 개선)이 이슈 #95의 웹 접근성 개선 목표를 충족하고 있습니다.
Out of Scope Changes check	✅ Passed	변경사항은 웹 접근성 강화를 위한 ARIA 속성 및 시맨틱 마크업 추가에만 초점을 두고 있으며, 기능 로직이나 UI 동작에 영향을 주지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch refactor/#95/web-accessibility

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-11-09T18:34:59Z

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

coderabbitai

Actionable comments posted: 12

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (4)

src/pages/map/result/components/TagGroup.tsx (1)
26-37: Tag 컴포넌트가 ARIA 속성을 전달하지 않습니다.

Tag 컴포넌트의 Props 인터페이스에 aria-pressed와 aria-label이 정의되어 있지 않으며, 컴포넌트 구현부에서도 rest props를 하위 button 엘리먼트로 전달하지 않습니다. 따라서:

TypeScript 타입 에러가 발생할 가능성이 높습니다

이 ARIA 속성들이 실제 DOM에 적용되지 않아 접근성 개선 효과가 없습니다

Tag 컴포넌트를 다음과 같이 수정해야 합니다:

src/shared/components/tag/Tag.tsx 인터페이스 수정:
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  icon?: IconName;
  className?: string;
  onClick?: () => void;
  variant?: VariantProps<typeof tagStyle>['variant'];
}
src/shared/components/tag/Tag.tsx 구현부 수정:
-({ label, icon, variant, className, onClick }: Props) => {
+({ label, icon, variant, className, onClick, ...rest }: Props) => {
   return (
     <button
       type='button'
       className={cn(tagStyle({ variant }), className)}
       onClick={onClick}
+      {...rest}
     >
       {icon && <Icon name={icon} size={14} color='gray-50' />}
       <span>{label}</span>
     </button>
   );
 }
src/pages/main/HiddenReward.tsx (1)
10-24: 구조적 role을 interactive 요소에 부적절하게 사용하고 있습니다.

role="main"은 페이지의 주요 콘텐츠 영역을 나타내는 구조적(landmark) 역할입니다. 클릭 가능한 div에 이를 적용하는 것은 ARIA 명세를 위반합니다.

또한 전체 페이지를 클릭 가능하게 만드는 것은 키보드 접근성 측면에서도 문제가 있습니다:

키보드 사용자가 Enter/Space로 활성화할 수 없습니다

포커스 표시가 없어 현재 위치를 알기 어렵습니다

다음과 같이 리팩토링을 권장합니다:
-    <div
+    <main
       className='
         relative w-full h-[100vh]
         bg-gradient-to-b from-mint-500 to-white
         flex flex-col justify-center items-center text-center
         overflow-hidden
-        cursor-pointer
       '
-      role="main"
       aria-label="히든 리워드 획득 페이지"
-      onClick={() =>
-        router.push({
-          pathname: '/main/PostCard',
-        })
-      }
     >
       <div className='absolute inset-0 z-0 pointer-events-none mt-0'>
         <Lottie
           animationData={Confetti_revised}
           loop
           autoplay
           className='w-full h-full object-cover'
         />
       </div>

       <div className='relative z-10 flex flex-col items-center justify-center'>
         <h1 className='text-black mb-[4.5rem] text-headline-lg-serif'>
           Congrats!
         </h1>

         <p className='text-title-sm text-black mb-[6rem]'>
           축하합니다! <br />
           히든 리워드를 획득하셨습니다.
         </p>

         <Lottie
           animationData={Logo_sliver}
           loop
           autoplay
           className='w-[18rem] h-[18rem] mb-[6rem]'
         />

         <p className='text-label-md text-black mb-[7rem]'>
           가톨릭대 전설의 포켓몬 <br />
           '나무를 수호하는 종철씨'를 <br />
           획득하셨습니다!
         </p>

-        <p className='text-label-serif text-mint-500'>click!</p>
+        <button
+          type="button"
+          onClick={() =>
+            router.push({
+              pathname: '/main/PostCard',
+            })
+          }
+          className='text-label-serif text-mint-500 bg-transparent border-none cursor-pointer'
+          aria-label="엽서 페이지로 이동"
+        >
+          click!
+        </button>
       </div>
-    </div>
+    </main>
src/pages/main/index.tsx (1)
34-41: 키보드 이벤트 핸들러를 추가하세요.

role="button"과 tabIndex={0}을 추가했지만 키보드 내비게이션을 위한 이벤트 핸들러가 누락되었습니다. onKeyDown 핸들러를 추가하여 Enter 또는 Space 키로도 동일한 동작이 수행되도록 해야 합니다.

다음 diff를 적용하세요:
         <section
           role="button"
           tabIndex={0}
           aria-label="보드판으로 이동"
           onClick={() => {
             router.push('/main/Board');
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              router.push('/main/Board');
+            }
+          }}
         >
src/shared/components/container/EventCard.tsx (1)
96-105: 중간 크기 카드에도 접근성 속성을 추가하세요.

대형 카드의 하트 아이콘에는 isInteractive, pressed, aria-label 속성이 있지만 중간 크기 카드에는 없습니다. 일관된 접근성을 위해 중간 크기 카드에도 동일한 속성을 추가해야 합니다.

다음 diff를 적용하세요:
             <Icon
               name='HeartStraight'
               size={20}
               color={
                 liked ? 'red-400' : variant === 'mint' ? 'mint-400' : 'gray-300'
               }
               fillColor={liked ? 'red-300' : undefined}
               onClick={handleLikeClick}
+              isInteractive
+              pressed={liked}
+              aria-label={liked ? '좋아요 취소' : '좋아요'}
               className='cursor-pointer'
             />

🧹 Nitpick comments (12)

src/pages/events/[id].tsx (3)
36-38: semantic HTML 요소 사용을 고려하세요.

현재 aria-label="행사 기간"을 가진 wrapper가 DateTag를 감싸고 있습니다. DateTag 자체도 접근성 레이블을 가지고 있어 일부 중복이 있을 수 있습니다.

generic div 대신 <section> 요소를 사용하면 더 명확한 구조적 의미를 제공할 수 있습니다:
-        <div aria-label="행사 기간" className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+        <section aria-labelledby="event-period" className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+          <h2 id="event-period" className="sr-only">행사 기간</h2>
          <DateTag startDate={startDate} endDate={endDate} />
-        </div>
+        </section>
66-80: semantic HTML 요소로 개선할 수 있습니다.

aria-label="행사 정보"를 가진 wrapper는 주요 정보 섹션을 나타내므로 <section> 요소를 사용하는 것이 더 의미론적으로 명확합니다.
-        <div
+        <section
          aria-label="행사 정보"
          className={cn(
            'flex flex-col items-center w-full gap-[0.8rem]',
            'mt-[0.8rem]'
          )}
        >
          {/* ... */}
-        </div>
+        </section>
82-107: 관련 행사 목록에 semantic HTML 사용을 고려하세요.

"관련 행사 목록"은 navigation 또는 별도 섹션으로 의미가 명확하므로 <section> 또는 <nav> 요소 사용을 권장합니다.
-          <div
+          <section
            aria-label="관련 행사 목록"
            className={cn(
              'grid grid-cols-2 gap-[1.2rem] justify-items-center w-full max-w-[35.4rem]'
            )}
          >
            {/* ... */}
-          </div>
+          </section>
참고: 현재 하드코딩된 "관련 행사" 데이터는 placeholder로 보이며, 향후 실제 데이터로 교체가 필요할 것으로 예상됩니다.
src/pages/mypage/postcard/[id].tsx (1)
24-26: role="main"은 <main> 요소에서 중복됩니다.

HTML5의 시맨틱 <main> 요소는 이미 암묵적으로 main 역할을 제공합니다. WAI-ARIA 명세에 따르면, 시맨틱 HTML 요소에 명시적으로 동일한 role을 추가하는 것은 불필요하며 코드 중복을 초래합니다.

aria-label은 유지하되 role 속성을 제거하는 것을 권장합니다.
       <main
-        role="main"
         aria-label="저장한 엽서 상세 페이지"
         className={cn(
src/pages/mypage/events/[id].tsx (1)
25-27: role="main"은 <main> 요소에서 중복됩니다.

HTML5의 시맨틱 <main> 요소는 이미 암묵적으로 main 역할을 제공합니다. 명시적으로 동일한 role을 추가하는 것은 불필요합니다.

aria-label은 유지하되 role 속성을 제거하는 것을 권장합니다.
       <main
-        role="main"
         aria-label="저장한 행사 상세 페이지"
         className={cn(
src/pages/mypage/index.tsx (1)
15-19: role="main"은 <main> 요소에서 중복됩니다.

HTML5의 시맨틱 <main> 요소는 이미 암묵적으로 main 역할을 제공합니다.

aria-label은 유지하되 role 속성을 제거하는 것을 권장합니다.
     <main 
       className='w-full min-h-screen bg-white flex flex-col items-center'
-      role="main"
       aria-label="마이 페이지"
     >
src/pages/map/result/Map.tsx (1)
9-13: 시맨틱 HTML 사용은 좋지만 role="main"은 중복됩니다.

div를 <main>으로 변경한 것은 시맨틱 HTML 사용 측면에서 훌륭한 개선입니다. 그러나 <main> 요소는 이미 암묵적으로 main 역할을 제공하므로 명시적인 role 속성은 불필요합니다.

aria-label은 유지하되 role 속성을 제거하는 것을 권장합니다.
     <main
       className="w-full h-[100vh] bg-mint-300 overflow-hidden"
-      role="main"
       aria-label="코스 추천 지도 페이지"
     >
src/pages/main/components/stampBoard/Stamp.tsx (1)
26-34: 일관성을 위해 role="img"를 추가하세요.

획득한 스탬프에는 role="img"가 있지만 미획득 스탬프에는 없습니다. 일관된 접근성 구조를 위해 미획득 스탬프의 컨테이너에도 동일한 역할을 추가하는 것이 좋습니다.

다음 diff를 적용하세요:
   return (
     <div
+      role="img"
       className={cn(
         'rounded-full bg-pink-100 w-[2.8rem] h-[2.8rem]',
         className,
       )}
       aria-label={`${index + 1}번째 스탬프 미획득`}
     />
   );
src/pages/chatbot/index.tsx (1)
53-58: aria-live 속성이 중복입니다.

role="log"는 이미 암묵적으로 aria-live="polite"를 포함하고 있어 명시적으로 aria-live="polite"를 추가할 필요가 없습니다.

다음 diff를 적용하여 중복 속성을 제거할 수 있습니다:
      <main 
        role="log"
        aria-label="채팅 내용"
-       aria-live="polite"
        className={cn(mainStyle())}
      >
src/pages/loading/index.tsx (1)
7-12: aria-live 속성이 중복입니다.

role="status"는 이미 암묵적으로 aria-live="polite"를 포함하고 있습니다. 명시적으로 추가할 필요가 없습니다.

다음 diff를 적용하여 중복을 제거할 수 있습니다:
    <div 
      className='flex flex-col items-center justify-between h-[100vh] bg-white'
      role='status'
-     aria-live='polite'
      aria-label='페이지 로딩 중입니다'  
    >
src/shared/icons/components/icon.tsx (1)
108-110: aria-pressed 사용에 대한 가이드가 필요합니다.

aria-pressed는 토글 버튼(on/off 상태)에만 사용해야 하는 속성입니다. 모든 인터랙티브 아이콘이 토글인 것은 아니므로, pressed prop을 전달하지 않는 경우와 구분할 수 있도록 타입 제약이나 주석을 추가하는 것이 좋습니다.

다음과 같이 인터페이스에 주석을 추가하세요:
interface IconProps extends React.SVGProps<SVGSVGElement> {
  name: IconName;
+ /** Makes icon keyboard-accessible as a button. Use with onClick handler. */
  isInteractive?: boolean;
+ /** For toggle buttons only. Indicates pressed state (true/false/undefined). */
  pressed?: boolean;
  size?: number | string;
  // ... rest of props
}
src/pages/main/components/board/Boardgame.tsx (1)
24-31: alt=""와 aria-hidden="true"가 중복입니다.

장식용 이미지의 경우 alt=""만으로도 스크린 리더에서 무시됩니다. aria-hidden="true"를 추가하는 것은 중복이지만 해롭지는 않습니다.

한 가지만 사용해도 충분합니다:
      <Image
        src="/assets/background_.svg"
        alt=""
        width={402}
        height={755}
        className="w-full h-full object-cover"
        priority
-       aria-hidden="true"   
      />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 526cfdf and 1207dca.

📒 Files selected for processing (29)

src/pages/auth/index.tsx (1 hunks)
src/pages/chatbot/components/ChattingBubble.tsx (1 hunks)
src/pages/chatbot/components/ChattingInput.tsx (1 hunks)
src/pages/chatbot/index.tsx (1 hunks)
src/pages/events/[id].tsx (3 hunks)
src/pages/events/components/DateTag.tsx (1 hunks)
src/pages/events/index.tsx (2 hunks)
src/pages/loading/index.tsx (2 hunks)
src/pages/main/Board.tsx (1 hunks)
src/pages/main/HiddenReward.tsx (1 hunks)
src/pages/main/Node.tsx (3 hunks)
src/pages/main/PostCard.tsx (2 hunks)
src/pages/main/components/board/Boardgame.tsx (1 hunks)
src/pages/main/components/stampBoard/Progress.tsx (1 hunks)
src/pages/main/components/stampBoard/Stamp.tsx (1 hunks)
src/pages/main/components/video/VideoPlayer.tsx (0 hunks)
src/pages/main/index.tsx (2 hunks)
src/pages/map/components/CourseSelectSection.tsx (1 hunks)
src/pages/map/result/Map.tsx (1 hunks)
src/pages/map/result/components/ResultMap.tsx (0 hunks)
src/pages/map/result/components/TagGroup.tsx (1 hunks)
src/pages/mypage/components/ProfilePhoto.tsx (1 hunks)
src/pages/mypage/events/[id].tsx (1 hunks)
src/pages/mypage/index.tsx (2 hunks)
src/pages/mypage/postcard/[id].tsx (1 hunks)
src/shared/components/container/EventCard.tsx (2 hunks)
src/shared/components/flipCard/FlipCard.tsx (1 hunks)
src/shared/components/tab/BottomNav.tsx (1 hunks)
src/shared/icons/components/icon.tsx (3 hunks)

💤 Files with no reviewable changes (2)

src/pages/map/result/components/ResultMap.tsx
src/pages/main/components/video/VideoPlayer.tsx

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/map/result/Map.tsx

🧬 Code graph analysis (8)

src/pages/main/PostCard.tsx (2)

src/shared/icons/components/icon.tsx (1)

Icon (57-117)

src/shared/utils/postcardActions.ts (1)

handleShare (2-12)

src/pages/map/result/components/TagGroup.tsx (1)

src/shared/components/tag/Tag.tsx (2)

Props (27-38)

Props (6-12)

src/pages/mypage/index.tsx (1)

src/pages/mypage/components/ProfilePhoto.tsx (1)

ProfilePhoto (11-35)

src/pages/map/result/Map.tsx (1)

src/pages/map/result/components/FullMap.tsx (1)

FullMap (7-19)

src/pages/chatbot/components/ChattingBubble.tsx (1)

src/shared/lib/utils.ts (1)

cn (71-73)

src/pages/chatbot/index.tsx (2)

src/shared/lib/utils.ts (1)

cn (71-73)

src/pages/chatbot/components/ChattingBubble.tsx (1)

Chatting (32-43)

src/pages/events/components/DateTag.tsx (1)

src/shared/lib/utils.ts (1)

cn (71-73)

src/pages/events/[id].tsx (2)

src/shared/lib/utils.ts (1)

cn (71-73)

src/pages/events/components/DateTag.tsx (1)

DateTag (24-45)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (26)

src/shared/components/tab/BottomNav.tsx (1)

34-34: ✓ aria-label 추가 승인

<nav> 요소에 한국어 aria-label을 추가하여 스크린 리더 사용자에게 네비게이션 영역을 명확히 전달합니다. 기존 aria-current 속성(45번 줄)과 함께 WAI-ARIA 표준에 맞게 적절하게 구현되었습니다.

src/pages/main/components/stampBoard/Progress.tsx (1)

27-28: 접근성 개선이 올바르게 적용되었습니다.

Radix Progress는 role="progressbar"와 aria-valuemin, aria-valuemax, aria-valuenow를 자동으로 제공합니다. 추가한 aria-label과 aria-valuetext는 기본 ARIA 속성과 충돌하지 않으며 접근성을 강화합니다.

선택적 개선 제안:

aria-label="진행률"을 aria-label="스탬프 진행률"로 변경하면 스크린 리더 사용자에게 더 구체적인 컨텍스트를 제공할 수 있습니다.

src/pages/map/result/components/TagGroup.tsx (1)

32-36: aria-label 텍스트가 명확하고 유용합니다.

현재 상태와 수행할 액션을 명확하게 설명하는 한국어 aria-label이 잘 작성되었습니다. 스크린 리더 사용자에게 컨텍스트를 제공하는 좋은 접근 방식입니다.

참고: aria-label이 설정되면 시각적 레이블(label prop)을 오버라이드하므로, 스크린 리더는 더 자세한 설명을 듣게 됩니다. 이는 이번 경우에 의도된 동작으로 보입니다.

src/pages/events/[id].tsx (1)

59-60: 이미지 placeholder에 대한 우수한 접근성 패턴입니다.

이미지가 없는 경우 role="img"와 설명적인 aria-label을 사용하여 스크린 리더 사용자에게 명확한 정보를 제공하는 것은 WCAG 가이드라인을 잘 따르는 패턴입니다.

src/pages/events/index.tsx (2)

57-80: 이벤트 목록에 대한 적절한 접근성 개선입니다.

<section>에 aria-label="이벤트 목록"을 추가하여 스크린 리더 사용자가 콘텐츠 영역을 명확히 인식할 수 있도록 개선했습니다. semantic HTML과 ARIA 속성의 조합이 적절합니다.

82-96: 동적 콘텐츠 변경에 대한 우수한 접근성 패턴입니다.

empty state에 role="status"와 aria-live="polite"를 추가하여 날짜 필터링 결과가 변경될 때 스크린 리더 사용자에게 자동으로 알림이 전달되도록 구현했습니다. 이는 WCAG 2.1의 동적 콘텐츠 업데이트 가이드라인을 잘 따르는 모범 사례입니다.

src/pages/mypage/components/ProfilePhoto.tsx (1)

27-27: 접근성 개선이 잘 적용되었습니다!

프로필 이미지에 명확한 대체 텍스트를 추가하여 스크린 리더 사용자가 이미지의 목적을 이해할 수 있게 되었습니다.

src/pages/chatbot/components/ChattingInput.tsx (2)

44-44: 입력 필드에 적절한 접근성 레이블이 추가되었습니다!

placeholder만으로는 불충분할 수 있으므로 aria-label을 추가하여 스크린 리더 사용자에게 명확한 컨텍스트를 제공합니다.

52-52: 아이콘 버튼에 적절한 접근성 레이블이 추가되었습니다!

텍스트가 없는 아이콘 버튼에 aria-label을 추가하여 버튼의 기능을 명확히 전달합니다.

src/pages/auth/index.tsx (1)

22-23: 장식용 SVG에 대한 접근성 처리가 올바르게 적용되었습니다!

aria-hidden="true"와 focusable="false"를 사용하여 장식 목적의 SVG를 보조 기술에서 적절히 제외했습니다. 이는 WAI-ARIA 모범 사례를 잘 따르고 있습니다.

src/pages/mypage/index.tsx (1)

22-22: 섹션별 접근성 레이블이 잘 적용되었습니다!

각 섹션에 명확한 aria-label을 추가하여 스크린 리더 사용자가 페이지 구조를 쉽게 탐색할 수 있게 되었습니다.

Also applies to: 28-28, 51-51

src/pages/main/index.tsx (1)

26-27: 적절한 장식 이미지 처리입니다.

배너 이미지를 alt=""와 aria-hidden="true"로 마크업한 것은 장식 이미지에 대한 올바른 접근 방식입니다.

src/pages/main/Board.tsx (1)

11-15: 적절한 접근성 향상입니다.

<main> 요소에 role="main"과 aria-label을 추가했습니다. 시맨틱 HTML 요소에는 암시적 역할이 있으므로 role="main"은 기술적으로 중복이지만, 일부 오래된 스크린 리더와의 호환성을 위해 명시적으로 지정하는 것은 해롭지 않습니다. aria-label은 페이지 컨텍스트를 명확히 전달합니다.

src/pages/main/PostCard.tsx (2)

10-11: 적절한 랜드마크 역할 지정입니다.

루트 컨테이너에 role="main"과 aria-label을 추가하여 페이지의 주요 콘텐츠 영역을 명확히 표시했습니다.

32-46: 버튼 접근성이 잘 구현되었습니다.

각 버튼에 명확한 aria-label을 추가하고 아이콘을 aria-hidden="true"로 표시하여 스크린 리더가 장식적 요소를 무시하도록 했습니다. 이는 접근성 모범 사례에 부합합니다.

src/shared/components/flipCard/FlipCard.tsx (1)

22-26: 훌륭한 키보드 접근성 구현입니다.

role="button", tabIndex={0}, 동적 aria-label, aria-pressed를 조합하여 완전한 키보드 접근성을 제공합니다. 토글 버튼으로서 적절한 의미론적 구조입니다.

src/pages/chatbot/components/ChattingBubble.tsx (1)

35-40: 메시지 접근성이 향상되었습니다.

채팅 버블에 aria-label을 추가하여 스크린 리더 사용자가 메시지의 발신자를 구분할 수 있도록 했습니다. 기존 스타일링을 유지하면서 접근성을 개선하는 좋은 방법입니다.

src/pages/main/Node.tsx (2)

20-24: 페이지 구조가 접근성 면에서 명확합니다.

<main> 요소에 role="main"과 동적 aria-label을 추가하여 페이지의 주요 콘텐츠 영역을 명확히 표시했습니다.

37-60: 스탬프 버튼의 접근성이 잘 구현되었습니다.

버튼의 상태에 따라 변경되는 aria-label과 장식적 아이콘에 대한 aria-hidden="true" 설정으로 스크린 리더 사용자가 버튼의 목적과 상태를 명확히 이해할 수 있습니다.

src/shared/components/container/EventCard.tsx (1)

131-147: 대형 카드의 접근성 구현이 우수합니다.

하트 아이콘에 isInteractive, pressed, aria-label 속성을 적절히 사용하여 키보드 접근성과 스크린 리더 지원을 완벽하게 구현했습니다. 이는 접근성 모범 사례입니다.

src/pages/chatbot/index.tsx (2)

62-65: LGTM!

장식용 요소에 aria-hidden="true"를 적용한 것은 스크린 리더에서 불필요한 요소를 숨기는 올바른 접근입니다.

86-86: LGTM!

스크롤 앵커 요소를 aria-hidden="true"로 표시한 것은 올바른 접근입니다.

src/pages/loading/index.tsx (1)

13-16: LGTM!

장식용 SVG와 Lottie 애니메이션에 aria-hidden="true"를 적용한 것은 올바른 접근입니다.

Also applies to: 39-39

src/shared/icons/components/icon.tsx (1)

42-45: LGTM!

isInteractive와 pressed prop 추가가 적절하게 타입 정의되었습니다.

Also applies to: 57-60

src/pages/main/components/board/Boardgame.tsx (2)

9-15: LGTM!

네비게이션 로직을 handleCellClick으로 중앙화한 것은 좋은 리팩토링입니다. TODO 주석이 있으니 로그인 체크 구현을 잊지 마세요.

48-71: LGTM!

비활성 셀을 aria-hidden으로 숨기고, 활성 셀에 role="button", 키보드 핸들러(Enter/Space), 그리고 설명적인 aria-label을 제공한 것은 훌륭한 접근성 구현입니다.

src/pages/chatbot/index.tsx

src/pages/events/components/DateTag.tsx

coderabbitai · 2025-11-09T18:37:39Z

src/pages/events/index.tsx

+          {/* 스크린리더가 “날짜 선택”으로 읽히도록 추가 */}
+          <label htmlFor="event-date" className="sr-only">
+            행사 날짜 선택
+          </label>
          <DatePicker value={date} onChange={setDate} />


🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

label의 htmlFor 속성이 DatePicker와 연결되지 않을 수 있습니다.

htmlFor="event-date"를 사용하고 있지만, DatePicker 컴포넌트에 해당 id를 전달하지 않고 있습니다. DatePicker가 내부적으로 id="event-date"를 가진 input을 렌더링하지 않는다면 label과 input의 연결이 작동하지 않아 접근성이 손상됩니다.

다음 스크립트로 DatePicker 컴포넌트의 구현을 확인하세요:

해결 방법:

Option 1: DatePicker에 id prop 전달

- <label htmlFor="event-date" className="sr-only"> + <label htmlFor="event-date-picker" className="sr-only"> 행사 날짜 선택 </label> - <DatePicker value={date} onChange={setDate} /> + <DatePicker id="event-date-picker" value={date} onChange={setDate} />

Option 2: htmlFor 제거하고 aria-label 사용

- <label htmlFor="event-date" className="sr-only"> - 행사 날짜 선택 - </label> - <DatePicker value={date} onChange={setDate} /> + <div aria-label="행사 날짜 선택"> + <DatePicker value={date} onChange={setDate} /> + </div>

🏁 Script executed:

#!/bin/bash # Description: DatePicker 컴포넌트가 id prop을 받는지 확인 # DatePicker 컴포넌트 구현 찾기 ast-grep --pattern $'export default function DatePicker($$$) { $$$ }' # 또는 파일 찾기 및 내용 확인 fd DatePicker.tsx --exec cat {}

Length of output: 2620

DatePicker가 표준 input이 아니므로 label의 htmlFor 속성이 작동하지 않습니다.

DatePicker는 Button 기반의 Popover 컴포넌트로, id prop을 지원하지 않습니다. 따라서 htmlFor="event-date"를 사용해도 연결할 input이 없어 label이 동작하지 않습니다.

해결 방법:

DatePicker 컴포넌트를 수정하여 aria-label prop을 지원하도록 변경:

interface DatePickerProps { value?: Date; onChange?: (date: Date) => void; defaultValue?: Date; className?: string; + aria-label?: string; } export function DatePicker({ value, onChange, defaultValue, className, + 'aria-label': ariaLabel, ...calendarProps }: DatePickerProps) { // ... return ( <div className={cn('flex flex-col gap-3', className)}> <Popover open={open} onOpenChange={setOpen}> <PopoverTrigger asChild> - <Button className='w-[16rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-300 bg-pink-50 border border-pink-100'> + <Button aria-label={ariaLabel} className='w-[16rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-300 bg-pink-50 border border-pink-100'>

그 후 사용 시:

- <label htmlFor="event-date" className="sr-only"> - 행사 날짜 선택 - </label> - <DatePicker value={date} onChange={setDate} /> + <DatePicker aria-label="행사 날짜 선택" value={date} onChange={setDate} />

Committable suggestion skipped: line range outside the PR's diff.

src/pages/loading/index.tsx

src/pages/main/components/stampBoard/Stamp.tsx

src/pages/map/components/CourseSelectSection.tsx

src/pages/map/result/components/TagGroup.tsx

src/shared/components/flipCard/FlipCard.tsx

src/shared/icons/components/icon.tsx

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (3)

src/pages/map/result/components/TagGroup.tsx (1)
31-36: aria-label 구현은 훌륭하지만, aria-pressed는 제거를 권장합니다.

이전 리뷰 코멘트를 반영하여 aria-pressed 로직을 수정해주신 점 감사합니다. 하지만 단일 뷰 전환 버튼에서 aria-pressed 사용은 여전히 의미론적으로 혼란을 줄 수 있습니다:

aria-pressed는 주로 지속적인 on/off 기능(예: 텍스트 에디터의 굵게 버튼, 알림 토글)에 적합합니다.

뷰 전환 버튼, 특히 "다음 액션"을 표시하는 단일 버튼의 경우, pressed 상태가 "현재 활성 뷰"를 의미하는지 "버튼이 제어하는 기능"을 의미하는지 모호합니다.

현재 aria-label은 이미 완벽하게 구현되어 있습니다:

현재 상태("현재 리스트 보기입니다")

전환 액션("지도로 전환하려면 클릭하세요")

스크린 리더 사용자에게 필요한 모든 컨텍스트 제공

다음과 같이 aria-pressed를 제거하는 것을 권장합니다:
       <Tag
         label={viewMode === 'list' ? '지도로 보기' : '리스트로 보기'}
         icon={viewMode === 'list' ? 'MapPin_' : 'ListButton'}
         variant="toggle"
         onClick={onToggleView}
-        aria-pressed={viewMode === 'list'}
         aria-label={
           viewMode === 'list'
             ? '현재 리스트 보기입니다. 지도로 전환하려면 클릭하세요.'
             : '현재 지도 보기입니다. 리스트로 전환하려면 클릭하세요.'
         }
       />
참고: WAI-ARIA Authoring Practices에서 뷰 전환의 경우 명확한 aria-label만으로도 충분하다고 안내하고 있습니다.
src/pages/map/components/CourseSelectSection.tsx (1)
44-51: 이전 리뷰에서 지적된 aria-label 중복 문제가 해결되었습니다!

aria-label 속성이 제거되어 CommonButton의 네이티브 텍스트가 올바르게 스크린 리더에 전달됩니다. aria-pressed 속성도 적절히 적용되어 토글 버튼 상태를 명확히 나타냅니다.

선택적 개선 사항:
의미론적 HTML을 위해 div[role="listitem"] 대신 네이티브 <li> 요소 사용을 고려해보세요. ARIA 역할보다 시맨틱 HTML이 우선시되는 것이 웹 표준 권장사항입니다.
-          {Array.isArray(options) &&
-            options.map(({ id, label }) => (
-              <div role="listitem" key={id}>
+          {Array.isArray(options) &&
+            options.map(({ id, label }) => (
+              <li key={id}>
                <CommonButton
                  label={label}
                  aria-pressed={selected === id}
                  variant={selected === id ? 'active' : 'default'}
                  onClick={() => onSelect(selected === id ? null : id)}
                />
-              </div>
+              </li>
          ))}
그리고 부모 컨테이너를 <ul>로 변경:
-        <div
-          className="flex justify-center gap-[0.8rem] min-w-max"
-          style={{ WebkitOverflowScrolling: 'touch' }}
-          role="list"
-        >
+        <ul
+          className="flex justify-center gap-[0.8rem] min-w-max list-none"
+          style={{ WebkitOverflowScrolling: 'touch' }}
+        >
src/pages/events/index.tsx (1)
49-52: 중복된 접근성 레이블을 제거하세요.

<label htmlFor="event-date">와 DatePicker의 ariaLabel 속성이 모두 존재합니다. DatePicker는 네이티브 input이 아닌 Button 기반 컴포넌트이므로 htmlFor가 작동하지 않습니다. ariaLabel만으로 충분하므로 <label> 요소를 제거하세요.
-          {/* 스크린리더가 "날짜 선택"으로 읽히도록 추가 */}
-          <label htmlFor="event-date" className="sr-only">
-            행사 날짜 선택
-          </label>
           <DatePicker ariaLabel="행사 날짜 선택" value={date} onChange={setDate} />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1207dca and a6c4179.

📒 Files selected for processing (11)

src/pages/chatbot/index.tsx (2 hunks)
src/pages/events/components/DateTag.tsx (1 hunks)
src/pages/events/index.tsx (2 hunks)
src/pages/loading/index.tsx (2 hunks)
src/pages/main/components/board/Boardgame.tsx (1 hunks)
src/pages/main/components/stampBoard/Stamp.tsx (2 hunks)
src/pages/map/components/CourseSelectSection.tsx (1 hunks)
src/pages/map/result/components/TagGroup.tsx (1 hunks)
src/shared/components/datePicker/DatePicker.tsx (2 hunks)
src/shared/components/flipCard/FlipCard.tsx (1 hunks)
src/shared/icons/components/icon.tsx (5 hunks)

🚧 Files skipped from review as they are similar to previous changes (5)

src/pages/chatbot/index.tsx
src/pages/main/components/stampBoard/Stamp.tsx
src/pages/events/components/DateTag.tsx
src/shared/components/flipCard/FlipCard.tsx
src/pages/main/components/board/Boardgame.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/pages/events/index.tsx (1)

src/shared/components/datePicker/DatePicker.tsx (1)

DatePicker (17-92)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (6)

src/pages/loading/index.tsx (2)

7-12: 이전 리뷰 지적사항이 완벽하게 해결되었습니다!

role="status"와 aria-live="polite" 추가로 aria-label이 스크린 리더에 올바르게 전달됩니다. 로딩 상태를 접근 가능하게 만든 훌륭한 개선입니다.

13-16: 장식용 요소에 대한 접근성 처리가 올바릅니다.

SVG 배경과 Lottie 애니메이션에 aria-hidden="true"를 추가하여 스크린 리더가 장식용 요소를 무시하도록 했습니다. 의미 있는 텍스트 정보는 aria-label을 통해 전달되므로 적절한 구현입니다.

Also applies to: 36-36

src/shared/icons/components/icon.tsx (1)

45-46: 이전 리뷰의 키보드 접근성 이슈가 완벽하게 해결되었습니다!

isInteractive 플래그에 따라 키보드 이벤트 핸들러가 올바르게 구현되었습니다:

Enter와 Space 키로 아이콘을 활성화할 수 있습니다

Space 키의 preventDefault()로 페이지 스크롤을 방지합니다

role="button", tabIndex={0}, aria-pressed 속성이 조건부로 적용됩니다

WAI-ARIA 버튼 패턴을 올바르게 따르고 있습니다

키보드 사용자가 이제 마우스 사용자와 동일하게 상호작용할 수 있습니다.

Also applies to: 60-61, 79-85, 119-124

src/shared/components/datePicker/DatePicker.tsx (1)

14-14: DatePicker에 ariaLabel prop 추가로 접근성이 향상되었습니다.

날짜 선택 버튼에 대한 명시적인 접근 가능한 레이블을 제공할 수 있게 되었습니다. 구현이 깔끔하고 선택적 prop으로 기존 사용처에 영향을 주지 않습니다.

Also applies to: 22-22, 66-68

src/pages/events/index.tsx (2)

57-63: 이벤트 목록 섹션에 aria-label 추가가 적절합니다.

<section aria-label="이벤트 목록">으로 섹션의 목적이 명확해져 스크린 리더 사용자의 탐색이 개선됩니다.

82-86: 빈 상태에 대한 접근성 처리가 올바릅니다.

role="status"와 aria-live="polite"를 사용하여 필터링 결과가 비어있을 때 스크린 리더 사용자에게 적절히 알립니다. 동적 콘텐츠 업데이트 시 비침입적인 방식으로 정보를 전달합니다.

src/shared/icons/components/icon.tsx

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/shared/components/datePicker/DatePicker.tsx (1)

48-54: 가독성 향상을 위한 리팩토링

삼항 연산자를 명시적인 if/else 블록으로 변경하여 로직의 의도가 더 명확해졌습니다. 기능적으로는 동일하지만 코드의 가독성이 개선되었습니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a6c4179 and 80874f9.

📒 Files selected for processing (2)

src/shared/components/datePicker/DatePicker.tsx (3 hunks)
src/shared/icons/components/icon.tsx (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

src/shared/icons/components/icon.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (1)

src/shared/components/datePicker/DatePicker.tsx (1)

14-14: 접근성 개선을 위한 ariaLabel 속성 추가 승인

ariaLabel 옵션 속성을 추가하고 Button 컴포넌트에 aria-label로 전달한 것은 스크린 리더 사용자에게 더 명확한 컨텍스트를 제공합니다. 선택적 속성이므로 기존 코드와의 호환성도 유지되며, React는 undefined 값을 올바르게 처리하여 속성을 렌더링하지 않습니다.

Also applies to: 22-22, 70-72

KongMezu

aria 구조 잘 적용하신거 같습니다! 많은 양이었을 텐데.. 코드 하나하나 수고하셨습니다! 큰 리뷰는 없어서 바로 approve 하겠습니다!

KongMezu · 2025-11-09T19:28:26Z

src/shared/icons/components/icon.tsx

여기 ariaLabel?: string; 도 넣어서 아이콘 하나하나도 스크린리더 적용하면 어떨까요?

이 부분은 추가로 넣어보겠습니다:)

refactor/web-accessibility

1207dca

skyblue1232 self-assigned this Nov 9, 2025

skyblue1232 requested review from KongMezu and jjangminii as code owners November 9, 2025 18:33

skyblue1232 added the refactor 프로덕션 코드 리팩토링업, QA 반영 label Nov 9, 2025

skyblue1232 linked an issue Nov 9, 2025 that may be closed by this pull request

[refactor] 웹 접근성 개선 - ARIA 속성 및 시맨틱 마크업 적용 #95

Closed

5 tasks

github-actions bot added the comment 필요한 주석 추가 및 변경 label Nov 9, 2025

skyblue1232 changed the title ~~🛠️ Refactor: 웹 접근성 강화 (aria 적용 등 스크린 리더)~~ 🛠️ Refactor: 웹 접근성 강화 (ARIA 속성 및 시맨틱 구조 개선) Nov 9, 2025

coderabbitai bot reviewed Nov 9, 2025

View reviewed changes

fix/web-accessibility

a6c4179

vercel bot had a problem deploying to Preview November 9, 2025 18:55 Failure

coderabbitai bot reviewed Nov 9, 2025

View reviewed changes

src/shared/icons/components/icon.tsx Outdated Show resolved Hide resolved

fix/build

80874f9

vercel bot deployed to Preview November 9, 2025 19:05 View deployment

coderabbitai bot reviewed Nov 9, 2025

View reviewed changes

KongMezu approved these changes Nov 9, 2025

View reviewed changes

skyblue1232 merged commit b894889 into develop Nov 9, 2025
6 checks passed

This was referenced Nov 11, 2025

✨Feat: 카카오맵 수정 및 AI 코스 추천/코스 세션 조회 api 연결 #109

Merged

🔗API & ✨Feat : 이벤트 페이지 api 연결 #123

Merged

♻️Refactor : 행사 날짜 - 당일로 포맷팅 #143

Merged

Conversation

skyblue1232 commented Nov 9, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔥 작업 내용

리팩토링 목적

⚙️ 기술 포인트

🤔 추후 작업 사항

🔗 관련 이슈

PR Point (To Reviewer)

📸 피그마 스크린샷 or 기능 GIF

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Nov 9, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

KongMezu left a comment

Choose a reason for hiding this comment

Uh oh!

KongMezu Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

skyblue1232 Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

skyblue1232 commented Nov 9, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Nov 9, 2025 •

edited

Loading

coderabbitai bot commented Nov 9, 2025 •

edited

Loading