From b18db133fe229e830f402aaa140dfb4572c6dc38 Mon Sep 17 00:00:00 2001
From: phjlia2430 <phjlia2430@naver.com>
Date: Fri, 24 Oct 2025 22:43:44 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=80=EB=8B=A4=EB=82=98=EC=88=9C=20?=
 =?UTF-8?q?=EB=B0=B0=EC=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/about/developer/TeamGrid.tsx | 35 ++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/about/developer/TeamGrid.tsx b/src/components/about/developer/TeamGrid.tsx
index be7cc49..f5a80d3 100644
--- a/src/components/about/developer/TeamGrid.tsx
+++ b/src/components/about/developer/TeamGrid.tsx
@@ -1,8 +1,33 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import TeamCard from './TeamCard'
 import { fetchWorkList } from '../../../apis/about/team'
 import type { WorkItem } from '../../../apis/about/team'
 
+const isKorean = (s: string) => /[가-힣]/.test(s) && !/[A-Za-z]/.test(s)
+
+const collatorKo = new Intl.Collator('ko-KR', {
+  sensitivity: 'base',
+  numeric: true,
+})
+const collatorEn = new Intl.Collator('en', {
+  sensitivity: 'base',
+  numeric: true,
+})
+
+const compareTeamName = (a: WorkItem, b: WorkItem) => {
+  const aName = a.teamName?.normalize('NFC') ?? ''
+  const bName = b.teamName?.normalize('NFC') ?? ''
+  const aKo = isKorean(aName)
+  const bKo = isKorean(bName)
+
+  if (aKo && !bKo) return -1
+  if (!aKo && bKo) return 1
+
+  return aKo
+    ? collatorKo.compare(aName, bName)
+    : collatorEn.compare(aName, bName)
+}
+
 const TeamGrid = () => {
   const [teams, setTeams] = useState<WorkItem[]>([])
 
@@ -10,18 +35,20 @@ const TeamGrid = () => {
     const loadTeams = async () => {
       try {
         const data = await fetchWorkList()
-        setTeams(data)
+
+        setTeams([...data].sort(compareTeamName))
       } catch (error) {
         console.error('팀 데이터를 불러오는 데 실패했습니다:', error)
       }
     }
-
     loadTeams()
   }, [])
 
+  const sortedTeams = useMemo(() => [...teams].sort(compareTeamName), [teams])
+
   return (
     <div className="grid grid-cols-2 gap-8 mt-8 place-items-center mb-8 auto-rows-[250px]">
-      {teams.map((team) => (
+      {sortedTeams.map((team) => (
         <TeamCard
           key={team.id}
           image={team.imageUrl}