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 d6b206a commit 474a0dc
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 61 deletions.
40 changes: 19 additions & 21 deletions src/app/user/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ const UserPage = ({ params }: { params: { id: string } }) => {
const userData = data && data.result;
const memberEmail = userData?.email;

console.log(userBoardCount)
return (
<>
<Header />
Expand All @@ -112,7 +113,7 @@ const UserPage = ({ params }: { params: { id: string } }) => {
layout="fill"
objectFit="cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-10 z-10" />
<div className="absolute inset-0 bg-black bg-opacity-10 z-10" />
</div>
<div className="hidden sm-700:flex w-[66%] mx-auto p-4 z-20">
<div className="w-[250px] mb-4">
Expand All @@ -130,25 +131,24 @@ const UserPage = ({ params }: { params: { id: string } }) => {
<div className="flex justify-between mb-4 ml-4 text-2xl">
<div className="flex space-x-4">
<button
className={`px-8 py-2 rounded-[999px] justify-center items-center ${
activeTab === TABS.TICKET
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
className={`px-8 py-2 rounded-[999px] justify-center items-center ${activeTab === TABS.TICKET
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
onClick={() => setActiveTab(TABS.TICKET)}
>
<span
className={activeTab === TABS.TICKET ? "text-[#fa3463]" : ""}
>
티켓
</span>
<span className="text-[#fa3463] ml-1">{userBoardCount}</span>
</button>
<button
className={`px-8 py-2 rounded-[999px] justify-center items-center ${
activeTab === TABS.OOTD
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
className={`px-8 py-2 rounded-[999px] justify-center items-center ${activeTab === TABS.OOTD
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
onClick={() => setActiveTab(TABS.OOTD)}
>
<span
Expand Down Expand Up @@ -225,11 +225,10 @@ const UserPage = ({ params }: { params: { id: string } }) => {
<div className="flex flex-col space-x-4">
<div className="flex flex-row gap-10">
<button
className={`px-8 py-2 rounded-[999px] justify-center items-center ${
activeTab === TABS.TICKET
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
className={`px-8 py-2 rounded-[999px] justify-center items-center ${activeTab === TABS.TICKET
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
onClick={() => setActiveTab(TABS.TICKET)}
>
<span
Expand All @@ -239,11 +238,10 @@ const UserPage = ({ params }: { params: { id: string } }) => {
</span>
</button>
<button
className={`px-8 py-2 rounded-[999px] justify-center items-center ${
activeTab === TABS.OOTD
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
className={`px-8 py-2 rounded-[999px] justify-center items-center ${activeTab === TABS.OOTD
? "bg-[#ffe3ea] border-2 border-[#fa3463]"
: "border border-[#cfcfcf]"
}`}
onClick={() => setActiveTab(TABS.OOTD)}
>
<span
Expand Down
6 changes: 3 additions & 3 deletions src/components/pages/home/recentPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@ function RecentPost({ allPosts, setAllPosts, boardData, boardRefetch, PAGE_SIZE,
<div className="flex w-full">
<Image className="w-[17rem] h-[17rem] rounded-[0.8rem] object-cover" src={posts.ticket.image.accessUri} alt="" width={170} height={170} />
<div className='flex flex-col w-full ml-[2.5rem]'>
<h1 className="text-[2rem] font-medium text-ellipsis overflow-hidden theboki">{posts.post.title}</h1>
<span className="text-[1.6rem] mt-[0.4rem] h-[5rem] font-normal text-[#6B6B6B] text-ellipsis overflow-hidden theboki1">{bodyText}</span>
<h1 className="text-[2rem] font-medium text-ellipsis overflow-hidden theboki font-['Pretendard']">{posts.post.title}</h1>
<span className="text-[1.6rem] mt-[0.4rem] h-[5rem] font-normal text-[#6B6B6B] text-ellipsis overflow-hidden theboki1 font-['Pretendard']">{bodyText}</span>
<div className="flex flex-wrap text-ellipsis overflow-hidden theboki">
{posts?.post.tags.map((tagData: string, index: number) => (
<span
Expand All @@ -189,7 +189,7 @@ function RecentPost({ allPosts, setAllPosts, boardData, boardRefetch, PAGE_SIZE,
alt=""
className="hidden md:block rounded-[4.5rem] w-[2.4rem] h-[2.4rem]" // 500px 이상에서만 보이도록 설정
/>
<span className={`hidden md:block`}>{posts.member.nickName}</span>
<span className={`hidden md:block font-['Pretendard']`}>{posts.member.nickName}</span>
{/* <span className="">{formattedDate}</span> */}
</div>
<div className="flex items-end text-[#9D9D9D] ml-auto">
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,15 @@ const Header = () => {
<div className="flex text-lg">
<Link href="/">
<div
className={`text-gray-800 no-underline ${pathname === "/" ? "font-bold" : ""}`}
className={`text-gray-800 no-underline font-['Pretendard'] ${pathname === "/" ? "font-bold" : ""}`}
style={{ fontSize: "1.4rem" }}
>
HOME
</div>
</Link>
<Link href="/ootd">
<div
className={`text-gray-800 pl-8 no-underline ${pathname === "/ootd" ? "font-bold" : ""}`}
className={`text-gray-800 pl-8 no-underline font-['Pretendard'] ${pathname === "/ootd" ? "font-bold" : ""}`}
style={{ fontSize: "1.4rem" }}
>
OOTD
Expand Down
53 changes: 36 additions & 17 deletions src/components/user/UserTicket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { useQuery } from "react-query";
import air from '@/dummy/air.svg'
import { MyAirSVG, MyBusSVG, MyBycicleSVG, MyCarSVG, MyTrainSVG } from "../transportsvg/mypage";


interface userProps {
Expand Down Expand Up @@ -37,26 +38,42 @@ const UserTicket = ({ memberEmail, userBoardCount }: userProps) => {
console.log(userTicketData)
return (
<div>
<div className="grid grid-cols-4 gap-12">
<div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-12">
{userTicketData?.result.map((ticektDatas: any) => {

const getTransportImage = (transport: string, ticketColor: any) => {
switch (transport) {
case 'Airplane':
return <MyAirSVG fillColor={colorTicket[ticketColor]} />;
case 'Car':
return <MyCarSVG fillColor={colorTicket[ticketColor]} />;
case 'Bus':
return <MyBusSVG fillColor={colorTicket[ticketColor]} />;
case 'Bicycle':
return <MyBycicleSVG fillColor={colorTicket[ticketColor]} />;
case 'Train':
return <MyTrainSVG fillColor={colorTicket[ticketColor]} />;
default:
return null; // 기본값 또는 대체 이미지
}
};
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>
)}
{/* {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?.ticket.image.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="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 font-akira`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>
<span className={`text-[0.8rem] lg:text-[0.8rem] xl:text-[1.2rem] font-extrabold font-akira`} style={{ color: colorTicket[ticektDatas.ticket.ticketColor] || 'inherit' }}>
PASSENGER
</span>
<span className="text-[1.2rem] font-medium text-[#6B6B6B]">USERID</span>
Expand All @@ -71,10 +88,12 @@ const UserTicket = ({ memberEmail, userBoardCount }: userProps) => {
</div>
</div>
<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 className="flex flex-col font-extrabold font-akira mx-auto">
<span className="text-[1.8rem] sm:text-[2.8rem] md:text-[2.4rem] lg:text-[1.8rem] xl:text-[3.2rem]">{ticektDatas.ticket.departureCode}</span>
<div className="mx-auto">
{getTransportImage(ticektDatas.ticket.transport, ticektDatas.ticket.ticketColor)}
</div>
<span className="text-[1.8rem] sm:text-[2.8rem] md:text-[2.4rem] lg:text-[1.8rem] xl:text-[3.2rem]">{ticektDatas.ticket.destinationCode}</span>
</div>
</div>

Expand Down
24 changes: 6 additions & 18 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,17 +323,10 @@
resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz"
integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==

"@img/sharp-darwin-arm64@0.33.5":
"@img/sharp-win32-x64@0.33.5":
version "0.33.5"
resolved "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz"
integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
optionalDependencies:
"@img/sharp-libvips-darwin-arm64" "1.0.4"

"@img/[email protected]":
version "1.0.4"
resolved "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz"
integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
resolved "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz"
integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==

"@isaacs/cliui@^8.0.2":
version "8.0.2"
Expand Down Expand Up @@ -391,10 +384,10 @@
dependencies:
glob "10.3.10"

"@next/swc-darwin-arm64@14.2.2":
"@next/swc-win32-x64-msvc@14.2.2":
version "14.2.2"
resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.2.tgz"
integrity sha512-3iPgMhzbalizGwHNFUcGnDhFPSgVBHQ8aqSTAMxB5BvJG0oYrDf1WOJZlbXBgunOEj/8KMVbejEur/FpvFsgFQ==
resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.2.tgz"
integrity sha512-a/20E/wtTJZ3Ykv3f/8F0l7TtgQa2LWHU2oNB9bsu0VjqGuGGHmm/q6waoUNQYTVPYrrlxxaHjJcDV6aiSTt/w==

"@nodelib/[email protected]":
version "2.1.5"
Expand Down Expand Up @@ -1810,11 +1803,6 @@ fs.realpath@^1.0.0:
resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==

fsevents@~2.3.2:
version "2.3.3"
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==

function-bind@^1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
Expand Down

0 comments on commit 474a0dc

Please sign in to comment.