modal location updated

src/features/auth/login/ui/form.tsx

@@ -9,8 +9,7 @@ import {
 import PhonePrefix from '../../../../shared/ui/phonePrefix';
 import { MotionWrapper } from '../../../../shared/ui/motion';
 import { useLoginForm } from '../lib/useLoginForm';
-import { useLoginModal } from '@/shared/zustand/auth';
-import Link from 'next/link';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
 import { useTranslations } from 'next-intl';
 
 export function LoginForm() {
@@ -20,6 +19,9 @@ export function LoginForm() {
 
   const { phone, setPhone, submit, error, loading } = useLoginForm();
   const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const toggleRegisterModal = useRegisterModal(
+    (state) => state.toggleRegisterModal,
+  );
 
   const handlePhoneChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -149,14 +151,17 @@ export function LoginForm() {
               </div>
 
               {/* Register hint */}
-              <p className="text-center text-[0.78rem] text-stone-400">
+              <p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
                 {t('registerPrompt')}
-                <Link
-                  href="/register"
-                  className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
+                <p
+                  onClick={() => {
+                    toggleLoginModal();
+                    toggleRegisterModal();
+                  }}
+                  className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
                 >
                   {t('registerLink')}
-                </Link>
+                </p>
               </p>
             </form>
           </div>

src/features/auth/register/ui/form.tsx

@@ -5,6 +5,7 @@ import { useRegisterForm } from '../lib/useRegisterForm';
 import { formatPhone, normalizeDigits } from '@/shared/lib/formatPhone';
 import PhonePrefix from '@/shared/ui/phonePrefix';
 import { useTranslations } from 'next-intl';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
 
 function Field({
   id,
@@ -66,6 +67,7 @@ function Field({
 export function RegisterFormUI() {
   const [phone, setPhone] = React.useState('');
   const t = useTranslations('Auth.Register');
+  const t_login = useTranslations('Auth.Login');
   const tCommon = useTranslations('Common');
   const {
     registerData,
@@ -77,6 +79,10 @@ export function RegisterFormUI() {
     handleSubmit,
     setItem,
   } = useRegisterForm();
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const toggleRegisterModal = useRegisterModal(
+    (state) => state.toggleRegisterModal,
+  );
   const [isFocused, setIsFocused] = React.useState(false);
   const handlePhoneChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -233,6 +239,29 @@ export function RegisterFormUI() {
           )}
         </button>
       </form>
+
+      {/* Divider */}
+      <div className="relative flex items-center gap-3 py-1">
+        <span className="h-px flex-1 bg-stone-200" />
+        <span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
+          {tCommon('or')}
+        </span>
+        <span className="h-px flex-1 bg-stone-200" />
+      </div>
+
+      {/* Register hint */}
+      <p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
+        {t('loginPrompt')}
+        <p
+          onClick={() => {
+            toggleLoginModal();
+            toggleRegisterModal();
+          }}
+          className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
+        >
+          {t_login('title')}
+        </p>
+      </p>
     </div>
   );
 }