Skip to content

Commit

Permalink
design: 모바일 게시글 화면
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimkimjunjun
kimkimjunjun committed Sep 28, 2024
1 parent 1fc5209 commit b6a5d47
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 35 deletions.
68 changes: 35 additions & 33 deletions src/app/board/[boardId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,13 +335,13 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {

return (
<div>
<Header />
{window.innerWidth > 600 && (<Header />)}
<div className="w-[90%] sm-700:w-[50%] mx-auto">
<div className="flex text-[#6B6B6B] font-semibold text-[2rem]">
{window.innerWidth > 600 ? (
<span className="mt-[8rem]">{postData?.result.member.blogName}의 블로그</span>
) : (
<div className="flex w-full items-center justify-center">
<div className="flex w-full items-center justify-center mt-[1.2rem]">
<button onClick={handleBackButtonClick}>
<Image src={backbutton} alt="" />
</button>
Expand All @@ -350,7 +350,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
)
}
{memberDatas?.result.blogName === postData?.result.member.blogName && (
<div className="flex ml-auto gap-[1rem]">
<div className="flex ml-auto mt-[1rem] gap-[1rem]">
<Image className="cursor-pointer" src={menubars} alt="" onClick={() => { setIsOpenMenu(!isOpenMenu) }} />
{isOpenMenu && (
<div className="absolute bg-white shadow-md rounded-md mt-[3rem] -ml-[10rem] px-[1.5rem] py-[2rem] animate-dropdown z-20 rounded-[0.8rem]" style={{ opacity: 0, transform: 'translateY(-10px)' }}> {/* 스타일 추가 */}
Expand All @@ -362,12 +362,12 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</div>
)}
</div>
<div className="flex items-center mt-[2rem]">
<div className="flex items-center mt-[2.6rem]">
<h1 className="text-[2.4rem] xl:text-[3.6rem] sm-700:text-[2.4rem] font-bold">
{postData?.result.post.title}
</h1>
</div>
<div className="mt-[4rem] py-[2rem] ">
<div className="py-[2rem] ">
<div className="flex mb-[3rem] items-center">
<div className="flex w-full h-[9rem] border-b border-[#CFCFCF] items-center]">
<Image
Expand Down Expand Up @@ -398,65 +398,65 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</div>
</div>
</div>
<div className="w-full h-[32rem] border border-[#D9D9D9] rounded-[1rem] flex mt-[5rem]">
<div className="w-full h-[11rem] xl:h-[32rem] lg:h-[20rem] sm:h-[11rem] border border-[#D9D9D9] rounded-[1rem] flex mt-[5rem]">
<div
className={`w-[5rem] h-full ${colorTicket[postData.result.ticket.ticketColor] ? `bg-[${colorTicket[postData.result.ticket.ticketColor]}]` : ''} rounded-l-[1rem]`}
className={`w-[1.4rem] xl:w-[5rem] lg:w-[3rem] sm:w-[1.4rem] h-full ${colorTicket[postData.result.ticket.ticketColor] ? `bg-[${colorTicket[postData.result.ticket.ticketColor]}]` : ''} rounded-l-[1rem]`}
></div>
<div className="w-full mt-[5rem] relative">
<div className="w-full mt-[1.7rem] xl:mt-[5rem] lg:mt-[3rem] sm:mt-[1.7rem] relative">
<div className="flex justify-center">
<div>
<h1 className="text-[6rem] font-extrabold font-akira">{postData?.result.ticket.departureCode}</h1>
<div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[2.4rem] font-semibold">
<h1 className="text-[2rem] xl:text-[6rem] lg:text-[3rem] sm:text-[2rem] text-[#292929] font-extrabold font-akira">{postData?.result.ticket.departureCode}</h1>
<div className="w-[5rem] xl:w-[16rem] lg:w-[10rem] sm:w-[5rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[0.8rem] xl:text-[2.4rem] lg:text-[2rem] sm:text-[0.8rem] font-semibold">
{postData?.result.ticket.departure}
</span>
</div>
</div>
<div className="relative flex bg-white mt-[3rem] z-10 mx-[3%]">
<div className="relative flex bg-white mt-0 xl:mt-[3rem] lg:mt-[0.8rem] sm:mt-0 w-[1.7rem] lg:w-[2.4rem] sm:w-[1.7rem] h-[1.7rem] lg:h-[2.4rem] sm:h-[1.7rem] z-10 mx-[3%]">
{getTransportImage(postData?.result.ticket.transport, postData?.result.ticket.ticketColor)}
</div>
<div className="">
<h1 className="text-[6rem] font-extrabold font-akira">{postData?.result.ticket.destinationCode}</h1>
<div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[2.4rem] font-semibold">
<h1 className="text-[2rem] xl:text-[6rem] lg:text-[3rem] sm:text-[2rem] text-[#292929] font-extrabold font-akira">{postData?.result.ticket.destinationCode}</h1>
<div className="w-[5rem] xl:w-[16rem] lg:w-[10rem] sm:w-[5rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[0.8rem] xl:text-[2.4rem] lg:text-[2rem] sm:text-[0.8rem] font-semibold">
{postData?.result.ticket.destination}
</span>
</div>
</div>
</div>
<div className="w-[95%] border-2 border-dashed border-[#CFCFCF] my-[4rem] mx-auto relative z-0" />
<div className="w-[95%] border xl:border-2 sm:border border-dashed border-[#CFCFCF] my-[1.1rem] xl:my-[4rem] lg:my-[2rem] sm:my-[1.1rem] mx-auto relative z-0" />
<div
className={`flex justify-center text-[1.4rem] font-extrabold text-[#55FBAF] font-akira`}
className={`flex justify-center text-[0.5rem] xl:text-[1.4rem] lg:text-[1rem] sm:text-[0.5rem] font-extrabold text-[#55FBAF] font-akira`}
style={{ color: colorTicket[postData?.result.ticket.ticketColor] || 'inherit' }}
>
<span className="w-[16rem]">PASSENGER</span>
<span className="w-[25rem]">DATE</span>
<span className="w-[8rem]">GROUP</span>
<span className="w-[5rem] xl:w-[16rem] lg:w-[10rem] sm:w-[5rem]">PASSENGER</span>
<span className="w-[10rem] xl:w-[25rem] lg:w-[18rem] sm:w-[10rem]">DATE</span>
<span className="w-[2rem] xl:w-[8rem] lg:w-[4rem] sm:w-[2rem]">GROUP</span>
</div>
<div
className={`flex justify-center text-[1.4rem] font-extrabold text-[#6B6B6B]`}
className={`flex justify-center text-[0.5rem] xl:text-[1.4rem] lg:text-[1rem] sm:text-[0.5rem] font-extrabold text-[#6B6B6B]`}
>
<span className="w-[16rem]">USERID</span>
<span className="w-[25rem]">
<span className="w-[5rem] xl:w-[16rem] lg:w-[10rem] sm:w-[5rem]">USERID</span>
<span className="w-[10rem] xl:w-[25rem] lg:w-[18rem] sm:w-[10rem]">
{postData?.result.ticket.startDate} ~{" "}
{postData?.result.ticket.endDate}
</span>
<span className="w-[8rem]">
<span className="w-[2rem] xl:w-[8rem] lg:w-[4rem] sm:w-[2rem]">
{postData?.result.ticket.memberNum}
</span>
</div>
</div>
<div
className={`w-[28.5rem] h-full ${colorTicket[postData.result.ticket.ticketColor] ? `bg-[${colorTicket[postData.result.ticket.ticketColor]}]` : ''} rounded-r-[1rem] ml-auto`}
className={`w-[15rem] xl:w-[28.5rem] lg:w-[20rem] sm:w-[15rem] h-full ${colorTicket[postData.result.ticket.ticketColor] ? `bg-[${colorTicket[postData.result.ticket.ticketColor]}]` : ''} rounded-r-[1rem] ml-auto`}
>
<div className="absolute">
<div className="relative bg-white w-[4rem] h-[4rem] rounded-full -mt-[2rem] -ml-[2rem]"></div>
<div className="relative bg-white w-[4rem] h-[4rem] rounded-full mt-[28rem] -ml-[2rem]"></div>
<div className="relative bg-white w-[1.3rem] xl:w-[4rem] sm:w-[1.3rem] h-[1.3rem] xl:h-[4rem] sm:h-[1.3rem] rounded-full -mt-[0.6rem] xl:-mt-[2rem] sm:-mt-[0.6rem] -ml-[0.8rem] xl:-ml-[2rem] sm:-ml-[0.8rem]"></div>
<div className="relative bg-white w-[1.3rem] xl:w-[4rem] sm:w-[1.3rem] h-[1.3rem] xl:h-[4rem] sm:h-[1.3rem] rounded-full mt-[9.4rem] xl:mt-[28rem] sm:mt-[9.4rem] -ml-[0.8rem] xl:-ml-[2rem] sm:-ml-[0.8rem]"></div>
</div>
<label className="w-full h-full flex" htmlFor="input-file">
<div className="flex flex-col m-auto">
<Image
className="w-[18rem] h-[26rem] rounded-[1rem] object-cover"
className="w-[9rem] xl:w-[26rem] lg:w-[18rem] sm:w-[9rem] h-[9rem] xl:h-[26rem] lg:h-[18rem] sm:h-[9rem] rounded-[1rem] object-cover"
src={postData?.result.ticket.image.accessUri}
alt=""
width={230}
Expand Down Expand Up @@ -595,7 +595,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
)}

<div
className={`w-full h-full shadowall px-[4.7rem] py-[1.4rem] my-[3.5rem] flex flex-col rounded-[0.8rem]`}
className={`w-full h-full shadowall px-[2rem] lg:px-[4.7rem] sm:px-[2rem] py-[1.4rem] my-[3.5rem] flex flex-col rounded-[0.8rem]`}
>
{postCommentData?.result &&
Object.entries(postCommentData.result).map(
Expand All @@ -618,10 +618,12 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
{coData.member.nickName}
</span>
</div>
<span className="text-[1.4rem] font-normal ml-[4.4rem] text-[#292929]">
{coData.content}
</span>
<div className="flex ml-[4.5rem] text-[1.2rem] text-[#9D9D9D] items-center">
<div className="ml-[4rem]">
<span className="text-[1.4rem] font-normal text-[#292929]">
{coData.content}
</span>
</div>
<div className="flex ml-[4rem] text-[1.2rem] text-[#9D9D9D] items-center">
<span>{formattedDateTime}</span>
<hr className="mx-[1rem] h-[1rem] w-[0.1rem] bg-[#9D9D9D]" />
<span
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/home/SkeletonBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const SkeletonBoard: React.FC = () => {

{/* 스켈레톤 카드들 */}
<div className="relative mx-auto">
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4">
{[...Array(itemCount)].map((_, index) => (
<div key={index} className="relative bg-gray-200 rounded-xl w-full h-80 animate-pulse" />
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/home/recentPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function RecentPost({ allPosts, setAllPosts, boardData, boardRefetch, PAGE_SIZE,
</div>
{allPosts === 0 ? (
<div>
<div className="grid grid-cols-1 lg:grid-cols-1 2xl:grid-cols-2 gap-x-[8rem] gap-y-[5.3rem] mt-[5rem]">
<div className="grid grid-cols-1 lg:grid-cols-1 2xl:grid-cols-2 gap-x-[8rem] gap-y-[5.3rem]">
{sortedPosts().map((posts: any, index: number) => {
const BoardId = posts.post.id;

Expand Down

0 comments on commit b6a5d47

Please sign in to comment.