Html 문법 오류

packages/common/components/src/ui/button/index.tsx

@@ -61,7 +61,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
-        role="button"
         className={cn(buttonVariants({ variant, size, className }), color)}
         ref={ref}
         {...props}

packages/common/components/src/ui/header/index.tsx

@@ -26,7 +26,6 @@ import { SidebarTrigger } from "../sidebar";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { SearchForm } from "./search-form";
 import { NoticePopover } from "./notice-popover";
-import { ScrollArea, ScrollBar } from "../scroll-area";
 
 const appConfig = getConfig();
 const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
@@ -278,37 +277,43 @@ export function Header({
       <div className="flex w-full items-center justify-between px-2 sm:w-auto sm:justify-start sm:px-4 md:px-6">
         <div className="flex items-center gap-2 sm:gap-4">
           <SidebarTrigger className="size-12 !bg-transparent p-2 hover:!bg-accent [&>svg]:!size-full [&>svg]:text-foreground" />
-          <h1 className="flex flex-col items-center gap-2">
-            {mounted ? (
-              <img
-                ref={logoRef}
-                src={getLogoImage()}
-                className="h-[3rem]"
-                alt={`유역하수도 통합 정보 플랫폼 HASUON - ${siteInfo?.siteNm}`}
-                onLoad={() => {
-                  if (logoRef.current) {
-                    setLogoWidth(logoRef.current.offsetWidth);
-                  }
-                }}
-              />
-            ) : (
-              // h1 안에는 div(Skeleton)를 둘 수 없어 인라인 요소로 로딩 자리표시
-              <span
-                aria-hidden="true"
-                className="block h-[3rem] w-[15rem] animate-pulse rounded-md bg-[rgba(0,0,0,0.1)]"
-              />
-            )}
-            <span
-              className="text-[1.2rem] font-semibold text-foreground"
-              style={{
-                letterSpacing:
-                  logoWidth > 0
-                    ? `${(logoWidth - 120) / (siteInfo?.siteNm?.length || 1)}px`
-                    : "0.05em",
-              }}
+          <h1>
+            {/* 로고·사이트명 클릭 시 메인으로 이동 */}
+            <a
+              href="/"
+              className="flex flex-col items-center gap-2 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             >
-              {siteInfo?.siteNm}
-            </span>
+              {mounted ? (
+                <img
+                  ref={logoRef}
+                  src={getLogoImage()}
+                  className="h-[3rem]"
+                  alt={`유역하수도 통합 정보 플랫폼 HASUON - ${siteInfo?.siteNm ?? ""}`}
+                  onLoad={() => {
+                    if (logoRef.current) {
+                      setLogoWidth(logoRef.current.offsetWidth);
+                    }
+                  }}
+                />
+              ) : (
+                // h1 안에는 div(Skeleton)를 둘 수 없어 인라인 요소로 로딩 자리표시
+                <span
+                  aria-hidden="true"
+                  className="block h-[3rem] w-[15rem] animate-pulse rounded-md bg-[rgba(0,0,0,0.1)]"
+                />
+              )}
+              <span
+                className="text-[1.2rem] font-semibold text-foreground"
+                style={{
+                  letterSpacing:
+                    logoWidth > 0
+                      ? `${(logoWidth - 120) / (siteInfo?.siteNm?.length || 1)}px`
+                      : "0.05em",
+                }}
+              >
+                {siteInfo?.siteNm}
+              </span>
+            </a>
           </h1>
         </div>
         {/* 모바일에서 오른쪽 요소들 */}
@@ -369,11 +374,12 @@ export function Header({
         </div>
       )}
       {/* 데스크톱에서 중간 네비게이션 */}
-      <ScrollArea className="hidden max-w-[calc(100vw-60rem)] flex-1 items-center justify-center px-2 py-[0.4rem] sm:flex">
+      {/* Radix ScrollArea 는 body 안에 <style> 을 삽입해 마크업 오류가 발생하므로 기본 가로 스크롤(nav overflow-x-auto) 사용 */}
+      <div className="hidden min-w-0 max-w-[calc(100vw-60rem)] flex-1 items-center justify-center px-2 py-[0.4rem] sm:flex">
         {mounted &&
           userSiteList?.content &&
           userSiteList.content.length > 0 && (
-            <nav className="flex w-full flex-nowrap items-center justify-start gap-3 overflow-x-auto whitespace-nowrap p-[0.6rem] md:gap-6">
+            <nav className="flex w-full min-w-0 flex-nowrap items-center justify-start gap-3 overflow-x-auto whitespace-nowrap p-[0.6rem] [scrollbar-width:thin] md:gap-6">
               {userSiteList.content.map((site) => (
                 <a
                   key={site.siteId}
@@ -387,8 +393,7 @@ export function Header({
               ))}
             </nav>
           )}
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
+      </div>
       {/* 데스크톱에서 오른쪽 요소들 */}
       <div className="hidden items-center gap-2 px-2 sm:flex md:px-4">
         <SearchForm />
@@ -431,7 +436,7 @@ function ScreenZoomControls() {
   };
 
   return (
-    <div className="flex items-center gap-1" aria-label="화면 크기 조절">
+    <div role="group" className="flex items-center gap-1" aria-label="화면 크기 조절">
       <Button
         type="button"
         variant="ghost"