비밀번호 찾기 화면 구현 및 파일 구조 변경

src/components/auth/CitySelectView.tsx

@@ -6,13 +6,17 @@ interface CitySelectViewProps {
   country: string
   onLoginClick: () => void
   onSignupClick: () => void
+  onBack: () => void
 }
 
 const CitySelectView = ({
   country,
   onLoginClick,
   onSignupClick,
+  onBack,
 }: CitySelectViewProps) => {
+  const displayCountry = country === 'south-korea' ? 'South Korea' : country
+
   return (
     <div className="flex w-full flex-col items-center">
       <div className="fixed top-0 left-0 z-50 flex h-[60px] w-full justify-center border-b border-gray-300 bg-white px-4">
@@ -21,7 +25,7 @@ const CitySelectView = ({
             src={instagramLogo}
             alt="Instagram"
             className="w-[103px] cursor-pointer"
-            onClick={onLoginClick}
+            onClick={onBack}
           />
           <div className="flex items-center gap-4">
             <button
@@ -41,30 +45,32 @@ const CitySelectView = ({
       </div>
 
       <div className="mt-32 mb-12 flex w-11/24 flex-col">
-        <div className="mb-10 flex items-center gap-2">
+        <div className="mb-[53px] flex items-center gap-2">
           <img
             src={pinIcon}
             alt="Location"
             className="h-4 w-4 object-contain"
           />
           <span className="text-[16px] leading-none font-bold text-black">
-            {country}
+            {displayCountry}
           </span>
         </div>
+
         <div className="mb-5 text-left">
-          <span className="text-[12px] font-bold text-[#737373] uppercase">
-            {country}의 도시
+          <span className="text-[14px] font-bold text-[#737373] uppercase">
+            {displayCountry}의 도시
           </span>
         </div>
+
         <div className="flex flex-col rounded-[3px] border border-gray-300 bg-white shadow-sm">
           <div className="p-8">
-            <div className="grid grid-cols-4 gap-x-8 gap-y-5">
+            <div className="columns-4 gap-x-8">
               {CITIES.map((city, index) => (
                 <div
                   key={`${city}-${index}`}
-                  className="cursor-pointer truncate text-[14px] text-black active:text-[#4a5df9]"
+                  className="mb-1 min-h-[1.25rem] cursor-pointer break-inside-avoid truncate text-[14px] text-black active:text-[#4a5df9]"
                 >
-                  {city}
+                  {city || '\u00A0'}
                 </div>
               ))}
             </div>

src/components/auth/LiteDownloadView.tsx

@@ -6,6 +6,10 @@ interface LiteDownloadViewProps {
 }
 
 const LiteDownloadView = ({ onBack }: LiteDownloadViewProps) => {
+  const playStoreUrl =
+    'https://play.google.com/store/apps/details?id=com.instagram.lite&referrer=ig_mid%3D912D7CA9-53A1-4209-ABFD-35A421C9F971%26utm_campaign%3DIGLiteCarbonSideload%26utm_content%3Dlo%26utm_source%3Dinstagramweb%26utm_medium%3Dbadge'
+  const apkFileName = 'instagram_lite_v494.0.0.7.107.apk'
+
   return (
     <div className="flex w-full flex-col items-center justify-center px-4 pt-40 text-center tracking-tighter">
       <img
@@ -24,7 +28,11 @@ const LiteDownloadView = ({ onBack }: LiteDownloadViewProps) => {
       </p>
 
       <div className="flex w-full flex-col items-center">
-        <button className="mb-[7px] flex w-full max-w-[130px] items-center justify-center gap-2 rounded-[8px] bg-[#4a5df9] py-3 text-[13px] font-semibold tracking-tighter text-white transition-opacity hover:opacity-90">
+        <a
+          href={`/${apkFileName}`}
+          download={apkFileName}
+          className="mb-[7px] flex w-full max-w-[130px] items-center justify-center gap-2 rounded-[8px] bg-[#4a5df9] py-3 text-[13px] font-semibold tracking-tighter text-white transition-opacity hover:opacity-90"
+        >
           <svg
             width="15"
             height="15"
@@ -40,16 +48,21 @@ const LiteDownloadView = ({ onBack }: LiteDownloadViewProps) => {
             <line x1="12" y1="15" x2="12" y2="3" />
           </svg>
           APK 다운로드
-        </button>
+        </a>
       </div>
 
-      <div className="cursor-pointer">
+      <a
+        href={playStoreUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-block transition-opacity hover:opacity-80"
+      >
         <img
           src={googlePlayBadge}
           alt="Google Play"
           className="h-12 object-contain"
         />
-      </div>
+      </a>
     </div>
   )
 }

src/components/auth/LocationSelectView.tsx

@@ -4,12 +4,14 @@ import { COUNTRIES } from '../../constants/countries'
 interface LocationSelectViewProps {
   onLoginClick: () => void
   onSignupClick: () => void
-  onSelect: (country: string) => void
+  onBack: () => void
+  onSelect?: (country: string) => void
 }
 
 const LocationSelectView = ({
   onLoginClick,
   onSignupClick,
+  onBack,
   onSelect,
 }: LocationSelectViewProps) => {
   return (
@@ -20,7 +22,7 @@ const LocationSelectView = ({
             src={instagramLogo}
             alt="Instagram"
             className="w-[103px] cursor-pointer"
-            onClick={onLoginClick}
+            onClick={onBack}
           />
           <div className="flex items-center gap-4">
             <button
@@ -45,12 +47,12 @@ const LocationSelectView = ({
         </div>
         <div className="flex flex-col rounded-[3px] border border-gray-300 bg-white shadow-sm">
           <div className="p-8">
-            <div className="grid grid-cols-4 gap-x-8 gap-y-5">
+            <div className="columns-4 gap-x-8">
               {COUNTRIES.map((country) => (
                 <div
                   key={country}
-                  onClick={() => onSelect(country)}
-                  className="cursor-pointer truncate text-[14px] text-black active:text-[#4a5df9]"
+                  onClick={() => onSelect?.(country)}
+                  className="mb-1 cursor-pointer break-inside-avoid truncate text-[14px] text-black active:text-[#4a5df9]"
                 >
                   {country}
                 </div>

src/components/auth/LoginCard.tsx

@@ -154,7 +154,7 @@ const LoginCard = () => {
       </button>
 
       <button
-        onClick={() => navigate({ to: '/password/reset' })}
+        onClick={() => navigate({ to: '/accounts/password/reset' })}
         className="mt-6 cursor-pointer text-xs text-[#00376b] hover:underline"
       >
         비밀번호를 잊으셨나요?