Skip to content

FESI1-106: QA fix complete #148

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
0juicy merged 7 commits into from
Feb 12, 2025
Merged

FESI1-106: QA fix complete #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c66470c
FESI1-106 [Fix] : QA fix complete
haquoh Feb 12, 2025
eb0ed69
FESI1-106 [Fix] : lint 오류
haquoh Feb 12, 2025
ece9ca5
Merge branch 'dev' into FESI1-106--GatheringDetailQA
0juicy Feb 12, 2025
6eca02c
FESI1-106 [Fix] : 상세페이지 모바일 반응형수정
haquoh Feb 12, 2025
544f842
FESI1-106 [Fix] : 상세페이지 모바일반응형수정
haquoh Feb 12, 2025
068fa8a
FESI1-106 [Fix] : push 가 안되서 pull 하는중
haquoh Feb 12, 2025
697580d
FESI1-106 [Fix] : 모집글 집어넣기~
haquoh Feb 12, 2025
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
3 changes: 3 additions & 0 deletions public/icons/chevron_vector.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 11 additions & 8 deletions src/app/gathering/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,33 @@ export default function GatheringDetail({
return (
<div className="mx-auto max-w-screen-xl px-4">
<title>{`모여방 | ${gatheringData.name}`}</title>
<div className="mt-24 md:mt-32">
<div className="flex flex-col gap-6 md:flex-row">
<div className="flex-1">
<div className="mt-36">
{/* Main section과 JoinBox를 포함하는 컨테이너 */}
<div className="flex flex-col gap-6 min-[1111px]:flex-row">
{/* Main section 컨테이너 */}
<div className="flex flex-1 justify-center min-[1111px]:justify-start">
<GatheringMainSection {...gatheringData} />
</div>
<JoinBoxSection {...gatheringData} gatheringId={Number(params.id)} />
</div>

<div className="mt-16">
<div className="mt-16 flex justify-center min-[1111px]:justify-start">
<GatheringDetailSection {...gatheringData} />
</div>

{hostData ? (
<div className="mt-16">
{hostData && (
<div className="mt-16 flex justify-center min-[1111px]:justify-start">
<ProfileSection
createrProfile={hostData}
isOpen={isOpen}
openModal={openModal}
closeModal={closeModal}
/>
</div>
) : null}
)}

<div className="mb-20 mt-16">
{/* Review section */}
<div className="mb-20 mt-16 flex justify-center min-[1111px]:justify-start">
<GatheringReviewSection gatheringId={Number(params.id)} />
</div>
</div>
Expand Down
182 changes: 152 additions & 30 deletions src/components/gatheringDetail/GatheringDetailSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { levels } from '@/constants/themeList';
import Image from 'next/image';

interface GatheringDetailSectionProps {
message: string;
synopsis: string;
level: string;
themeName: string;
Expand All @@ -13,6 +14,7 @@ interface GatheringDetailSectionProps {
}

export default function GatheringDetailSection({
message,
synopsis,
level,
themeName,
Expand All @@ -36,63 +38,183 @@ export default function GatheringDetailSection({
levels.find((item) => item.value === level)?.label || level;

return (
<section className="mt-8 max-w-[805px] space-y-6">
<section
className="mt-8 w-full
max-w-[326px]
space-y-6
min-[376px]:max-w-[688px]
lg:max-w-[805px]"
>
{/* 방탈출 정보 섹션 */}
<div>
<h2 className="font-noto mb-4 text-[26px] leading-[28px]">
<h2
Comment on lines 48 to +50
Copy link
Collaborator

@0juicy 0juicy Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

위에 리뷰 코멘트를 남겼던 것과 같이, className이 없는 wrapper div태그에 flex 값을 주어
요소 사이 간격을 자동으로 조절하는 방식도 편리할 것 같습니다.

className="font-noto mb-4
text-xl leading-6
md:text-2xl md:leading-7
lg:text-[26px] lg:leading-[28px]"
>
방탈출 정보
</h2>
<div className="space-y-6 rounded-xl bg-[#2A2B2E] p-6">
<div className="flex items-baseline gap-4">
<h3 className="min-w-[100px] text-secondary-50">테마명</h3>
<span>{themeName}</span>
<div
className="space-y-4 rounded-xl bg-[#2A2B2E] p-4
md:space-y-6
md:p-5
lg:p-6"
>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-baseline sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
테마명
</h3>
<span className="text-sm md:text-base">{themeName}</span>
</div>

<div className="flex items-baseline gap-4">
<h3 className="min-w-[100px] text-secondary-50">시놉시스</h3>
<p className="whitespace-pre-line">{synopsis}</p>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-baseline sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
시놉시스
</h3>
<p className="whitespace-pre-line text-sm md:text-base">
{synopsis}
</p>
</div>

<div className="flex items-center gap-4">
<h3 className="min-w-[100px] text-secondary-50">플레이타임</h3>
<span>{playtime}분</span>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
플레이타임
</h3>
<span className="text-sm md:text-base">{playtime}분</span>
</div>

<div className="flex items-center gap-4">
<h3 className="min-w-[100px] text-secondary-50">난이도</h3>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
난이도
</h3>
<div className="flex items-center gap-2">
<span>{levelsLabel}</span>
<span className="text-sm md:text-base">{levelsLabel}</span>
</div>
</div>
</div>
</div>

{/* 모임 안내 섹션 */}
<div>
<h2 className="font-noto mb-4 text-[26px] leading-[28px]">모임 안내</h2>
<div className="space-y-6 rounded-xl bg-[#2A2B2E] p-6">
<div className="flex items-center gap-4">
<h3 className="min-w-[100px] text-secondary-50">모임 일시</h3>
<span>{formatDate(dateTime)}</span>
<h2
className="font-noto mb-4
text-xl leading-6
md:text-2xl md:leading-7
lg:text-[26px] lg:leading-[28px]"
>
모임 안내
</h2>
<div
className="space-y-4 rounded-xl bg-[#2A2B2E] p-4
md:space-y-6
md:p-5
lg:p-6"
>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
모집글
</h3>
<span className="text-sm md:text-base">{message}</span>
</div>

<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
모임 일시
</h3>
<span className="text-sm md:text-base">{formatDate(dateTime)}</span>
</div>

<div className="flex items-center gap-4">
<h3 className="min-w-[100px] text-secondary-50">신청 마감</h3>
<span>{formatDate(registrationEnd)}</span>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
신청 마감
</h3>
<span className="text-sm md:text-base">
{formatDate(registrationEnd)}
</span>
</div>

<div className="flex items-center gap-4">
<h3 className="min-w-[100px] text-secondary-50">모임 정원</h3>
<span>{capacity}명</span>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
모임 정원
</h3>
<span className="text-sm md:text-base">{capacity}명</span>
</div>

<div className="flex items-center gap-4">
<h3 className="min-w-[100px] text-secondary-50">참여 유저</h3>
<div
className="flex flex-col gap-2
sm:flex-row sm:items-center sm:gap-4"
>
<h3
className="min-w-[80px]
text-secondary-50
sm:min-w-[100px]"
>
참여 유저
</h3>
<div className="flex -space-x-2">
{Array.from({ length: participantCount }, (_, i) => (
<div
key={`participant-${crypto.randomUUID()}`}
className="relative h-8 w-8 rounded-full border-2 border-secondary-90 bg-secondary-90"
key={`participant-${i}`}
className="relative h-6 w-6
rounded-full border-2
border-secondary-90 bg-secondary-90 md:h-8 md:w-8"
>
<Image
src="/icons/profile_image_default.svg"
Expand Down
Loading