+ {[1, 2, 3].map((step) => (
+
+
+ {step < 3 && (
+
step ? 'bg-blue-500' : 'bg-slate-200'}`} />
+ )}
+
+ ))}
+
+
+ {currentStep === 1 && '유전자 선택'}
+ {currentStep === 2 && '형질 선택'}
+ {currentStep === 3 && '최종 확인'}
+
+
+ {/* Step 1: 유전자 선택 */}
+ {currentStep === 1 && (
+
+ {/* 선택된 유전자 (고정/순서) */}
+ {sortedSelectedGenes.length > 0 && (
+
+
선택됨 ({sortedSelectedGenes.length}개)
+ {sortedSelectedGenes.map(geneId => (
+
toggleGenePin(geneId)}
+ onRemove={() => toggleGene(geneId)}
+ />
+ ))}
+
+ )}
+
+ {/* 검색 */}
+
+
+ setGeneSearch(e.target.value)}
+ />
+
+
+ {/* 유전자 목록 */}
+
+
육량형
+ {filteredGenes.filter(g => SAMPLE_GENES.quantity.some(q => q.id === g.id)).map(gene => (
+
toggleGene(gene.id)}
+ >
+
+
+ {gene.name}
+ {gene.description}
+
+
+ ))}
+
육질형
+ {filteredGenes.filter(g => SAMPLE_GENES.quality.some(q => q.id === g.id)).map(gene => (
+
toggleGene(gene.id)}
+ >
+
+
+ {gene.name}
+ {gene.description}
+
+
+ ))}
+
+
+ )}
+
+ {/* Step 2: 형질 선택 */}
+ {currentStep === 2 && (
+
+ {/* 선택된 형질 (고정/순서/가중치) */}
+ {sortedSelectedTraits.length > 0 && (
+
+
선택됨 ({sortedSelectedTraits.length}개)
+ {sortedSelectedTraits.map(traitId => (
+
toggleTraitPin(traitId)}
+ onRemove={() => toggleTrait(traitId)}
+ showWeight={true}
+ weight={traitWeights[traitId]}
+ onWeightChange={(v) => setTraitWeights(prev => ({ ...prev, [traitId]: v }))}
+ />
+ ))}
+
+ )}
+
+ {/* 검색 */}
+
+
+ setTraitSearch(e.target.value)}
+ />
+
+
+ {/* 형질 목록 */}
+
+
경제형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.economic.some(e => e.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+
+ {trait.name}
+ {trait.description}
+
+
+ ))}
+
+
+ )}
+
+ {/* Step 3: 최종 확인 */}
+ {currentStep === 3 && (
+
+
+
최종 선택 확인
+
+ {/* 유전자 */}
+
+
+
+ 유전자 ({sortedSelectedGenes.length}개)
+
+
+ {sortedSelectedGenes.map(geneId => (
+ toggleGenePin(geneId)}
+ onRemove={() => toggleGene(geneId)}
+ />
+ ))}
+
+
+
+ {/* 형질 */}
+
+
+
+ 형질 ({sortedSelectedTraits.length}개)
+
+
+ {sortedSelectedTraits.map(traitId => (
+ toggleTraitPin(traitId)}
+ onRemove={() => toggleTrait(traitId)}
+ showWeight={true}
+ weight={traitWeights[traitId]}
+ onWeightChange={(v) => setTraitWeights(prev => ({ ...prev, [traitId]: v }))}
+ />
+ ))}
+
+
+
+
+ )}
+
+ {/* 네비게이션 버튼 */}
+
+ {currentStep > 1 && (
+
+ )}
+
+ {currentStep < 3 ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
+
+/**
+ * 시안 E: 탭 분리 방식
+ */
+function OptionE() {
+ const [innerTab, setInnerTab] = useState('genes')
+ const [selectedGenes, setSelectedGenes] = useState
(['PLAG1', 'NT5E', 'SCD'])
+ const [pinnedGenes, setPinnedGenes] = useState(['PLAG1', 'NT5E'])
+ const [selectedTraits, setSelectedTraits] = useState(['도체중', '등심단면적'])
+ const [pinnedTraits, setPinnedTraits] = useState(['도체중'])
+ const [traitWeights, setTraitWeights] = useState>({ '도체중': 7, '등심단면적': 5 })
+ const [geneSearch, setGeneSearch] = useState('')
+ const [traitSearch, setTraitSearch] = useState('')
+
+ const toggleGene = (geneId: string) => {
+ if (selectedGenes.includes(geneId)) {
+ setSelectedGenes(prev => prev.filter(g => g !== geneId))
+ setPinnedGenes(prev => prev.filter(g => g !== geneId))
+ } else {
+ setSelectedGenes(prev => [...prev, geneId])
+ }
+ }
+
+ const toggleGenePin = (geneId: string) => {
+ if (pinnedGenes.includes(geneId)) {
+ setPinnedGenes(prev => prev.filter(g => g !== geneId))
+ } else if (pinnedGenes.length < 5) {
+ setPinnedGenes(prev => [...prev, geneId])
+ }
+ }
+
+ const toggleTrait = (traitId: string) => {
+ if (selectedTraits.includes(traitId)) {
+ setSelectedTraits(prev => prev.filter(t => t !== traitId))
+ setPinnedTraits(prev => prev.filter(t => t !== traitId))
+ setTraitWeights(prev => {
+ const newWeights = { ...prev }
+ delete newWeights[traitId]
+ return newWeights
+ })
+ } else {
+ setSelectedTraits(prev => [...prev, traitId])
+ setTraitWeights(prev => ({ ...prev, [traitId]: 5 }))
+ }
+ }
+
+ const toggleTraitPin = (traitId: string) => {
+ if (pinnedTraits.includes(traitId)) {
+ setPinnedTraits(prev => prev.filter(t => t !== traitId))
+ } else if (pinnedTraits.length < 5) {
+ setPinnedTraits(prev => [...prev, traitId])
+ }
+ }
+
+ const allGenes = [...SAMPLE_GENES.quantity, ...SAMPLE_GENES.quality]
+ const filteredGenes = allGenes.filter(g =>
+ g.name.toLowerCase().includes(geneSearch.toLowerCase()) ||
+ g.description.toLowerCase().includes(geneSearch.toLowerCase())
+ )
+
+ const allTraits = [...SAMPLE_TRAITS.economic, ...SAMPLE_TRAITS.growth, ...SAMPLE_TRAITS.body]
+ const filteredTraits = allTraits.filter(t =>
+ t.name.toLowerCase().includes(traitSearch.toLowerCase()) ||
+ t.description.toLowerCase().includes(traitSearch.toLowerCase())
+ )
+
+ const sortedSelectedGenes = [
+ ...pinnedGenes.filter(g => selectedGenes.includes(g)),
+ ...selectedGenes.filter(g => !pinnedGenes.includes(g))
+ ]
+ const sortedSelectedTraits = [
+ ...pinnedTraits.filter(t => selectedTraits.includes(t)),
+ ...selectedTraits.filter(t => !pinnedTraits.includes(t))
+ ]
+
+ return (
+
+
+
+
+ 시안 E: 탭 분리 방식
+
+
+ 유전자 / 형질 / 선택조건을 탭으로 분리하여 넓은 공간 활용
+
+
+
+
+
+
+
+ 유전자
+ {selectedGenes.length > 0 && {selectedGenes.length}}
+
+
+
+ 형질
+ {selectedTraits.length > 0 && {selectedTraits.length}}
+
+
+ 선택조건
+
+
+
+ {/* 유전자 탭 */}
+
+ {/* 선택된 유전자 */}
+ {sortedSelectedGenes.length > 0 && (
+
+
선택됨 (드래그로 순서 변경)
+ {sortedSelectedGenes.map(geneId => (
+
toggleGenePin(geneId)}
+ onRemove={() => toggleGene(geneId)}
+ />
+ ))}
+
+
+ setGeneSearch(e.target.value)}
+ />
+
+
+
+
육량형
+ {filteredGenes.filter(g => SAMPLE_GENES.quantity.some(q => q.id === g.id)).map(gene => (
+
toggleGene(gene.id)}
+ >
+
+
+ {gene.name}
+ {gene.description}
+
+ {selectedGenes.includes(gene.id) && (
+
+ )}
+
+ ))}
+
육질형
+ {filteredGenes.filter(g => SAMPLE_GENES.quality.some(q => q.id === g.id)).map(gene => (
+
toggleGene(gene.id)}
+ >
+
+
+ {gene.name}
+ {gene.description}
+
+ {selectedGenes.includes(gene.id) && (
+
+ )}
+
+ ))}
+
+
선택됨 (드래그로 순서 변경)
+ {sortedSelectedTraits.map(traitId => (
+
toggleTraitPin(traitId)}
+ onRemove={() => toggleTrait(traitId)}
+ showWeight={true}
+ weight={traitWeights[traitId]}
+ onWeightChange={(v) => setTraitWeights(prev => ({ ...prev, [traitId]: v }))}
+ />
+ ))}
+
+
+ setTraitSearch(e.target.value)}
+ />
+
+
+
+
경제형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.economic.some(e => e.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+
+ {trait.name}
+ {trait.description}
+
+ {selectedTraits.includes(trait.id) && (
+
+ )}
+
+ ))}
+
성장형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.growth.some(g => g.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+
+ {trait.name}
+ {trait.description}
+
+ {selectedTraits.includes(trait.id) && (
+
+ )}
+
+ ))}
+
체형형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.body.some(b => b.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+
+ {trait.name}
+ {trait.description}
+
+ {selectedTraits.includes(trait.id) && (
+
+ )}
+
+ ))}
+
+
선택한 필터 조건
+
+ {/* 유전자 */}
+ {sortedSelectedGenes.length > 0 && (
+
+
+
+ 유전자 ({sortedSelectedGenes.length}개)
+
+
+ {sortedSelectedGenes.map(geneId => (
+ toggleGenePin(geneId)}
+ onRemove={() => toggleGene(geneId)}
+ />
+ ))}
+
+
+ )}
+
+ {/* 형질 */}
+ {sortedSelectedTraits.length > 0 && (
+
+
+
+ 형질 ({sortedSelectedTraits.length}개)
+
+
+ {sortedSelectedTraits.map(traitId => (
+ toggleTraitPin(traitId)}
+ onRemove={() => toggleTrait(traitId)}
+ showWeight={true}
+ weight={traitWeights[traitId]}
+ onWeightChange={(v) => setTraitWeights(prev => ({ ...prev, [traitId]: v }))}
+ />
+ ))}
+
+
+ )}
+
+ {sortedSelectedGenes.length === 0 && sortedSelectedTraits.length === 0 && (
+
+ 선택된 필터 조건이 없습니다
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+/**
+ * 시안 H: 칩(Chip) 기반 방식
+ * 태그/칩 형태로 선택 항목을 표시하고 관리
+ */
+function OptionH() {
+ const [selectedGenes, setSelectedGenes] = useState(['PLAG1', 'NT5E', 'SCD'])
+ const [pinnedGenes, setPinnedGenes] = useState(['PLAG1', 'NT5E'])
+ const [selectedTraits, setSelectedTraits] = useState(['도체중', '등심단면적'])
+ const [pinnedTraits, setPinnedTraits] = useState(['도체중'])
+ const [traitWeights, setTraitWeights] = useState>({ '도체중': 7, '등심단면적': 5 })
+ const [showGeneSelector, setShowGeneSelector] = useState(false)
+ const [showTraitSelector, setShowTraitSelector] = useState(false)
+ const [geneSearch, setGeneSearch] = useState('')
+ const [traitSearch, setTraitSearch] = useState('')
+
+ const toggleGene = (geneId: string) => {
+ if (selectedGenes.includes(geneId)) {
+ setSelectedGenes(prev => prev.filter(g => g !== geneId))
+ setPinnedGenes(prev => prev.filter(g => g !== geneId))
+ } else {
+ setSelectedGenes(prev => [...prev, geneId])
+ }
+ }
+
+ const toggleGenePin = (geneId: string) => {
+ if (pinnedGenes.includes(geneId)) {
+ setPinnedGenes(prev => prev.filter(g => g !== geneId))
+ } else if (pinnedGenes.length < 5) {
+ setPinnedGenes(prev => [...prev, geneId])
+ }
+ }
+
+ const toggleTrait = (traitId: string) => {
+ if (selectedTraits.includes(traitId)) {
+ setSelectedTraits(prev => prev.filter(t => t !== traitId))
+ setPinnedTraits(prev => prev.filter(t => t !== traitId))
+ setTraitWeights(prev => {
+ const newWeights = { ...prev }
+ delete newWeights[traitId]
+ return newWeights
+ })
+ } else {
+ setSelectedTraits(prev => [...prev, traitId])
+ setTraitWeights(prev => ({ ...prev, [traitId]: 5 }))
+ }
+ }
+
+ const toggleTraitPin = (traitId: string) => {
+ if (pinnedTraits.includes(traitId)) {
+ setPinnedTraits(prev => prev.filter(t => t !== traitId))
+ } else if (pinnedTraits.length < 5) {
+ setPinnedTraits(prev => [...prev, traitId])
+ }
+ }
+
+ const allGenes = [...SAMPLE_GENES.quantity, ...SAMPLE_GENES.quality]
+ const filteredGenes = allGenes.filter(g =>
+ g.name.toLowerCase().includes(geneSearch.toLowerCase()) ||
+ g.description.toLowerCase().includes(geneSearch.toLowerCase())
+ )
+
+ const allTraits = [...SAMPLE_TRAITS.economic, ...SAMPLE_TRAITS.growth, ...SAMPLE_TRAITS.body]
+ const filteredTraits = allTraits.filter(t =>
+ t.name.toLowerCase().includes(traitSearch.toLowerCase()) ||
+ t.description.toLowerCase().includes(traitSearch.toLowerCase())
+ )
+
+ // 고정된 것 먼저 정렬
+ const sortedSelectedGenes = [
+ ...pinnedGenes.filter(g => selectedGenes.includes(g)),
+ ...selectedGenes.filter(g => !pinnedGenes.includes(g))
+ ]
+ const sortedSelectedTraits = [
+ ...pinnedTraits.filter(t => selectedTraits.includes(t)),
+ ...selectedTraits.filter(t => !pinnedTraits.includes(t))
+ ]
+
+ return (
+
+
+
+
+ 시안 H: 칩(Chip) 기반 방식
+
+
+ 태그/칩 형태로 선택 항목 표시 + 추가 버튼으로 새 항목 선택
+
+
+
+ {/* 유전자 칩 영역 */}
+
+
+
+
+ 유전자
+
+
+
+
+ {/* 선택된 유전자 칩 */}
+
+ {sortedSelectedGenes.length === 0 ? (
+
유전자를 선택해주세요
+ ) : (
+ sortedSelectedGenes.map(geneId => {
+ const isPinned = pinnedGenes.includes(geneId)
+ const isQuantity = SAMPLE_GENES.quantity.some(g => g.id === geneId)
+ return (
+
+
+ {isPinned &&
}
+
{geneId}
+
+
+
+ )
+ })
+ )}
+
+
+ {/* 유전자 선택 패널 */}
+ {showGeneSelector && (
+
+
+
+ setGeneSearch(e.target.value)}
+ />
+
+
+
육량형
+ {filteredGenes.filter(g => SAMPLE_GENES.quantity.some(q => q.id === g.id)).map(gene => (
+
toggleGene(gene.id)}
+ >
+
+ {gene.name}
+ {gene.description}
+
+ ))}
+
육질형
+ {filteredGenes.filter(g => SAMPLE_GENES.quality.some(q => q.id === g.id)).map(gene => (
+
toggleGene(gene.id)}
+ >
+
+ {gene.name}
+ {gene.description}
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ 형질
+
+
+
+
+ {/* 선택된 형질 칩 */}
+
+ {sortedSelectedTraits.length === 0 ? (
+
형질을 선택해주세요
+ ) : (
+ sortedSelectedTraits.map(traitId => {
+ const isPinned = pinnedTraits.includes(traitId)
+ return (
+
+
+ {isPinned &&
}
+
{traitId}
+
({traitWeights[traitId] || 0}점)
+
+
+
+ )
+ })
+ )}
+
+
+ {/* 형질 가중치 조절 */}
+ {sortedSelectedTraits.length > 0 && (
+
+
가중치 조절
+ {sortedSelectedTraits.map(traitId => (
+
+ {traitId}
+ setTraitWeights(prev => ({ ...prev, [traitId]: v }))}
+ max={10}
+ step={1}
+ className="flex-1"
+ />
+ {traitWeights[traitId] || 0}점
+
+ ))}
+
+ )}
+
+ {/* 형질 선택 패널 */}
+ {showTraitSelector && (
+
+
+
+ setTraitSearch(e.target.value)}
+ />
+
+
+
경제형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.economic.some(e => e.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+ {trait.name}
+ {trait.description}
+
+ ))}
+
성장형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.growth.some(g => g.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+ {trait.name}
+ {trait.description}
+
+ ))}
+
체형형질
+ {filteredTraits.filter(t => SAMPLE_TRAITS.body.some(b => b.id === t.id)).map(trait => (
+
toggleTrait(trait.id)}
+ >
+
+ {trait.name}
+ {trait.description}
+
+ ))}
+
+
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+/**
+ * 시안 F: 모달 선택 방식 (추천)
+ * 평소엔 선택 결과만 보이고, 클릭하면 모달/패널에서 선택
+ */
+function OptionF() {
+ const [selectedGenes, setSelectedGenes] = useState(['PLAG1', 'NT5E', 'SCD'])
+ const [pinnedGenes, setPinnedGenes] = useState(['PLAG1', 'NT5E'])
+ const [selectedTraits, setSelectedTraits] = useState(['도체중', '등심단면적'])
+ const [pinnedTraits, setPinnedTraits] = useState(['도체중'])
+ const [traitWeights, setTraitWeights] = useState>({ '도체중': 7, '등심단면적': 5 })
+
+ const [showGeneModal, setShowGeneModal] = useState(false)
+ const [showTraitModal, setShowTraitModal] = useState(false)
+ const [geneSearch, setGeneSearch] = useState('')
+ const [traitSearch, setTraitSearch] = useState('')
+ const [activeGeneCategory, setActiveGeneCategory] = useState(null)
+ const [activeTraitCategory, setActiveTraitCategory] = useState(null)
+ const [openCategories, setOpenCategories] = useState>({})
+
+ const toggleGene = (geneId: string) => {
+ if (selectedGenes.includes(geneId)) {
+ setSelectedGenes(prev => prev.filter(g => g !== geneId))
+ setPinnedGenes(prev => prev.filter(g => g !== geneId))
+ } else {
+ setSelectedGenes(prev => [...prev, geneId])
+ }
+ }
+
+ const toggleGenePin = (geneId: string) => {
+ if (pinnedGenes.includes(geneId)) {
+ setPinnedGenes(prev => prev.filter(g => g !== geneId))
+ } else if (pinnedGenes.length < 5) {
+ setPinnedGenes(prev => [...prev, geneId])
+ }
+ }
+
+ const toggleTrait = (traitId: string) => {
+ if (selectedTraits.includes(traitId)) {
+ setSelectedTraits(prev => prev.filter(t => t !== traitId))
+ setPinnedTraits(prev => prev.filter(t => t !== traitId))
+ setTraitWeights(prev => {
+ const newWeights = { ...prev }
+ delete newWeights[traitId]
+ return newWeights
+ })
+ } else {
+ setSelectedTraits(prev => [...prev, traitId])
+ setTraitWeights(prev => ({ ...prev, [traitId]: 5 }))
+ }
+ }
+
+ const toggleTraitPin = (traitId: string) => {
+ if (pinnedTraits.includes(traitId)) {
+ setPinnedTraits(prev => prev.filter(t => t !== traitId))
+ } else if (pinnedTraits.length < 5) {
+ setPinnedTraits(prev => [...prev, traitId])
+ }
+ }
+
+ const allGenes = [...SAMPLE_GENES.quantity, ...SAMPLE_GENES.quality]
+ const allTraits = [...SAMPLE_TRAITS.growth, ...SAMPLE_TRAITS.economic, ...SAMPLE_TRAITS.body, ...SAMPLE_TRAITS.weight, ...SAMPLE_TRAITS.rate]
+
+ // 형질 카테고리 정보
+ const traitCategories = [
+ { id: 'growth', name: '성장형질', color: 'purple', traits: SAMPLE_TRAITS.growth },
+ { id: 'economic', name: '경제형질', color: 'emerald', traits: SAMPLE_TRAITS.economic },
+ { id: 'body', name: '체형형질', color: 'cyan', traits: SAMPLE_TRAITS.body },
+ { id: 'weight', name: '부위별무게', color: 'amber', traits: SAMPLE_TRAITS.weight },
+ { id: 'rate', name: '부위별비율', color: 'rose', traits: SAMPLE_TRAITS.rate },
+ ]
+
+ // 카테고리 필터링
+ const getFilteredGenes = () => {
+ let genes = allGenes
+ if (activeGeneCategory === 'quantity') {
+ genes = SAMPLE_GENES.quantity
+ } else if (activeGeneCategory === 'quality') {
+ genes = SAMPLE_GENES.quality
+ }
+ if (geneSearch) {
+ genes = genes.filter(g =>
+ g.name.toLowerCase().includes(geneSearch.toLowerCase()) ||
+ g.description.toLowerCase().includes(geneSearch.toLowerCase())
+ )
+ }
+ return genes
+ }
+
+ const getFilteredTraits = () => {
+ const category = traitCategories.find(c => c.id === activeTraitCategory)
+ let traits = category ? category.traits : allTraits
+ if (traitSearch) {
+ traits = traits.filter(t =>
+ t.name.toLowerCase().includes(traitSearch.toLowerCase()) ||
+ t.description.toLowerCase().includes(traitSearch.toLowerCase())
+ )
+ }
+ return traits
+ }
+
+ // 형질이 어떤 카테고리에 속하는지 찾기
+ const getTraitCategory = (traitId: string) => {
+ for (const cat of traitCategories) {
+ if (cat.traits.some(t => t.id === traitId)) {
+ return cat
+ }
+ }
+ return null
+ }
+
+ // 정렬: 고정된 것 먼저
+ const sortedSelectedGenes = [
+ ...pinnedGenes.filter(g => selectedGenes.includes(g)),
+ ...selectedGenes.filter(g => !pinnedGenes.includes(g))
+ ]
+ const sortedSelectedTraits = [
+ ...pinnedTraits.filter(t => selectedTraits.includes(t)),
+ ...selectedTraits.filter(t => !pinnedTraits.includes(t))
+ ]
+
+ return (
+
+
+
+
+ 시안 F: 모달 선택 방식 (추천)
+
+
+ 평소엔 선택 결과만 보이고, 클릭하면 모달에서 카테고리/검색으로 선택
+
+
+
+ {/* 유전자 선택 버튼 */}
+
+
+
+
+ 유전자
+
+
+
+
+
+
+
+ 유전체 형질
+
+
+
+
+
+ 선택한 조건 ({selectedGenes.length + selectedTraits.length}개)
+
+
+ {/* 유전자 */}
+ {sortedSelectedGenes.length > 0 && (
+
+
유전자
+
+ {sortedSelectedGenes.map(geneId => {
+ const isPinned = pinnedGenes.includes(geneId)
+ return (
+
+ {isPinned &&
}
+
{geneId}
+
+
+
+ )
+ })}
+
+
+ )}
+
+ {/* 유전체 형질 */}
+ {sortedSelectedTraits.length > 0 && (
+
+
유전체 형질
+
+ {sortedSelectedTraits.map(traitId => {
+ const isPinned = pinnedTraits.includes(traitId)
+ return (
+
+ {isPinned &&
}
+
{traitId}
+
({traitWeights[traitId]}점)
+
+
+
+ )
+ })}
+
+
+ {/* 가중치 조절 */}
+
+
가중치 조절
+ {sortedSelectedTraits.map(traitId => (
+
+
{traitId}
+
+
+ {traitWeights[traitId] || 0}점
+
+
+
+ ))}
+
+
+ )}
+
+ {selectedGenes.length === 0 && selectedTraits.length === 0 && (
+
+ 선택된 조건이 없습니다
+
+ )}
+
+
+
+
+
+ {/* 유전자 선택 모달 */}
+ {showGeneModal && (
+
+
+
+
유전자 선택
+
+
+
+
+ {/* 검색창 */}
+
+
+ setGeneSearch(e.target.value)}
+ />
+
+
+ {/* 유전자 목록 - 카테고리별 아코디언 */}
+
+ {/* 육량형 */}
+ {(() => {
+ const genes = SAMPLE_GENES.quantity
+ const selectedCount = genes.filter(g => selectedGenes.includes(g.id)).length
+ const isAllSelected = selectedCount === genes.length
+ const hasSelected = selectedCount > 0
+
+ // 검색어가 카테고리 이름과 매칭되는지 확인
+ const isCategoryMatch = geneSearch && '육량형'.includes(geneSearch.toLowerCase())
+
+ // 검색 필터링
+ const filteredGenes = geneSearch
+ ? isCategoryMatch
+ ? genes
+ : genes.filter(g =>
+ g.name.toLowerCase().includes(geneSearch.toLowerCase()) ||
+ g.description.toLowerCase().includes(geneSearch.toLowerCase())
+ )
+ : genes
+
+ if (geneSearch && filteredGenes.length === 0) return null
+
+ const isExpanded = geneSearch ? true : (openCategories['quantity'] ?? false)
+
+ return (
+
setOpenCategories(prev => ({ ...prev, quantity: open }))}
+ >
+
+
+
+ {
+ if (checked) {
+ const newGenes = [...selectedGenes]
+ genes.forEach(g => {
+ if (!newGenes.includes(g.id)) newGenes.push(g.id)
+ })
+ setSelectedGenes(newGenes)
+ } else {
+ setSelectedGenes(prev => prev.filter(id => !genes.some(g => g.id === id)))
+ setPinnedGenes(prev => prev.filter(id => !genes.some(g => g.id === id)))
+ }
+ }}
+ className="h-4 w-4"
+ />
+
+ 육량형
+
+
+ {selectedCount}/{genes.length}
+
+
+
+
+
+
+
+
+ {filteredGenes.map(gene => {
+ const isSelected = selectedGenes.includes(gene.id)
+ return (
+
toggleGene(gene.id)}
+ >
+
+
+
+ {gene.name}
+ {gene.description}
+
+
+
+ )
+ })}
+
+
+ )
+ })()}
+
+ {/* 육질형 */}
+ {(() => {
+ const genes = SAMPLE_GENES.quality
+ const selectedCount = genes.filter(g => selectedGenes.includes(g.id)).length
+ const isAllSelected = selectedCount === genes.length
+ const hasSelected = selectedCount > 0
+
+ const isCategoryMatch = geneSearch && '육질형'.includes(geneSearch.toLowerCase())
+
+ const filteredGenes = geneSearch
+ ? isCategoryMatch
+ ? genes
+ : genes.filter(g =>
+ g.name.toLowerCase().includes(geneSearch.toLowerCase()) ||
+ g.description.toLowerCase().includes(geneSearch.toLowerCase())
+ )
+ : genes
+
+ if (geneSearch && filteredGenes.length === 0) return null
+
+ const isExpanded = geneSearch ? true : (openCategories['quality'] ?? false)
+
+ return (
+
setOpenCategories(prev => ({ ...prev, quality: open }))}
+ >
+
+
+
+ {
+ if (checked) {
+ const newGenes = [...selectedGenes]
+ genes.forEach(g => {
+ if (!newGenes.includes(g.id)) newGenes.push(g.id)
+ })
+ setSelectedGenes(newGenes)
+ } else {
+ setSelectedGenes(prev => prev.filter(id => !genes.some(g => g.id === id)))
+ setPinnedGenes(prev => prev.filter(id => !genes.some(g => g.id === id)))
+ }
+ }}
+ className="h-4 w-4"
+ />
+
+ 육질형
+
+
+ {selectedCount}/{genes.length}
+
+
+
+
+
+
+
+
+ {filteredGenes.map(gene => {
+ const isSelected = selectedGenes.includes(gene.id)
+ return (
+
toggleGene(gene.id)}
+ >
+
+
+
+ {gene.name}
+ {gene.description}
+
+
+
+ )
+ })}
+
+
+ )
+ })()}
+
+
+
+
+
+
+
+
+
+
+
+
유전체 형질 선택
+
+
+
+
+ {/* 검색창 */}
+
+
+ setTraitSearch(e.target.value)}
+ />
+
+
+ {/* 형질 목록 - 카테고리별 아코디언 */}
+
+ {traitCategories.map(cat => {
+ const selectedCount = cat.traits.filter(t => selectedTraits.includes(t.id)).length
+ const isAllSelected = selectedCount === cat.traits.length && cat.traits.length > 0
+ const hasSelected = selectedCount > 0
+
+ // 검색어가 카테고리 이름과 매칭되는지 확인
+ const isCategoryMatch = traitSearch && cat.name.toLowerCase().includes(traitSearch.toLowerCase())
+
+ // 검색 필터링: 카테고리 이름 매칭이면 전체 표시, 아니면 개별 형질 필터링
+ const filteredTraits = traitSearch
+ ? isCategoryMatch
+ ? cat.traits
+ : cat.traits.filter(t =>
+ t.name.toLowerCase().includes(traitSearch.toLowerCase()) ||
+ t.description.toLowerCase().includes(traitSearch.toLowerCase())
+ )
+ : cat.traits
+
+ // 검색 결과가 없으면 카테고리 숨기기
+ if (traitSearch && filteredTraits.length === 0) return null
+
+ const colorClasses: Record
= {
+ purple: { bg: 'bg-purple-50', text: 'text-purple-700', border: 'border-purple-200' },
+ emerald: { bg: 'bg-emerald-50', text: 'text-emerald-700', border: 'border-emerald-200' },
+ cyan: { bg: 'bg-cyan-50', text: 'text-cyan-700', border: 'border-cyan-200' },
+ amber: { bg: 'bg-amber-50', text: 'text-amber-700', border: 'border-amber-200' },
+ rose: { bg: 'bg-rose-50', text: 'text-rose-700', border: 'border-rose-200' },
+ }
+ const colors = colorClasses[cat.color]
+
+ // 검색 중이거나 선택된 항목이 있으면 자동으로 펼침
+ const isExpanded = traitSearch ? true : (openCategories[cat.id] ?? false)
+
+ return (
+ setOpenCategories(prev => ({ ...prev, [cat.id]: open }))}
+ >
+
+ {/* 카테고리 헤더 */}
+
+
+ {
+ if (checked) {
+ const newTraits = [...selectedTraits]
+ const newWeights = { ...traitWeights }
+ cat.traits.forEach(t => {
+ if (!newTraits.includes(t.id)) {
+ newTraits.push(t.id)
+ newWeights[t.id] = 5
+ }
+ })
+ setSelectedTraits(newTraits)
+ setTraitWeights(newWeights)
+ } else {
+ setSelectedTraits(prev => prev.filter(id => !cat.traits.some(t => t.id === id)))
+ setTraitWeights(prev => {
+ const newWeights = { ...prev }
+ cat.traits.forEach(t => delete newWeights[t.id])
+ return newWeights
+ })
+ }
+ }}
+ className="h-4 w-4"
+ />
+
+ {cat.name}
+
+
+ {selectedCount}/{cat.traits.length}
+
+
+
+
+
+
+
+ {/* 형질 목록 */}
+
+
+ {filteredTraits.map(trait => {
+ const isSelected = selectedTraits.includes(trait.id)
+ return (
+
+
toggleTrait(trait.id)}
+ >
+
+
+ {trait.name}
+ {trait.description}
+
+
+ {isSelected && (
+
+
가중치
+
+
+ {traitWeights[trait.id] || 0}점
+
+
+
+ )}
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
사이드바 색상 조합 데모
+
로그인 페이지(흰색 배경)와 어울리는 사이드바 스타일 비교
+
+
+ {colorSchemes.map((scheme, index) => (
+
+ {/* 미니 레이아웃 프리뷰 */}
+
+ {/* 사이드바 */}
+
+ {/* 헤더 */}
+
+
+ {/* 메뉴 */}
+
+ {/* 활성 메뉴 */}
+
+
+ 대시보드
+
+
+ {/* 비활성 메뉴 */}
+
+
+ 개체 조회
+
+
+
+
+ {/* 메인 콘텐츠 영역 */}
+
+
+
+ {/* 정보 */}
+
+
{scheme.name}
+
{scheme.description}
+
+
+ ))}
+
+
+ {/* 헤더 연결 스타일 비교 */}
+
헤더 연결 스타일 비교
+
+ {/* 현재: 흰색 헤더 + 파란 사이드바 */}
+
+
+
+ {/* 흰색 헤더 */}
+
+
+ {/* 파란 콘텐츠 */}
+
+
+
+ 대시보드
+
+
+
+ 개체 조회
+
+
+
+
+
+
+
현재 스타일
+
흰색 헤더 → 파란 사이드바, 활성 메뉴 흰색
+
+
+
+ {/* 대안: 전체 밝은 톤 */}
+
+
+
+ {/* 헤더 */}
+
+
+ {/* 콘텐츠 */}
+
+
+
+ 대시보드
+
+
+
+ 개체 조회
+
+
+
+
+
+
+
밝은 톤 스타일
+
전체 밝은 톤, 로그인 페이지와 자연스러운 연결
+
+
+
+ {/* 대안: 파란 헤더 + 파란 사이드바 */}
+
+
+
+ {/* 파란 헤더 */}
+
+
+ {/* 콘텐츠 */}
+
+
+
+ 대시보드
+
+
+
+ 개체 조회
+
+
+
+
+
+
+
전체 파란색 스타일
+
통일된 파란색, 강한 브랜드 아이덴티티
+
+
+
+ {/* 대안: 왼쪽 강조선 */}
+
+
+
+ {/* 헤더 */}
+
+
+ {/* 콘텐츠 */}
+
+
+
+ 대시보드
+
+
+
+ 개체 조회
+
+
+
+
+
+
+
왼쪽 강조선 스타일
+
미니멀하고 깔끔한 네비게이션
+
+
+
+
+
-
-
+
+
전역 필터 설정
-
- 유전자와 유전체 형질을 선택하여 원하는 필터를 설정하세요
+
+ 유전자와 형질을 선택하세요
{/* 메인 콘텐츠 */}
-
-
- {/* 통합 검색창 */}
-
-
- {/* 검색 타입 드롭다운 (왼쪽) */}
-
-
- {/* 구분선 */}
-
-
- {/* 검색 아이콘 */}
-
-
- {/* 검색 입력창 */}
-
setSearchQuery(e.target.value)}
- className="flex-1 h-full text-sm sm:text-base md:text-lg border-0 border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 shadow-none pl-2 sm:pl-3 pr-3 sm:pr-4"
- />
-
+
+
+ {/* 유전자 선택 버튼 */}
+
+
유전자
+
- {/* 선택한 필터 조건 요약 박스 - 유전자 또는 형질이 선택되었을 때 표시 */}
- {(localFilters.selectedGenes.length > 0 || (localFilters.selectedTraits && localFilters.selectedTraits.length > 0)) && (
-
- {/* 헤더 */}
-
-
-
-
-
선택한 필터 조건
-
- {localFilters.selectedGenes.length + (localFilters.selectedTraits?.length || 0)}개
-
-
- {filterConditionOpen ?
:
}
-
+
유전체 형질
+
+
-
- {/* 1. 선택된 유전자 */}
-
-
-
-
- 유전자
-
- {localFilters.selectedGenes.length}개
-
-
- {localFilters.selectedGenes.length > 0 && (
-
- )}
-
+ {/* 선택한 조건 표시 */}
+ {(localFilters.selectedGenes.length > 0 || (localFilters.selectedTraits?.length || 0) > 0) && (
+
+
+ 선택한 조건 ({localFilters.selectedGenes.length + (localFilters.selectedTraits?.length || 0)}개)
+
- {localFilters.selectedGenes.length > 0 ? (
-
0 && (
+
+
유전자
+
+ {sortedSelectedGenes.map(geneId => {
+ const isPinned = localFilters.pinnedGenes?.includes(geneId)
+ return (
+
- {/* 고정 영역 */}
-
-
-
- 📌 상위 고정
-
- {(localFilters.pinnedGenes?.length || 0)}개
-
-
-
-
- {localFilters.pinnedGenes?.map((gene, index) => (
- {
- setLocalFilters(prev => ({
- ...prev,
- pinnedGenes: prev.pinnedGenes?.filter(g => g !== gene)
- }))
- }}
- />
- ))}
-
-
- ) : (
-
- 검색하여 고정할 유전자를 추가하세요
-
- )}
-
-
-
- {activeId ? (
-
- {activeId}
-
- ) : null}
-
-
- ) : (
-
- )}
-
-
- {/* 2. 선택된 형질 (오른쪽) */}
-
-
-
-
-
형질
-
- {(localFilters.selectedTraits?.length || 0)}개
-
-
- {(localFilters.selectedTraits && localFilters.selectedTraits.length > 0) && (
-
-
- {(localFilters.selectedTraits && localFilters.selectedTraits.length > 0) ? (
-
- {/* 고정 영역 */}
-
-
-
- 📌 상위 고정
-
- {(localFilters.pinnedTraits?.length || 0)}개
-
-
-
-
- {localFilters.pinnedTraits?.map((trait, index) => (
- {
- setLocalFilters(prev => ({
- ...prev,
- pinnedTraits: prev.pinnedTraits?.filter(t => t !== trait)
- }))
- }}
- />
- ))}
-
-
- ) : (
-
- 검색하여 고정할 형질을 추가하세요
-
- )}
-
-
-
- {activeId ? (
-
- {activeId}
-
- ) : null}
-
-
- ) : (
-
-
형질을 선택해주세요
+
+
+
- )}
-
+ )
+ })}
+
유전체 형질
+
+ {sortedSelectedTraits.map(traitId => {
+ const isPinned = localFilters.pinnedTraits?.includes(traitId)
+ return (
+
+ {isPinned &&
}
+
{traitId}
+
({localFilters.traitWeights[traitId as TraitName] || 0}점)
+
+
+
+ )
+ })}
+
+
+ {/* 가중치 조절 */}
+
+
가중치 조절
+ {sortedSelectedTraits.map(traitId => (
+
+
{traitId}
+
+
+
+ {localFilters.traitWeights[traitId as TraitName] || 0}점
+
+
+
+
+ ))}
+
+
)}
+
+
- {/* 카테고리별 선택 (2열 레이아웃) */}
-
-
-
-
+
+ {/* 유전자 선택 모달 */}
+ {showGeneModal && (
+
+
+
+
유전자 선택
+
-
- {/* 근친도 임계값 */}
-
-
- {/* 왼쪽: 라벨 */}
-
-
- %
-
-
-
-
낮을수록 유전적 다양성 확보
-
-
-
- {/* 중앙: 슬라이더 - 모바일에서 전체 너비 */}
-
-
- setLocalFilters(prev => ({ ...prev, inbreedingThreshold: value[0] }))
- }
- min={0}
- max={30}
- step={0.5}
- className="w-full h-10 sm:h-auto"
- />
-
- 0%
- 30%
-
-
-
- {/* 오른쪽: 값 표시 */}
-
- {
- const input = e.target.value
- // 숫자와 소수점만 허용
- if (input === '' || /^\d*\.?\d*$/.test(input)) {
- const val = input === '' ? 0 : parseFloat(input)
- if (!isNaN(val) && val >= 0 && val <= 30) {
- setLocalFilters(prev => ({
- ...prev,
- inbreedingThreshold: val
- }))
- } else if (input === '' || input === '.') {
- // 빈 값이거나 소수점만 입력 중인 경우 일시적으로 허용
- setLocalFilters(prev => ({
- ...prev,
- inbreedingThreshold: 0
- }))
- }
- }
- }}
- onBlur={() => {
- // blur 시 범위 체크 및 정리
- const val = Math.min(30, Math.max(0, localFilters.inbreedingThreshold))
- setLocalFilters(prev => ({
- ...prev,
- inbreedingThreshold: val
- }))
- }}
- className="w-22 sm:w-28 h-12 sm:h-14 text-center text-xl sm:text-2xl font-bold border border-slate-200"
- />
- %
-
-
+
+
- {loadingGenes ? (
-
-
+
+ {/* 검색창 */}
+
+
+ setGeneSearch(e.target.value)}
+ />
- ) : (
-
- {/* 왼쪽: 유전자 (육량형 + 육질형) */}
-
-
-
-
-
-
-
-
- {/* 육량형 Collapsible */}
-
toggleCategory('quantity')}
- >
- {(() => {
- const selectedCount = filteredQuantityGenes.filter(g =>
- localFilters.selectedGenes.includes(g.markerNm)
- ).length
- const hasSelected = selectedCount > 0
-
- return (
-
-
- {/* 왼쪽: 체크박스 + 라벨 */}
-
- 0}
- onCheckedChange={(checked) => {
- toggleCategoryAll('quantity', !!checked)
- }}
- className="h-4 w-4 sm:h-5 sm:w-5 cursor-pointer"
- />
- 육량형
-
- {selectedCount}/{filteredQuantityGenes.length}개
-
-
-
- {/* 오른쪽: 아코디언 토글 버튼 */}
-
-
-
-
-
-
-
- {filteredQuantityGenes.length === 0 ? (
-
- 검색 결과가 없습니다
-
- ) : (
-
- {filteredQuantityGenes.map((gene) => {
- const isSelected = localFilters.selectedGenes.includes(gene.markerNm)
- return (
-
-
-
toggleGene(gene.markerNm)}
- className="h-5 w-5 sm:h-6 sm:w-6 cursor-pointer"
- />
- toggleGene(gene.markerNm)}>
-
{gene.markerNm}
- {gene.relatedTrait && (
-
{gene.relatedTrait}
- )}
-
-
- )
- })}
-
-
-
- {/* 육질형 Collapsible */}
-
toggleCategory('quality')}
- >
- {(() => {
- const selectedCount = filteredQualityGenes.filter(g =>
- localFilters.selectedGenes.includes(g.markerNm)
- ).length
- const hasSelected = selectedCount > 0
-
- return (
-
-
- {/* 왼쪽: 체크박스 + 라벨 */}
-
- 0}
- onCheckedChange={(checked) => {
- toggleCategoryAll('quality', !!checked)
- }}
- className="h-4 w-4 sm:h-5 sm:w-5 cursor-pointer"
- />
- 육질형
-
- {selectedCount}/{filteredQualityGenes.length}개
-
-
-
- {/* 오른쪽: 아코디언 토글 버튼 */}
-
-
-
-
-
-
-
- {filteredQualityGenes.length === 0 ? (
-
- 검색 결과가 없습니다
-
- ) : (
-
- {filteredQualityGenes.map((gene) => {
- const isSelected = localFilters.selectedGenes.includes(gene.markerNm)
- return (
-
-
-
toggleGene(gene.markerNm)}
- className="h-5 w-5 sm:h-6 sm:w-6 cursor-pointer"
- />
- toggleGene(gene.markerNm)}>
-
{gene.markerNm}
- {gene.relatedTrait && (
-
{gene.relatedTrait}
- )}
-
-
- )
- })}
-
-
+ {loadingGenes ? (
+
+
+ ) : (
+
+ {/* 육량형 */}
+ {(() => {
+ const genes = quantityGenes
+ const isCategoryMatch = geneSearch && '육량형'.includes(geneSearch.toLowerCase())
+ const filteredGenes = geneSearch
+ ? isCategoryMatch
+ ? genes
+ : genes.filter(g =>
+ g.markerNm.toLowerCase().includes(geneSearch.toLowerCase()) ||
+ (g.relatedTrait && g.relatedTrait.toLowerCase().includes(geneSearch.toLowerCase()))
+ )
+ : genes
- {/* 오른쪽: 경제형질 + 가중치 */}
-
-
+ if (geneSearch && filteredGenes.length === 0) return null
- {/* 형질 카테고리별 Collapsible */}
- {Object.entries(traitCategories).map(([key, category]) => {
- // 검색 필터링 - 카테고리 이름 매칭 시 전체 표시
- const query = searchQuery.trim().toLowerCase()
- const isCategoryNameMatch = category.name.toLowerCase().includes(query)
-
- const filteredCategoryTraits = searchQuery.trim()
- ? isCategoryNameMatch
- ? (category.traits as unknown as string[]) // 카테고리 이름 매칭 시 전체 표시
- : (category.traits as unknown as string[]).filter(trait =>
- trait.toLowerCase().includes(query)
- )
- : (category.traits as unknown as string[])
-
- // 선택된 형질 개수 계산 (가중치 > 0)
- const selectedTraitCount = filteredCategoryTraits.filter(trait =>
- (localFilters.traitWeights[trait as TraitName] ?? 0) > 0
- ).length
- const hasTraitSelected = selectedTraitCount > 0
+ const selectedCount = filteredGenes.filter(g => localFilters.selectedGenes.includes(g.markerNm)).length
+ const isAllSelected = selectedCount === filteredGenes.length && filteredGenes.length > 0
+ const hasSelected = selectedCount > 0
+ const isExpanded = geneSearch ? true : (openCategories['quantity'] ?? false)
return (
0)}
- onOpenChange={() => toggleCategory(key as any)}
+ open={isExpanded}
+ onOpenChange={(open) => setOpenCategories(prev => ({ ...prev, quantity: open }))}
>
-
-
- {/* 왼쪽: 체크박스 + 라벨 */}
-
+
+
+
0}
- onCheckedChange={(checked) => {
- // 체크: 모든 형질 가중치를 5로 설정, 언체크: 0으로 설정
- const newWeights = { ...localFilters.traitWeights }
- filteredCategoryTraits.forEach((trait: string) => {
- newWeights[trait as TraitName] = checked ? 5 : 0
- })
-
- // selectedTraits 업데이트
- const currentSelected = localFilters.selectedTraits || []
- let newSelectedTraits: string[]
-
- if (checked) {
- // 체크: 카테고리의 형질들을 추가 (중복 제거)
- const traitsToAdd = filteredCategoryTraits.filter(t => !currentSelected.includes(t))
- newSelectedTraits = [...currentSelected, ...traitsToAdd]
- } else {
- // 언체크: 카테고리의 형질들을 제거
- newSelectedTraits = currentSelected.filter(t => !filteredCategoryTraits.includes(t))
- }
-
- setLocalFilters(prev => ({
- ...prev,
- traitWeights: newWeights,
- selectedTraits: newSelectedTraits
- }))
- }}
- className="h-4 w-4 sm:h-5 sm:w-5 cursor-pointer"
+ checked={isAllSelected}
+ onCheckedChange={(checked) => toggleCategoryGenes(filteredGenes, !!checked)}
+ className="h-4 w-4"
/>
- {category.name}
-
- {selectedTraitCount}/{filteredCategoryTraits.length}개
+
+ 육량형
+
+
+ {selectedCount}/{filteredGenes.length}
-
- {/* 오른쪽: 아코디언 토글 버튼 */}
-
- 검색 결과가 없습니다
-
- ) : (
-
- {filteredCategoryTraits.map((trait: string) => {
- const labels = traitLabels[trait] || { left: '낮게', right: '높게' }
- const description = traitDescriptions[trait] || ''
- const isTraitSelected = (localFilters.traitWeights[trait as TraitName] ?? 0) > 0
- return (
-
- {/* 모바일: 체크박스 + 라벨 + 중요도 컨트롤을 한 줄에 */}
-
-
-
{
- if (checked) {
- updateTraitWeight(trait as TraitName, 5)
- } else {
- updateTraitWeight(trait as TraitName, 0)
- }
- }}
- className="h-5 w-5 sm:h-6 sm:w-6 cursor-pointer"
- />
-
- {description && (
-
-
-
-
-
-
- {description}
-
-
-
- )}
-
- {/* 모바일: 숫자만 표시 */}
-
-
- {localFilters.traitWeights[trait as TraitName] ?? 0}
-
- /10
-
-
- {/* 모바일: 슬라이더 스타일 버튼 */}
-
-
-
-
-
- {/* 데스크톱: 기존 레이아웃 */}
-
- 중요도
-
- {
- const value = parseInt(e.target.value)
- if (isNaN(value)) {
- updateTraitWeight(trait as TraitName, 0)
- } else {
- const clamped = Math.min(10, Math.max(0, value))
- updateTraitWeight(trait as TraitName, clamped)
- }
- }}
- className={`text-sm font-bold w-12 h-8 text-center rounded-lg px-1 transition-colors ${(localFilters.traitWeights[trait as TraitName] ?? 0) > 0
- ? 'bg-primary text-primary-foreground'
- : 'bg-slate-100 text-slate-600'
- }`}
- />
- / 10
-
-
-
+
+ {filteredGenes.map(gene => {
+ const isSelected = localFilters.selectedGenes.includes(gene.markerNm)
+ return (
+
toggleGene(gene.markerNm)}
+ >
+
+
+
+ {gene.markerNm}
+ {gene.relatedTrait && (
+ {gene.relatedTrait}
+ )}
- )
- })}
-
- )}
-
+
+
+ )
+ })}
+
+
+
+ toggleCategoryGenes(filteredGenes, !!checked)}
+ className="h-4 w-4"
+ />
+
+ 육질형
+
+
+ {selectedCount}/{filteredGenes.length}
+
+
+
+
+
+
+
+
+ {filteredGenes.map(gene => {
+ const isSelected = localFilters.selectedGenes.includes(gene.markerNm)
+ return (
+
toggleGene(gene.markerNm)}
+ >
+
+
+
+ {gene.markerNm}
+ {gene.relatedTrait && (
+ {gene.relatedTrait}
+ )}
+
+
+
+ )
+ })}
+
+
-
- )}
-
-
- {/* 변경사항 안내 배너 */}
- {hasChanges && (
-
-
-
-
- 변경사항이 저장되지 않았습니다. 적용 버튼을 눌러 저장하세요.
-
+
+
+
+
)}
- {/* 버튼 영역 */}
-
-
-
-
-
+ {/* 형질 선택 모달 */}
+ {showTraitModal && (
+
+
+
+
유전체 형질 선택
+
+
+
+
+ {/* 검색창 */}
+
+
+ setTraitSearch(e.target.value)}
+ />
+
+
+ {/* 형질 목록 - 카테고리별 아코디언 */}
+
+ {TRAIT_CATEGORIES.map(cat => {
+ const isCategoryMatch = traitSearch && cat.name.toLowerCase().includes(traitSearch.toLowerCase())
+ const filteredTraits = traitSearch
+ ? isCategoryMatch
+ ? cat.traits
+ : cat.traits.filter(t =>
+ t.toLowerCase().includes(traitSearch.toLowerCase()) ||
+ (TRAIT_DESCRIPTIONS[t] && TRAIT_DESCRIPTIONS[t].toLowerCase().includes(traitSearch.toLowerCase()))
+ )
+ : cat.traits
+
+ if (traitSearch && filteredTraits.length === 0) return null
+
+ const selectedCount = filteredTraits.filter(t => localFilters.selectedTraits?.includes(t)).length
+ const isAllSelected = selectedCount === filteredTraits.length && filteredTraits.length > 0
+ const hasSelected = selectedCount > 0
+ const isExpanded = traitSearch ? true : (openCategories[cat.id] ?? false)
+
+ return (
+
setOpenCategories(prev => ({ ...prev, [cat.id]: open }))}
+ >
+
+
+
+ toggleCategoryTraits(filteredTraits, !!checked)}
+ className="h-4 w-4"
+ />
+
+ {cat.name}
+
+
+ {selectedCount}/{filteredTraits.length}
+
+
+
+
+
+
+
+
+ {filteredTraits.map(trait => {
+ const isSelected = localFilters.selectedTraits?.includes(trait)
+ return (
+
+
toggleTrait(trait)}
+ >
+
+
+ {trait}
+ {TRAIT_DESCRIPTIONS[trait] && (
+ {TRAIT_DESCRIPTIONS[trait]}
+ )}
+
+
+ {isSelected && (
+
+
가중치
+
+
+
+ {localFilters.traitWeights[trait as TraitName] || 0}점
+
+
+
+
+ )}
+
+ )
+ })}
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
-
+ )}
-
- {/* 유전자 검색 모달 */}
-
setLocalFilters(prev => ({ ...prev, selectedGenes: genes }))}
- />
-
- {/* 고정 항목 추가 모달 */}
-
)
}
-
-// Draggable Gene Item (카테고리용)
-function DraggableGeneItem({ gene, isSelected, onToggle }: {
- gene: MarkerModel
- isSelected: boolean
- onToggle: () => void
-}) {
- const {
- attributes,
- listeners,
- setNodeRef,
- transform,
- transition,
- isDragging,
- } = useSortable({ id: gene.markerNm })
-
- const style = {
- transform: CSS.Transform.toString(transform),
- transition,
- opacity: isDragging ? 0.3 : 1,
- }
-
- return (
-
-
-
-
-
-
{gene.markerNm}
- {gene.relatedTrait && (
-
{gene.relatedTrait}
- )}
-
-
-
-
-
-
-
- {gene}
-
-
-
-
-
-
-
- {trait}
-
-
-
-
-
- {index + 1}.
- {gene}
-
-
-
-
-
- {index + 1}.
- {trait}
-
-
-
- {children}
-
- )
-}