feat: 닉네임으로 프로필을 설정하는 경우 페이지 구성 및 로직 구성

packages/react-native/babel.config.js

@@ -19,5 +19,6 @@ module.exports = {
         },
       },
     ],
+    'react-native-reanimated/plugin',
   ],
 };

packages/react-native/ios/Podfile.lock

@@ -1235,6 +1235,27 @@ PODS:
     - Yoga
   - RNPermissions (4.1.5):
     - React-Core
+  - RNReanimated (3.14.0):
+    - 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
   - RNScreens (3.32.0):
     - DoubleConversion
     - glog
@@ -1331,6 +1352,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNPermissions (from `../../../node_modules/react-native-permissions`)
+  - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
   - RNSVG (from `../../../node_modules/react-native-svg`)
   - VisionCamera (from `../../../node_modules/react-native-vision-camera`)
@@ -1462,6 +1484,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-gesture-handler"
   RNPermissions:
     :path: "../../../node_modules/react-native-permissions"
+  RNReanimated:
+    :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../../node_modules/react-native-screens"
   RNSVG:
@@ -1532,6 +1556,7 @@ SPEC CHECKSUMS:
   ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4
   RNGestureHandler: 8dbcccada4a7e702e7dec9338c251b1cf393c960
   RNPermissions: 4da8c626e4ac9d71c1a199d500d52dd54da62e38
+  RNReanimated: 7e6fc1e80f412285a16ac3879b9e4672ffa91cef
   RNScreens: 5aeecbb09aa7285379b6e9f3c8a3c859bb16401c
   RNSVG: cb24fb322de8c1ebf59904e7aca0447bb8dbed5a
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d

packages/react-native/package.json

@@ -17,6 +17,8 @@
     "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
+    "@tanstack/react-query": "^5.51.9",
+    "axios": "^1.7.2",
     "babel-plugin-module-resolver": "^5.0.2",
     "design-system": "workspace:^",
     "nativewind": "^2.0.11",
@@ -26,12 +28,15 @@
     "react-native-image-picker": "^7.1.2",
     "react-native-linear-gradient": "^2.8.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-view-shot": "^3.8.0",
     "react-native-vision-camera": "^4.5.0",
-    "tailwind-config": "workspace:*"
+    "reanimated-color-picker": "^3.0.4",
+    "tailwind-config": "workspace:*",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -45,6 +50,7 @@
     "@react-native/typescript-config": "0.74.84",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "babel-jest": "^29.6.3",

packages/react-native/src/App.tsx

@@ -1,10 +1,14 @@
 import { NavigationContainer } from '@react-navigation/native';
 import StackNavigator from '@routes/StackNavigator';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+const queryClient = new QueryClient();
 export default function App() {
   return (
-    <NavigationContainer>
-      <StackNavigator />
-    </NavigationContainer>
+    <QueryClientProvider client={queryClient}>
+      <NavigationContainer>
+        <StackNavigator />
+      </NavigationContainer>
+    </QueryClientProvider>
   );
 }

packages/react-native/src/apis/mutations/useSignup.ts

@@ -0,0 +1,26 @@
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+
+interface UseSignupParams {
+  nickname: string;
+  profile?: string;
+  nicknameProfileColor?: string;
+}
+
+export default function useSignup({
+  nickname,
+  profile,
+  nicknameProfileColor,
+}: UseSignupParams) {
+  return useMutation({
+    // FIXME: 실제 연동 로직 필요
+    mutationFn: () =>
+      axios.post('SOME url...', {
+        nickname,
+        profile,
+        nicknameProfileColor,
+      }),
+    onSuccess: () => {},
+    onError: () => {},
+  });
+}

packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx

@@ -0,0 +1,23 @@
+import ColorPicker, {
+  returnedResults,
+  SaturationSlider,
+} from 'reanimated-color-picker';
+import { NicknameColorSet } from '@/constants/NICKNAME_COLOR_SET';
+
+interface ColorSliderProps {
+  baseColor: NicknameColorSet;
+  onChange: ({ hex }: returnedResults) => void;
+}
+
+export default function ColorSlider({ baseColor, onChange }: ColorSliderProps) {
+  return (
+    <ColorPicker value={baseColor} onChange={onChange}>
+      <SaturationSlider
+        reverse
+        style={{
+          borderRadius: 50,
+        }}
+      />
+    </ColorPicker>
+  );
+}

packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx

@@ -0,0 +1,36 @@
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { View } from 'react-native';
+import {
+  NICKNAME_COLOR_SET,
+  NicknameColorSet,
+} from '@/constants/NICKNAME_COLOR_SET';
+
+interface NicknameColorPaletteProps {
+  selectedPalette: NicknameColorSet;
+  changeSelectedPalette: (color: NicknameColorSet) => void;
+}
+
+export default function NicknameColorPalette({
+  selectedPalette,
+  changeSelectedPalette,
+}: NicknameColorPaletteProps) {
+  return (
+    <View className="flex flex-row gap-4 justify-center items-center">
+      {NICKNAME_COLOR_SET.map((color) => (
+        <TouchableOpacity
+          key={color}
+          onPress={() => changeSelectedPalette(color)}
+        >
+          <View
+            className="w-[40px] h-[40px] rounded-full"
+            style={{
+              backgroundColor: color,
+              borderColor: 'white',
+              borderWidth: selectedPalette === color ? 3 : 0,
+            }}
+          />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}

packages/react-native/src/constants/NICKNAME_COLOR_SET.ts

@@ -0,0 +1,10 @@
+export const NICKNAME_COLOR_SET = [
+  '#F7AFAF',
+  '#F7D6AF',
+  '#F7F4AF',
+  '#AFF7B2',
+  '#AFE1F7',
+  '#BEAFF7',
+];
+
+export type NicknameColorSet = (typeof NICKNAME_COLOR_SET)[number];

packages/react-native/src/pages/Login/Nickname.tsx → packages/react-native/src/pages/Signup/Nickname.tsx

@@ -1,8 +1,8 @@
 import { Font, TextField } from 'design-system';
 import { useState } from 'react';
 import { View } from 'react-native';
-import Header from '@/components/signup/Header';
-import Overlay from '@/components/signup/Overlay';
+import Header from '@/components/signup/common/Header';
+import Overlay from '@/components/signup/common/Overlay';
 import { SignupStackNavigation } from '@/types/navigation';
 
 interface NicknameProps {

packages/react-native/src/pages/Signup/NicknameProfile.tsx

@@ -0,0 +1,103 @@
+import { Button, Font } from 'design-system';
+import { Text, View } from 'react-native';
+import { returnedResults } from 'reanimated-color-picker';
+import { useState } from 'react';
+import tinycolor from 'tinycolor2';
+import { useRoute } from '@react-navigation/native';
+import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation';
+import Overlay from '@/components/signup/common/Overlay';
+import Header from '@/components/signup/common/Header';
+import {
+  NICKNAME_COLOR_SET,
+  NicknameColorSet,
+} from '@/constants/NICKNAME_COLOR_SET';
+import NicknameColorPalette from '@/components/signup/nicknameProfile/NicknameColorPalette';
+import ColorSlider from '@/components/signup/nicknameProfile/ColorSlider';
+
+interface NicknameProfileProps {
+  navigation: SignupStackNavigation<'Signup/NicknameProfile'>;
+}
+
+export default function NicknameProfile({ navigation }: NicknameProfileProps) {
+  const route = useRoute<SignupRouteProps<'Signup/NicknameProfile'>>();
+  const { nickname } = route.params;
+  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 getFontColor = () => {
+    const textColor = tinycolor(selectedColor);
+    return textColor.darken(25).toHexString();
+  };
+
+  const handleNext = () => {
+    navigation.navigate('Main');
+  };
+
+  return (
+    <Overlay>
+      <View className="flex-col flex justify-between items-center w-full h-full">
+        <Header
+          onBack={() => navigation.goBack()}
+          onCancel={() => navigation.goBack()}
+        />
+        <View>
+          <View className="flex w-full mt-[30px]">
+            <Font type="mainTitle" color="white">
+              배경 색상을
+            </Font>
+            <Font type="mainTitle" color="white">
+              선택하세요
+            </Font>
+          </View>
+          <View className="flex justify-center items-center mt-[60px]">
+            <View
+              className="w-[160px] h-[160px] rounded-full justify-center items-center"
+              style={{
+                backgroundColor: selectColor,
+              }}
+            >
+              <Text
+                className="font-Pretendard-Medium text-[40px]"
+                style={{
+                  color: getFontColor(),
+                }}
+              >
+                {nickname}
+              </Text>
+            </View>
+          </View>
+
+          <View className="mt-[40px]">
+            <NicknameColorPalette
+              selectedPalette={selectedPalette}
+              changeSelectedPalette={onChangeSelectedBarColor}
+            />
+          </View>
+
+          <View className="mt-[64px]">
+            <ColorSlider baseColor={selectedPalette} onChange={onSelectColor} />
+          </View>
+        </View>
+
+        <View className="w-full">
+          <Button onPress={handleNext}>
+            <Font.Bold type="body2" color="white">
+              다음
+            </Font.Bold>
+          </Button>
+        </View>
+      </View>
+    </Overlay>
+  );
+}

packages/react-native/src/pages/Login/Profile.tsx → packages/react-native/src/pages/Signup/Profile.tsx

@@ -4,8 +4,8 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useState } from 'react';
 import { useRoute } from '@react-navigation/native';
 import SelectProfile from '@/assets/SelectProfile';
-import Header from '@/components/signup/Header';
-import Overlay from '@/components/signup/Overlay';
+import Header from '@/components/signup/common/Header';
+import Overlay from '@/components/signup/common/Overlay';
 import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation';
 import useGallery from '@/hooks/useGallery';
 

packages/react-native/src/routes/SignupStackNavigator.tsx

@@ -1,7 +1,7 @@
 import { createStackNavigator } from '@react-navigation/stack';
-import Niakname from '@/pages/Login/Nickname';
-import Profile from '@/pages/Login/Profile';
-import NicknameProfile from '@/pages/Login/NicknameProfile';
+import Niakname from '@/pages/Signup/Nickname';
+import Profile from '@/pages/Signup/Profile';
+import NicknameProfile from '@/pages/Signup/NicknameProfile';
 
 const Stack = createStackNavigator();