Skip to content

Commit 34ccbcb

Browse files
Yejiin21Yejiin21
committed
feat: 비로그인 시 마이페이지 접근 차단 및 로그인 유도 기능 추가
1 parent c652013 commit 34ccbcb

File tree

5 files changed

+99
-55
lines changed

5 files changed

+99
-55
lines changed

‎design-system/stories/buttons/SecondaryButton.stories.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const meta = {
2525
},
2626
size: {
2727
control: 'radio',
28-
options: ['large', 'small'],
28+
options: ['full', 'large', 'small'],
2929
description: '버튼 크기',
3030
defaultValue: 'large',
3131
},
@@ -46,6 +46,14 @@ export const Default: Story = {
4646
},
4747
};
4848

49+
export const FullPink: Story = {
50+
args: {
51+
label: 'Full Button',
52+
color: 'pink',
53+
size: 'full',
54+
},
55+
};
56+
4957
export const SmallPink: Story = {
5058
args: {
5159
label: '작은 버튼',
@@ -62,6 +70,14 @@ export const BigBlack: Story = {
6270
},
6371
};
6472

73+
export const FullBlack: Story = {
74+
args: {
75+
label: 'Full Button',
76+
color: 'black',
77+
size: 'full',
78+
},
79+
};
80+
6581
export const SmallBlack: Story = {
6682
args: {
6783
label: '작은 검은 버튼',

‎design-system/ui/buttons/SecondaryButton.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
interface SecondaryButtonProps {
22
label: string;
33
color: 'pink' | 'black';
4-
size: 'small' | 'large';
4+
size: 'small' | 'large' | 'full';
55
onClick?: () => void;
66
className?: string;
77
}
@@ -14,6 +14,8 @@ const SecondaryButton = ({ label, color, size, onClick, className }: SecondaryBu
1414
? `text-sm sm:px-3 sm:py-2 sm:text-xs sm:rounded
1515
md:px-3.5 md:py-2.5 md:text-sm md:rounded-md
1616
lg:px-4 lg:py-2.5 lg:text-base lg:rounded-md`
17+
: size === 'full'
18+
? `w-full text-sm px-4 py-2 rounded-md`
1719
: `px-2 py-1 text-xs`;
1820

1921
const colorStyle = color === 'pink' ? 'bg-main' : 'bg-black';

‎public/assets/bottomBar/Lock.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/pages/home/ui/MainPage.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import SearchTextField from '../../../../design-system/ui/textFields/SearchTextF
66
import searchIcon from '../../../../design-system/icons/Search.svg';
77
import VerticalCardButton from '../../../../design-system/ui/buttons/VerticalCardButton';
88
import { useEffect } from 'react';
9-
import { useNavigate } from 'react-router-dom';
9+
import { useLocation, useNavigate } from 'react-router-dom';
1010
import { AnimatePresence } from 'framer-motion';
1111
import LoginModal from '../../../widgets/main/ui/LoginModal';
1212
import { cardButtons } from '../../../shared/types/mainCardButtonType';
@@ -20,6 +20,7 @@ import { USER_MANUAL_URL } from '../../../shared/types/menuType';
2020
import { formatProfilName } from '../../../shared/lib/formatProfileName';
2121
const MainPage = () => {
2222
const navigate = useNavigate();
23+
const location = useLocation();
2324
const { isModalOpen, openModal, closeModal, isLoggedIn, name } = useAuthStore();
2425
const { data } = useEventList();
2526

@@ -39,10 +40,10 @@ const MainPage = () => {
3940
};
4041

4142
useEffect(() => {
42-
if (!isLoggedIn) {
43+
if (!isLoggedIn && location.state?.openLogin) {
4344
openModal();
4445
}
45-
}, [isLoggedIn, openModal]);
46+
}, [isLoggedIn, openModal, location.state]);
4647

4748
return (
4849
<div className="relative flex flex-col items-center pb-24">

‎src/pages/menu/ui/MyPage.tsx‎

Lines changed: 72 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,71 +7,93 @@ import BookmarkList from '../../../entities/user/ui/BookmarkList';
77
import arrow from '../../../../public/assets/bottomBar/Arrow.svg';
88
import IconButton from '../../../../design-system/ui/buttons/IconButton';
99
import logout from '../../../../public/assets/bottomBar/Logout.svg';
10+
import useAuthStore from '../../../app/provider/authStore';
11+
import SecondaryButton from '../../../../design-system/ui/buttons/SecondaryButton';
12+
import lock from '../../../../public/assets/bottomBar/Lock.svg';
1013

1114
const MyPage = () => {
1215
const navigate = useNavigate();
1316
const [open, setOpen] = useState(false);
17+
const isLoggedIn = useAuthStore(state => state.isLoggedIn);
1418

1519
const handleToggle = () => setOpen(prev => !prev);
1620
const handleLogout = () => navigate('/menu/logout');
1721

22+
const handleLoginRedirect = () => {
23+
navigate('/', { state: { openLogin: true } });
24+
};
25+
1826
return (
1927
<div className="flex flex-col w-full h-full min-h-screen bg-myPageBg">
2028
<Header leftButtonLabel="마이페이지" leftButtonClassName="font-bold text-2xl" className="bg-white" />
21-
<div className="flex flex-col mx-5 gap-5 py-4 pb-24">
22-
<ProfileInfo />
23-
<BookmarkList />
24-
25-
<div className="bg-white rounded-[10px] border-[0.5px] px-4 md:px-5 py-2 md:py-3 flex flex-col gap-2">
26-
<div onClick={() => navigate('/menu/myTicket')} className="flex items-center justify-between cursor-pointer">
27-
<span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span>
28-
<IconButton
29-
iconPath={<img src={arrow} alt="화살표" className="w-2" />}
30-
onClick={() => navigate('/menu/myTicket')}
31-
/>
29+
{!isLoggedIn ? (
30+
<div className="flex flex-col items-center justify-center px-32 py-44 gap-4">
31+
<div className="flex items-center justify-center w-18 h-18 rounded-full bg-gray-200">
32+
<img src={lock} alt="잠금 아이콘" className="w-8 h-8" />
3233
</div>
33-
<div className="border-b" />
34-
35-
<div>
36-
<div onClick={handleToggle} className="flex items-center justify-between cursor-pointer">
37-
<span className="text-medium md:text-lg font-semibold">문의하기</span>
38-
<IconButton
39-
iconPath={
40-
<img
41-
src={arrow}
42-
alt="화살표"
43-
className={`w-2 transition-transform duration-300 ${open ? 'rotate-90' : ''}`}
34+
<div className="flex flex-col items-center gap-1">
35+
<p className="text-xl font-semibold">로그인이 필요한 페이지입니다.</p>
36+
<p className="text-sm text-gray-600">마이페이지를 이용하려면 로그인해 주세요</p>
37+
</div>
38+
<SecondaryButton label="로그인하러 가기" size="full" color="black" onClick={handleLoginRedirect} />
39+
</div>
40+
) : (
41+
<>
42+
<div className="flex flex-col mx-5 gap-5 py-4 pb-24">
43+
<ProfileInfo />
44+
<BookmarkList />
45+
<div className="bg-white rounded-[10px] border-[0.5px] px-4 md:px-5 py-2 md:py-3 flex flex-col gap-2">
46+
<div
47+
onClick={() => navigate('/menu/myTicket')}
48+
className="flex items-center justify-between cursor-pointer"
49+
>
50+
<span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span>
51+
<IconButton
52+
iconPath={<img src={arrow} alt="화살표" className="w-2" />}
53+
onClick={() => navigate('/menu/myTicket')}
54+
/>
55+
</div>
56+
<div className="border-b" />
57+
<div>
58+
<div onClick={handleToggle} className="flex items-center justify-between cursor-pointer">
59+
<span className="text-medium md:text-lg font-semibold">문의하기</span>
60+
<IconButton
61+
iconPath={
62+
<img
63+
src={arrow}
64+
alt="화살표"
65+
className={`w-2 transition-transform duration-300 ${open ? 'rotate-90' : ''}`}
66+
/>
67+
}
68+
onClick={handleToggle}
4469
/>
45-
}
46-
onClick={handleToggle}
47-
/>
48-
</div>
49-
{open && (
50-
<div className="mt-3">
51-
<span className="text-sm md:text-medium">이메일 주소로 문의 부탁드립니다</span>
52-
<br />
53-
<a
54-
href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent(
55-
'같이가요 서비스 문의'
56-
)}&body=${encodeURIComponent(`안녕하세요, 같이가요 서비스 개발팀입니다.
57-
58-
서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다.
59-
정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`)}`}
60-
className="text-sm md:text-medium font-semibold underline text-blue-600"
61-
>
62-
gotogether@gmail.com
63-
</a>
70+
</div>
71+
{open && (
72+
<div className="mt-3">
73+
<span className="text-sm md:text-medium">이메일 주소로 문의 부탁드립니다</span>
74+
<br />
75+
<a
76+
href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent(
77+
'같이가요 서비스 문의'
78+
)}&body=${encodeURIComponent(
79+
`안녕하세요, 같이가요 서비스 개발팀입니다.\n\n서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다.\n정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`
80+
)}`}
81+
className="text-sm md:text-medium font-semibold underline text-blue-600"
82+
>
83+
gotogether@gmail.com
84+
</a>
85+
</div>
86+
)}
6487
</div>
65-
)}
66-
</div>
67-
<div className="border-b" />
68-
69-
<div onClick={handleLogout} className="flex items-center justify-between cursor-pointer">
70-
<span className="text-medium md:text-lg text-red-500 font-semibold">로그아웃</span>
71-
<IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} onClick={handleLogout} />
88+
<div className="border-b" />
89+
<div onClick={handleLogout} className="flex items-center justify-between cursor-pointer">
90+
<span className="text-medium md:text-lg text-red-500 font-semibold">로그아웃</span>
91+
<IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} onClick={handleLogout} />
92+
</div>
93+
</div>
7294
</div>
73-
</div>
74-
</div>
95+
</>
96+
)}
7597
<BottomBar />
7698
</div>
7799
);

0 commit comments

Comments
 (0)
⚡