fix: 사용자 로그아웃 이후 상태 초기화 에러 수정

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

@@ -25,7 +25,7 @@ const meta = {
     },
     size: {
       control: 'radio',
-      options: ['large', 'small'],
+      options: ['full', 'large', 'small'],
       description: '버튼 크기',
       defaultValue: 'large',
     },
@@ -46,6 +46,14 @@ export const Default: Story = {
   },
 };
 
+export const FullPink: Story = {
+  args: {
+    label: 'Full Button',
+    color: 'pink',
+    size: 'full',
+  },
+};
+
 export const SmallPink: Story = {
   args: {
     label: '작은 버튼',
@@ -62,6 +70,14 @@ export const BigBlack: Story = {
   },
 };
 
+export const FullBlack: Story = {
+  args: {
+    label: 'Full Button',
+    color: 'black',
+    size: 'full',
+  },
+};
+
 export const SmallBlack: Story = {
   args: {
     label: '작은 검은 버튼',

design-system/ui/buttons/SecondaryButton.tsx

@@ -1,7 +1,7 @@
 interface SecondaryButtonProps {
   label: string;
   color: 'pink' | 'black';
-  size: 'small' | 'large';
+  size: 'small' | 'large' | 'full';
   onClick?: () => void;
   className?: string;
 }
@@ -14,6 +14,8 @@ const SecondaryButton = ({ label, color, size, onClick, className }: SecondaryBu
       ? `text-sm sm:px-3 sm:py-2 sm:text-xs sm:rounded
          md:px-3.5 md:py-2.5 md:text-sm md:rounded-md
          lg:px-4 lg:py-2.5 lg:text-base lg:rounded-md`
+      : size === 'full'
+      ? `w-full text-sm px-4 py-2 rounded-md`
       : `px-2 py-1 text-xs`;
 
   const colorStyle = color === 'pink' ? 'bg-main' : 'bg-black';

src/pages/event/ui/EventDetailsPage.tsx

@@ -18,7 +18,7 @@ import { useCreateBookmark, useDeleteBookmark } from '../../../features/bookmark
 import { formatDate, formatTime } from '../../../shared/lib/date';
 import { useEventDetail } from '../../../entities/event/hook/useEventHook';
 import useAuthStore from '../../../app/provider/authStore';
-import HomeButton from '../../../../public/assets/bottomBar/HomeIcon.svg'
+import HomeButton from '../../../../public/assets/bottomBar/HomeIcon.svg';
 const EventDetailsPage = () => {
   const navigate = useNavigate();
   const [title, setTitle] = useState('');
@@ -115,12 +115,14 @@ const EventDetailsPage = () => {
               />
             </div>
 
-            {event.result.locationLat !== 0.0 && event.result.locationLng !== 0.0 && (
-              <>
-                <h2 className="font-bold text-xl">위치</h2>
-                <KakaoMap lat={event.result.locationLat} lng={event.result.locationLng} />
-              </>
-            )}
+            {event.result.onlineType !== 'ONLINE' &&
+              event.result.locationLat !== 0.0 &&
+              event.result.locationLng !== 0.0 && (
+                <>
+                  <h2 className="font-bold text-xl">위치</h2>
+                  <KakaoMap lat={event.result.locationLat} lng={event.result.locationLng} />
+                </>
+              )}
 
             <OrganizerInfo
               name={event.result.hostChannelName}

src/pages/home/ui/MainPage.tsx

@@ -6,7 +6,7 @@ import SearchTextField from '../../../../design-system/ui/textFields/SearchTextF
 import searchIcon from '../../../../design-system/icons/Search.svg';
 import VerticalCardButton from '../../../../design-system/ui/buttons/VerticalCardButton';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { AnimatePresence } from 'framer-motion';
 import LoginModal from '../../../widgets/main/ui/LoginModal';
 import { cardButtons } from '../../../shared/types/mainCardButtonType';
@@ -20,6 +20,7 @@ import { USER_MANUAL_URL } from '../../../shared/types/menuType';
 import { formatProfilName } from '../../../shared/lib/formatProfileName';
 const MainPage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const { isModalOpen, openModal, closeModal, isLoggedIn, name } = useAuthStore();
   const { data } = useEventList();
 
@@ -39,10 +40,10 @@ const MainPage = () => {
   };
 
   useEffect(() => {
-    if (!isLoggedIn) {
+    if (!isLoggedIn && location.state?.openLogin) {
       openModal();
     }
-  }, [isLoggedIn, openModal]);
+  }, [isLoggedIn, openModal, location.state]);
 
   return (
     <div className="relative flex flex-col items-center pb-24">

src/pages/menu/ui/MyPage.tsx

@@ -7,71 +7,93 @@ import BookmarkList from '../../../entities/user/ui/BookmarkList';
 import arrow from '../../../../public/assets/bottomBar/Arrow.svg';
 import IconButton from '../../../../design-system/ui/buttons/IconButton';
 import logout from '../../../../public/assets/bottomBar/Logout.svg';
+import useAuthStore from '../../../app/provider/authStore';
+import SecondaryButton from '../../../../design-system/ui/buttons/SecondaryButton';
+import lock from '../../../../public/assets/bottomBar/Lock.svg';
 
 const MyPage = () => {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
+  const isLoggedIn = useAuthStore(state => state.isLoggedIn);
 
   const handleToggle = () => setOpen(prev => !prev);
   const handleLogout = () => navigate('/menu/logout');
 
+  const handleLoginRedirect = () => {
+    navigate('/', { state: { openLogin: true } });
+  };
+
   return (
     <div className="flex flex-col w-full h-full min-h-screen bg-myPageBg">
       <Header leftButtonLabel="마이페이지" leftButtonClassName="font-bold text-2xl" className="bg-white" />
-      <div className="flex flex-col mx-5 gap-5 py-4 pb-24">
-        <ProfileInfo />
-        <BookmarkList />
-
-        <div className="bg-white rounded-[10px] border-[0.5px] px-4 md:px-5 py-2 md:py-3 flex flex-col gap-2">
-          <div onClick={() => navigate('/menu/myTicket')} className="flex items-center justify-between cursor-pointer">
-            <span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span>
-            <IconButton
-              iconPath={<img src={arrow} alt="화살표" className="w-2" />}
-              onClick={() => navigate('/menu/myTicket')}
-            />
+      {!isLoggedIn ? (
+        <div className="flex flex-col items-center justify-center px-32 py-44 gap-4">
+          <div className="flex items-center justify-center w-18 h-18 rounded-full bg-gray-200">
+            <img src={lock} alt="잠금 아이콘" className="w-8 h-8" />
           </div>
-          <div className="border-b" />
-
-          <div>
-            <div onClick={handleToggle} className="flex items-center justify-between cursor-pointer">
-              <span className="text-medium md:text-lg font-semibold">문의하기</span>
-              <IconButton
-                iconPath={
-                  <img
-                    src={arrow}
-                    alt="화살표"
-                    className={`w-2 transition-transform duration-300 ${open ? 'rotate-90' : ''}`}
+          <div className="flex flex-col items-center gap-1">
+            <p className="text-xl font-semibold">로그인이 필요한 페이지입니다.</p>
+            <p className="text-sm text-gray-600">마이페이지를 이용하려면 로그인해 주세요</p>
+          </div>
+          <SecondaryButton label="로그인하러 가기" size="full" color="black" onClick={handleLoginRedirect} />
+        </div>
+      ) : (
+        <>
+          <div className="flex flex-col mx-5 gap-5 py-4 pb-24">
+            <ProfileInfo />
+            <BookmarkList />
+            <div className="bg-white rounded-[10px] border-[0.5px] px-4 md:px-5 py-2 md:py-3 flex flex-col gap-2">
+              <div
+                onClick={() => navigate('/menu/myTicket')}
+                className="flex items-center justify-between cursor-pointer"
+              >
+                <span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span>
+                <IconButton
+                  iconPath={<img src={arrow} alt="화살표" className="w-2" />}
+                  onClick={() => navigate('/menu/myTicket')}
+                />
+              </div>
+              <div className="border-b" />
+              <div>
+                <div onClick={handleToggle} className="flex items-center justify-between cursor-pointer">
+                  <span className="text-medium md:text-lg font-semibold">문의하기</span>
+                  <IconButton
+                    iconPath={
+                      <img
+                        src={arrow}
+                        alt="화살표"
+                        className={`w-2 transition-transform duration-300 ${open ? 'rotate-90' : ''}`}
+                      />
+                    }
+                    onClick={handleToggle}
                   />
-                }
-                onClick={handleToggle}
-              />
-            </div>
-            {open && (
-              <div className="mt-3">
-                <span className="text-sm md:text-medium">이메일 주소로 문의 부탁드립니다</span>
-                <br />
-                <a
-                  href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent(
-                    '같이가요 서비스 문의'
-                  )}&body=${encodeURIComponent(`안녕하세요, 같이가요 서비스 개발팀입니다.
-
-서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다.
-정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`)}`}
-                  className="text-sm md:text-medium font-semibold underline text-blue-600"
-                >
-                  gotogether@gmail.com
-                </a>
+                </div>
+                {open && (
+                  <div className="mt-3">
+                    <span className="text-sm md:text-medium">이메일 주소로 문의 부탁드립니다</span>
+                    <br />
+                    <a
+                      href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent(
+                        '같이가요 서비스 문의'
+                      )}&body=${encodeURIComponent(
+                        `안녕하세요, 같이가요 서비스 개발팀입니다.\n\n서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다.\n정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`
+                      )}`}
+                      className="text-sm md:text-medium font-semibold underline text-blue-600"
+                    >
+                      gotogether@gmail.com
+                    </a>
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-          <div className="border-b" />
-
-          <div onClick={handleLogout} className="flex items-center justify-between cursor-pointer">
-            <span className="text-medium md:text-lg text-red-500 font-semibold">로그아웃</span>
-            <IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} onClick={handleLogout} />
+              <div className="border-b" />
+              <div onClick={handleLogout} className="flex items-center justify-between cursor-pointer">
+                <span className="text-medium md:text-lg text-red-500 font-semibold">로그아웃</span>
+                <IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} onClick={handleLogout} />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </>
+      )}
       <BottomBar />
     </div>
   );