Repository: GolfPose/GolfPose
Pull request #26: feat: 결제모듈구현
Author: login: ChunSik1230
Created: 2025-05-21T07:49:57Z | Merged: 2025-05-21T14:23:25Z

크레딧 구매에서 결제하기 클릭 시 예시 사진대로 구현, purchase.tsx는 PlanBox에서 경로 지정할 때 app 디렉토리에 있지 않으면 인식이 안돼서 파일 위치를 거기다 넣었습니다

## Issue Number
<!--- ex) #이슈번호, #이슈번호 -->
- #22 

## PR Detail Descriptions
<!--- 변경 사항 및 관련 이슈에 대해 간단하게 작성해주세요.-->
- 크레딧 구매에서 결제하기 클릭 시 예시 사진대로 구현,
-  purchase.tsx는 PlanBox에서 경로 지정할 때 app 디렉토리에 있지 않으면 인식이 안돼서 파일 위치를 거기다 넣었습니다

<!--- 없을 시 삭제 가능--->
## ScreenShot (Additional)
![1](https://github.com/user-attachments/assets/ec51ab66-26e0-4955-8d55-378e4ae095fb)
![2](https://github.com/user-attachments/assets/e081eacf-3575-4e08-a381-bbded28a2994)




Diff:
diff --git a/app/_layout.tsx b/app/_layout.tsx
index c0bf9d7..9740221 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -4,7 +4,7 @@ import {
   ThemeProvider,
 } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
+import { Stack, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect, useState } from 'react';
 import { useTheme } from '@/hooks/useTheme';
@@ -19,10 +19,12 @@ import {
   SafeAreaView,
   StyleSheet,
   StatusBar as RNStatusBar,
+  Pressable,
 } from 'react-native';
 import { Colors } from '@/constants/Colors';
 import useUserStore from '@/store/useUserStore';
 import { dummyUser } from '@/constants/dummyUser';
+import { Feather } from '@expo/vector-icons';
 
 export default function RootLayout() {
   const theme = useTheme();
@@ -84,6 +86,10 @@ export default function RootLayout() {
               name="signup"
               options={{ headerShown: false, animation: 'none' }}
             />
+            <Stack.Screen
+              name="purchase"
+              options={{ headerShown: false, animation: 'none' }}
+            />
           </Stack>
         </Animated.View>
       </SafeAreaView>
diff --git a/app/purchase.tsx b/app/purchase.tsx
new file mode 100644
index 0000000..45dfb4e
--- /dev/null
+++ b/app/purchase.tsx
@@ -0,0 +1,183 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { StyleSheet, Pressable, Image } from 'react-native';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { Colors } from '@/constants/Colors';
+import Typography from '@/constants/Typography';
+import { s, vs } from 'react-native-size-matters';
+import { Feather } from '@expo/vector-icons';
+import { useTheme } from '@/hooks/useTheme';
+import { getColor } from '@/utils/getColor';
+import { FontAwesome } from '@expo/vector-icons';
+
+export default function PurchaseScreen() {
+  const { title, price } = useLocalSearchParams();
+  const router = useRouter();
+  const theme = useTheme();
+  const iconColor = getColor(theme, {
+    light: Colors.common.black,
+    dark: Colors.common.white,
+  });
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.modalHeader}>
+        <ThemedText style={styles.modalTitle}>결제수단 선택</ThemedText>
+        <Pressable onPress={() => router.back()} style={styles.closeButton}>
+          <Feather name="x" size={s(20)} color={iconColor} />
+        </Pressable>
+      </ThemedView>
+
+      <ThemedView style={styles.summaryBox}>
+        <ThemedText style={styles.company}>주식회사 자이스웍스</ThemedText>
+        <ThemedText style={styles.planTitle}>{title}</ThemedText>
+        <ThemedView style={styles.priceRow}>
+          <ThemedText style={styles.paymentLabel}>결제금액</ThemedText>
+          <ThemedText style={styles.modalPrice}>{price}원</ThemedText>
+        </ThemedView>
+      </ThemedView>
+
+      <ThemedText style={styles.sectionTitle}>일반결제</ThemedText>
+      <Pressable style={styles.paymentOption}>
+        <FontAwesome
+          name="credit-card"
+          size={24}
+          color={iconColor}
+          style={{ marginRight: 12 }}
+        />
+        <ThemedText style={styles.paymentText}>신용카드</ThemedText>
+      </Pressable>
+
+      <ThemedText style={styles.sectionTitle}>간편결제</ThemedText>
+      <ThemedView style={styles.quickRow}>
+        <Pressable style={styles.quickOption}>
+          <Image
+            source={require('@/assets/images/kakao.png')}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+          <ThemedText style={styles.paymentText}>카카오페이</ThemedText>
+        </Pressable>
+        <Pressable style={styles.quickOption}>
+          <Image
+            source={require('@/assets/images/naver.png')}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+          <ThemedText style={styles.paymentText}>네이버페이</ThemedText>
+        </Pressable>
+      </ThemedView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: s(20),
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(16),
+    marginTop: vs(12),
+    marginBottom: vs(16),
+    position: 'relative',
+    height: vs(40),
+  },
+  modalTitle: {
+    fontSize: Typography.lg,
+    fontWeight: 'bold',
+    marginBottom: vs(16),
+    alignSelf: 'center',
+  },
+  summaryBox: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    padding: s(12),
+    borderRadius: s(8),
+    borderWidth: 1,
+    width: s(302),
+    borderColor: Colors.common.gray300,
+    marginTop: vs(8),
+    marginBottom: vs(16),
+  },
+  company: {
+    fontSize: Typography.sm,
+    color: Colors.common.gray600,
+  },
+  amountLabel: {
+    fontSize: Typography.sm,
+    color: Colors.common.gray600,
+    marginTop: vs(4),
+  },
+  planTitle: {
+    fontSize: Typography.lg,
+    fontWeight: '600',
+    marginTop: vs(6),
+  },
+  modalPrice: {
+    fontSize: Typography.xl,
+    fontWeight: 'bold',
+    color: Colors.common.primary500,
+    textAlign: 'right',
+    marginTop: vs(4),
+  },
+  sectionTitle: {
+    fontSize: Typography.md,
+    fontWeight: '600',
+    marginTop: vs(12),
+    marginBottom: vs(8),
+  },
+  paymentOption: {
+    width: s(146),
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: s(12),
+    borderWidth: 1,
+    borderColor: Colors.common.gray300,
+    borderRadius: s(8),
+    marginBottom: vs(8),
+    marginRight: s(8),
+  },
+  quickRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  quickOption: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: s(12),
+    borderWidth: 1,
+    borderColor: Colors.common.gray300,
+    borderRadius: s(8),
+    marginRight: s(8),
+  },
+  icon: {
+    width: s(24),
+    height: s(24),
+    marginRight: s(12),
+  },
+  paymentText: {
+    fontSize: Typography.md,
+  },
+  closeButton: {
+    position: 'absolute',
+    right: s(10),
+    top: vs(10),
+  },
+  priceRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    marginTop: vs(4),
+  },
+  paymentLabel: {
+    fontSize: Typography.md,
+    color: Colors.common.gray600,
+  },
+});
diff --git a/assets/images/card.png b/assets/images/card.png
new file mode 100644
index 0000000..f07ab02
Binary files /dev/null and b/assets/images/card.png differ
diff --git a/assets/images/kakao.png b/assets/images/kakao.png
new file mode 100644
index 0000000..9ec2a43
Binary files /dev/null and b/assets/images/kakao.png differ
diff --git a/assets/images/naver.png b/assets/images/naver.png
new file mode 100644
index 0000000..d72d820
Binary files /dev/null and b/assets/images/naver.png differ
diff --git a/components/credit/PlanBox.tsx b/components/credit/PlanBox.tsx
index 1f22a52..c4d420d 100644
--- a/components/credit/PlanBox.tsx
+++ b/components/credit/PlanBox.tsx
@@ -1,12 +1,15 @@
-import { StyleSheet, Pressable, Linking } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, Pressable, } from 'react-native';
 import { ThemedView } from '../ThemedView';
 import Typography from '@/constants/Typography';
 import { s, vs } from 'react-native-size-matters';
 import { ThemedText } from '../ThemedText';
 import { Colors } from '@/constants/Colors';
 import { Feather } from '@expo/vector-icons';
+import type { Plan } from '@/constants/Plans';
+import { useRouter } from 'expo-router';
 
-interface PlanBoxProps {
+interface PlanBoxProps extends Plan {
   title: string;
   originalPrice?: string;
   discountLabel?: string;
@@ -23,29 +26,38 @@ export default function PlanBox({
   creditAmount,
   features,
 }: PlanBoxProps) {
+  const router = useRouter();
+
   const handlePurchase = () => {
-    const url = 'https://www.jaisworks.com/plans';
-    Linking.openURL(url).catch(err => console.error('링크 열기 실패:', err));
+     router.push({
+      pathname: '/purchase',
+      params: {
+        title,
+        price,
+      },
+    });
   };
 
   return (
-    <ThemedView style={styles.planBox}>
+     <ThemedView style={styles.planBox}>
       <ThemedText style={styles.planTitle}>{title}</ThemedText>
+
       <ThemedView style={styles.discountContainer}>
         {originalPrice && (
-          <ThemedText style={styles.originalPrice}>
-            {originalPrice}원
-          </ThemedText>
+          <ThemedText style={styles.originalPrice}>{originalPrice}원</ThemedText>
         )}
         {!!discountLabel && (
           <ThemedText style={styles.discountLabel}>{discountLabel}</ThemedText>
         )}
       </ThemedView>
+
       <ThemedText style={styles.price}>{price}원</ThemedText>
       <ThemedText style={styles.credit}>{creditAmount}</ThemedText>
+
       <Pressable style={styles.button} onPress={handlePurchase}>
         <ThemedText style={styles.buttonText}>결제하기</ThemedText>
       </Pressable>
+
       {features.map((feature, idx) => (
         <ThemedView key={idx} style={styles.featureRow}>
           <Feather
@@ -63,11 +75,12 @@ export default function PlanBox({
 
 const styles = StyleSheet.create({
   planBox: {
+    padding: s(16),
     borderWidth: 1,
     borderRadius: s(12),
     paddingHorizontal: s(16),
     paddingVertical: vs(16),
-    borderColor: Colors.common.gray200,
+    borderColor: Colors.common.gray300,
   },
   planTitle: {
     fontSize: Typography.xl,
@@ -82,7 +95,7 @@ const styles = StyleSheet.create({
   },
   originalPrice: {
     fontSize: Typography.sm,
-    color: Colors.common.gray500,
+    color: Colors.common.gray600,
     textDecorationLine: 'line-through',
   },
   discountLabel: {


Reviews:
user: login: Karmesin924
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T07:56:54Z
user: login: Karmesin924
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T07:58:36Z
user: login: Karmesin924
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T08:03:39Z
user: login: Karmesin924
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T08:06:48Z
user: login: Karmesin924
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T08:13:01Z
user: login: Karmesin924
body: 고생하셨습니다! 다크모드 대응 관련 수정 부탁드립니다.
purchase.tsx는 app 하단에 있어야 expo-router의 관리를 받을 수 있기 때문에 현재 위치가 맞습니다 👍
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T08:15:53Z
user: login: Karmesin924
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T14:22:31Z

Review comments:
diff_hunk: @@ -0,0 +1,146 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { StyleSheet, Pressable, Image, View, Text } from 'react-native';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { Colors } from '@/constants/Colors';
+import Typography from '@/constants/Typography';
+import { s, vs } from 'react-native-size-matters';
+import { Feather } from '@expo/vector-icons';
+
+
+export default function PurchaseScreen() {
+  const { title, price } = useLocalSearchParams();
+  const router = useRouter();
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.modalHeader}>
+        <ThemedText style={styles.modalTitle}>결제수단 선택</ThemedText>
+        <Pressable onPress={() => router.back()} style={styles.closeButton}>
+          <Feather name="x" size={s(20)} color="black" />
+        </Pressable>
+      </ThemedView>
+
+      <ThemedView style={styles.summaryBox}>
+        <ThemedText style={styles.company}>주식회사 자이스웍스</ThemedText>
+        <ThemedText style={styles.planTitle}>{title}</ThemedText>
+        <ThemedText style={styles.amountLabel}>결제금액</ThemedText>
+        <ThemedText style={styles.modalPrice}>{price}원</ThemedText>
+      </ThemedView>
+
+      <ThemedText style={styles.sectionTitle}>일반결제</ThemedText>
+      <Pressable style={styles.paymentOption}>
+        <Image source={require('@/assets/images/card.png')} style={styles.icon} />
+        <ThemedText style={styles.paymentText}>신용카드</ThemedText>
+      </Pressable>
+
+      <ThemedText style={styles.sectionTitle}>간편결제</ThemedText>
+      <ThemedView style={styles.quickRow}>
+        <Pressable style={styles.quickOption}>
+          <Image source={require('@/assets/images/kakao.png')} style={styles.icon} resizeMode="contain" />
+          <ThemedText style={styles.paymentText}>카카오페이</ThemedText>
+        </Pressable>
+        <Pressable style={styles.quickOption}>
+          <Image source={require('@/assets/images/naver.png')} style={styles.icon} resizeMode="contain" />
+          <ThemedText style={styles.paymentText}>네이버페이</ThemedText>
+        </Pressable>
+      </ThemedView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: s(20),
+    backgroundColor: Colors.light.background,
path: app/purchase.tsx
user: login: Karmesin924
body: ```suggestion
```

`<ThemedView>` 사용 시 `backgroundColor`을 적용하신다면 다크모드 대응보다 속성값이 우선적으로 들어갑니다. 
다크모드 호환을 위해서 `backgroundColor`를 삭제하는 것이 좋을 것 같습니다!

created_at: 2025-05-21T07:56:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,146 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { StyleSheet, Pressable, Image, View, Text } from 'react-native';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { Colors } from '@/constants/Colors';
+import Typography from '@/constants/Typography';
+import { s, vs } from 'react-native-size-matters';
+import { Feather } from '@expo/vector-icons';
+
+
+export default function PurchaseScreen() {
+  const { title, price } = useLocalSearchParams();
+  const router = useRouter();
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.modalHeader}>
+        <ThemedText style={styles.modalTitle}>결제수단 선택</ThemedText>
+        <Pressable onPress={() => router.back()} style={styles.closeButton}>
+          <Feather name="x" size={s(20)} color="black" />
+        </Pressable>
+      </ThemedView>
+
+      <ThemedView style={styles.summaryBox}>
+        <ThemedText style={styles.company}>주식회사 자이스웍스</ThemedText>
+        <ThemedText style={styles.planTitle}>{title}</ThemedText>
+        <ThemedText style={styles.amountLabel}>결제금액</ThemedText>
+        <ThemedText style={styles.modalPrice}>{price}원</ThemedText>
+      </ThemedView>
+
+      <ThemedText style={styles.sectionTitle}>일반결제</ThemedText>
+      <Pressable style={styles.paymentOption}>
+        <Image source={require('@/assets/images/card.png')} style={styles.icon} />
+        <ThemedText style={styles.paymentText}>신용카드</ThemedText>
+      </Pressable>
+
+      <ThemedText style={styles.sectionTitle}>간편결제</ThemedText>
+      <ThemedView style={styles.quickRow}>
+        <Pressable style={styles.quickOption}>
+          <Image source={require('@/assets/images/kakao.png')} style={styles.icon} resizeMode="contain" />
+          <ThemedText style={styles.paymentText}>카카오페이</ThemedText>
+        </Pressable>
+        <Pressable style={styles.quickOption}>
+          <Image source={require('@/assets/images/naver.png')} style={styles.icon} resizeMode="contain" />
+          <ThemedText style={styles.paymentText}>네이버페이</ThemedText>
+        </Pressable>
+      </ThemedView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: s(20),
+    backgroundColor: Colors.light.background,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(16),
+    marginTop: vs(12),
+    marginBottom: vs(16),
+    position: 'relative',
+    height: vs(40),
+  },
+  modalTitle: {
+    fontSize: Typography.lg,
+    fontWeight: 'bold',
+    marginBottom: vs(16),
+    alignSelf: 'center',
+  },
+  summaryBox: {
+    backgroundColor: Colors.common.white,
path: app/purchase.tsx
user: login: Karmesin924
body: ```suggestion
```
마찬가지로 suumaryBox에서도 다크모드 대응을 위해 backgroundColor을 삭제하면 좋습니다!
created_at: 2025-05-21T07:58:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,146 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { StyleSheet, Pressable, Image, View, Text } from 'react-native';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { Colors } from '@/constants/Colors';
+import Typography from '@/constants/Typography';
+import { s, vs } from 'react-native-size-matters';
+import { Feather } from '@expo/vector-icons';
+
+
+export default function PurchaseScreen() {
+  const { title, price } = useLocalSearchParams();
+  const router = useRouter();
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.modalHeader}>
+        <ThemedText style={styles.modalTitle}>결제수단 선택</ThemedText>
+        <Pressable onPress={() => router.back()} style={styles.closeButton}>
+          <Feather name="x" size={s(20)} color="black" />
+        </Pressable>
+      </ThemedView>
+
+      <ThemedView style={styles.summaryBox}>
+        <ThemedText style={styles.company}>주식회사 자이스웍스</ThemedText>
+        <ThemedText style={styles.planTitle}>{title}</ThemedText>
+        <ThemedText style={styles.amountLabel}>결제금액</ThemedText>
+        <ThemedText style={styles.modalPrice}>{price}원</ThemedText>
+      </ThemedView>
+
+      <ThemedText style={styles.sectionTitle}>일반결제</ThemedText>
+      <Pressable style={styles.paymentOption}>
+        <Image source={require('@/assets/images/card.png')} style={styles.icon} />
+        <ThemedText style={styles.paymentText}>신용카드</ThemedText>
+      </Pressable>
+
+      <ThemedText style={styles.sectionTitle}>간편결제</ThemedText>
+      <ThemedView style={styles.quickRow}>
+        <Pressable style={styles.quickOption}>
+          <Image source={require('@/assets/images/kakao.png')} style={styles.icon} resizeMode="contain" />
+          <ThemedText style={styles.paymentText}>카카오페이</ThemedText>
+        </Pressable>
+        <Pressable style={styles.quickOption}>
+          <Image source={require('@/assets/images/naver.png')} style={styles.icon} resizeMode="contain" />
+          <ThemedText style={styles.paymentText}>네이버페이</ThemedText>
+        </Pressable>
+      </ThemedView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: s(20),
+    backgroundColor: Colors.light.background,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(16),
+    marginTop: vs(12),
+    marginBottom: vs(16),
+    position: 'relative',
+    height: vs(40),
+  },
+  modalTitle: {
+    fontSize: Typography.lg,
+    fontWeight: 'bold',
+    marginBottom: vs(16),
+    alignSelf: 'center',
+  },
+  summaryBox: {
path: app/purchase.tsx
user: login: Karmesin924
body: `summaryBox`에 색상, 경계선도 없어서 컴포넌트의 구분이 시각적으로 잘 되지 않는 느낌이 듭니다..!
 1. `border`을 넣거나 or 내부에 **색상**을 넣어서 컴포넌트의 구분이 시각적으로 보이게
 2. 실제 사진과 같이 결제금액과 금액 (28,900원)의 정렬을 맞추어 주세요.

![image](https://github.com/user-attachments/assets/958b9afc-3377-4fde-b4a9-a3b02adad078)

created_at: 2025-05-21T08:03:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,146 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { StyleSheet, Pressable, Image, View, Text } from 'react-native';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { Colors } from '@/constants/Colors';
+import Typography from '@/constants/Typography';
+import { s, vs } from 'react-native-size-matters';
+import { Feather } from '@expo/vector-icons';
+
+
+export default function PurchaseScreen() {
+  const { title, price } = useLocalSearchParams();
+  const router = useRouter();
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.modalHeader}>
+        <ThemedText style={styles.modalTitle}>결제수단 선택</ThemedText>
+        <Pressable onPress={() => router.back()} style={styles.closeButton}>
+          <Feather name="x" size={s(20)} color="black" />
+        </Pressable>
+      </ThemedView>
+
+      <ThemedView style={styles.summaryBox}>
+        <ThemedText style={styles.company}>주식회사 자이스웍스</ThemedText>
+        <ThemedText style={styles.planTitle}>{title}</ThemedText>
+        <ThemedText style={styles.amountLabel}>결제금액</ThemedText>
+        <ThemedText style={styles.modalPrice}>{price}원</ThemedText>
+      </ThemedView>
+
+      <ThemedText style={styles.sectionTitle}>일반결제</ThemedText>
+      <Pressable style={styles.paymentOption}>
+        <Image source={require('@/assets/images/card.png')} style={styles.icon} />
path: app/purchase.tsx
user: login: Karmesin924
body: 카드 아이콘의 경우 찾아보면 `@expo/vector-icons`에 있을 것 같습니다! 
그걸 사용해보시는 건 어떤가요?

카카오, 네이버와 같이 특별한 아이콘을 제외하고는 `@expo/vector-icons`, 혹은 **svg** 파일을 이용하시는 걸 추천드립니다.
created_at: 2025-05-21T08:06:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,146 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { StyleSheet, Pressable, Image, View, Text } from 'react-native';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { Colors } from '@/constants/Colors';
+import Typography from '@/constants/Typography';
+import { s, vs } from 'react-native-size-matters';
+import { Feather } from '@expo/vector-icons';
+
+
+export default function PurchaseScreen() {
+  const { title, price } = useLocalSearchParams();
+  const router = useRouter();
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.modalHeader}>
+        <ThemedText style={styles.modalTitle}>결제수단 선택</ThemedText>
+        <Pressable onPress={() => router.back()} style={styles.closeButton}>
+          <Feather name="x" size={s(20)} color="black" />
path: app/purchase.tsx
user: login: Karmesin924
body: X 버튼이 다크모드에 대응되지 않습니다. 다음과 같이 iconColor을 정의하여 색상을 유동적으로 설정 부탁드립니다!

```ts
const theme = useTheme();
const iconColor = getColor(theme, {
    light: Colors.common.black,
    dark: Colors.common.white,
  });
```
참고로 getColor은 현재 앱에서 설정된 화면 모드 (라이트, 다크)를 불러와 반환해주는 함수로 테마에 따라 적절한 색상을 선택해줍니다!
```suggestion
          <Feather name="x" size={s(20)} color="{iconColor}" />
```
created_at: 2025-05-21T08:13:01Z
author_association: CONTRIBUTOR

PR comments:
user: login: Jeongmijino
created_at: 2025-05-21T13:39:19Z
body: 확인했습니다
author_association: CONTRIBUTOR
user: login: Karmesin924
created_at: 2025-05-21T14:22:01Z
body: - priceRow의 수평이 여전히 맞지 않아 정렬하였습니다.
![스크린샷 2025-05-21 오후 11 18 45](https://github.com/user-attachments/assets/df642c86-3b4c-4c45-a417-612cc738e07d)

author_association: CONTRIBUTOR