Skip to content

RINGUS-19 refactor: 추가된 디자인으로 멘토목록페이지 수정 #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
parkjihyoun merged 1 commit into from
Mar 5, 2025
Merged

RINGUS-19 refactor: 추가된 디자인으로 멘토목록페이지 수정 #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 27 additions & 20 deletions src/mentorship/components/mentorlist/MentorItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,40 +14,47 @@ const MentorItem: React.FC<MentorItemProps> = ({
onToggleBookmark,
}) => {
return (
<div className="bg-white p-4 border-b relative w-min-[361px]">
<div className="bg-white p-4 border-b relative w-full">
{/* 북마크 아이콘을 우측 상단에 절대 위치로 배치 */}
<div
className="absolute top-2 right-2 cursor-pointer"
className="absolute top-4 right-4 cursor-pointer"
onClick={() => onToggleBookmark(mentor.mName)}
>
<Bookmark strokeWidth={1}
>
<Bookmark
strokeWidth={1}
className={`w-[24px] h-[24px] ${
isBookmarked
? 'stroke-primary-4 fill-primary-4'
: 'stroke-gray-2 fill-none'
}`}
/>
</div>
<div className="flex items-center space-x-[13px]">
<img
src={'/assets/Profile.png'}
alt="프로필"
className="w-[78px] h-[78px] rounded-full object-cover"
/>
<div>
<div className="text-[16px] font-bold">{mentor.mName}</div>
<div className="mt-[4px] text-gray-5 text-[12px]">{mentor.mcompany}</div>
<div className="text-gray-5 text-[12px]">{mentor.mJobDetail}</div>{' '}

<div className="text-gray-5 text-[12px]">{mentor.mYear}</div>
<div className="flex items-center justify-between gap-[22px] border border-gray-8 px-2 py-0.5 rounded-[5px] mt-[4px] h-[30px]">
<span className="text-primary-3 text-[12px]">멘토링 횟수</span>
<span className="text-gray-5 text-[12px]">{mentor.respond}회</span> {/* 변수명 수정해야함 */}
{/* 프로필 + 멘토 정보 */}
<div className="w-full items-center ml-[15px]">
<div className="flex w-full items-center space-x-[13px]">
<img
src={'/assets/Profile.png'}
alt="프로필"
className="w-[78px] h-[78px] rounded-full object-cover"
/>
<div>
<div className="text-[16px] font-bold">{mentor.mName}</div>
<div className="mt-[4px] text-gray-5 text-[12px]">{mentor.mcompany}</div>
<div className="text-gray-5 text-[12px]">{mentor.mJobDetail}</div>
<div className="text-gray-5 text-[12px]">{mentor.mYear}</div>
<div className="flex items-center justify-between gap-[22px] border border-gray-8 bg-gray-8 px-2 py-0.5 rounded-[5px] mt-[4px] h-[30px] w-[130px]">
<span className="text-primary-3 text-[12px]">멘토링 횟수</span>
<span className="text-gray-5 text-[12px]">{mentor.respond}회</span>
</div>
</div>
</div>

{/* 멘토 소개 */}
<p className="text-gray-600 text-[12px] mt-[15px]">{mentor.intro}</p>
</div>
<p className="text-gray-600 text-[12px] mt-[15px]">{mentor.intro}</p>
</div>
);
};

export default MentorItem;
export default MentorItem;
2 changes: 1 addition & 1 deletion src/mentorship/components/mentorlist/MentorList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const MentorList: React.FC<MentorListProps> = ({
onToggleBookmark,
}) => {
return (
<div className="w-full px-[16px] pt-[4px] space-y-4">
<div className="w-full px-0 pt-[4px] space-y-4">
{mentors.length > 0 ? (
mentors.map((mentor) => (
<MentorItem
Expand Down
23 changes: 16 additions & 7 deletions src/mentorship/components/mentorlist/MentorshipFilterBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { ChevronDown } from 'lucide-react';


interface MentorshipFilterBarProps {
selectedField: string | null;
selectedSubField: string | null;
Expand All @@ -21,24 +20,34 @@ const MentorshipFilterBar: React.FC<MentorshipFilterBarProps> = ({
{/* 직무 필터 버튼 */}
<button
onClick={() => onFilterClick('직무')}
className="pr-2 pl-3 py-1 border-[1px] border-gray-2 rounded-[30px] text-gray-2 text-[12px] flex items-center gap-[4px]"
className={`pr-2 pl-3 py-1 border-[1px] rounded-[30px] text-[12px] flex items-center gap-[4px]
${
selectedField
? 'border-primary-4 text-primary-4 bg-paymentblue'
: 'border-gray-2 text-gray-2'
}`}
>
{selectedField ? selectedField : '직무'}
<ChevronDown strokeWidth={1}/>
<ChevronDown strokeWidth={1} />
</button>

{/* 직무/세부직무 필터 버튼 */}
{/* 세부직무 필터 버튼 */}
<button
onClick={() => onFilterClick('세부직무')}
className="pr-2 pl-3 py-1 border-[1px] border-gray-2 rounded-[30px] text-gray-2 text-[12px] flex items-center gap-[4px]"
className={`pr-2 pl-3 py-1 border-[1px] rounded-[30px] text-[12px] flex items-center gap-[4px]
${
selectedSubField
? 'border-primary-4 text-primary-4 bg-paymentblue'
: 'border-gray-2 text-gray-2'
}`}
>
{selectedSubField ? selectedSubField : '세부직무'}
<ChevronDown strokeWidth={1}/>
<ChevronDown strokeWidth={1} />
</button>
</div>
</div>
</div>
);
};

export default MentorshipFilterBar;
export default MentorshipFilterBar;
25 changes: 2 additions & 23 deletions src/mentorship/components/mentorlist/MentorshipHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<MentorshipHeaderProps> = ({
searchTerm,
onSearchChange,
}) => {
const MentorshipHeader: React.FC = () => {
return (
<div className="w-full max-w-2xl mt-[16px] px-4">
{/* 검색창 */}
<div className="w-full p-2 h-[48px] flex items-center bg-gray-6 rounded-[30px]">
<Search strokeWidth={1} className="m-5 w-5 h-5 text-gray-1" />
<input
type="text"
placeholder="회사, 직무, 학과, 닉네임으로 검색하기"
value={searchTerm}
onChange={(e) => onSearchChange(e.target.value)}
className="w-full p-1 text-[16px] text-gray-900 placeholder-gray-7 focus:outline-none bg-muted"
/>
</div>

{/* 타이틀 + 이미지 */}
<div className="flex items-center gap-[14px] mt-[16px]">
<div className="text-[32px] font-bold text-primary-1">마케팅</div>
Expand All @@ -37,4 +16,4 @@ const MentorshipHeader: React.FC<MentorshipHeaderProps> = ({
);
};

export default MentorshipHeader;
export default MentorshipHeader;
156 changes: 94 additions & 62 deletions src/mentorship/components/mentorlist/MentorshipListFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -140,84 +140,116 @@ const MentorshipListFilter: React.FC<MentorshipListFilterProps> = ({
selectedSubField,
onSubFieldSelect,
}) => {
const [isClosing, setIsClosing] = useState(false);

useEffect(() => {
// '세부직무'가 아닌 경우 세부직무 선택값 초기화
if (filterType !== '세부직무') {
onSubFieldSelect(null);
}
}, [filterType, onSubFieldSelect]);

return (
<div className="fixed top-0 left-1/2 transform -translate-x-1/2 w-full max-w-[600px] h-full bg-[#000] bg-opacity-75 flex justify-center items-end z-50">
<div className="bg-[#fff] w-full rounded-t-[20px] p-4 min-h-[366px]">
<div className="pl-3 mt-[10px]">
{/* 필터 제목 */}
<div className="flex justify-between items-center">
<h2 className="text-[16px] font-bold">
{filterType === '직무' && '직무 선택'}
{filterType === '세부직무' && '세부직무 선택'}
</h2>
{/* 닫기 버튼 */}
<button onClick={onClose} className="p-1">
<X strokeWidth={1} className="w-6 h-6 text-gray-1" />
</button>
</div>
</div>
const handleClose = () => {
setIsClosing(true);
};

const handleAnimationEnd = () => {
if (isClosing) {
onClose();
}
};

{/* 직무 필터 */}
{filterType === '직무' && (
<div className="grid grid-cols-3 gap-x-[11px] mt-[34px] gap-y-[13px]">
{fieldOptions.map((field) => (
<button
key={field}
onClick={() => {
onFieldSelect(field);
onClose();
}}
className={`p-[12px] border rounded-[8px] text-[14px] text-center min-w-[113px] h-[43px] flex justify-center items-center ${
selectedField === field
? 'border-primary-1 text-primary-1'
: 'bg-gray-100 text-gray-800'
}`}
>
{field}
return (
<>
{/* 필터 슬라이드로 닫히도록 */}
<style>{`
@keyframes slideDown {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
}
.animate-slide-out {
animation: slideDown 300ms forwards;
}
`}</style>
<div
className="fixed top-0 left-1/2 transform -translate-x-1/2 w-full max-w-[600px] h-full bg-[#000] bg-opacity-75 flex justify-center items-end z-50"
onClick={handleClose}
>
<div
onClick={(e) => e.stopPropagation()}
onAnimationEnd={handleAnimationEnd}
className={`bg-[#fff] w-full rounded-t-[20px] p-4 min-h-[366px] ${isClosing ? 'animate-slide-out' : ''}`}
>
<div className="pl-3 mt-[10px]">
<div className="flex justify-between items-center">
<h2 className="text-[16px] font-bold">
{filterType === '직무' && '직무 선택'}
{filterType === '세부직무' && '세부직무 선택'}
</h2>
<button onClick={handleClose} className="p-1">
<X strokeWidth={1} className="w-6 h-6 text-gray-1" />
</button>
))}
</div>
</div>
)}

{/* 세부직무 필터 */}
{filterType === '세부직무' && (
<div className="flex flex-col gap-[20px] mt-[34px] mx-auto px-3 mb-[10px]">
{selectedField &&
subFieldOptions[selectedField] &&
subFieldOptions[selectedField].length > 0 ? (
subFieldOptions[selectedField].map((subField) => (
{filterType === '직무' && (
<div className="grid grid-cols-3 gap-x-[11px] mt-[34px] gap-y-[13px]">
{fieldOptions.map((field) => (
<button
key={subField}
key={field}
onClick={() => {
onSubFieldSelect(subField);
onClose();
onFieldSelect(field);
handleClose();
}}
className={`rounded-[8px] text-[12px] text-start text-gray-2 ${
selectedSubField === subField
? ' text-primary-1'
className={`p-[12px] border rounded-[8px] text-[14px] text-center min-w-[113px] h-[43px] flex justify-center items-center ${
selectedField === field
? 'border-primary-1 text-primary-1'
: 'bg-gray-100 text-gray-800'
}`}
>
{subField}
{field}
</button>
))
) : (
<div className="text-center text-gray-600">
먼저 직무를 선택하세요.
</div>
)}
</div>
)}
))}
</div>
)}

{filterType === '세부직무' && (
<div className="flex flex-col gap-[20px] mt-[34px] mx-auto px-3 mb-[10px]">
{selectedField &&
subFieldOptions[selectedField] &&
subFieldOptions[selectedField].length > 0 ? (
subFieldOptions[selectedField].map((subField) => (
<button
key={subField}
onClick={() => {
onSubFieldSelect(subField);
handleClose();
}}
className={`rounded-[8px] text-[12px] text-start text-gray-2 ${
selectedSubField === subField
? ' text-primary-1'
: 'bg-gray-100 text-gray-800'
}`}
>
{subField}
</button>
))
) : (
<div className="text-center text-gray-2 mt-[20px]">
먼저 직무를 선택하세요.
</div>
)}
</div>
)}
</div>
</div>
</div>
</>
);
};

export default MentorshipListFilter;
export default MentorshipListFilter;
Loading