Skip to content

Commit

Permalink
Merge pull request #332 from SlamTalk/style/331-matching-date
Browse files Browse the repository at this point in the history 
#331 매칭 게시글 날짜 표시 및 기타 스타일 수정
  • Loading branch information
@Jiiker
Jiiker committed May 16, 2024
2 parents 1c6320d + 4d83b0b commit ae4f83d
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 49 deletions.
54 changes: 31 additions & 23 deletions src/app/matching/mate-details/[postId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,31 +196,37 @@ const MateDetailsPage = () => {
return (
<div className="mx-[16px] mt-4 rounded-md border-2">
{/* 유저 프로필 */}
<div className="mb-4 flex items-center space-x-4 border-b-2 px-8 py-2">
<div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-gray-300">
{writer && (
<UserProfile
isOpen={profileModal.isOpen}
userId={writer.userId}
onClose={profileModal.onClose}
<div className="flex items-center justify-between border-b-2 px-6 py-2">
<div className=" flex items-center space-x-4 ">
<div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-gray-300">
{writer && (
<UserProfile
isOpen={profileModal.isOpen}
userId={writer.userId}
onClose={profileModal.onClose}
/>
)}
<Avatar
onClick={profileModal.onOpen}
showFallback
className="cursor-pointer"
alt="profile-img"
src={writer.userProfile}
/>
)}
<Avatar
onClick={profileModal.onOpen}
showFallback
className="cursor-pointer"
alt="profile-img"
src={writer.userProfile}
/>
</div>
<div className="font-bold">{writer.userNickname}</div>
</div>
<div className=" text-right text-sm text-gray-400">
<div>{data.createdAt.split('T')[0]}</div>
<div>{data.createdAt.split('T')[1].split('.')[0]}</div>
</div>
<div className="font-bold">{writer.userNickname}</div>
</div>

{/* 모집글 제목 */}
<div className="mx-6 mb-2 flex items-start">
<div className="mx-6 my-2 flex items-start">
<h1 className="mr-4 max-w-[420px] text-xl font-bold">{data.title}</h1>
<div
className={`mt-0.5 rounded-full px-3 py-1 text-xs text-white ${
className={`mt-0.5 text-nowrap rounded-full px-3 py-1 text-xs text-white ${
data.recruitmentStatus === 'COMPLETED' ? 'bg-danger' : 'bg-success'
}`}
>
Expand All @@ -229,9 +235,9 @@ const MateDetailsPage = () => {
</div>

{/* 날짜와 시간 */}
<div className="mx-6 mb-4 flex items-center">
<div className="mx-6 mb-4 md:flex md:items-center">
<div className="text-sm">{date}</div>
<div className="pl-4 text-sm font-semibold">
<div className="text-sm font-semibold md:pl-4">
{startTime} ~ {endTime}
</div>
</div>
Expand All @@ -246,8 +252,10 @@ const MateDetailsPage = () => {
</Snippet>
</div>

<Link href={`/map?address=${data.locationDetail}`}>
<div className="pr-10 text-blue-600 hover:underline">지도 보기</div>
<Link href="/map">
<div className="pr-4 text-blue-600 hover:underline md:pr-10">
지도 보기
</div>
</Link>
</div>
</div>
Expand Down Expand Up @@ -281,7 +289,7 @@ const MateDetailsPage = () => {
{/* 상세 내용 */}
<div className="mx-6 mb-4">
<div className="text-sm font-semibold">상세 내용</div>
<p className="mb-6 mt-2 h-[100px] overflow-y-auto break-words rounded-md border-2 p-3">
<p className="mb-6 mt-2 max-h-[300px] min-h-[100px] overflow-y-auto break-words rounded-md border-2 p-3">
{data.content.split('\n').map((line) => (
<>
{line}
Expand Down
59 changes: 33 additions & 26 deletions src/app/matching/team-details/[postId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,33 +204,38 @@ const TeamDetailsPage = () => {
return (
<div className="mx-[16px] mt-4 rounded-md border-2">
{/* 유저 프로필 */}
<div className="mb-4 flex items-center space-x-4 border-b-2 px-8 py-2">
<div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-gray-300">
{writer && (
<UserProfile
isOpen={profileModal.isOpen}
userId={writer.userId}
onClose={profileModal.onClose}
<div className="flex items-center justify-between border-b-2 px-6 py-2">
<div className=" flex items-center space-x-4 ">
<div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-gray-300">
{writer && (
<UserProfile
isOpen={profileModal.isOpen}
userId={writer.userId}
onClose={profileModal.onClose}
/>
)}
<Avatar
onClick={profileModal.onOpen}
showFallback
className="cursor-pointer"
alt="profile-img"
src={writer.userProfile}
/>
)}
<Avatar
onClick={profileModal.onOpen}
showFallback
className="cursor-pointer"
alt="profile-img"
src={writer.userProfile}
/>
</div>
<span className="font-bold">
{writer.userNickname} [{data.teamName}]
</span>
</div>
<div className=" text-right text-sm text-gray-400">
<div>{data.createdAt.split('T')[0]}</div>
<div>{data.createdAt.split('T')[1].split('.')[0]}</div>
</div>
<span className="font-bold">
{writer.userNickname} [{data.teamName}]
</span>
</div>

{/* 모집글 제목 */}
<div className="mx-6 mb-2 flex items-start">
<div className="mx-6 my-2 flex items-start">
<h1 className="mr-4 max-w-[420px] text-xl font-bold">{data.title}</h1>
<div
className={`mt-0.5 rounded-full px-3 py-1 text-xs text-white ${
className={`mt-0.5 text-nowrap rounded-full px-3 py-1 text-center text-xs text-white ${
data.recruitmentStatusType === 'COMPLETED'
? 'bg-danger'
: 'bg-success'
Expand All @@ -241,9 +246,9 @@ const TeamDetailsPage = () => {
</div>

{/* 날짜와 시간 */}
<div className="mx-6 mb-4 flex items-center">
<div className="mx-6 mb-4 md:flex md:items-center">
<div className="text-sm">{date}</div>
<div className="pl-4 text-sm font-semibold">
<div className="text-sm font-semibold md:pl-4">
{startTime} ~ {endTime}
</div>
</div>
Expand All @@ -258,8 +263,10 @@ const TeamDetailsPage = () => {
</Snippet>
</div>

<Link href={`/map?address=${data.locationDetail}`}>
<div className="pr-10 text-blue-600 hover:underline">지도 보기</div>
<Link href="/map">
<div className="pr-4 text-blue-600 hover:underline md:pr-10">
지도 보기
</div>
</Link>
</div>
</div>
Expand Down Expand Up @@ -293,7 +300,7 @@ const TeamDetailsPage = () => {
{/* 상세 내용 */}
<div className="mx-6 mb-4">
<div className="text-sm font-semibold">상세 내용</div>
<p className="mb-6 mt-2 h-[100px] overflow-y-auto break-words rounded-md border-2 p-3">
<p className="mb-6 mt-2 max-h-[300px] min-h-[100px] overflow-y-auto break-words rounded-md border-2 p-3">
{data.content.split('\n').map((line) => (
<>
{line}
Expand Down

0 comments on commit ae4f83d

Please sign in to comment.