Skip to content

Commit

Permalink
Merge pull request #95 from official-Trippy/feature/#51
Browse files Browse the repository at this point in the history 
design: 유저페이지 및 마이페이지 ui수정
  • Loading branch information
@kimkimjunjun
kimkimjunjun authored Aug 5, 2024
2 parents e9fdd94 + 4166e76 commit f31bb50
Show file tree
Hide file tree
Showing 8 changed files with 129 additions and 176 deletions.
Binary file added public/font/Akira Expanded Demo.otf
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions src/app/board/[boardId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,14 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {

const handleProfileClick = () => {
console.log("click");
if (memberDatas.result.memberId == userInfo.memberId) {
if (postData.result.member.memberId == userInfo.memberId) {
router.push("/mypage");
} else {
router.push(`/user/${memberDatas.result.memberId}`);
router.push(`/user/${postData.result.member.memberId}`);
}
};

console.log(memberDatas, userInfo)
console.log(postData, userInfo)

const LikeHandler = async () => {
try {
Expand Down
140 changes: 56 additions & 84 deletions src/components/profile/MyTicket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,115 +3,87 @@ import { colorTicket } from "@/types/board";
import Image from "next/image";
import React, { useState } from "react";
import { useQuery } from "react-query";

import air from '@/dummy/air.svg'
import { useRouter } from "next/navigation";
interface ticketProps {
totalBoardCount: number | undefined;
}

const PAGE_SIZE = 5
const PAGE_SIZE = 8
const MyTicket = ({ totalBoardCount }: ticketProps) => {
const [orderTypes, setOrderTypes] = useState("LATEST");
const [pages, setPages] = useState(0);
const router = useRouter();

const { data: myTicketData } = useQuery({
const { data: myTicketData, refetch: TicketRefetch } = useQuery({
queryKey: ['myTicketData'],
queryFn: () => getBoardMyTotal(PAGE_SIZE, pages, orderTypes),
queryFn: () => getBoardMyTotal(PAGE_SIZE, pages, orderTypes)
})

const totalPages = totalBoardCount ? Math.ceil(totalBoardCount / PAGE_SIZE) : 0;

const handleBoardLink = (boardId: number) => {
router.push(`/board/${boardId}`)
}

const handlePageClick = (pageIndex: number) => {
setPages(pageIndex);
setTimeout(() => {
TicketRefetch();
}, 100)
};

console.log(myTicketData)
return (
<div className="mt-[3rem] grid grid-cols-1">
<div className="flex">
<h1 className="text-[2rem] font-semibold text-[#292929]">티켓</h1>
<span className="text-[2rem] font-semibold text-[#FB3463] ml-[0.8rem]">{totalBoardCount}</span>
<select
className='flex w-[8rem] h-[3rem] ml-auto text-[1.5rem] font-medium selectshadow'
value={orderTypes}
onChange={(e) => setOrderTypes(e.target.value)}
>
<option value='LATEST'>최신순</option>
<option value='VIEW'>조회순</option>
<option value='LIKE'>인기순</option>
</select>
</div>
{myTicketData?.result.map((ticektDatas: any) => {
return (
<div className="w-full h-[32rem] border border-[#D9D9D9] rounded-[1rem] flex mt-[2rem]">
<div
className={`w-[15.4rem] h-full ${colorTicket[ticektDatas.ticket.ticketColor] ? `bg-[${colorTicket[ticektDatas.ticket.ticketColor]}]` : ''} rounded-l-[1rem]`}
></div>
<div className="w-full mt-[5rem] relative">
<div className="flex justify-center">
<div>
<h1 className="text-[6rem] font-extrabold">KOR</h1>
<div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[2.4rem] font-semibold">
{ticektDatas.ticket.departure}
</span>
</div>
</div>
<div className="relative flex items-center bg-white z-10 mx-[5rem]">
{/* <Image className="" src={air} alt="비행기" /> */}
<div>
<div className="grid grid-cols-4 gap-12">
{myTicketData?.result.map((ticektDatas: any) => {
console.log(colorTicket[ticektDatas.ticket.ticketColor])
return (
<div key={ticektDatas.ticket.id} className={`flex-1 cursor-pointer `} onClick={() => { handleBoardLink(ticektDatas.post.id) }} >
{ticektDatas.post.images.length > 0 && (
<div className={`relative w-full pb-[100%] rounded-[1rem] ${colorTicket[ticektDatas.ticket.ticketColor] ? `bg-[${colorTicket[ticektDatas.ticket.ticketColor]}]` : ''}`}> {/* 컨테이너를 정사각형으로 설정 */}
<Image
src={ticektDatas.post.images[0].accessUri}
alt="OOTD"
className="absolute inset-0 w-full h-full object-cover rounded-[1rem] p-[1.3rem]"
width={200} // Width and height are for aspect ratio purposes
height={200}
/>
</div>
<div className="ml-[5rem]">
<h1 className="text-[6rem] font-extrabold">KOR</h1>
<div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[2.4rem] font-semibold">
{ticektDatas.ticket.destination}
)}
<div className="font-normal font-['Pretendard'] shadowall rounded-[1rem] p-[1rem] flex">
<div className="mx-auto">
<div className="flex flex-col">
<span className={`text-[1.2rem] font-extrabold`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>
PASSENGER
</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">USERID</span>
</div>
<div className="flex flex-col mt-[0.5rem]">
<span className={`text-[1.2rem] font-extrabold`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>DATE</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">{ticektDatas.ticket.startDate} ~<br /> {ticektDatas.ticket.endDate}</span>
</div>
<div className="flex flex-col mt-[0.5rem]">
<span className={`text-[1.2rem] font-extrabold`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>GROUP</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">{ticektDatas.ticket.memberNum}</span>
</div>
</div>
</div>
<div className="w-[95%] border-2 border-dashed border-[#CFCFCF] my-[4rem] mx-auto relative z-0" />
<div
className={`flex justify-center text-[1.4rem] font-extrabold text-[#55FBAF]`}
>
<span className="w-[16rem]">PASSENGER</span>
<span className="w-[25rem]">DATE</span>
<span className="w-[8rem]">GROUP</span>
</div>
<div
className={`flex justify-center text-[1.4rem] font-extrabold text-[#6B6B6B]`}
>
<span className="w-[16rem]">USERID</span>
<span className="w-[25rem]">
{ticektDatas.ticket.startDate} ~{" "}
{ticektDatas.ticket.endDate}
</span>
<span className="w-[8rem]">
{ticektDatas.ticket.memberNum}
</span>
</div>
</div>
<div
className={`w-[60rem] h-full ${colorTicket[ticektDatas.ticket.ticketColor] ? `bg-[${colorTicket[ticektDatas.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>
<label className="w-full h-full flex" htmlFor="input-file">
<div className="flex flex-col m-auto">
<Image
className="w-[23rem] h-[26rem] rounded-[1rem]"
src={ticektDatas.ticket.image.accessUri}
alt=""
width={230}
height={260}
/>
<div className="mx-auto border border-dashed border-[#CFCFCF]" />
<div className="flex flex-col text-[3.2rem] font-extrabold font-akira mx-auto">
<span>KOR</span>
<Image className="mx-auto my-[1rem]" src={air} width={15} height={15} alt="air" />
<span>KOR</span>
</div>
</label>
</div>

</div>
</div>
)
})}
<div className="flex justify-center my-16">
)
}

)}
</div>
<div className="flex w-full justify-center my-16">
{Array.from({ length: totalPages }, (_, index) => (
<button
key={index}
Expand Down
10 changes: 6 additions & 4 deletions src/components/shared/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,6 @@ const Header = () => {
setModalVisible(!modalVisible);
};

const handleDropdownToggle = () => {
setIsDropdownOpen(!isDropdownOpen);
};

return (
<header className="header flex justify-between items-center w-[80%] mx-auto relative">
Expand Down Expand Up @@ -72,14 +69,19 @@ const Header = () => {
<button
className="w-[8.6rem] h-[3.5rem] bg-btn-color text-white px-7 py-2 rounded-lg mr-8"
style={{ fontSize: "1.6rem" }}
onClick={handleDropdownToggle}
onMouseEnter={() => setIsDropdownOpen(true)}
// onMouseLeave={() => {
// setIsDropdownOpen(false)
// }}
>
글쓰기
</button>
{isDropdownOpen && (
<div
className="absolute w-[31rem] mt-[1rem] -ml-[10rem] top-[3.6rem] rounded-[0.8rem] bg-white shadowalltop rounded-lg animate-dropdown z-20"
style={{ opacity: 0, transform: 'translateY(-10px)' }}
onMouseEnter={() => setIsDropdownOpen(true)} // 드롭다운에 마우스가 올라가면 열려있도록 유지
onMouseLeave={() => setIsDropdownOpen(false)}
>
<Link href="/post">
<div className="px-[1.3rem] pt-[1.2rem] rounded-lg border-b border-white">
Expand Down
132 changes: 51 additions & 81 deletions src/components/user/UserTicket.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
import { getUserBoard } from "@/services/board/get/getBoard";
import { colorTicket } from "@/types/board";
import Image from "next/image";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { useQuery } from "react-query";
import air from '@/dummy/air.svg'


interface userProps {
memberEmail: string;
userBoardCount: number | undefined;
}

const PAGE_SIZE = 5
const PAGE_SIZE = 8

const UserTicket = ({ memberEmail, userBoardCount }: userProps) => {
const [orderTypes, setOrderTypes] = useState("LATEST");
const [pages, setPages] = useState(0);
const router = useRouter();

const { data: userTicketData } = useQuery({
queryKey: ['userTicketData'],
Expand All @@ -27,94 +30,61 @@ const UserTicket = ({ memberEmail, userBoardCount }: userProps) => {
setPages(pageIndex);
};

const handleBoardLink = (boardId: number) => {
router.push(`/board/${boardId}`)
}

console.log(userTicketData)
return (
<div className="mt-[3rem] grid grid-cols-1">
<div className="flex">
<h1 className="text-[2rem] font-semibold text-[#292929]">티켓</h1>
<span className="text-[2rem] font-semibold text-[#FB3463] ml-[0.8rem]">{userBoardCount}</span>
<select
className='flex w-[8rem] h-[3rem] ml-auto text-[1.5rem] font-medium selectshadow'
value={orderTypes}
onChange={(e) => setOrderTypes(e.target.value)}
>
<option value='LATEST'>최신순</option>
<option value='VIEW'>조회순</option>
<option value='LIKE'>인기순</option>
</select>
</div>
{userTicketData?.result.map((ticektDatas: any) => {
return (
<div className="w-full h-[32rem] border border-[#D9D9D9] rounded-[1rem] flex mt-[2rem]">
<div
className={`w-[15.4rem] h-full ${colorTicket[ticektDatas.ticket.ticketColor] ? `bg-[${colorTicket[ticektDatas.ticket.ticketColor]}]` : ''} rounded-l-[1rem]`}
></div>
<div className="w-full mt-[5rem] relative">
<div className="flex justify-center">
<div>
<h1 className="text-[6rem] font-extrabold">KOR</h1>
<div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[2.4rem] font-semibold">
{ticektDatas.ticket.departure}
</span>
</div>
</div>
<div className="relative flex items-center bg-white z-10 mx-[5rem]">
{/* <Image className="" src={air} alt="비행기" /> */}
<div>
<div className="grid grid-cols-4 gap-12">
{userTicketData?.result.map((ticektDatas: any) => {
console.log(colorTicket[ticektDatas.ticket.ticketColor])
return (
<div key={ticektDatas.ticket.id} className={`flex-1 cursor-pointer `} onClick={() => { handleBoardLink(ticektDatas.post.id) }} >
{ticektDatas.post.images.length > 0 && (
<div className={`relative w-full pb-[100%] rounded-[1rem] ${colorTicket[ticektDatas.ticket.ticketColor] ? `bg-[${colorTicket[ticektDatas.ticket.ticketColor]}]` : ''}`}> {/* 컨테이너를 정사각형으로 설정 */}
<Image
src={ticektDatas.post.images[0].accessUri}
alt="OOTD"
className="absolute inset-0 w-full h-full object-cover rounded-[1rem] p-[1.3rem]"
width={200} // Width and height are for aspect ratio purposes
height={200}
/>
</div>
<div className="ml-[5rem]">
<h1 className="text-[6rem] font-extrabold">KOR</h1>
<div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
<span className="text-[#9D9D9D] text-[2.4rem] font-semibold">
{ticektDatas.ticket.destination}
)}
<div className="font-normal font-['Pretendard'] shadowall rounded-[1rem] p-[1rem] flex">
<div className="mx-auto">
<div className="flex flex-col">
<span className={`text-[1.2rem] font-extrabold`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>
PASSENGER
</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">USERID</span>
</div>
<div className="flex flex-col mt-[0.5rem]">
<span className={`text-[1.2rem] font-extrabold`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>DATE</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">{ticektDatas.ticket.startDate} ~<br /> {ticektDatas.ticket.endDate}</span>
</div>
<div className="flex flex-col mt-[0.5rem]">
<span className={`text-[1.2rem] font-extrabold`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>GROUP</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">{ticektDatas.ticket.memberNum}</span>
</div>
</div>
</div>
<div className="w-[95%] border-2 border-dashed border-[#CFCFCF] my-[4rem] mx-auto relative z-0" />
<div
className={`flex justify-center text-[1.4rem] font-extrabold text-[#55FBAF]`}
>
<span className="w-[16rem]">PASSENGER</span>
<span className="w-[25rem]">DATE</span>
<span className="w-[8rem]">GROUP</span>
</div>
<div
className={`flex justify-center text-[1.4rem] font-extrabold text-[#6B6B6B]`}
>
<span className="w-[16rem]">USERID</span>
<span className="w-[25rem]">
{ticektDatas.ticket.startDate} ~{" "}
{ticektDatas.ticket.endDate}
</span>
<span className="w-[8rem]">
{ticektDatas.ticket.memberNum}
</span>
</div>
</div>
<div
className={`w-[60rem] h-full ${colorTicket[ticektDatas.ticket.ticketColor] ? `bg-[${colorTicket[ticektDatas.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>
<label className="w-full h-full flex" htmlFor="input-file">
<div className="flex flex-col m-auto">
<Image
className="w-[23rem] h-[26rem] rounded-[1rem]"
src={ticektDatas.ticket.image.accessUri}
alt=""
width={230}
height={260}
/>
<div className="mx-auto border border-dashed border-[#CFCFCF]" />
<div className="flex flex-col text-[3.2rem] font-extrabold font-akira mx-auto">
<span>KOR</span>
<Image className="mx-auto my-[1rem]" src={air} width={15} height={15} alt="air" />
<span>KOR</span>
</div>
</label>
</div>

</div>
</div>
)
})}
<div className="flex justify-center my-16">
)
}

)}
</div>
<div className="flex w-full justify-center my-16">
{Array.from({ length: totalPages }, (_, index) => (
<button
key={index}
Expand Down
2 changes: 1 addition & 1 deletion src/services/board/get/getBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export async function getBoardMyTotal(size: number, page: number, orderType: str
export const getUserTotalBoardCount = async (memberId: string): Promise<number> => {
try {
const response = await axios.get<{ result: number }>(
`${backendUrl}/api/post/count/all?type=POST&memberId=${memberId}`
`${backendUrl}/api/post/count/by-member?type=POST&memberId=${memberId}`
);
return response.data.result;
} catch (error) {
Expand Down
Loading

0 comments on commit f31bb50

Please sign in to comment.