feat: implement Create page for image upload and processing, replacing FriendsPhoto component

src/app.tsx

@@ -7,7 +7,7 @@ import { i18nManager } from './i18n/manager';
 // Page components
 import Home from './pages/home';
 import History from './pages/history';
-import FriendsPhoto from './pages/friends-photo';
+import Create from './pages/create';
 import Result from './pages/result';
 
 // Bottom navigation component
@@ -20,7 +20,7 @@ function App() {
   const location = useLocation();
 
   // Pages that don't need to show bottom navigation
-  const hideBottomNavPages = ['/friends-photo', '/result'];
+  const hideBottomNavPages = ['/create', '/result'];
 
   useEffect(() => {
     const initApp = async () => {
@@ -58,11 +58,11 @@ function App() {
           <Route path="/" element={<Navigate to="/home" replace />} />
           <Route path="/home" element={<Home />} />
           <Route path="/history" element={<History />} />
-          <Route path="/friends-photo" element={<FriendsPhoto />} />
+          <Route path="/create/:templateCode" element={<Create />} />
           <Route path="/result" element={<Result />} />
         </Routes>
       </div>
-      {!hideBottomNavPages.includes(location.pathname) && <BottomNavigation />}
+      {!hideBottomNavPages.some(path => location.pathname.startsWith(path)) && <BottomNavigation />}
     </div>
   );
 }

src/pages/create/index.tsx

@@ -1,6 +1,6 @@
 import { Template } from '@/sdk/sdk-server';
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useServerSdk } from '../../hooks/index';
 import { useI18n } from '../../hooks/useI18n';
 import { i18nManager } from '../../i18n/manager';
@@ -11,10 +11,9 @@ import UploadCard from './components/UploadCard';
 import './index.css';
 import { authService } from '@/services';
 
-export default function FriendsPhoto() {
-  const [searchParams] = useSearchParams();
+export default function Create() {
+  const { templateCode } = useParams();
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const templateCode = searchParams.get('templateCode');
   const [template, setTemplate] = useState<Template | null>(null);
 
   const [loginRedirecting, setLoginRedirecting] = useState(false);
@@ -54,7 +53,7 @@ export default function FriendsPhoto() {
     if (!isLoggedIn) {
       setLoginRedirecting(true);
       setLoading(true);
-      await authService.login('/friends-photo');
+      await authService.login(window.location.pathname);
       return;
     }
     if (!templateCode) {
@@ -117,7 +116,7 @@ export default function FriendsPhoto() {
           onUploadSuccess={setImage1}
           onLogin={() => {
             setLoginRedirecting(true);
-            authService.login('/friends-photo');
+            authService.login(window.location.pathname);
           }}
         />
         <UploadCard
@@ -127,7 +126,7 @@ export default function FriendsPhoto() {
           onUploadSuccess={setImage2}
           onLogin={() => {
             setLoginRedirecting(true);
-            authService.login('/friends-photo');
+            authService.login(window.location.pathname);
           }}
         />
       </div>

src/pages/home/index.tsx

@@ -38,7 +38,7 @@ export default function Home() {
   }, [dispatch]);
 
   const handleTemplateClick = async (template: Template) => {
-    navigate(`/friends-photo?templateCode=${template.code}`);
+    navigate(`/create/${template.code}`);
     return;
   };