fix: 코드 리뷰 피드백 반영 (UltraQA)

- Layout: useRef DOM mutation → useState로 전환 (라우트 변경 시 stale style 방지)
- scroll-behavior: prefers-reduced-motion 미디어 쿼리로 접근성 개선
- HeroSection: fixed header 오프셋 보정 (pt 복원)
- TermDetailPage: 예시 박스 스타일 상수 추출, 복사 버튼 44px 터치 타겟
- Container maxWidth: !important 제거, 미디어 쿼리 방식으로 변경

Author: 9bow

src/components/HeroSection.tsx

@@ -15,7 +15,7 @@ export function HeroSection({ totalTerms, totalMeanings, query, onQueryChange }:
       sx={{
         background: 'linear-gradient(135deg, #ee4c2c 0%, #2D2D2D 100%)',
         color: 'white',
-        pt: { xs: 8, md: 9 },
+        pt: { xs: 10, md: 11 },
         pb: { xs: 3, md: 4 },
         mb: 0,
       }}

src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { AppBar, Toolbar, Typography, Container, Box, IconButton, Link, Button } from '@mui/material'
 import GitHubIcon from '@mui/icons-material/GitHub'
 import SearchIcon from '@mui/icons-material/Search'
@@ -12,39 +12,41 @@ export function Layout({ children }: LayoutProps): React.ReactNode {
   const navigate = useNavigate()
   const location = useLocation()
   const isHomePage = location.pathname === '/' || location.pathname === ''
-  const appBarRef = useRef<HTMLDivElement>(null)
+  const [scrolled, setScrolled] = useState(false)
 
   useEffect(() => {
     if (!isHomePage) return
 
     const handleScroll = () => {
-      if (!appBarRef.current) return
-      const scrolled = window.scrollY > 60
-      appBarRef.current.style.backgroundColor = scrolled ? '#262626' : 'transparent'
-      appBarRef.current.style.boxShadow = scrolled ? '0 2px 8px rgba(0,0,0,0.15)' : 'none'
+      setScrolled(window.scrollY > 60)
     }
 
     window.addEventListener('scroll', handleScroll, { passive: true })
     handleScroll()
-    return () => window.removeEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      setScrolled(false)
+    }
   }, [isHomePage])
 
-  const handleSearchClick = () => {
+  const handleSearchClick = useCallback(() => {
     if (isHomePage) {
       window.scrollTo({ top: 0, behavior: 'smooth' })
     } else {
       navigate('/')
     }
-  }
+  }, [isHomePage, navigate])
+
+  const showSolidHeader = !isHomePage || scrolled
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       <AppBar
-        ref={appBarRef}
         position="fixed"
         elevation={0}
         sx={{
-          backgroundColor: isHomePage ? 'transparent' : '#262626',
+          backgroundColor: showSolidHeader ? '#262626' : 'transparent',
+          boxShadow: showSolidHeader ? '0 2px 8px rgba(0,0,0,0.15)' : 'none',
           transition: 'background-color 0.3s ease, box-shadow 0.3s ease',
           zIndex: 20,
         }}
@@ -86,7 +88,7 @@ export function Layout({ children }: LayoutProps): React.ReactNode {
         </Toolbar>
       </AppBar>
 
-      <Box component="main" sx={{ flex: 1, pt: 'var(--header-height)' }}>
+      <Box component="main" sx={{ flex: 1, pt: isHomePage ? 0 : 'var(--header-height)' }}>
         {isHomePage ? (
           children
         ) : (

src/index.css

@@ -8,8 +8,10 @@
   }
 }
 
-html {
-  scroll-behavior: smooth;
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
 }
 
 body {

src/pages/TermDetailPage.tsx

@@ -31,6 +31,15 @@ function isTermExample(example: string | TermExample): example is TermExample {
   return typeof example === 'object' && 'en' in example && 'ko' in example
 }
 
+const exampleBoxSx = {
+  borderLeft: '4px solid',
+  borderLeftColor: 'rgba(238, 76, 44, 0.2)',
+  backgroundColor: '#F7F7F8',
+  px: 2,
+  py: 1.5,
+  borderRadius: 1,
+} as const
+
 function MeaningContent({ meaning }: { meaning: TermMeaning }) {
   return (
     <Box>
@@ -46,17 +55,7 @@ function MeaningContent({ meaning }: { meaning: TermMeaning }) {
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
             {meaning.examples.map((example, exIndex) =>
               isTermExample(example) ? (
-                <Box
-                  key={exIndex}
-                  sx={{
-                    borderLeft: '4px solid',
-                    borderLeftColor: 'rgba(238, 76, 44, 0.2)',
-                    backgroundColor: '#F7F7F8',
-                    px: 2,
-                    py: 1.5,
-                    borderRadius: 1,
-                  }}
-                >
+                <Box key={exIndex} sx={exampleBoxSx}>
                   <Typography variant="body2" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
                     {example.en}
                   </Typography>
@@ -76,17 +75,7 @@ function MeaningContent({ meaning }: { meaning: TermMeaning }) {
                   )}
                 </Box>
               ) : (
-                <Box
-                  key={exIndex}
-                  sx={{
-                    borderLeft: '4px solid',
-                    borderLeftColor: 'rgba(238, 76, 44, 0.2)',
-                    backgroundColor: '#F7F7F8',
-                    px: 2,
-                    py: 1.5,
-                    borderRadius: 1,
-                  }}
-                >
+                <Box key={exIndex} sx={exampleBoxSx}>
                   <Typography variant="body2">{example}</Typography>
                 </Box>
               )
@@ -253,6 +242,7 @@ export function TermDetailPage(): React.ReactNode {
                 size="small"
                 onClick={() => handleCopyKorean(term.meanings[0].korean)}
                 aria-label={`${term.meanings[0].korean} 복사`}
+                sx={{ minHeight: 44, minWidth: 44 }}
               >
                 <ContentCopyIcon fontSize="small" />
               </IconButton>

src/theme.ts

@@ -102,7 +102,9 @@ export const theme = createTheme({
     MuiContainer: {
       styleOverrides: {
         maxWidthLg: {
-          maxWidth: '1300px !important',
+          '@media (min-width: 1200px)': {
+            maxWidth: 1300,
+          },
         },
       },
     },