feat: 마이페이지 프로필 수정 페이지 추가

packages/design-system/src/Font.tsx

@@ -19,6 +19,7 @@ const FONT_TYPE_PREFIX = {
   body1: 'text-[16px] leading-[24px]',
   body2: 'text-[14px] leading-[18px]',
   body3: 'text-[12px] leading-[16px]',
+  'ui-text': 'text-[10px] leading-[10px]',
 };
 
 export type Color = keyof typeof COLOR_PREFIX;
@@ -36,27 +37,15 @@ const FontRegular = ({ type, color, children, underline }: FontProps) => {
   const colorStyle = COLOR_PREFIX[color];
   const underLineStyle = underline ? 'underline underline-offset-1' : '';
   const fontStyle = FONT_PREFIX.MEDIUM;
-  return (
-    <Text
-      className={`${fontStyle} ${fontType} ${colorStyle} ${underLineStyle}`}
-    >
-      {children}
-    </Text>
-  );
+  return <Text className={`${fontStyle} ${fontType} ${colorStyle} ${underLineStyle}`}>{children}</Text>;
 };
 
 const FontBold = ({ type, color, children, underline }: FontProps) => {
   const fontType = FONT_TYPE_PREFIX[type];
   const colorStyle = COLOR_PREFIX[color];
   const underLineStyle = underline ? 'underline underline-offset-1' : '';
   const fontStyle = FONT_PREFIX.BOLD;
-  return (
-    <Text
-      className={`${fontStyle} ${fontType} ${colorStyle} ${underLineStyle}`}
-    >
-      {children}
-    </Text>
-  );
+  return <Text className={`${fontStyle} ${fontType} ${colorStyle} ${underLineStyle}`}>{children}</Text>;
 };
 
 const FontLight = ({ type, color, children, underline }: FontProps) => {
@@ -65,13 +54,7 @@ const FontLight = ({ type, color, children, underline }: FontProps) => {
   const underLineStyle = underline ? 'underline underline-offset-1' : '';
   const fontStyle = FONT_PREFIX.LIGHT;
 
-  return (
-    <Text
-      className={`${fontType} ${fontStyle} ${colorStyle} ${underLineStyle}`}
-    >
-      {children}
-    </Text>
-  );
+  return <Text className={`${fontType} ${fontStyle} ${colorStyle} ${underLineStyle}`}>{children}</Text>;
 };
 
 export const Font = Object.assign(FontRegular, {

packages/design-system/src/TextField.tsx

@@ -4,18 +4,12 @@ import { TextInput } from 'react-native';
 interface TextField {
   value: string;
   onChange: (value: string) => void;
-  onSubmit: () => void;
+  onSubmit?: () => void;
   placeholder: string;
-  isCorrect: boolean;
+  isCorrect?: boolean;
 }
 
-export function TextField({
-  value,
-  onChange,
-  placeholder,
-  onSubmit,
-  isCorrect,
-}: TextField) {
+export function TextField({ value, onChange, placeholder, onSubmit, isCorrect }: TextField) {
   const defaultClassName =
     'text-SPOT-black text-body2 rounded-md p-4 bg-SPOT-white/60 border-[2px] border-bg-SPOT-white/60';
   const incorrectClassName = 'border-SPOT-red border-[2px]';
@@ -34,7 +28,7 @@ export function TextField({
       value={value}
       onChangeText={onChange}
       placeholder={placeholder}
-      placeholderTextColor="#ffffff"
+      placeholderTextColor='#ffffff'
       className={`${defaultClassName} ${getBorderClassName()}`}
       onSubmitEditing={onSubmit}
     />

packages/react-native/babel.config.js

@@ -13,6 +13,7 @@ module.exports = {
           '@pages': './src/pages',
           '@routes': './src/routes',
           '@components': './src/components',
+          '@layouts': './src/layouts',
           '@assets': './src/assets',
           '@constants': './src/constants',
           '@utils': './src/utils',

packages/react-native/ios/Podfile.lock

@@ -979,6 +979,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-pager-view (6.3.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-safe-area-context (4.10.8):
     - React-Core
   - react-native-view-shot (3.8.0):
@@ -1325,6 +1346,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`)
   - "react-native-cameraroll (from `../../../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-image-picker (from `../../../node_modules/react-native-image-picker`)
+  - react-native-pager-view (from `../../../node_modules/react-native-pager-view`)
   - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
   - react-native-view-shot (from `../../../node_modules/react-native-view-shot`)
   - React-nativeconfig (from `../../../node_modules/react-native/ReactCommon`)
@@ -1430,6 +1452,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/@react-native-camera-roll/camera-roll"
   react-native-image-picker:
     :path: "../../../node_modules/react-native-image-picker"
+  react-native-pager-view:
+    :path: "../../../node_modules/react-native-pager-view"
   react-native-safe-area-context:
     :path: "../../../node_modules/react-native-safe-area-context"
   react-native-view-shot:
@@ -1529,6 +1553,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
   react-native-cameraroll: a9138c165c9975da773d26945591d313992c799b
   react-native-image-picker: c3afe5472ef870d98a4b28415fc0b928161ee5f7
+  react-native-pager-view: f848f89049a8e888d38f10ff31588eb63292a95f
   react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
   react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688
   React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb

packages/react-native/package.json

@@ -19,6 +19,7 @@
     "@gorhom/bottom-sheet": "^4.6.4",
     "@react-native-camera-roll/camera-roll": "^7.8.1",
     "@react-navigation/bottom-tabs": "^6.6.0",
+    "@react-navigation/material-top-tabs": "^6.6.14",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
     "@tanstack/react-query": "^5.51.9",
@@ -32,11 +33,13 @@
     "react-native-gesture-handler": "^2.17.1",
     "react-native-image-picker": "^7.1.2",
     "react-native-linear-gradient": "^2.8.3",
+    "react-native-pager-view": "^6.3.3",
     "react-native-permissions": "^4.1.5",
     "react-native-reanimated": "^3.14.0",
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.32.0",
     "react-native-svg": "^15.4.0",
+    "react-native-tab-view": "^3.5.2",
     "react-native-view-shot": "^3.8.0",
     "react-native-vision-camera": "^4.5.0",
     "reanimated-color-picker": "^3.0.4",

packages/react-native/src/assets/EditIcon.tsx

@@ -0,0 +1,17 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export default function EditIcon({ width, height, color }: SvgProps) {
+  return (
+    <Svg
+      width={width || 14}
+      height={height || 14}
+      viewBox="0 0 14 14"
+      fill="none"
+    >
+      <Path
+        d="M1.55556 12.4444H2.66778L10.2667 4.84556L9.15444 3.73333L1.55556 11.34V12.4522V12.4444ZM0 14V10.6944L10.2667 0.451111C10.4222 0.311111 10.5933 0.194444 10.78 0.116667C10.9667 0.0388889 11.1689 0 11.3711 0C11.5733 0 11.7833 0.0388889 11.9778 0.116667C12.1722 0.194444 12.3433 0.311111 12.4833 0.466667L13.5567 1.55556C13.7122 1.69556 13.8289 1.86667 13.8989 2.06111C13.9689 2.25556 14.0078 2.45 14.0078 2.64444C14.0078 2.85444 13.9689 3.04889 13.8989 3.23556C13.8289 3.42222 13.7122 3.59333 13.5567 3.74889L3.30556 14H0ZM9.70667 4.30111L9.16222 3.73333L10.2744 4.84556L9.70667 4.30111Z"
+        fill={color || 'white'}
+      />
+    </Svg>
+  );
+}

packages/react-native/src/assets/Heart.tsx → packages/react-native/src/assets/HeartIcon.tsx

@@ -1,6 +1,6 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
 
-export default function Heart({ width, height, color }: SvgProps) {
+export default function HeartIcon({ width, height, color }: SvgProps) {
   return (
     <Svg
       width={width || 20}

packages/react-native/src/components/common/Card.tsx

@@ -1,5 +1,5 @@
 import { FlatList, ImageBackground, Text, View } from 'react-native';
-import Heart from '@assets/Heart';
+import HeartIcon from '@assets/HeartIcon';
 import { SpotData } from '@/types/spot';
 import Tag from './Tag';
 
@@ -27,7 +27,7 @@ export default function Card({ data }: { data: SpotData }) {
                 {locationName}
               </Text>
               <View>
-                <Heart width={12} height={12} />
+                <HeartIcon width={12} height={12} />
               </View>
             </View>
             {/* FIXME: 디자인 시스템 적용 */}

packages/react-native/src/components/common/EditButton.tsx

@@ -0,0 +1,17 @@
+import { TouchableOpacity } from 'react-native';
+import EditIcon from '@/assets/EditIcon';
+
+interface EditButtonProps {
+  onPress: () => void;
+}
+
+export default function EditButton({ onPress }: EditButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      className="p-3 bg-Button-gray rounded-full"
+    >
+      <EditIcon />
+    </TouchableOpacity>
+  );
+}

packages/react-native/src/components/mypage/Badge.tsx

@@ -0,0 +1,16 @@
+import { Font } from 'design-system';
+import { View } from 'react-native';
+
+interface BadgeProps {
+  content: string;
+}
+
+export default function Badge({ content }: BadgeProps) {
+  return (
+    <View className="flex items-center justify-center rounded-[32px] py-1 px-2.5 bg-SPOT-white/30">
+      <Font type="ui-text" color="white">
+        {content}
+      </Font>
+    </View>
+  );
+}

packages/react-native/src/hooks/useColorPalette.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import tinycolor from 'tinycolor2';
+import { returnedResults } from 'reanimated-color-picker';
+import {
+  NICKNAME_COLOR_SET,
+  NicknameColorSet,
+} from '@/constants/NICKNAME_COLOR_SET';
+
+export default function useColorPalette() {
+  const [selectedColor, setSelectedColor] = useState(NICKNAME_COLOR_SET[0]);
+  const [selectedPalette, setSelectedPalette] = useState<NicknameColorSet>(
+    NICKNAME_COLOR_SET[0],
+  );
+
+  const onSelectColor = ({ hex }: returnedResults) => {
+    setSelectedColor(hex);
+  };
+
+  const onChangeSelectedBarColor = (color: NicknameColorSet) => {
+    setSelectedColor(color);
+    setSelectedPalette(color);
+  };
+
+  const textColor = tinycolor(selectedColor).darken(25).toHexString();
+
+  return {
+    selectedColor,
+    selectedPalette,
+    onSelectColor,
+    onChangeSelectedBarColor,
+    textColor,
+  };
+}

packages/react-native/src/hooks/useProfileImage.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { Image, TouchableOpacity } from 'react-native';
+import useGallery from './useGallery';
+import SelectProfile from '@/assets/SelectProfile';
+
+export default function useProfileImage(uri?: string) {
+  const { getPhoto } = useGallery();
+  const [photoUri, setPhotoUri] = useState(uri || '');
+
+  const getPhtoFromLibrary = async () => {
+    const photo = await getPhoto();
+
+    if (photoUri && !photo) return;
+
+    setPhotoUri(photo || '');
+  };
+
+  function ProfileImage() {
+    return (
+      <TouchableOpacity onPress={getPhtoFromLibrary}>
+        {photoUri ? (
+          <Image
+            className="w-[140px] h-[140px] rounded-full bg-SPOT-white"
+            source={{ uri: photoUri }}
+            resizeMode="contain"
+          />
+        ) : (
+          <SelectProfile />
+        )}
+      </TouchableOpacity>
+    );
+  }
+
+  return { photoUri, ProfileImage };
+}

packages/react-native/src/layouts/BackGroundGradient.tsx

@@ -0,0 +1,30 @@
+import { SafeAreaView, ScrollView } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+export default function BackGroundGradient({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LinearGradient
+      colors={['#FF1919', '#000000']}
+      start={{ x: 0, y: -0.5 }}
+      end={{ x: 0, y: 0.5 }}
+      className="h-full"
+    >
+      <LinearGradient
+        colors={['rgba(0, 0, 0, 0.4)', 'rgba(0, 0, 0, 0.4)']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        className="h-full"
+      >
+        <SafeAreaView className="flex-1">
+          <ScrollView showsVerticalScrollIndicator={false} className="flex-1">
+            {children}
+          </ScrollView>
+        </SafeAreaView>
+      </LinearGradient>
+    </LinearGradient>
+  );
+}