Skip to content

Commit

Permalink
Merge branch 'dev' into feature/#130
Browse files Browse the repository at this point in the history
  • Loading branch information
@YunHwanCho
YunHwanCho authored Sep 28, 2024
2 parents 1d057db + c10c15a commit 5e04a3b
Show file tree
Hide file tree
Showing 31 changed files with 1,090 additions and 493 deletions.
28 changes: 28 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@
"react-bootstrap": "^2.10.4",
"react-datepicker": "^7.3.0",
"react-dom": "^18",
"react-easy-crop": "^5.0.8",
"react-hook-form": "^7.51.3",
"react-icons": "^5.3.0",
"react-image-crop": "^11.0.7",
"react-modal": "^3.16.1",
"react-query": "^3.39.3",
"react-select": "^5.8.0",
Expand Down
2 changes: 1 addition & 1 deletion public/AddBlogImageIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 56 additions & 37 deletions src/app/board/[boardId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import Swal from "sweetalert2";
import menubars from "@/dummy/menubars.svg"
import deleteReply from "@/services/board/delete/deleteReply";
import { PostAirSVG, PostBusSVG, PostBycicleSVG, PostCarSVG, PostTrainSVG } from "@/components/transportsvg/post";
import backbutton from "@/dummy/backbutton.svg"

export default function BoardPage({ params }: { params: { boardId: number } }) {
const accessToken = Cookies.get("accessToken");
Expand Down Expand Up @@ -148,7 +149,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");

return `${year}.${month}.${day} ${hours}:${minutes}`;
return `${year}.${month}.${day}`;
}
const createdAt = postData?.result.post.createDateTime;
const formattedDate = formatDate(createdAt);
Expand Down Expand Up @@ -326,14 +327,30 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
}
};

// const router = useRouter();

const handleBackButtonClick = () => {
router.back(); // 이전 페이지로 이동
};

return (
<div>
<Header />
{window.innerWidth > 600 && (<Header />)}
<div className="w-[90%] sm-700:w-[50%] mx-auto">
<div className="flex mt-[8rem] text-[#6B6B6B] font-semibold text-[2rem]">
<span>{postData?.result.member.blogName}의 블로그</span>
<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 mt-[1.2rem]">
<button onClick={handleBackButtonClick}>
<Image src={backbutton} alt="" />
</button>
<span className="text-[#171717] flex mx-auto">{postData?.result.member.blogName}의 블로그</span>
</div>
)
}
{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 @@ -345,12 +362,12 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</div>
)}
</div>
<div className="flex items-center mt-[2rem]">
<h1 className="text-[3.6rem] font-bold">
<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 @@ -381,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 @@ -550,7 +567,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
<div className="w-full">
<div className="flex items-center">
<Image
className="flex items-center"
className="w-[2.8rem] h-[2.8rem] flex items-center rounded-[4.5rem]"
src={memberDatas?.result.profileImageUrl}
alt=""
width={28}
Expand Down Expand Up @@ -578,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 @@ -601,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
Loading

0 comments on commit 5e04a3b

Please sign in to comment.