🛠️ Refactor: 웹 접근성 강화 (ARIA 속성 및 시맨틱 구조 개선)

src/pages/auth/index.tsx

@@ -19,6 +19,8 @@ export default function LoginPage() {
       {/* 그라데이션 영역 */}
       <div className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'>
         <svg
+          aria-hidden="true" 
+          focusable="false" 
           xmlns='http://www.w3.org/2000/svg'
           viewBox='0 0 402 194'
           className='absolute inset-0 w-full h-full'

src/pages/chatbot/components/ChattingBubble.tsx

@@ -32,7 +32,12 @@ interface ChattingProps extends VariantProps<typeof chatBubbleStyle> {
 export default function Chatting({ message, variant }: ChattingProps) {
   return (
     <div className='w-full flex flex-col'>
-      <div className={cn(chatBubbleStyle({ variant }))}>{message}</div>
+      <div 
+        className={cn(chatBubbleStyle({ variant }))}
+        aria-label={variant === 'sent' ? '내 메시지' : '상대방 메시지'}
+      >
+        {message}
+      </div>
     </div>
   );
 }

src/pages/chatbot/components/ChattingInput.tsx

@@ -41,13 +41,15 @@ export default function ChattingInput({ onSend }: ChattingInputProps) {
           onKeyDown={handleKeyDown}
           type='text'
           placeholder='무엇이든 물어보세요'
+          aria-label="채팅 메시지 입력"
           className='w-full bg-transparent outline-none text-label-lg placeholder:text-gray-300 text-gray-900'
         />
       </div>
 
       <button
         type='button'
         onClick={handleSubmit}
+        aria-label="메시지 전송"
         className={cn(
           'w-[4rem] h-[4rem] flex justify-center items-center rounded-[2rem] bg-mint-500 flex-shrink-0',
         )}

src/pages/chatbot/index.tsx

@@ -50,14 +50,23 @@ export default function ChatPage() {
       </div>
 
       {/* 메인 콘텐츠 */}
-      <main className={cn(mainStyle())}>
+      <main 
+        role="log"
+        aria-label="채팅 내용"
+        aria-live="polite"
+        className={cn(mainStyle())}
+      >
         {/* 로고 + 기본 멘트 */}
         <div className={cn(introStyle())}>
           {/* 로고 자리 (임시) */}
-          <div className='w-[6rem] h-[6rem] rounded-full bg-gray-200 flex-shrink-0' />
+          <div 
+            className='w-[6rem] h-[6rem] rounded-full bg-gray-200 flex-shrink-0'
+            aria-hidden="true"
+          />
           <Chatting
             message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
             variant='received'
+            aria-label="글다의 메시지: 안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요."
           />
           <Chatting
             message='원하시는 정보를 물어봐주세요!'
@@ -73,7 +82,7 @@ export default function ChatPage() {
           ))}
 
         {/* 스크롤 */}
-        <div ref={bottomRef} />
+        <div ref={bottomRef} aria-hidden="true" />
       </main>
 
       {/* 입력창 */}

src/pages/events/[id].tsx

@@ -33,12 +33,13 @@ const EventDetailPage = () => {
         )}
       >
         {/* 행사 기간 */}
-        <div className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+        <div aria-label="행사 기간" className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
           <DateTag startDate={startDate} endDate={endDate} />
         </div>
 
         {/* 대표 이미지 */}
         <section
+          aria-label="행사 대표 이미지"
           className={cn(
             'relative w-full flex justify-center max-w-[35.4rem]',
             'mt-[1rem]'
@@ -55,12 +56,15 @@ const EventDetailPage = () => {
           ) : (
             <div
               className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
+              role="img"
+              aria-label={`${name} 이미지가 제공되지 않습니다.`}
             />
           )}
         </section>
 
         {/* 행사 카드 */}
         <div
+          aria-label="행사 정보"
           className={cn(
             'flex flex-col items-center w-full gap-[0.8rem]',
             'mt-[0.8rem]'
@@ -76,6 +80,7 @@ const EventDetailPage = () => {
 
           {/* 관련 행사 */}
           <div
+            aria-label="관련 행사 목록"
             className={cn(
               'grid grid-cols-2 gap-[1.2rem] justify-items-center w-full max-w-[35.4rem]'
             )}

src/pages/events/components/DateTag.tsx

@@ -34,8 +34,11 @@ export default function DateTag({
   if (!startDate && !endDate) return null;
 
   return (
-    <div className={cn(dateTagStyle(), className)}>
-       {formatDate(startDate)} ~ {formatDate(endDate)}
+    <div 
+      className={cn(dateTagStyle(), className)}
+      aria-label={`${formatDate(startDate)}부터 ${formatDate(endDate)}까지`}
+    >
+      {formatDate(startDate)} ~ {formatDate(endDate)}
     </div>
   );
 }

src/pages/events/index.tsx

@@ -45,12 +45,17 @@ export default function EventPage() {
       <main className='w-full pt-[6.3rem] flex flex-col items-center'>
         {/* 날짜 선택 */}
         <div className='w-full mt-[3.7rem] flex justify-start'>
-          <DatePicker value={date} onChange={setDate} />
+          {/* 스크린리더가 “날짜 선택”으로 읽히도록 추가 */}
+          <label htmlFor="event-date" className="sr-only">
+            행사 날짜 선택
+          </label>
+          <DatePicker ariaLabel="행사 날짜 선택" value={date} onChange={setDate} />
         </div>
 
         {/* 행사카드 & 빈화면 */}
         {filteredEvents.length > 0 ? (
           <section
+            aria-label="이벤트 목록"
             className={cn(
               'grid w-full mt-[1.4rem]',
               'grid-cols-2 gap-x-[1.4rem] gap-y-[1.4rem]',
@@ -74,7 +79,11 @@ export default function EventPage() {
             ))}
           </section>
         ) : (
-          <div className='flex flex-col items-center justify-center text-center mt-[15rem]'>
+          <div 
+            className='flex flex-col items-center justify-center text-center mt-[15rem]'
+            role='status'
+            aria-live='polite'
+          >
             <Icon name='Stamp' size={120} color='gray-200' />
             <h2 className='text-headline-lg-serif text-gray-700 mt-[5rem]'>
               Ooops!

src/pages/loading/index.tsx

@@ -4,8 +4,16 @@ import loading_revised from '../../../public/lottie/loading_revised.json';
 
 export default function Loading() {
   return (
-    <div className='flex flex-col items-center justify-between h-[100vh] bg-white'>
-      <div className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'>
+    <div 
+      className='flex flex-col items-center justify-between h-[100vh] bg-white'
+      role='status'
+      aria-live='polite'
+      aria-label='페이지 로딩 중입니다'  
+    >
+      <div 
+        className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'
+        aria-hidden="true"
+      >
         <svg
           xmlns='http://www.w3.org/2000/svg'
           viewBox='0 0 402 194'
@@ -25,6 +33,7 @@ export default function Loading() {
           loop
           autoplay
           className='w-[18rem] h-[18rem]'
+          aria-hidden="true"
         />
       </div>
 

src/pages/main/Board.tsx

@@ -8,7 +8,11 @@ const Board = () => {
     <div className='relative w-full h-[100vh] bg-[#46d1cd] overflow-auto'>
       <Header title='지도' onClick={() => router.back()} />
 
-      <main className='relative pt-[11.8rem]'>
+      <main 
+        className='relative pt-[11.8rem]'
+        role="main" 
+        aria-label="보드 지도 페이지"
+      >
         <Boardgame />
       </main>
     </div>

src/pages/main/HiddenReward.tsx

@@ -15,6 +15,8 @@ const HiddenReward = () => {
         overflow-hidden
         cursor-pointer
       '
+      role="main"
+      aria-label="히든 리워드 획득 페이지"
       onClick={() =>
         router.push({
           pathname: '/main/PostCard',

src/pages/main/Node.tsx

@@ -17,7 +17,11 @@ const Board = () => {
         onClick={() => router.back()}
       />
 
-      <main className='relative pt-[14.3rem] gap-[1.2rem] flex flex-col '>
+      <main 
+        className='relative pt-[14.3rem] gap-[1.2rem] flex flex-col '
+        role="main"
+        aria-label={`${label ? label : '노드'} 상세 페이지`}
+      >
         <section className='relative w-full'>
           <Image
             src='/assets/board.svg'
@@ -31,6 +35,7 @@ const Board = () => {
           />
 
           <button
+            aria-label={isStamp ? '스탬프 획득 완료' : '스탬프 찍기'}
             className={cn('absolute bottom-0 right-0', isStamp && 'p-[2.5rem]')}
             onClick={
               !isStamp
@@ -50,6 +55,7 @@ const Board = () => {
               name={isStamp ? 'Stamp' : 'PressStamp'}
               color={isStamp ? 'pink-400' : 'gray-50'}
               size={isStamp ? 100 : 160}
+              aria-hidden="true"
             />
           </button>
         </section>

src/pages/main/PostCard.tsx

@@ -7,6 +7,8 @@ const PostCard = () => {
 
   return (
     <div
+      role="main"
+      aria-label="엽서 획득 페이지"
       className='
         relative w-full h-[100vh] px-[2.4rem]
         bg-gradient-to-b from-pink-100 to-white
@@ -30,14 +32,16 @@ const PostCard = () => {
         <button
           className='flex items-center justify-center w-[4.8rem] h-[4.8rem]'
           onClick={handleSave}
+          aria-label="엽서 이미지 저장"
         >
-          <Icon name='Save' color='gray-400' size={28} />
+          <Icon name='Save' color='gray-400' size={28} aria-hidden="true" />
         </button>
         <button
           className='flex items-center justify-center w-[4.8rem] h-[4.8rem]'
           onClick={handleShare}
+          aria-label="엽서 공유하기"
         >
-          <Icon name='Export' color='gray-400' size={28} />
+          <Icon name='Export' color='gray-400' size={28} aria-hidden="true" />
         </button>
       </div>
 

src/pages/main/components/board/Boardgame.tsx

@@ -5,44 +5,70 @@ import { useRouter } from 'next/router';
 
 const Boardgame = () => {
   const router = useRouter();
+
+  const handleCellClick = (label: string) => {
+    // TODO : 로그인 여부 체크
+    router.push({
+      pathname: '/main/Node',
+      query: { label },
+    });
+  };
+
   return (
-    <div className='relative w-full  h-full bg-[#46d1cd] overflow-hidden'>
+    <div
+      className="relative w-full h-full bg-[#46d1cd] overflow-hidden"
+      role="region" 
+      aria-label="보드게임 화면"
+    >
       <Image
-        src='/assets/background_.svg'
-        alt='board background'
+        src="/assets/background_.svg"
+        alt=""                       
         width={402}
         height={755}
-        className='w-full h-full object-cover'
+        className="w-full h-full object-cover"
         priority
+        aria-hidden="true"   
       />
 
       <div
-        className='
+        className="
           absolute top-0 left-0
           w-full h-full
           grid grid-cols-4 grid-rows-8 gap-0
           px-[2rem] pb-[1.7rem]
-        '
+        "
+        role="group"
+        aria-label="명소 탐험 보드"
       >
         {boardData.map((row, r) =>
           row.map((cell, c) => {
             const key = `cell-${r}-${c}`;
 
             if (!cell.active) {
-              return <div key={key} className='bg-transparent' />;
+              return (
+                <div
+                  key={key}
+                  className="bg-transparent"
+                  aria-hidden="true"   // 비활성 셀은 낭독 제외
+                />
+              );
             }
 
             return (
               <div
                 key={key}
+                role="button"         
+                tabIndex={0}      
+                aria-label={cell.label ? `${cell.label} 명소로 이동` : '명소로 이동'}
                 onClick={() => {
-                  // TODO : 로그인 여부 체크
-                  router.push({
-                    pathname: '/main/Node',
-                    query: { label: cell.label },
-                  });
+                  if (cell.label) handleCellClick(cell.label);
+                }}
+                onKeyDown={(e) => {
+                  if ((e.key === 'Enter' || e.key === ' ') && cell.label) {
+                    handleCellClick(cell.label);
+                  }
                 }}
-              ></div>
+              />
             );
           }),
         )}

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

@@ -24,6 +24,8 @@ const Progress = ({ className, value, ...props }: ProgressProps) => {
       )}
       value={progressPercent}
       max={100}
+      aria-label="진행률"
+      aria-valuetext={`${Math.round(progressPercent)}% 완료됨`}
       {...props}
     >
       <ProgressPrimitive.Indicator

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

@@ -11,11 +11,12 @@ const Stamp = ({ index, acquired, className }: StampProps) => {
   if (acquired) {
     return (
       <div
+        role="img"
+        aria-label={`${index + 1}번째 스탬프 ${acquired ? '획득' : '미획득'}`}
         className={cn(
           'flex items-center justify-center w-[2.8rem] h-[2.8rem]',
           className,
         )}
-        aria-label={`${index + 1}번째 스탬프 획득`}
       >
         <Icon name='Stamp' size={28} color='pink-400' aria-hidden />
       </div>
@@ -28,7 +29,7 @@ const Stamp = ({ index, acquired, className }: StampProps) => {
         'rounded-full bg-pink-100 w-[2.8rem] h-[2.8rem]',
         className,
       )}
-      aria-label={`${index + 1}번째 스탬프 미획득`}
+      aria-label={`${index + 1}번째 스탬프 획득`}
     />
   );
 };

src/pages/main/components/video/VideoPlayer.tsx

@@ -10,7 +10,6 @@ export default function VideoPlayer({ src, label, onEnd }: VideoPlayerProps) {
   return (
     <div
       className="relative w-full h-full overflow-hidden"
-      role="region"
       aria-label={label ? `${label} 영상 플레이어` : '비디오 대기 화면'}
     >
       {src ? (
@@ -24,7 +23,6 @@ export default function VideoPlayer({ src, label, onEnd }: VideoPlayerProps) {
           onEnded={onEnd}
           className="w-full h-full rounded-[2rem] object-cover"
           aria-label={`${label} 영상`}
-          aria-describedby="video-description"
         />
       ) : (
         <>