Skip to content

Commit

Permalink
Merge pull request #106 from snifour/features/#105
Browse files Browse the repository at this point in the history 
Features/#105 코치 상세 페이지 반응형
  • Loading branch information
@mal0070
mal0070 authored Dec 30, 2024
2 parents 34a2df7 + 79988ee commit ab5a5c5
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 74 deletions.
2 changes: 1 addition & 1 deletion src/features/player/components/PlayerList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const PlayerList = ({ playerList, endpoint, loading }: PlayerListProps) => {
role="button"
aria-label={`Player ${player.playerName}, No.${player.backnum}`}
>
<div className="absolute top-2 right-2 text-right text-wiz-red font-bold">
<div className="absolute top-2 right-2 text-right text-wiz-red font-bold text-xs md:text-base lg:text-lg">
<p>No.{player.backnum}</p>
<p className="text-wiz-black">{player.playerName}</p>
</div>
Expand Down
161 changes: 97 additions & 64 deletions src/pages/player/detail/CoachDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,79 +15,112 @@ const CoachDetailPage = () => {
return <div>{error}</div>;
}

// 출신교 데이터 줄바꿈 함수
const formatCareerInGroups = (career: string | undefined) => {
if (!career) return null;

const parts = career.split('-');
const groupedParts = [];
for (let i = 0; i < parts.length; i += 5) {
groupedParts.push(parts.slice(i, i + 5));
}

return groupedParts.map((group, groupIndex) => (
<div key={`group-${groupIndex}-${group}`} className="flex gap-2">
{group.map((item, index) => (
<span key={`item-${groupIndex}-${item}`} className="text-wiz-black">
{index > 0 && '-'}
{item}
</span>
))}
</div>
));
};

return (
<div className="w-full h-screen pb-30">
<Breadcrumb />
<div
className="w-full p-10"
style={{
backgroundImage: `url(${coachData?.mobilePlayerImg1})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}}
>
<div className="w-full px-10 py-20">
<div className="flex flex-row items-start gap-10">
<div className="flex flex-col gap-10 text-wiz-black">
{/* 이름 */}
<div className="flex flex-col gap-4">
<div className="flex gap-8">
<h2 className="text-6xl font-bold">
{coachData?.playerName}
</h2>
<h2 className="text-wiz-red text-6xl font-bold">
No. {coachData?.backnum}
</h2>
<div className="md:w-full">
{/* md 이하일 때 */}
<div className="block md:hidden text-xl rounded-lg p-2">
<div className="w-full h-fit aspect-square bg-wiz-white rounded-xl overflow-hidden">
<img
src={coachData.playerPrvwImg}
alt={`${coachData.playerName} profile`}
className="w-full"
/>
</div>
<div className="w-full h-full flex items-center mt-2">
{/* 선수 프로필 */}
<div className="w-full h-full flex flex-col gap-2">
{/* 이름, 포지션 */}
<div className="w-full h-full flex flex-col justify-between">
<div className="mb-4">
<div className="flex justify-between text-xl font-bold text-wiz-white">
<span>{coachData.playerName}</span>
<span className="text-wiz-red">No.{coachData.backnum}</span>
</div>
<div className="text-neutral-400 flex items-center justify-between text-xs">
<span>{coachData.engName}</span>
<div className="flex items-center gap-1">
<span>{coachData.position}</span>
<span>({coachData.hittype})</span>
</div>
</div>
</div>
<div className="flex gap-4 text-2xl">
<h3>{coachData?.engName}</h3>
<h3>{coachData?.position}</h3>
{/* 생년월일, 체격, 연봉, 출신 */}
<div className="w-full text-base flex flex-col gap-1 text-wiz-white">
<div className="flex items-center justify-between">
<p className="md:w-28 w-32">생년월일</p>
<p>{coachData?.birth}</p>
</div>
<div className="flex items-center justify-between">
<p className="md:w-28 w-32">체격</p>
<p>{coachData?.heightWeight}</p>
</div>

<div className="flex items-start justify-between">
<p className="md:w-28 w-32">출신교</p>
<div className="flex flex-wrap gap-x-2">
<div className="flex flex-col gap-2 max-w-3/4 text-right break-keep">
{coachData.career?.split('-').join(' - ')}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

{/* 설명 */}
<div className="flex flex-col gap-4 text-2xl">
<div className="flex">
<p className="w-32">투타</p>
<p>{coachData?.hittype}</p>
</div>
<div className="flex">
<p className="w-32">생년월일</p>
<p>{coachData?.birth}</p>
</div>
<div className="flex">
<p className="w-32">체격</p>
<p>{coachData?.heightWeight}</p>
{/* md 이상일 때 */}
<div
className="hidden md:block w-full h-auto p-10"
style={{
backgroundImage: `url(${coachData?.mobilePlayerImg1})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}}
>
<div className="w-full px-10 py-20">
<div className="flex flex-row items-start gap-10">
<div className="flex flex-col gap-10 text-wiz-black">
{/* 이름 */}
<div className="flex flex-col gap-4">
<div className="flex gap-8">
<h2 className="md:text-4xl lg:text-6xl font-bold">
{coachData?.playerName}
</h2>
<h2 className="text-wiz-red md:text-4xl lg:text-6xl font-bold">
No. {coachData?.backnum}
</h2>
</div>
<div className="flex gap-4 md:text-xl lg:text-2xl">
<h3>{coachData?.engName}</h3>
<h3>{coachData?.position}</h3>
</div>
</div>

<div className="flex">
<p className="w-32">출신교</p>
<div className="flex flex-wrap gap-x-2">
<div className="flex flex-col gap-2">
{formatCareerInGroups(coachData?.career)}
{/* 설명 */}
<div className="flex flex-col gap-4 md:text-xl lg:text-2xl">
<div className="flex">
<p className="md:w-28 lg:w-32">투타</p>
<p>{coachData?.hittype}</p>
</div>
<div className="flex">
<p className="md:w-28 w-32">생년월일</p>
<p>{coachData?.birth}</p>
</div>
<div className="flex">
<p className="md:w-28 w-32">체격</p>
<p>{coachData?.heightWeight}</p>
</div>

<div className="flex">
<p className="md:w-28 w-32">출신교</p>
<div className="flex flex-wrap gap-x-2">
<div className="flex flex-col gap-2 max-w-[70%] text-center break-keep">
{coachData.career?.split('-').join(' - ')}
</div>
</div>
</div>
</div>
Expand Down
17 changes: 8 additions & 9 deletions src/pages/wizPark/IksanStadiumPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,11 @@ function IksanStadiumPage() {

<SubTitle title="퓨쳐스리그가 펼쳐지는 익산 야구장" />
<div className="flex gap-4 mt-4">
<div className="w-1/2 sm:h-[250px] md:h-[350px] h-[180px] border border-wiz-white border-opacity-30">
사진1
</div>
<div className="w-1/2 sm:h-[250px] md:h-[350px] h-[180px] border border-wiz-white border-opacity-30">
사진2
</div>
<img
src="https://wizzap.ktwiz.co.kr/files//resource/img/park/iksan_img.png"
alt="IksanStadium"
className="w-full sm:h-[250px] md:h-[350px] h-[180px] border border-wiz-white border-opacity-30"
/>
</div>
<div className="flex gap-1 mt-2 mb-8 p-3 bg-wiz-white bg-opacity-10 text-lg overflow-x-scroll whitespace-nowrap">
<p className="font-semibold">규격</p>: 좌우 98m, 중앙 : 121m /
Expand All @@ -44,22 +43,22 @@ function IksanStadiumPage() {
<p className="font-semibold">건립</p>2011년 6월 /
<p className="font-semibold">그라운드</p>: 인조잔디
</div>
<SubTitle title="오시는 길" />
<SubTitle title="오시는 길" className="mb-4" />
<IksanParkMap />
<div className="flex flex-col justify-between mt-6 mb-12">
<div className="flex justify-between items-center">
<p className="text-xl font-semibold">
전라북도 익산시 무왕로 1397 익산 야구장
</p>
<Button className="bg-wiz-white text-wiz-red rounded-xl w-fit h-10 mt-3 flex items-center justify-center hover:bg-wiz-red hover:text-wiz-white">
<Button className="bg-wiz-white text-wiz-red rounded-lg md:rounded-xl w-fit px-2 md:px-4 h-8 md:h-10 md:mt-3 flex items-center justify-center hover:bg-wiz-red hover:text-wiz-white">
<a
href="https://map.kakao.com/link/to/익산 야구장,35.96755,127.0063"
target="_blank"
rel="noreferrer"
className="flex gap-1 items-center"
>
<MapPin />
<span className="text-xl">빠른길찾기</span>
<span className="text-sm md:text-lg">빠른길찾기</span>
</a>
</Button>
</div>
Expand Down

0 comments on commit ab5a5c5

Please sign in to comment.