diff --git a/src/assets/Works_1.png b/src/assets/Works_1.png
new file mode 100644
index 0000000..4acf533
Binary files /dev/null and b/src/assets/Works_1.png differ
diff --git a/src/assets/Works.png b/src/assets/Works_2.png
similarity index 100%
rename from src/assets/Works.png
rename to src/assets/Works_2.png
diff --git a/src/assets/Works_3.png b/src/assets/Works_3.png
new file mode 100644
index 0000000..0e0923e
Binary files /dev/null and b/src/assets/Works_3.png differ
diff --git a/src/assets/homelogo.png b/src/assets/homelogo.png
new file mode 100644
index 0000000..263fe54
Binary files /dev/null and b/src/assets/homelogo.png differ
diff --git a/src/assets/instagram.png b/src/assets/instagram.png
new file mode 100644
index 0000000..95b1668
Binary files /dev/null and b/src/assets/instagram.png differ
diff --git a/src/components/about/Footer.tsx b/src/components/about/Footer.tsx
index 3997c7b..4431945 100644
--- a/src/components/about/Footer.tsx
+++ b/src/components/about/Footer.tsx
@@ -1,5 +1,7 @@
-import { FaInstagram, FaHome } from 'react-icons/fa'
+// import { FaInstagram, FaHome } from 'react-icons/fa'
 import logo from '../../assets/duksung.png'
+import Instagram from '../../assets/instagram.png'
+import Home from '../../assets/homelogo.png'
 
 const Footer = () => {
   return (
@@ -15,15 +17,15 @@ const Footer = () => {
           href="https://instagram.com/2025_wiscom"
           target="_blank"
           rel="noopener noreferrer"
-          className="w-10 h-10 rounded-full bg-[#A0896F] flex items-center justify-center"
+          className="w-10 h-10 rounded-full bg-[#9D8469] flex items-center justify-center"
         >
-          <FaInstagram className="text-white text-lg" />
+          <img src={Instagram} alt="인스타그램" className="w-[20px] h-[20px]" />
         </a>
         <a
           href="/"
-          className="w-10 h-10 rounded-full bg-[#A0896F] flex items-center justify-center"
+          className="w-10 h-10 rounded-full bg-[#9D8469] flex items-center justify-center"
         >
-          <FaHome className="text-white text-lg" />
+          <img src={Home} alt="홈" className="w-[20px] h-[20px]" />
         </a>
       </div>
       <div className="mb-3 leading-5">
diff --git a/src/components/works/FrameCard.tsx b/src/components/works/FrameCard.tsx
index ae864c7..d3a588f 100644
--- a/src/components/works/FrameCard.tsx
+++ b/src/components/works/FrameCard.tsx
@@ -1,4 +1,80 @@
-import frameImg from '../../assets/Works.png'
+// import frameImg from '../../assets/Works.png'
+
+// type Size = 'sm' | 'md' | 'lg'
+
+// interface Props {
+//   image: string
+//   onClick?: () => void
+//   size?: Size
+//   focused?: boolean
+// }
+
+// // 액자 PNG 안쪽 영역 비율
+// const INSET = {
+//   sm: { top: '14%', left: '12%', right: '12%', bottom: '14%' },
+//   md: { top: '12%', left: '10%', right: '10%', bottom: '12%' },
+//   lg: { top: '10%', left: '9%', right: '9%', bottom: '10%' },
+// }
+
+// export default function FrameCard({
+//   image,
+//   onClick,
+//   size = 'md',
+//   focused = false,
+// }: Props) {
+//   const wh =
+//     size === 'lg'
+//       ? 'h-[280px] w-[250px] max-lg:h-[300px] max-lg:w-[220px]'
+//       : size === 'sm'
+//         ? 'h-[240px] w-[175px] max-lg:h-[220px] max-lg:w-[160px]'
+//         : 'h-[300px] w-[220px] max-lg:h-[260px] max-lg:w-[190px]'
+
+//   const pad = INSET[size]
+//   const src = image?.startsWith('http://') ? 'https://' + image.slice(7) : image
+
+//   return (
+//     <button
+//       type="button"
+//       onClick={onClick}
+//       className={`
+//         snap-center shrink-0 outline-none transition-transform duration-300 cursor-pointer mt-2
+//         ${focused ? 'scale-105' : 'scale-95'}   //포커스 여부에 따라 크기 조정
+//       `}
+//     >
+//       <div className={`relative ${wh}`}>
+//         {/* 액자 이미지 */}
+//         <img
+//           src={frameImg}
+//           alt="frame"
+//           className="absolute inset-0 h-full w-full object-contain pointer-events-none select-none z-10"
+//           draggable={false}
+//         />
+
+//         {/* 사진 - 액자 안쪽 패딩 적용 */}
+//         <div
+//           className="absolute flex items-center justify-center overflow-hidden rounded-sm"
+//           style={{
+//             top: pad.top,
+//             left: pad.left,
+//             right: pad.right,
+//             bottom: pad.bottom,
+//           }}
+//         >
+//           <img
+//             src={src}
+//             alt="work"
+//             className="w-full object-cover"
+//             loading="lazy"
+//           />
+//         </div>
+//       </div>
+//     </button>
+//   )
+// }
+
+import frame1 from '../../assets/Works_1.png'
+import frame2 from '../../assets/Works_2.png'
+import frame3 from '../../assets/Works_3.png'
 
 type Size = 'sm' | 'md' | 'lg'
 
@@ -7,20 +83,23 @@ interface Props {
   onClick?: () => void
   size?: Size
   focused?: boolean
+  index?: number
 }
 
-// 액자 PNG 안쪽 영역 비율
 const INSET = {
   sm: { top: '14%', left: '12%', right: '12%', bottom: '14%' },
   md: { top: '12%', left: '10%', right: '10%', bottom: '12%' },
   lg: { top: '10%', left: '9%', right: '9%', bottom: '10%' },
 }
 
+const FRAMES = [frame1, frame2, frame3] as const
+
 export default function FrameCard({
   image,
   onClick,
   size = 'md',
   focused = false,
+  index = 0,
 }: Props) {
   const wh =
     size === 'lg'
@@ -32,25 +111,28 @@ export default function FrameCard({
   const pad = INSET[size]
   const src = image?.startsWith('http://') ? 'https://' + image.slice(7) : image
 
+  // 1,2,3 반복: 0,1,2 → (i % 3)로 선택
+  const frameSrc = FRAMES[index % 3]
+
   return (
     <button
       type="button"
       onClick={onClick}
       className={`
         snap-center shrink-0 outline-none transition-transform duration-300 cursor-pointer mt-2
-        ${focused ? 'scale-105' : 'scale-95'}   //포커스 여부에 따라 크기 조정
+        ${focused ? 'scale-105' : 'scale-95'}
       `}
     >
       <div className={`relative ${wh}`}>
-        {/* 액자 이미지 */}
+        {/* 액자 이미지 (1→2→3 반복) */}
         <img
-          src={frameImg}
+          src={frameSrc}
           alt="frame"
           className="absolute inset-0 h-full w-full object-contain pointer-events-none select-none z-10"
           draggable={false}
         />
 
-        {/* 사진 - 액자 안쪽 패딩 적용 */}
+        {/* 사진 */}
         <div
           className="absolute flex items-center justify-center overflow-hidden rounded-sm"
           style={{
diff --git a/src/pages/WorksDetailPage.tsx b/src/pages/WorksDetailPage.tsx
index 6b32e39..d5c15ab 100644
--- a/src/pages/WorksDetailPage.tsx
+++ b/src/pages/WorksDetailPage.tsx
@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useState, useCallback } from 'react'
+import {
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import DetailSection from '../components/workdetail/DetailSection'
 import MetaList from '../components/workdetail/MetaList'
@@ -9,6 +16,8 @@ import type { CategoryUI } from '../components/works/Tabs'
 import {
   fetchWorkDetail,
   type WorkDetail as WorkDetailType,
+  fetchWorkList,
+  type WorkItem,
 } from '../apis/works'
 import WorkHeader from '../components/workdetail/WorkHeader'
 import ImageLightbox from '../components/workdetail/ImageLightbox'
@@ -32,21 +41,24 @@ export default function WorksDetailPage() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
+  // 정렬용 목록
+  const [, setListLoading] = useState(false)
+  const [items, setItems] = useState<WorkItem[]>([])
+
   // 이미지 슬라이드 인덱스
   const [imgIdx, setImgIdx] = useState(0)
-
   const [lightboxOpen, setLightboxOpen] = useState(false)
   const openLightbox = useCallback(() => setLightboxOpen(true), [])
   const closeLightbox = useCallback(() => setLightboxOpen(false), [])
 
-  const backToList = useCallback(() => {
-    navigate(`/works?tab=${encodeURIComponent(category)}`)
-  }, [navigate, category])
+  // 최상단 스크롤용 앵커
+  const topRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     setImgIdx(0)
   }, [category, workId])
 
+  // 상세 데이터 로드
   useEffect(() => {
     if (!workId || Number.isNaN(workId)) {
       setError('잘못된 작품 ID입니다.')
@@ -68,17 +80,107 @@ export default function WorksDetailPage() {
     return () => ac.abort()
   }, [category, workId])
 
+  // 리스트 로드(정렬 기준 맞추기)
+  useEffect(() => {
+    const ac = new AbortController()
+    setListLoading(true)
+    fetchWorkList(category, ac.signal)
+      .then((list) => setItems(list))
+      .catch(() => setItems([]))
+      .finally(() => setListLoading(false))
+    return () => ac.abort()
+  }, [category])
+
+  // 리스트 페이지와 동일한 정렬 기준
+  const koCollator = useMemo(
+    () => new Intl.Collator('ko', { sensitivity: 'base', numeric: true }),
+    [],
+  )
+  const enCollator = useMemo(
+    () => new Intl.Collator('en', { sensitivity: 'base', numeric: true }),
+    [],
+  )
+
+  const getSortGroup = useCallback((name: string): number => {
+    const key = (name ?? '').trim().replace(/^[^A-Za-z0-9\uAC00-\uD7A3]+/, '')
+    const ch = key.charAt(0)
+    if (/^[\uAC00-\uD7A3]$/.test(ch)) return 0 // 한글
+    if (/^[A-Za-z]$/.test(ch)) return 1 // 영어
+    return 2 // 기타
+  }, [])
+
+  const compareProjectName = useCallback(
+    (a: WorkItem, b: WorkItem): number => {
+      const ga = getSortGroup(a.projectName)
+      const gb = getSortGroup(b.projectName)
+      if (ga !== gb) return ga - gb
+      if (ga === 0) return koCollator.compare(a.projectName, b.projectName)
+      if (ga === 1) return enCollator.compare(a.projectName, b.projectName)
+      return koCollator.compare(a.projectName, b.projectName)
+    },
+    [getSortGroup, koCollator, enCollator],
+  )
+
+  const sorted = useMemo(() => {
+    if (!items?.length) return []
+    return [...items].sort(compareProjectName)
+  }, [items, compareProjectName])
+
+  const currentIndex = useMemo(
+    () => sorted.findIndex((w) => w.id === workId),
+    [sorted, workId],
+  )
+  const prevId = currentIndex > 0 ? sorted[currentIndex - 1]?.id : undefined
+  const nextId =
+    currentIndex >= 0 && currentIndex < sorted.length - 1
+      ? sorted[currentIndex + 1]?.id
+      : undefined
+
+  // 스크롤 복원 억제 + 상단 고정
+  useLayoutEffect(() => {
+    if ('scrollRestoration' in history) {
+      try {
+        history.scrollRestoration = 'manual'
+      } catch {
+        console.log('')
+      }
+    }
+    window.scrollTo(0, 0)
+    topRef.current?.scrollIntoView({ block: 'start', inline: 'nearest' })
+  }, [category, workId])
+
+  // 로딩 완료 후 한 번 더 상단 고정(이미지 로딩 등 레이아웃 변동 대비)
+  useEffect(() => {
+    if (!loading) {
+      requestAnimationFrame(() => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+        topRef.current?.scrollIntoView({ block: 'start', inline: 'nearest' })
+      })
+    }
+  }, [loading])
+
+  // 현재 인덱스를 세션에 백업(브라우저 뒤로가기 복원)
+  useEffect(() => {
+    if (currentIndex >= 0 && typeof sessionStorage !== 'undefined') {
+      sessionStorage.setItem(`worksIdx:${category}`, String(currentIndex))
+    }
+  }, [category, currentIndex])
+
+  const backToList = useCallback(() => {
+    navigate(`/works?tab=${encodeURIComponent(category)}`, {
+      state: { fromIdx: currentIndex },
+    })
+  }, [navigate, category, currentIndex])
+
   const goPrev = useCallback(() => {
-    if (!data?.prev) return
-    navigate(`/works/${params.category}/${data.prev}`)
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }, [data?.prev, navigate, params.category])
+    if (!prevId) return
+    navigate(`/works/${params.category}/${prevId}`)
+  }, [navigate, params.category, prevId])
 
   const goNext = useCallback(() => {
-    if (!data?.next) return
-    navigate(`/works/${params.category}/${data.next}`)
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }, [data?.next, navigate, params.category])
+    if (!nextId) return
+    navigate(`/works/${params.category}/${nextId}`)
+  }, [navigate, params.category, nextId])
 
   if (loading) {
     return (
@@ -108,7 +210,8 @@ export default function WorksDetailPage() {
   const longBody = data.description || data.midDescription || ''
 
   return (
-    <div className="w-full pb-3">
+    <div key={`${category}-${workId}`} className="w-full pb-3">
+      <div ref={topRef} aria-hidden />
       <WorkHeader
         instagramUrl={data.instagramUrl}
         githubUrl={data.githubUrl}
@@ -155,13 +258,13 @@ export default function WorksDetailPage() {
         }
         body={<DetailSection>{longBody}</DetailSection>}
         nav={
-          // IOT, GAME이면 항상 숨김
+          // IOT, GAME은 숨김
           category === 'IOT' || category === 'GAME' ? undefined : (
             <DetailNav
               onPrev={goPrev}
               onNext={goNext}
-              prevDisabled={!data.prev}
-              nextDisabled={!data.next}
+              prevDisabled={!prevId}
+              nextDisabled={!nextId}
             />
           )
         }
diff --git a/src/pages/WorksPage.tsx b/src/pages/WorksPage.tsx
index fd63d2f..7995e4a 100644
--- a/src/pages/WorksPage.tsx
+++ b/src/pages/WorksPage.tsx
@@ -1,5 +1,313 @@
+// import { useCallback, useEffect, useRef, useState } from 'react'
+// import { useNavigate, useSearchParams } from 'react-router-dom'
+// import Tabs, { type CategoryUI } from '../components/works/Tabs'
+// import FrameCard from '../components/works/FrameCard'
+// import WorkExplan from '../components/works/WorkExplan'
+// import { fetchWorkList, type WorkItem } from '../apis/works'
+
+// const VALID_TABS: CategoryUI[] = ['ALL', 'WEB&APP', 'AI', 'IOT', 'GAME']
+// const isValidTab = (t: string | null): t is CategoryUI =>
+//   !!t && VALID_TABS.includes(t as CategoryUI)
+
+// export default function WorksPage() {
+//   const [searchParams, setSearchParams] = useSearchParams()
+//   const getInitialTab = () =>
+//     isValidTab(searchParams.get('tab'))
+//       ? (searchParams.get('tab') as CategoryUI)
+//       : 'ALL'
+
+//   const [active, setActive] = useState<CategoryUI>(getInitialTab)
+//   const [items, setItems] = useState<WorkItem[]>([])
+//   const [loading, setLoading] = useState(false)
+//   const [error, setError] = useState<string | null>(null)
+//   const [centerIdx, setCenterIdx] = useState(0)
+//   const railRef = useRef<HTMLDivElement | null>(null)
+//   const navigate = useNavigate()
+
+//   const [isDragging, setIsDragging] = useState(false)
+//   const [startX, setStartX] = useState(0)
+//   const [currentX, setCurrentX] = useState(0)
+
+//   // 주소창의 ?tab=이 바뀌면 active 동기화 (직접 URL 입력/새로고침 대비)
+//   useEffect(() => {
+//     const q = searchParams.get('tab')
+//     const next = isValidTab(q) ? (q as CategoryUI) : 'ALL'
+//     setActive(next)
+//   }, [searchParams])
+
+//   // 탭 변경 시 URL의 ?tab= 업데이트
+//   const handleTabChange = useCallback(
+//     (next: CategoryUI) => {
+//       setActive(next)
+//       setSearchParams((prev) => {
+//         const sp = new URLSearchParams(prev)
+//         sp.set('tab', next)
+//         return sp
+//       })
+//     },
+//     [setSearchParams],
+//   )
+
+//   // 파생 상태: 항상 centerIdx에서 계산
+//   const selected = items[centerIdx] ?? null
+
+//   useEffect(() => {
+//     const ac = new AbortController()
+//     setLoading(true)
+//     setError(null)
+
+//     fetchWorkList(active, ac.signal)
+//       .then((list) => {
+//         setItems(list)
+//         setCenterIdx(0)
+//       })
+//       .catch((e) => {
+//         if (!(e instanceof DOMException && e.name === 'AbortError')) {
+//           setError((e as Error).message ?? '불러오기 실패')
+//           setItems([])
+//           setCenterIdx(0)
+//         }
+//       })
+//       .finally(() => setLoading(false))
+
+//     return () => ac.abort()
+//   }, [active])
+
+//   const scrollToCenter = useCallback((idx: number) => {
+//     const rail = railRef.current
+//     if (!rail) return
+//     const target = rail.querySelector<HTMLElement>(`[data-idx="${idx}"]`)
+//     target?.scrollIntoView({
+//       behavior: 'smooth',
+//       inline: 'center',
+//       block: 'nearest',
+//     })
+//   }, [])
+
+//   useEffect(() => {
+//     if (items.length > 0) {
+//       setCenterIdx(0)
+//       setTimeout(() => scrollToCenter(0), 0)
+//     }
+//   }, [items, scrollToCenter])
+
+//   // 자동 전환
+//   useEffect(() => {
+//     if (items.length <= 1) return
+//     const id = setInterval(() => {
+//       setCenterIdx((prev) => {
+//         const next = (prev + 1) % items.length
+//         scrollToCenter(next)
+//         return next
+//       })
+//     }, 3800)
+//     return () => clearInterval(id)
+//   }, [items.length, scrollToCenter])
+
+//   // 터치/마우스 드래그: 인덱스만 변경
+//   useEffect(() => {
+//     const rail = railRef.current
+//     if (!rail) return
+//     if (items.length <= 1) return
+
+//     const onTouchStart = (e: TouchEvent) => {
+//       setIsDragging(true)
+//       setStartX(e.touches[0].clientX)
+//     }
+//     const onTouchMove = (e: TouchEvent) => {
+//       if (!isDragging) return
+//       setCurrentX(e.touches[0].clientX)
+//     }
+//     const onTouchEnd = () => {
+//       if (!isDragging) return
+//       const delta = currentX - startX
+
+//       if (delta > 60 && centerIdx > 0) {
+//         const prev = centerIdx - 1
+//         setCenterIdx(prev)
+//         scrollToCenter(prev)
+//       } else if (delta < -60 && centerIdx < items.length - 1) {
+//         const next = centerIdx + 1
+//         setCenterIdx(next)
+//         scrollToCenter(next)
+//       }
+
+//       setIsDragging(false)
+//       setStartX(0)
+//       setCurrentX(0)
+//     }
+
+//     rail.addEventListener('touchstart', onTouchStart, { passive: true })
+//     rail.addEventListener('touchmove', onTouchMove, { passive: true })
+//     rail.addEventListener('touchend', onTouchEnd)
+
+//     const onMouseDown = (e: MouseEvent) => {
+//       setIsDragging(true)
+//       setStartX(e.clientX)
+//     }
+//     const onMouseMove = (e: MouseEvent) => {
+//       if (!isDragging) return
+//       setCurrentX(e.clientX)
+//     }
+//     const onMouseUp = () => {
+//       if (!isDragging) return
+//       const delta = currentX - startX
+
+//       if (delta > 60 && centerIdx > 0) {
+//         const prev = centerIdx - 1
+//         setCenterIdx(prev)
+//         scrollToCenter(prev)
+//       } else if (delta < -60 && centerIdx < items.length - 1) {
+//         const next = centerIdx + 1
+//         setCenterIdx(next)
+//         scrollToCenter(next)
+//       }
+
+//       setIsDragging(false)
+//       setStartX(0)
+//       setCurrentX(0)
+//     }
+
+//     rail.addEventListener('mousedown', onMouseDown)
+//     rail.addEventListener('mousemove', onMouseMove)
+//     rail.addEventListener('mouseup', onMouseUp)
+//     rail.addEventListener('mouseleave', onMouseUp)
+
+//     return () => {
+//       rail.removeEventListener('touchstart', onTouchStart)
+//       rail.removeEventListener('touchmove', onTouchMove)
+//       rail.removeEventListener('touchend', onTouchEnd)
+//       rail.removeEventListener('mousedown', onMouseDown)
+//       rail.removeEventListener('mousemove', onMouseMove)
+//       rail.removeEventListener('mouseup', onMouseUp)
+//       rail.removeEventListener('mouseleave', onMouseUp)
+//     }
+//   }, [isDragging, startX, currentX, centerIdx, items, scrollToCenter])
+
+//   // 스크롤로 가운데 아이 탐지 → 인덱스만 변경
+//   useEffect(() => {
+//     const rail = railRef.current
+//     if (!rail) return
+
+//     const onScrollStop = () => {
+//       const children = Array.from(
+//         rail.querySelectorAll('[data-idx]'),
+//       ) as HTMLElement[]
+//       if (children.length === 0) return
+
+//       let closestIdx = 0
+//       let minDiff = Infinity
+//       const railRect = rail.getBoundingClientRect()
+//       const railCenterX = railRect.left + rail.clientWidth / 2
+
+//       children.forEach((el) => {
+//         const rect = el.getBoundingClientRect()
+//         const diff = Math.abs(rect.left + rect.width / 2 - railCenterX)
+//         if (diff < minDiff) {
+//           minDiff = diff
+//           closestIdx = parseInt(el.dataset.idx ?? '0', 10)
+//         }
+//       })
+
+//       if (closestIdx !== centerIdx) {
+//         setCenterIdx(closestIdx)
+//       }
+//     }
+
+//     let timeout: number | null = null
+//     const handleScroll = () => {
+//       if (timeout) clearTimeout(timeout)
+//       timeout = window.setTimeout(onScrollStop, 100)
+//     }
+
+//     rail.addEventListener('scroll', handleScroll)
+//     return () => rail.removeEventListener('scroll', handleScroll)
+//   }, [items, centerIdx])
+
+//   return (
+//     <div className="w-full text-[#2c2620]">
+//       <div className="mx-auto max-w-[960px] pt-4 pb-5">
+//         <div className="sticky top-0 z-5 bg-[#F5F3F0]/95 backdrop-blur-[2px] border-b border-[#C8B7A6]">
+//           <div className="w-full flex items-center justify-center">
+//             <Tabs value={active} onChange={handleTabChange} />
+//           </div>
+//         </div>
+
+//         {loading && (
+//           <div className="mt-8 text-center text-sm text-[#8d837a]">
+//             목록을 불러오는 중입니다...
+//           </div>
+//         )}
+//         {error && (
+//           <div className="mt-8 text-center text-sm text-red-700">{error}</div>
+//         )}
+
+//         {!loading && !error && (
+//           <div
+//             ref={railRef}
+//             className={`
+//               ${items.length > 1 ? 'overflow-x-auto scroll-smooth' : 'overflow-hidden'}
+//               snap-x snap-mandatory [scrollbar-width:none]
+//             `}
+//           >
+//             <div className="flex items-stretch">
+//               {items.length > 0 && (
+//                 <div
+//                   aria-hidden
+//                   className="snap-center shrink-0 basis-1/3 px-2 pointer-events-none"
+//                 />
+//               )}
+
+//               {items.map((w, i) => {
+//                 const isCenter = i === centerIdx
+//                 return (
+//                   <div
+//                     key={w.id}
+//                     data-idx={i}
+//                     className={`
+//                       snap-center shrink-0 basis-1/3 px-0.5
+//                       transition-transform duration-300
+//                       ${isCenter ? 'scale-100' : 'scale-90'}
+//                     `}
+//                   >
+//                     <FrameCard
+//                       image={w.imageUrl}
+//                       size="lg"
+//                       focused={isCenter}
+//                       onClick={() =>
+//                         navigate(`/works/${active.toLowerCase()}/${w.id}`)
+//                       }
+//                     />
+//                   </div>
+//                 )
+//               })}
+
+//               {items.length > 0 && (
+//                 <div
+//                   aria-hidden
+//                   className="snap-center shrink-0 basis-1/3 px-2 pointer-events-none"
+//                 />
+//               )}
+//             </div>
+//           </div>
+//         )}
+
+//         {selected && (
+//           <WorkExplan
+//             title={selected.projectName}
+//             subtitle={selected.shortDescription}
+//             teamName={selected.teamName}
+//             members={(selected.developers ?? []).map((d) => d.name)}
+//             description={selected.midDescription}
+//           />
+//         )}
+//       </div>
+//     </div>
+//   )
+// }
+
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
 import Tabs, { type CategoryUI } from '../components/works/Tabs'
 import FrameCard from '../components/works/FrameCard'
 import WorkExplan from '../components/works/WorkExplan'
@@ -23,21 +331,58 @@ export default function WorksPage() {
   const [centerIdx, setCenterIdx] = useState(0)
   const railRef = useRef<HTMLDivElement | null>(null)
   const navigate = useNavigate()
+  const location = useLocation() as { state?: { fromIdx?: number } }
 
   const [isDragging, setIsDragging] = useState(false)
   const [startX, setStartX] = useState(0)
   const [currentX, setCurrentX] = useState(0)
 
-  // 주소창의 ?tab=이 바뀌면 active 동기화 (직접 URL 입력/새로고침 대비)
+  // 탭 클릭으로 인한 전환 여부(복원 무시용)
+  const tabResetRef = useRef(false)
+
+  const koCollator = new Intl.Collator('ko', {
+    sensitivity: 'base',
+    numeric: true,
+  })
+  const enCollator = new Intl.Collator('en', {
+    sensitivity: 'base',
+    numeric: true,
+  })
+
+  function getSortGroup(name: string): number {
+    const key = (name ?? '').trim().replace(/^[^A-Za-z0-9\uAC00-\uD7A3]+/, '')
+    const ch = key.charAt(0)
+    if (/^[\uAC00-\uD7A3]$/.test(ch)) return 0 // 한글
+    if (/^[A-Za-z]$/.test(ch)) return 1 // 영어
+    return 2 // 그 외(숫자/기호/기타)
+  }
+
+  function compareProjectName(a: WorkItem, b: WorkItem): number {
+    const ga = getSortGroup(a.projectName)
+    const gb = getSortGroup(b.projectName)
+    if (ga !== gb) return ga - gb
+    if (ga === 0) return koCollator.compare(a.projectName, b.projectName) // 한글
+    if (ga === 1) return enCollator.compare(a.projectName, b.projectName) // 영어
+    return koCollator.compare(a.projectName, b.projectName)
+  }
+
+  // URL ?tab= 변화에 동기화
   useEffect(() => {
     const q = searchParams.get('tab')
     const next = isValidTab(q) ? (q as CategoryUI) : 'ALL'
     setActive(next)
   }, [searchParams])
 
-  // 탭 변경 시 URL의 ?tab= 업데이트
+  // 탭 변경 시: 항상 실행되게 하고, 복원 무시 플래그 세움
   const handleTabChange = useCallback(
     (next: CategoryUI) => {
+      // 같은 탭을 다시 눌러도 리셋되도록 처리
+      tabResetRef.current = true
+      // 해당 탭의 세션 복원값도 제거(완전 초기화 의도)
+      if (typeof sessionStorage !== 'undefined') {
+        sessionStorage.removeItem(`worksIdx:${next}`)
+      }
+
       setActive(next)
       setSearchParams((prev) => {
         const sp = new URLSearchParams(prev)
@@ -48,9 +393,18 @@ export default function WorksPage() {
     [setSearchParams],
   )
 
-  // 파생 상태: 항상 centerIdx에서 계산
-  const selected = items[centerIdx] ?? null
+  const scrollToCenter = useCallback((idx: number) => {
+    const rail = railRef.current
+    if (!rail) return
+    const target = rail.querySelector<HTMLElement>(`[data-idx="${idx}"]`)
+    target?.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'center',
+      block: 'nearest',
+    })
+  }, [])
 
+  // 목록 로드 + 인덱스 복원(단, 탭 클릭 시에는 무조건 0부터)
   useEffect(() => {
     const ac = new AbortController()
     setLoading(true)
@@ -58,8 +412,30 @@ export default function WorksPage() {
 
     fetchWorkList(active, ac.signal)
       .then((list) => {
-        setItems(list)
-        setCenterIdx(0)
+        const sorted = [...list].sort(compareProjectName)
+        setItems(sorted)
+
+        let initialIdx: number | undefined
+
+        if (tabResetRef.current) {
+          // 탭 클릭에 의한 전환: 항상 0부터 시작
+          initialIdx = 0
+          tabResetRef.current = false
+        } else {
+          // 상세→리스트 복원(state) 우선, 없으면 세션 복원
+          initialIdx = location.state?.fromIdx
+          if (initialIdx == null && typeof sessionStorage !== 'undefined') {
+            const saved = sessionStorage.getItem(`worksIdx:${active}`)
+            if (saved != null) {
+              const n = Number(saved)
+              if (!Number.isNaN(n)) initialIdx = n
+            }
+          }
+        }
+
+        const idx = Math.max(0, Math.min(initialIdx ?? 0, sorted.length - 1))
+        setCenterIdx(idx)
+        requestAnimationFrame(() => scrollToCenter(idx))
       })
       .catch((e) => {
         if (!(e instanceof DOMException && e.name === 'AbortError')) {
@@ -71,40 +447,11 @@ export default function WorksPage() {
       .finally(() => setLoading(false))
 
     return () => ac.abort()
-  }, [active])
+    // location.state는 의도적으로 의존성 제외(탭 바뀔 때만 재평가)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active, scrollToCenter])
 
-  const scrollToCenter = useCallback((idx: number) => {
-    const rail = railRef.current
-    if (!rail) return
-    const target = rail.querySelector<HTMLElement>(`[data-idx="${idx}"]`)
-    target?.scrollIntoView({
-      behavior: 'smooth',
-      inline: 'center',
-      block: 'nearest',
-    })
-  }, [])
-
-  useEffect(() => {
-    if (items.length > 0) {
-      setCenterIdx(0)
-      setTimeout(() => scrollToCenter(0), 0)
-    }
-  }, [items, scrollToCenter])
-
-  // 자동 전환
-  useEffect(() => {
-    if (items.length <= 1) return
-    const id = setInterval(() => {
-      setCenterIdx((prev) => {
-        const next = (prev + 1) % items.length
-        scrollToCenter(next)
-        return next
-      })
-    }, 3800)
-    return () => clearInterval(id)
-  }, [items.length, scrollToCenter])
-
-  // 터치/마우스 드래그: 인덱스만 변경
+  // 드래그 내비게이션
   useEffect(() => {
     const rail = railRef.current
     if (!rail) return
@@ -184,7 +531,7 @@ export default function WorksPage() {
     }
   }, [isDragging, startX, currentX, centerIdx, items, scrollToCenter])
 
-  // 스크롤로 가운데 아이 탐지 → 인덱스만 변경
+  // 가운데 카드 계산(스크롤 멈춤 감지)
   useEffect(() => {
     const rail = railRef.current
     if (!rail) return
@@ -224,6 +571,8 @@ export default function WorksPage() {
     return () => rail.removeEventListener('scroll', handleScroll)
   }, [items, centerIdx])
 
+  const selected = items[centerIdx] ?? null
+
   return (
     <div className="w-full text-[#2c2620]">
       <div className="mx-auto max-w-[960px] pt-4 pb-5">
@@ -254,7 +603,7 @@ export default function WorksPage() {
               {items.length > 0 && (
                 <div
                   aria-hidden
-                  className="snap-center shrink-0 basis-1/3 px-2 pointer-events-none"
+                  className="snap-center shrink-0 basis-1/5 px-2 pointer-events-none"
                 />
               )}
 
@@ -265,17 +614,20 @@ export default function WorksPage() {
                     key={w.id}
                     data-idx={i}
                     className={`
-                      snap-center shrink-0 basis-1/3 px-0.5
-                      transition-transform duration-300
-                      ${isCenter ? 'scale-100' : 'scale-90'}
-                    `}
+        snap-center shrink-0 basis-1/3 px-0.5
+        transition-transform duration-300
+        ${isCenter ? 'scale-100' : 'scale-90'}
+      `}
                   >
                     <FrameCard
                       image={w.imageUrl}
                       size="lg"
                       focused={isCenter}
+                      index={i} // ← 이 한 줄로 1,2,3 반복 완성
                       onClick={() =>
-                        navigate(`/works/${active.toLowerCase()}/${w.id}`)
+                        navigate(`/works/${active.toLowerCase()}/${w.id}`, {
+                          state: { fromIdx: i },
+                        })
                       }
                     />
                   </div>
@@ -285,7 +637,7 @@ export default function WorksPage() {
               {items.length > 0 && (
                 <div
                   aria-hidden
-                  className="snap-center shrink-0 basis-1/3 px-2 pointer-events-none"
+                  className="snap-center shrink-0 basis-1/5 px-2 pointer-events-none"
                 />
               )}
             </div>