Skip to content
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

Features/#105 코치 상세 페이지 반응형 #106

Merged
merged 5 commits into from
Dec 30, 2024
Merged

Features/#105 코치 상세 페이지 반응형 #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
402e786
feat: 익산 야구장 사진 추가 및 반응형 추가(#105)
dhdpekfa1 Dec 27, 2024
269ec2a
feat: 플레이어 리스트 배번, 선수명 반응형 추가(#105)
dhdpekfa1 Dec 27, 2024
8c3cea8
feat: 코치상세페이지 반응형 설정(#105)
dhdpekfa1 Dec 27, 2024
a0727c0
refactor: 사용하지 않는 코드 제거(#105)
dhdpekfa1 Dec 27, 2024
79988ee
design: 익산야구장 margin 수정(#105)
dhdpekfa1 Dec 27, 2024
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
2 changes: 1 addition & 1 deletion src/features/player/components/PlayerList.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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