wafflestudio
diff --git a/‎public/instagram_lite_v494.0.0.7.107.apk‎
3.25 MB b/‎public/instagram_lite_v494.0.0.7.107.apk‎
3.25 MB
diff --git a/‎src/assets/birthday-cake.png‎
19.6 KB b/‎src/assets/birthday-cake.png‎
19.6 KB
diff --git a/‎src/assets/verification-security.png‎
5.35 KB b/‎src/assets/verification-security.png‎
5.35 KB
diff --git a/‎src/components/auth/CitySelectView.tsx‎
Lines changed: 14 additions & 8 deletions b/‎src/components/auth/CitySelectView.tsx‎
Lines changed: 14 additions & 8 deletions
diff --git a/‎src/components/auth/LiteDownloadView.tsx‎
Lines changed: 17 additions & 4 deletions b/‎src/components/auth/LiteDownloadView.tsx‎
Lines changed: 17 additions & 4 deletions
diff --git a/‎src/components/auth/LocationSelectView.tsx‎
Lines changed: 7 additions & 5 deletions b/‎src/components/auth/LocationSelectView.tsx‎
Lines changed: 7 additions & 5 deletions
diff --git a/‎src/components/auth/LoginCard.tsx‎
Lines changed: 7 additions & 5 deletions b/‎src/components/auth/LoginCard.tsx‎
Lines changed: 7 additions & 5 deletions
diff --git a/‎src/constants/api-error.ts‎
Lines changed: 82 additions & 0 deletions b/‎src/constants/api-error.ts‎
Lines changed: 82 additions & 0 deletions
@@ -6,13 +6,17 @@ interface CitySelectViewProps {
   country: string
   onLoginClick: () => void
   onSignupClick: () => void
+  onHomeClick: () => void
 }
 
 const CitySelectView = ({
   country,
   onLoginClick,
   onSignupClick,
+  onHomeClick,
 }: 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={onHomeClick}
           />
           <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>
 
@@ -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>
   )
 }
 
@@ -4,12 +4,14 @@ import { COUNTRIES } from '../../constants/countries'
 interface LocationSelectViewProps {
   onLoginClick: () => void
   onSignupClick: () => void
-  onSelect: (country: string) => void
+  onHomeClick: () => void
+  onSelect?: (country: string) => void
 }
 
 const LocationSelectView = ({
   onLoginClick,
   onSignupClick,
+  onHomeClick,
   onSelect,
 }: LocationSelectViewProps) => {
   return (
@@ -20,7 +22,7 @@ const LocationSelectView = ({
             src={instagramLogo}
             alt="Instagram"
             className="w-[103px] cursor-pointer"
-            onClick={onLoginClick}
+            onClick={onHomeClick}
           />
           <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>
 
@@ -15,10 +15,12 @@ interface FloatingInputProps {
 
 interface LoginResponse {
   success: boolean
-  data?: {
+  code: string
+  message: string
+  data: {
     accessToken: string
     refreshToken: string
-  }
+  } | null
 }
 
 const FloatingInput = ({
@@ -82,7 +84,7 @@ const LoginCard = () => {
 
     try {
       const res = await instance
-        .post('*/api/v1/auth/login', {
+        .post('api/v1/auth/login', {
           json: { loginId: id, password: pw },
         })
         .json<LoginResponse>()
@@ -98,7 +100,7 @@ const LoginCard = () => {
   }
 
   return (
-    <div className="flex w-full flex-col items-center bg-white p-10">
+    <div className="flex w-full flex-col items-center border border-gray-300 bg-white p-10 shadow-sm">
       <img
         src={instagramLogo}
         alt="Instagram"
@@ -154,7 +156,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"
       >
         비밀번호를 잊으셨나요?
 
@@ -0,0 +1,82 @@
+export const API_ERROR_CODE = {
+  INTERNAL_SERVER_ERROR: 'INTERNAL_SERVER_ERROR',
+  INVALID_INPUT_VALUE: 'INVALID_INPUT_VALUE',
+  ACCESS_DENIED: 'ACCESS_DENIED',
+  USER_NOT_FOUND: 'USER_NOT_FOUND',
+  INVALID_PASSWORD: 'INVALID_PASSWORD',
+  EMAIL_ALREADY_EXISTS: 'EMAIL_ALREADY_EXISTS',
+  NICKNAME_ALREADY_EXISTS: 'NICKNAME_ALREADY_EXISTS',
+  INVALID_REFRESH_TOKEN: 'INVALID_REFRESH_TOKEN',
+  REFRESH_TOKEN_EXPIRED: 'REFRESH_TOKEN_EXPIRED',
+  REFRESH_TOKEN_REUSE_DETECTED: 'REFRESH_TOKEN_REUSE_DETECTED',
+  POST_NOT_FOUND: 'POST_NOT_FOUND',
+  EMPTY_CONTENT: 'EMPTY_CONTENT',
+  COMMENT_NOT_FOUND: 'COMMENT_NOT_FOUND',
+  SELF_FOLLOW_NOT_ALLOWED: 'SELF_FOLLOW_NOT_ALLOWED',
+} as const
+
+export type ApiErrorCode = (typeof API_ERROR_CODE)[keyof typeof API_ERROR_CODE]
+
+type ApiErrorEntry = {
+  status: number
+  message: string
+}
+
+export const API_ERROR_INFO: Record<ApiErrorCode, ApiErrorEntry> = {
+  [API_ERROR_CODE.INTERNAL_SERVER_ERROR]: {
+    status: 500,
+    message: '서버 내부 에러가 발생했습니다.',
+  },
+  [API_ERROR_CODE.INVALID_INPUT_VALUE]: {
+    status: 400,
+    message: '입력값이 올바르지 않습니다.',
+  },
+  [API_ERROR_CODE.ACCESS_DENIED]: {
+    status: 403,
+    message: '접근 권한이 없습니다.',
+  },
+  [API_ERROR_CODE.USER_NOT_FOUND]: {
+    status: 404,
+    message: '존재하지 않는 회원입니다.',
+  },
+  [API_ERROR_CODE.INVALID_PASSWORD]: {
+    status: 401,
+    message: '비밀번호가 일치하지 않습니다.',
+  },
+  [API_ERROR_CODE.EMAIL_ALREADY_EXISTS]: {
+    status: 409,
+    message: '이미 가입된 이메일입니다.',
+  },
+  [API_ERROR_CODE.NICKNAME_ALREADY_EXISTS]: {
+    status: 409,
+    message: '이미 가입된 닉네임입니다.',
+  },
+  [API_ERROR_CODE.INVALID_REFRESH_TOKEN]: {
+    status: 401,
+    message: '인증 정보가 유효하지 않습니다.',
+  },
+  [API_ERROR_CODE.REFRESH_TOKEN_EXPIRED]: {
+    status: 401,
+    message: '인증 정보가 만료되었습니다.',
+  },
+  [API_ERROR_CODE.REFRESH_TOKEN_REUSE_DETECTED]: {
+    status: 401,
+    message: '재발급 토큰이 재사용되었습니다.',
+  },
+  [API_ERROR_CODE.POST_NOT_FOUND]: {
+    status: 404,
+    message: '게시글을 찾을 수 없습니다.',
+  },
+  [API_ERROR_CODE.EMPTY_CONTENT]: {
+    status: 400,
+    message: '내용이 비어 있습니다.',
+  },
+  [API_ERROR_CODE.COMMENT_NOT_FOUND]: {
+    status: 404,
+    message: '댓글을 찾을 수 없습니다.',
+  },
+  [API_ERROR_CODE.SELF_FOLLOW_NOT_ALLOWED]: {
+    status: 400,
+    message: '자기 자신은 팔로우할 수 없습니다.',
+  },
+}