diff --git a/src/mentorship/components/mentorlist/MentorItem.tsx b/src/mentorship/components/mentorlist/MentorItem.tsx index 1dbb8dc..651f8dc 100644 --- a/src/mentorship/components/mentorlist/MentorItem.tsx +++ b/src/mentorship/components/mentorlist/MentorItem.tsx @@ -14,12 +14,14 @@ const MentorItem: React.FC = ({ onToggleBookmark, }) => { return ( -
+
+ {/* 북마크 아이콘을 우측 상단에 절대 위치로 배치 */}
onToggleBookmark(mentor.mName)} - > - + = ({ }`} />
-
- 프로필 -
-
{mentor.mName}
-
{mentor.mcompany}
-
{mentor.mJobDetail}
{' '} -
{mentor.mYear}
-
- 멘토링 횟수 - {mentor.respond}회 {/* 변수명 수정해야함 */} + {/* 프로필 + 멘토 정보 */} +
+
+ 프로필 +
+
{mentor.mName}
+
{mentor.mcompany}
+
{mentor.mJobDetail}
+
{mentor.mYear}
+
+ 멘토링 횟수 + {mentor.respond}회 +
+ + {/* 멘토 소개 */} +

{mentor.intro}

-

{mentor.intro}

); }; -export default MentorItem; +export default MentorItem; \ No newline at end of file diff --git a/src/mentorship/components/mentorlist/MentorList.tsx b/src/mentorship/components/mentorlist/MentorList.tsx index 2d14c32..146e278 100644 --- a/src/mentorship/components/mentorlist/MentorList.tsx +++ b/src/mentorship/components/mentorlist/MentorList.tsx @@ -14,7 +14,7 @@ const MentorList: React.FC = ({ onToggleBookmark, }) => { return ( -
+
{mentors.length > 0 ? ( mentors.map((mentor) => ( = ({ {/* 직무 필터 버튼 */} - {/* 직무/세부직무 필터 버튼 */} + {/* 세부직무 필터 버튼 */}
@@ -41,4 +50,4 @@ const MentorshipFilterBar: React.FC = ({ ); }; -export default MentorshipFilterBar; +export default MentorshipFilterBar; \ No newline at end of file diff --git a/src/mentorship/components/mentorlist/MentorshipHeader.tsx b/src/mentorship/components/mentorlist/MentorshipHeader.tsx index b07d5e4..d744db1 100644 --- a/src/mentorship/components/mentorlist/MentorshipHeader.tsx +++ b/src/mentorship/components/mentorlist/MentorshipHeader.tsx @@ -1,29 +1,8 @@ import React from 'react'; -import { Search } from 'lucide-react'; -interface MentorshipHeaderProps { - searchTerm: string; - onSearchChange: (value: string) => void; -} - -const MentorshipHeader: React.FC = ({ - searchTerm, - onSearchChange, -}) => { +const MentorshipHeader: React.FC = () => { return (
- {/* 검색창 */} -
- - onSearchChange(e.target.value)} - className="w-full p-1 text-[16px] text-gray-900 placeholder-gray-7 focus:outline-none bg-muted" - /> -
- {/* 타이틀 + 이미지 */}
마케팅
@@ -37,4 +16,4 @@ const MentorshipHeader: React.FC = ({ ); }; -export default MentorshipHeader; +export default MentorshipHeader; \ No newline at end of file diff --git a/src/mentorship/components/mentorlist/MentorshipListFilter.tsx b/src/mentorship/components/mentorlist/MentorshipListFilter.tsx index 3fb6dbf..1e8638e 100644 --- a/src/mentorship/components/mentorlist/MentorshipListFilter.tsx +++ b/src/mentorship/components/mentorlist/MentorshipListFilter.tsx @@ -1,5 +1,5 @@ -import React, { useEffect } from 'react'; -import { X } from 'lucide-react'; // X 닫기 버튼 추가 +import React, { useEffect, useState } from 'react'; +import { X } from 'lucide-react'; interface MentorshipListFilterProps { filterType: string; @@ -140,84 +140,116 @@ const MentorshipListFilter: React.FC = ({ selectedSubField, onSubFieldSelect, }) => { + const [isClosing, setIsClosing] = useState(false); + useEffect(() => { - // '세부직무'가 아닌 경우 세부직무 선택값 초기화 if (filterType !== '세부직무') { onSubFieldSelect(null); } }, [filterType, onSubFieldSelect]); - return ( -
-
-
- {/* 필터 제목 */} -
-

- {filterType === '직무' && '직무 선택'} - {filterType === '세부직무' && '세부직무 선택'} -

- {/* 닫기 버튼 */} - -
-
+ const handleClose = () => { + setIsClosing(true); + }; + + const handleAnimationEnd = () => { + if (isClosing) { + onClose(); + } + }; - {/* 직무 필터 */} - {filterType === '직무' && ( -
- {fieldOptions.map((field) => ( - - ))} +
- )} - {/* 세부직무 필터 */} - {filterType === '세부직무' && ( -
- {selectedField && - subFieldOptions[selectedField] && - subFieldOptions[selectedField].length > 0 ? ( - subFieldOptions[selectedField].map((subField) => ( + {filterType === '직무' && ( +
+ {fieldOptions.map((field) => ( - )) - ) : ( -
- 먼저 직무를 선택하세요. -
- )} -
- )} + ))} +
+ )} + + {filterType === '세부직무' && ( +
+ {selectedField && + subFieldOptions[selectedField] && + subFieldOptions[selectedField].length > 0 ? ( + subFieldOptions[selectedField].map((subField) => ( + + )) + ) : ( +
+ 먼저 직무를 선택하세요. +
+ )} +
+ )} +
-
+ ); }; -export default MentorshipListFilter; +export default MentorshipListFilter; \ No newline at end of file diff --git a/src/mentorship/components/mentorlist/MentorshipSortDropdown.tsx b/src/mentorship/components/mentorlist/MentorshipSortDropdown.tsx index bf8da8b..58aa93c 100644 --- a/src/mentorship/components/mentorlist/MentorshipSortDropdown.tsx +++ b/src/mentorship/components/mentorlist/MentorshipSortDropdown.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import { ChevronDown } from 'lucide-react'; interface MentorshipSortDropdownProps { - sortOption: string; + sortOption?: string; // optional prop onSortChange: (value: string) => void; } @@ -10,20 +10,52 @@ const MentorshipSortDropdown: React.FC = ({ sortOption, onSortChange, }) => { + // sortOption이 없으면 'respond'를 기본값으로 사용 + const effectiveSortOption = sortOption || 'respond'; + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + + const options = [ + { value: 'respond', label: '멘토링 횟수 순' }, + { value: 'mYear', label: '경력 낮은 순' }, // 임시로 해둔 정렬 기준 + ]; + + // 드롭다운 외부 클릭 시 닫기 + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + return ( -
- -
- + {options.find(option => option.value === effectiveSortOption)?.label} +
+ {isOpen && ( +
+ {options.map((option) => ( +
{ + onSortChange(option.value); + setIsOpen(false); + }} + > + {option.label} +
+ ))} +
+ )}
); }; diff --git a/src/mentorship/pages/mentorlist/MentorshipList.tsx b/src/mentorship/pages/mentorlist/MentorshipList.tsx index cff87a8..e0ef77e 100644 --- a/src/mentorship/pages/mentorlist/MentorshipList.tsx +++ b/src/mentorship/pages/mentorlist/MentorshipList.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, useMemo } from 'react'; import { MentorType } from '@/mentorship/pages/mentorlist/MentorshipList.types'; import MentorshipHeader from '@/mentorship/components/mentorlist/MentorshipHeader'; import MentorshipFilterBar from '@/mentorship/components/mentorlist/MentorshipFilterBar'; @@ -102,9 +102,8 @@ const mentorshipData: MentorType[] = [ const MentorshipList = () => { const [isFooterVisible, setIsFooterVisible] = useState(true); - const [searchTerm, setSearchTerm] = useState(''); - const [filteredMentors, setFilteredMentors] = useState(mentorshipData); - const [sortOption, setSortOption] = useState('review'); + // filteredMentors를 직접 정렬 결과로 관리하거나 useMemo로 파생 데이터로 관리 + const [sortOption, setSortOption] = useState('respond'); // 기본값을 'respond'로 변경! const [filterType, setFilterType] = useState(null); const [selectedField, setSelectedField] = useState(null); const [selectedSubField, setSelectedSubField] = useState(null); @@ -132,14 +131,28 @@ const MentorshipList = () => { return () => container.removeEventListener('scroll', handleScroll); }, []); + // sortOption 변경 시, mentorshipData를 정렬해서 filteredMentors에 업데이트! + const sortedMentors = useMemo(() => { + const dataCopy = [...mentorshipData]; + if (sortOption === 'respond') { + // 멘토링 횟수가 많은 순으로 내림차순 정렬 + dataCopy.sort((a, b) => b.respond - a.respond); + } else if (sortOption === 'mYear') { + // mYear가 '5년차' 같은 문자열이므로 숫자만 추출해서 오름차순 정렬 + dataCopy.sort((a, b) => { + const yearA = parseInt(a.mYear); + const yearB = parseInt(b.mYear); + return yearA - yearB; + }); + } + return dataCopy; + }, [sortOption]); + return (
{/* 헤더 */} -
- +
+ { {/* 스크롤 영역 */}
setBookmarked((prev) => ({ ...prev, [mName]: !prev[mName] })) @@ -179,10 +192,9 @@ const MentorshipList = () => { )} {/* 푸터 */} - {/* */}
); }; -export default MentorshipList; +export default MentorshipList; \ No newline at end of file