feat: 앱 다운로드 기능 추가 및 관련 컴포넌트 수정

Author: minsukim-29cm

src/components/Page/Home/Banner/Banner.tsx

@@ -7,13 +7,13 @@ import SnsBanner from '@assets/appDownload/banners/snsBanner.png';
 import { BannerContainer, BannerItemContainer, BannerItemImage, BannerItemIndex } from './Banner.Style';
 
 const HomeBanner = () => {
-  const { navToAbout, openInstagram, openServiceCenter } = useRouter();
+  const { navToAbout, openAppDownload, openInstagram, openServiceCenter } = useRouter();
 
   const banners = [
     {
       image: InstallAppBanner,
       alt: '앱 다운로드 배너',
-      onClick: openInstagram,
+      onClick: openAppDownload,
       indexTone: 'light',
     },
     {

src/components/PopUp/AppInstallPopUp/AppInstallPopUp.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import useLocalStorageState from '@hooks/useLocalStorageState';
+import useRouter from '@router/useRouter';
 import AlarmIcon from '@assets/appDownload/appDownloadAlarm.svg?react';
 import LightningIcon from '@assets/appDownload/appDownloadLightning.svg?react';
 import PhoneIcon from '@assets/appDownload/appDownloadPhone.svg?react';
@@ -26,6 +27,7 @@ interface AppInstallPopUpProps {
 }
 
 const AppInstallPopUp = ({ onClose, onDownload }: AppInstallPopUpProps) => {
+  const { openAppDownload } = useRouter();
   const [lastShown, setLastShown] = useLocalStorageState<string>('app_install_popup_last_shown');
   const [showPopUp, setShowPopUp] = useState(
     (() => {
@@ -52,8 +54,7 @@ const AppInstallPopUp = ({ onClose, onDownload }: AppInstallPopUpProps) => {
   const handleDownload = () => {
     setShowPopUp(false);
     onDownload?.();
-    // TODO: 실제 앱 다운로드 링크로 이동
-    // 예: window.location.href = 'https://apps.apple.com/...' 또는 'https://play.google.com/...'
+    openAppDownload();
   };
 
   const handleBackdropClick = () => {

src/layout/Mainlayout/Mainlayout.tsx

@@ -29,7 +29,7 @@ const Mainlayout = ({ children }: LayoutProps) => {
       </MainContent>
 
       {visiblePWAInfoPopUp && isRootPage && !detectPWA() && <PWAInfoPopUp />}
-      {visiblePWAInfoPopUp && isMobileDevice && isRootPage && !detectWebView() && <AppInstallPopUp />}
+      {isMobileDevice && isRootPage && !detectWebView() && <AppInstallPopUp />}
       {isBottomNavigationVisible && <BottomNavigation />}
     </StyledMainlayout>
   );

src/router/useRouter.ts

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { StockCountryKey } from '@ts/StockCountry';
 import { TermKey } from '@ts/Term';
+import { detectPlatform } from '@utils/Detector';
 import { openExternalLink } from '@utils/openExternalLink';
 import { webPath } from '.';
 
@@ -42,6 +43,18 @@ const useRouter = () => {
   const openInstagram = () => {
     openExternalLink('https://www.instagram.com/humanzipyo/');
   };
+  const openAppDownload = () => {
+    const platform = detectPlatform();
+
+    if (platform === 'Android') {
+      openExternalLink('https://play.google.com/store/apps/details?id=com.durumi99.humanzipyoapp');
+      return;
+    }
+
+    if (platform === 'iOS') {
+      openExternalLink('https://apps.apple.com/kr/app/%EC%9D%B8%EA%B0%84%EC%A7%80%ED%91%9C/id6752467487');
+    }
+  };
   const openLinkedIn = () => {
     openExternalLink('https://www.linkedin.com/company/humanzipyo');
   };
@@ -70,6 +83,7 @@ const useRouter = () => {
     openBusinessProposal,
     openServiceCenter,
     openInstagram,
+    openAppDownload,
     openLinkedIn,
     openThreads,
     navToRegisterDone,