fix(mobile): 동아리 등록 및 인증 UI QA 반영

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

@@ -43,15 +43,15 @@ const VerificationOverlay = ({ status, visible, style, onLayout }: Props) => {
 		>
 			{status === "VERIFIED" ? (
 				<Text style={styles.overlayText} numberOfLines={1}>
-					{"서울대학교총동아리연합회 "}
-					<Text style={styles.highlightText}>정등록 동아리</Text>
-					{"에요!"}
+					{"올클 "}
+					<Text style={styles.highlightText}>공식인증이 완료</Text>
+					{"된 동아리에요!"}
 				</Text>
 			) : (
 				<Text style={styles.overlayText} numberOfLines={1}>
-					{"서울대학교총동아리연합회에서 "}
-					<Text style={styles.highlightText}>아직 심사중</Text>
-					{"이에요."}
+					{"아직 올클 "}
+					<Text style={styles.highlightText}>공식인증 심사중</Text>
+					{"인 동아리에요."}
 				</Text>
 			)}
 		</Animated.View>

apps/mobile/src/features/club/screens/ClubInfoEditScreen/index.tsx

@@ -1329,7 +1329,8 @@ const styles = StyleSheet.create({
 		borderColor: Colors.BUTTON_SELECTED,
 	},
 	categoryText: {
-		...typography.bodyMMedium,
+		...typography.headerXLSemibold,
+		lineHeight: vs(30),
 		color: Colors.BODYTEXT_DISABLED,
 		textAlign: "center",
 	},

apps/mobile/src/features/register-club/screens/CategorySelectionScreen/index.tsx

@@ -144,7 +144,8 @@ const styles = StyleSheet.create({
 		textAlign: "left",
 	},
 	categoryText: {
-		...typography.bodyMMedium,
+		...typography.headerXLSemibold,
+		lineHeight: vs(30),
 		color: Colors.BODYTEXT_DISABLED,
 		textAlign: "center",
 	},

apps/mobile/src/shared/components/ManageClubView/index.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import AlertModal from "@/shared/components/AlertModal";
 import { Colors } from "@/shared/constants/colors";
 import { SCREEN_TYPE } from "@/shared/constants/screen";
+import { typography } from "@/shared/constants/typography";
 import { navigation } from "@/shared/utils/navigation";
 
 type Props = {
@@ -110,62 +111,68 @@ export default ManageClubView;
 
 const styles = StyleSheet.create({
 	container: {
+		flex: 1,
 		paddingHorizontal: 20,
 		paddingTop: 30,
 		paddingBottom: 50,
-		backgroundColor: Colors.BACKGROUND_MAIN,
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+		backgroundColor: Colors.WHITE,
 	},
 	title: {
+		...typography.headerXLSemibold,
 		fontSize: 18,
-		fontWeight: "600",
-		color: "#181818",
-		marginBottom: 20,
+		lineHeight: 24,
+		color: Colors.BODYTEXT_MAIN,
+		padding: 10,
+		marginBottom: 10,
 	},
 	optionButton: {
+		height: 54,
 		paddingHorizontal: 20,
 		paddingVertical: 15,
 		borderRadius: 8,
 		alignItems: "flex-start",
-		marginBottom: 12,
+		marginBottom: 10,
 	},
 	optionButtonUnselected: {
 		borderWidth: 1,
-		borderColor: "#C1C1C1",
-		backgroundColor: "#FFFFFF",
+		borderColor: Colors.BODYTEXT_DISABLED,
+		backgroundColor: Colors.WHITE,
 	},
 	optionButtonSelected: {
-		backgroundColor: "#EAEAEA",
+		backgroundColor: Colors.TEXTBOX_SELECTED,
 		borderWidth: 0,
 	},
 	optionButtonText: {
+		...typography.bodyMMedium,
 		fontSize: 16,
-		fontWeight: "500",
+		lineHeight: 24,
 		textAlign: "left",
 		width: "100%",
 	},
 	optionButtonTextUnselected: {
-		color: "#C1C1C1",
+		color: Colors.BODYTEXT_DISABLED,
 	},
 	optionButtonTextSelected: {
-		color: "#757474",
+		color: Colors.BODYTEXT_SUB,
 	},
 	button: {
+		height: 44,
 		paddingHorizontal: 50,
 		paddingVertical: 12,
-		minHeight: 48,
 		borderRadius: 8,
 		backgroundColor: Colors.BUTTON_SELECTED,
 		alignItems: "center",
 		justifyContent: "center",
-		marginTop: 16,
 		width: "100%",
 	},
 	buttonDisabled: {
 		backgroundColor: Colors.TEXTBOX_UNSELECTED,
 	},
 	buttonText: {
-		fontSize: 16,
-		fontWeight: "600",
+		...typography.headerL,
+		lineHeight: 20,
 		color: Colors.TEXT_BUTTON_SELECTED,
 	},
 	buttonTextDisabled: {

apps/mobile/src/shared/contexts/manageClubBottomSheet.tsx

@@ -12,8 +12,9 @@ import {
 	useEffect,
 	useRef,
 } from "react";
-import { BackHandler } from "react-native";
+import { BackHandler, StyleSheet } from "react-native";
 import ManageClubView from "@/shared/components/ManageClubView";
+import { Colors } from "@/shared/constants/colors";
 
 const ManageClubBottomSheetContext = createContext<{
 	openBottomSheet: () => void;
@@ -89,15 +90,30 @@ export const ManageClubBottomSheetProvider = ({ children }: Props) => {
 					isBottomSheetOpenRef.current = false;
 				}}
 				backdropComponent={renderBackdrop}
+				backgroundStyle={styles.background}
 				// Remove the default handle visible on top of the sheet to match Figma
 				handleComponent={() => null}
 				enableHandlePanningGesture={false}
 				handleIndicatorStyle={{ height: 0 }}
 			>
-				<BottomSheetView style={{ flex: 1 }}>
+				<BottomSheetView style={styles.content}>
 					<ManageClubView closeBottomSheet={closeBottomSheet} />
 				</BottomSheetView>
 			</BottomSheetModal>
 		</ManageClubBottomSheetContext.Provider>
 	);
 };
+
+const styles = StyleSheet.create({
+	background: {
+		backgroundColor: Colors.WHITE,
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+	},
+	content: {
+		flex: 1,
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+		overflow: "hidden",
+	},
+});