Skip to content

Commit a400cfc

Browse files
jjangminiijjangminii
committed
Merge branch 'develop' of https://github.com/geulDa/FE into feat/#59/postcard-page-layout
2 parents 953dcc3 + 9a7cfba commit a400cfc

File tree

12 files changed

+208
-38
lines changed

12 files changed

+208
-38
lines changed

‎src/pages/auth/index.tsx‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
'use client';
2+
import { useState } from 'react';
23
import { Icon } from '@/shared/icons';
34
import { cn } from '@/shared/lib';
45
import LoginButton from '@/pages/auth/components/LoginButton';
56
import RecentLoginBubble from '@/pages/auth/components/RecentLoginBubble';
67

78
export default function LoginPage() {
8-
const handleLoginClick = (platform: string) => alert(`${platform} 로그인`);
9+
const [recentPlatform, setRecentPlatform] = useState<string | null>(null);
10+
11+
const handleLoginClick = (platform: string) => {
12+
alert(`${platform} 로그인 준비중`);
13+
console.log(`${platform} 로그인 버튼 클릭`);
14+
setRecentPlatform(platform);
15+
};
916

1017
return (
1118
<main className='w-full flex flex-col items-center bg-white'>
@@ -37,7 +44,7 @@ export default function LoginPage() {
3744
</svg>
3845
</div>
3946

40-
{/* 콘텐츠 */}
47+
{/* 콘텐츠 */}
4148
<section
4249
className={cn(
4350
'w-full flex flex-col items-center text-center',
@@ -50,7 +57,7 @@ export default function LoginPage() {
5057
<p className='text-label-md text-mint-900'>
5158
만화 속 부천 여행
5259
<br />
53-
8개 명소를 탐험하고 엽서를 모아보세요!
60+
10개 명소를 탐험하고 엽서를 모아보세요!
5461
</p>
5562
</div>
5663

@@ -59,32 +66,47 @@ export default function LoginPage() {
5966
<Icon name='Stamp' size={132} color='mint-400' />
6067
</div>
6168

62-
{/* 로그인 버튼 */}
63-
<div className='flex flex-col items-center gap-[2.1rem] relative'>
69+
<div className='flex flex-col items-center gap-[2.1rem]'>
6470
<p className='text-label-lg text-gray-400'>start with</p>
6571

66-
{/* 최근 로그인 말풍선 */}
67-
<div className='absolute -translate-x-1/2 z-50'>
68-
<RecentLoginBubble />
69-
</div>
72+
<div className='flex gap-[1.5rem] relative'>
73+
{/* 카카오 */}
74+
<div className='relative'>
75+
<LoginButton
76+
platform='kakao'
77+
onClick={() => handleLoginClick('카카오')}
78+
/>
79+
{recentPlatform === '카카오' && (
80+
<div
81+
className='absolute -top-[3.8rem] left-1/2 -translate-x-1/2
82+
w-auto min-w-max h-auto flex-shrink-0 pointer-events-none'
83+
>
84+
<RecentLoginBubble />
85+
</div>
86+
)}
87+
</div>
7088

71-
{/* 로그인 버튼 */}
72-
<div className='flex gap-[1.5rem]'>
73-
<LoginButton
74-
platform='kakao'
75-
onClick={() => handleLoginClick('카카오')}
76-
/>
77-
<LoginButton
78-
platform='google'
79-
onClick={() => handleLoginClick('구글')}
80-
/>
89+
{/* 구글 */}
90+
<div className='relative'>
91+
<LoginButton
92+
platform='google'
93+
onClick={() => handleLoginClick('구글')}
94+
/>
95+
{recentPlatform === '구글' && (
96+
<div
97+
className='absolute -top-[3.8rem] left-1/2 -translate-x-1/2
98+
w-auto min-w-max h-auto flex-shrink-0 pointer-events-none'
99+
>
100+
<RecentLoginBubble />
101+
</div>
102+
)}
103+
</div>
81104
</div>
82105

83106
<p className='text-label-md text-gray-400 cursor-pointer underline underline-offset-[0.25rem]'>
84107
비회원 로그인
85108
</p>
86109
</div>
87-
88110
{/* 안내문 */}
89111
<p className='mt-[5rem] text-label-sm text-gray-400'>
90112
비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.

‎src/pages/main/Board.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Header } from '@/shared/components';
2-
32
import Boardgame from '@/pages/main/components/board/Boardgame';
4-
import router from 'next/router';
3+
import { useRouter } from 'next/router';
54

65
const Board = () => {
6+
const router = useRouter();
77
return (
88
<div className='relative w-full h-[100vh] bg-[#46d1cd] overflow-auto'>
99
<Header title='지도' onClick={() => router.back()} />

‎src/pages/main/HiddenReward.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use client';
2+
import Image from 'next/image';
3+
import { useRouter } from 'next/router';
4+
5+
const HiddenReward = () => {
6+
const router = useRouter();
7+
8+
return (
9+
<div
10+
className='
11+
relative w-full h-[100vh]
12+
bg-gradient-to-b from-mint-500 to-white
13+
flex flex-col justify-center items-center text-center
14+
overflow-hidden
15+
'
16+
onClick={() => console.log('히든 리워드 클릭: 다음 페이지 이동')}
17+
>
18+
<h1 className=' text-black mb-[4.5rem] text-headline-lg-serif '>
19+
Congrats!
20+
</h1>
21+
22+
<p className='text-title-sm text-black mb-[6rem]'>
23+
축하합니다! <br />
24+
히든 리워드를 획득하셨습니다.
25+
</p>
26+
27+
<div className='relative w-[16rem] h-[16rem] mb-[6rem] bg-amber-100 rounded-full'>
28+
로띠 예정
29+
</div>
30+
31+
<p className='text-label-md text-black mb-[7rem]'>
32+
가톨릭대 전설의 포켓몬 <br />
33+
‘나무를 수호하는 종철씨’를 <br />
34+
획득하셨습니다!
35+
</p>
36+
37+
<p className='text-label-serif text-mint-500'>click!</p>
38+
</div>
39+
);
40+
};
41+
42+
export default HiddenReward;

‎src/pages/main/Node.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Header } from '@/shared/components';
2+
import AddressCopy from '@/shared/components/button/AddressCopy';
3+
import LocationCard from '@/shared/components/container/LocationCard';
4+
import { Icon } from '@/shared/icons';
5+
import { cn } from '@/shared/lib';
6+
import { getLocation } from '@/shared/utils/handleGetLocation';
7+
import Image from 'next/image';
8+
import { useRouter } from 'next/router';
9+
10+
const Board = () => {
11+
const router = useRouter();
12+
const { label } = router.query;
13+
const isStamp = true;
14+
15+
return (
16+
<div className='relative w-full h-[100vh] overflow-auto px-[2.4rem]'>
17+
<Header
18+
title={label ? String(label) : '노드'}
19+
onClick={() => router.back()}
20+
/>
21+
22+
<main className='relative pt-[14.3rem] gap-[1.2rem] flex flex-col '>
23+
<section className='relative w-full'>
24+
<Image
25+
src='/assets/board.svg'
26+
alt='보드판'
27+
width={354}
28+
height={436}
29+
className={cn(
30+
'w-full h-auto object-cover block rounded-[1.6rem] transition-all duration-300',
31+
!isStamp && 'blur-xs brightness-90',
32+
)}
33+
/>
34+
35+
<button
36+
className={cn('absolute bottom-0 right-0', isStamp && 'p-[2.5rem]')}
37+
onClick={() =>
38+
getLocation(
39+
(pos) => console.log('📍 현재 위치:', pos.coords),
40+
(err) => console.error('⚠️ 위치 에러:', err.message),
41+
//TODO : 리워드 페이지로 이동 , 위치 에러일경우 모달창
42+
)
43+
}
44+
>
45+
<Icon
46+
name={isStamp ? 'Stamp' : 'PressStamp'}
47+
color={isStamp ? 'pink-400' : 'gray-50'}
48+
size={isStamp ? 100 : 160}
49+
/>
50+
</button>
51+
</section>
52+
53+
<LocationCard
54+
name={label ? String(label) : '노드'}
55+
address='주소'
56+
description='장소에 대한 설명'
57+
variant='mint'
58+
size='large'
59+
/>
60+
61+
<AddressCopy
62+
variant='mint'
63+
value='인천광역시 계양구 오조산로 31길(복사되어야할 주소)'
64+
// label={label ? String(label) : '노드'}
65+
/>
66+
</main>
67+
</div>
68+
);
69+
};
70+
71+
export default Board;

‎src/pages/main/components/board/Boardgame.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
'use client';
22
import Image from 'next/image';
33
import { boardData } from '@/shared/constants/main/boardData';
4+
import { useRouter } from 'next/router';
45

56
const Boardgame = () => {
7+
const router = useRouter();
68
return (
79
<div className='relative w-full h-full bg-[#46d1cd] overflow-hidden'>
810
<Image
@@ -31,7 +33,16 @@ const Boardgame = () => {
3133
}
3234

3335
return (
34-
<div key={key} onClick={() => console.log(cell.label)}></div>
36+
<div
37+
key={key}
38+
onClick={() => {
39+
// TODO : 로그인 여부 체크
40+
router.push({
41+
pathname: '/main/Node',
42+
query: { label: cell.label },
43+
});
44+
}}
45+
></div>
3546
);
3647
}),
3748
)}

‎src/pages/main/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { cn } from '@/shared/lib';
22
import StampBoard from './components/stampBoard/StampBoard';
33
import { ControlBar } from '@/shared/components';
44
import Image from 'next/image';
5-
import router from 'next/router';
5+
import { useRouter } from 'next/router';
66
import { BottomNav } from '@/shared/components/tab/BottomNav';
77

88
export default function MainPage() {
9+
const router = useRouter();
910
return (
1011
<div
1112
className={cn(

‎src/shared/components/button/AddressCopy.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useState } from 'react';
66
import { Copy } from '@/shared/utils/copy';
77

88
const addressCopyStyle = cva(
9-
'flex items-center justify-start flex-shrink-0 rounded-full transition-all duration-200',
9+
'flex items-center justify-start flex-shrink-0 rounded-full transition-all duration-200 overflow-hidden',
1010
{
1111
variants: {
1212
variant: {
@@ -23,14 +23,14 @@ const addressCopyStyle = cva(
2323
interface AddressCopyProps
2424
extends React.HTMLAttributes<HTMLDivElement>,
2525
VariantProps<typeof addressCopyStyle> {
26-
label: string;
2726
value: string;
27+
truncate?: boolean;
2828
}
2929

3030
const AddressCopy = ({
31-
label = 'address copy',
32-
value = label,
31+
value,
3332
variant = 'gray',
33+
truncate = true,
3434
className,
3535
...props
3636
}: AddressCopyProps) => {
@@ -52,24 +52,29 @@ const AddressCopy = ({
5252
onClick={handleCopy}
5353
className={cn(
5454
addressCopyStyle({ variant }),
55-
'w-[35.4rem] h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]',
55+
'w-full h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]',
5656
'cursor-pointer select-none',
5757
className,
5858
)}
5959
{...props}
6060
>
61-
<Icon
62-
name='CopySimple'
63-
size={18}
64-
color={variant === 'mint' ? 'mint-400' : 'gray-400'}
65-
/>
61+
<div className='flex-shrink-0'>
62+
<Icon
63+
name={copied ? 'Check' : 'CopySimple'}
64+
size={18}
65+
color={variant === 'mint' ? 'mint-400' : 'gray-400'}
66+
/>
67+
</div>
6668
<span
6769
className={cn(
68-
'text-label-lg',
70+
'text-label-lg flex-1 min-w-0',
6971
variant === 'mint' ? 'text-mint-400' : 'text-gray-400',
72+
truncate &&
73+
'truncate whitespace-nowrap overflow-hidden text-ellipsis',
7074
)}
75+
title={value}
7176
>
72-
{label}
77+
{value}
7378
</span>
7479
</div>
7580
);

‎src/shared/components/container/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const cardStyle = cva(
1111
},
1212
size: {
1313
medium:
14-
'w-[17rem] h-[17rem] flex-col items-center justify-center p-[1.2rem]',
14+
'w-full h-[17rem] flex-col items-center justify-center p-[1.2rem]',
1515
large:
1616
'w-full h-[12rem] flex-row items-start justify-start px-[1.3rem] pt-[1.1rem] pb-[3.3rem]',
1717
},

‎src/shared/icons/iconNames.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const iconNames = [
1313
"KakaoIcon",
1414
"MapPin",
1515
"MapPin_",
16+
"PressStamp",
1617
"Save",
1718
"Stamp",
1819
"User",

‎src/shared/icons/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
2-
import './source/backto.svg';
32
import './source/CalendarBlank.svg';
43
import './source/Caret.svg';
54
import './source/ChatCircle.svg';
@@ -13,9 +12,11 @@ import './source/HouseSimple.svg';
1312
import './source/KakaoIcon.svg';
1413
import './source/MapPin.svg';
1514
import './source/MapPin_.svg';
15+
import './source/PressStamp.svg';
1616
import './source/Save.svg';
1717
import './source/Stamp.svg';
1818
import './source/User.svg';
19+
import './source/backto.svg';
1920
import './source/x.svg';
2021

2122
export { Icon } from './components/icon';

0 commit comments

Comments
 (0)