공식 인증 요청 및 재요청 플로우 구현

apps/mobile/App.tsx

@@ -1,10 +1,14 @@
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+	focusManager,
+	QueryClient,
+	QueryClientProvider,
+} from "@tanstack/react-query";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { AppState, StyleSheet, Text, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import {
 	initialWindowMetrics,
@@ -130,6 +134,14 @@ function App(): React.JSX.Element {
 		bootstrap();
 	}, []);
 
+	useEffect(() => {
+		const subscription = AppState.addEventListener("change", (nextAppState) => {
+			focusManager.setFocused(nextAppState === "active");
+		});
+
+		return () => subscription.remove();
+	}, []);
+
 	// 부트스트랩 동안에는 네이티브 스플래시가 화면을 덮고 있어 사용자에겐 빈 화면이 보이지 않는다.
 	if (!isBootstrapped) {
 		return <View style={styles.bootstrapPlaceholder} />;

apps/mobile/src/entities/club.ts

@@ -6,7 +6,22 @@ export type ClubCollegeMajor = {
 	major: string;
 };
 
-export type OfficialVerificationStatus = "VERIFIED" | "PENDING" | "UNVERIFIED";
+export type OfficialVerificationStatus =
+	| "VERIFIED"
+	| "PENDING"
+	| "REJECTED"
+	| "UNVERIFIED";
+
+export type ManagedOfficialVerification = {
+	status: OfficialVerificationStatus;
+	requestId: number | null;
+	attemptNo: number | null;
+	retryCount: number;
+	retryLimit: number;
+	remainingRetryCount: number;
+	rejectReason: string | null;
+	requestedAt: string | null;
+};
 
 export type Club = {
 	id: string;

apps/mobile/src/features/club/components/ClubDetail/VerificationMarkButton.tsx

@@ -1,29 +1,18 @@
-import {
-	Image,
-	type ImageSourcePropType,
-	Pressable,
-	StyleSheet,
-} from "react-native";
+import { Pressable, StyleSheet } from "react-native";
 
 import type { OfficialVerificationStatus } from "@/entities/club";
+import VerificationMark, {
+	DEFAULT_VERIFICATION_MARK_SIZE,
+} from "@/features/club/components/VerificationMark";
 import { ms } from "@/shared/utils/scale";
 
 type Props = {
 	status?: OfficialVerificationStatus;
 	onPress: () => void;
 };
 
-const MARK_SOURCE_BY_STATUS: Partial<
-	Record<OfficialVerificationStatus, ImageSourcePropType>
-> = {
-	VERIFIED: require("@/assets/icons/clubInfo/verification-mark.png"),
-	PENDING: require("@/assets/icons/clubInfo/verification-pending-mark.png"),
-};
-
 const VerificationMarkButton = ({ status, onPress }: Props) => {
-	const markSource = status ? MARK_SOURCE_BY_STATUS[status] : undefined;
-
-	if (!markSource || status === "UNVERIFIED") return null;
+	if (status !== "VERIFIED" && status !== "PENDING") return null;
 
 	return (
 		<Pressable
@@ -33,7 +22,7 @@ const VerificationMarkButton = ({ status, onPress }: Props) => {
 			hitSlop={8}
 			style={({ pressed }) => [styles.button, pressed && styles.pressed]}
 		>
-			<Image source={markSource} style={styles.mark} resizeMode="contain" />
+			<VerificationMark status={status} />
 		</Pressable>
 	);
 };
@@ -42,17 +31,13 @@ export default VerificationMarkButton;
 
 const styles = StyleSheet.create({
 	button: {
-		width: ms(20),
-		height: ms(20),
+		width: ms(DEFAULT_VERIFICATION_MARK_SIZE),
+		height: ms(DEFAULT_VERIFICATION_MARK_SIZE),
 		justifyContent: "center",
 		alignItems: "center",
 		flexShrink: 0,
 	},
 	pressed: {
 		opacity: 0.5,
 	},
-	mark: {
-		width: ms(20),
-		height: ms(20),
-	},
 });

apps/mobile/src/features/club/components/OfficialVerificationRequestButton.tsx

@@ -1,29 +1,51 @@
-import { Pressable, StyleSheet, Text } from "react-native";
+import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 
 import type { OfficialVerificationStatus } from "@/entities/club";
 import { getOfficialVerificationButtonState } from "@/features/club/utils/officialVerificationRequest";
 import { Colors } from "@/shared/constants/colors";
 import { typography } from "@/shared/constants/typography";
-import { ms, vs } from "@/shared/utils/scale";
+import { ms, s, vs } from "@/shared/utils/scale";
 
 type Props = {
 	status?: OfficialVerificationStatus;
 	isStatusLoading: boolean;
 	isRequesting: boolean;
+	isRetryLimitReached: boolean;
+	isRetryLimitAcknowledged: boolean;
 	onPress: () => void;
 };
 
+const pendingIndicatorSource =
+	require("@/assets/icons/clubInfo/official-verification-pending-indicator.png") as number;
+const completeIndicatorSource =
+	require("@/assets/icons/clubInfo/official-verification-complete-indicator.png") as number;
+
+const PENDING_INDICATOR_SIZE = 13.66;
+const COMPLETE_INDICATOR_FRAME_WIDTH = 10;
+const COMPLETE_INDICATOR_FRAME_HEIGHT = 6.667;
+const COMPLETE_INDICATOR_HORIZONTAL_OVERFLOW = 1;
+const COMPLETE_INDICATOR_VERTICAL_OVERFLOW = 1;
+
 const OfficialVerificationRequestButton = ({
 	status,
 	isStatusLoading,
 	isRequesting,
+	isRetryLimitReached,
+	isRetryLimitAcknowledged,
 	onPress,
 }: Props) => {
 	const buttonState = getOfficialVerificationButtonState({
 		status,
 		isStatusLoading,
 		isRequesting,
+		isRetryLimitReached,
+		isRetryLimitAcknowledged,
 	});
+	const isStatusButton = buttonState.variant === "status";
+	const isFinalRejection = buttonState.variant === "final";
+	const showPendingIndicator =
+		status === "PENDING" || (isRequesting && !isFinalRejection);
+	const showVerifiedIndicator = status === "VERIFIED";
 
 	return (
 		<Pressable
@@ -37,15 +59,40 @@ const OfficialVerificationRequestButton = ({
 			onPress={onPress}
 			style={({ pressed }) => [
 				styles.button,
-				buttonState.disabled && styles.buttonDisabled,
+				isStatusButton && styles.statusButton,
+				isFinalRejection && styles.finalRejectionButton,
 				pressed && !buttonState.disabled && styles.buttonPressed,
 			]}
 		>
-			<Text
-				style={[styles.label, buttonState.disabled && styles.labelDisabled]}
-			>
-				{buttonState.label}
-			</Text>
+			{({ pressed }) => (
+				<View style={styles.content}>
+					<Text
+						style={[
+							styles.label,
+							isFinalRejection && styles.finalRejectionLabel,
+							pressed && !buttonState.disabled && styles.labelPressed,
+						]}
+					>
+						{buttonState.label}
+					</Text>
+					{showPendingIndicator ? (
+						<Image
+							source={pendingIndicatorSource}
+							resizeMode="contain"
+							style={styles.pendingIndicator}
+						/>
+					) : null}
+					{showVerifiedIndicator ? (
+						<View style={styles.completeIndicatorFrame}>
+							<Image
+								source={completeIndicatorSource}
+								resizeMode="stretch"
+								style={styles.completeIndicator}
+							/>
+						</View>
+					) : null}
+				</View>
+			)}
 		</Pressable>
 	);
 };
@@ -55,23 +102,60 @@ export default OfficialVerificationRequestButton;
 const styles = StyleSheet.create({
 	button: {
 		width: "100%",
-		height: vs(44),
+		height: vs(33),
+		paddingHorizontal: s(10),
 		alignItems: "center",
 		justifyContent: "center",
-		borderRadius: ms(12),
-		backgroundColor: Colors.BUTTON_SELECTED,
+		borderWidth: 1,
+		borderColor: Colors.POINTCOLOR,
+		borderRadius: ms(8),
+		backgroundColor: Colors.WHITE,
+	},
+	statusButton: {
+		backgroundColor: Colors.BACKGROUND_SUB,
 	},
-	buttonDisabled: {
-		backgroundColor: Colors.BUTTON_UNSELECTED,
+	finalRejectionButton: {
+		borderWidth: 0,
+		backgroundColor: Colors.BADGE_UNSELECTED,
 	},
 	buttonPressed: {
-		backgroundColor: Colors.BUTTON_PUSH,
+		borderColor: Colors.BUTTON_PUSH,
+	},
+	content: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: s(5),
+	},
+	pendingIndicator: {
+		width: ms(PENDING_INDICATOR_SIZE),
+		height: ms(PENDING_INDICATOR_SIZE),
+	},
+	completeIndicatorFrame: {
+		width: ms(COMPLETE_INDICATOR_FRAME_WIDTH),
+		height: ms(COMPLETE_INDICATOR_FRAME_HEIGHT),
+	},
+	completeIndicator: {
+		position: "absolute",
+		top: ms(-COMPLETE_INDICATOR_VERTICAL_OVERFLOW),
+		left: ms(-COMPLETE_INDICATOR_HORIZONTAL_OVERFLOW),
+		width: ms(
+			COMPLETE_INDICATOR_FRAME_WIDTH +
+				COMPLETE_INDICATOR_HORIZONTAL_OVERFLOW * 2,
+		),
+		height: ms(
+			COMPLETE_INDICATOR_FRAME_HEIGHT +
+				COMPLETE_INDICATOR_VERTICAL_OVERFLOW * 2,
+		),
 	},
 	label: {
 		...typography.bodyMSemibold,
-		color: Colors.TEXT_BUTTON_SELECTED,
+		color: Colors.POINTCOLOR,
+	},
+	labelPressed: {
+		color: Colors.BUTTON_PUSH,
 	},
-	labelDisabled: {
-		color: Colors.WHITE,
+	finalRejectionLabel: {
+		color: Colors.TEXTBOX_SELECTED,
 	},
 });

apps/mobile/src/features/club/components/VerificationMark.tsx

@@ -0,0 +1,46 @@
+import { Image, type ImageSourcePropType, StyleSheet } from "react-native";
+
+import type { OfficialVerificationStatus } from "@/entities/club";
+import { ms } from "@/shared/utils/scale";
+
+type Props = {
+	status?: OfficialVerificationStatus;
+	size?: number;
+};
+
+export const DEFAULT_VERIFICATION_MARK_SIZE = 20;
+
+const MARK_SOURCE_BY_STATUS: Partial<
+	Record<OfficialVerificationStatus, ImageSourcePropType>
+> = {
+	VERIFIED: require("@/assets/icons/clubInfo/verification-mark.png"),
+	PENDING: require("@/assets/icons/clubInfo/verification-pending-mark.png"),
+};
+
+const VerificationMark = ({
+	status,
+	size = DEFAULT_VERIFICATION_MARK_SIZE,
+}: Props) => {
+	const markSource = status ? MARK_SOURCE_BY_STATUS[status] : undefined;
+
+	if (!markSource) return null;
+
+	const scaledSize = ms(size);
+
+	return (
+		<Image
+			accessible={false}
+			source={markSource}
+			style={[styles.mark, { width: scaledSize, height: scaledSize }]}
+			resizeMode="contain"
+		/>
+	);
+};
+
+export default VerificationMark;
+
+const styles = StyleSheet.create({
+	mark: {
+		flexShrink: 0,
+	},
+});