[APP-186] 계정 통합시, 닉네임 null 예외 처리

ios/Podfile.lock

@@ -804,4 +804,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 391649334035309d154d863095d13e16b0f52cd5
 
-COCOAPODS: 1.14.2
+COCOAPODS: 1.12.1

src/api/services/core/auth/authAPI.type.ts

@@ -11,7 +11,7 @@ export type UserStatusType =
 
 export type MigrationUserInfoType = {
   id: string;
-  nickname: string;
+  nickname: string | null;
   username: string;
 };
 

src/screens/account/common/AccountIntegrationScreen.tsx

@@ -1,20 +1,37 @@
-import styled from '@emotion/native';
 import React from 'react';
-import {Pressable, View} from 'react-native';
+import {Dimensions, Pressable, View} from 'react-native';
 import {useAtom} from 'jotai';
+import styled from '@emotion/native';
 import {Txt, Button, colors} from '@uoslife/design-system';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
 import Header from '../../../components/molecules/common/header/Header';
-import {existedAccountInfoAtom} from '../../../store/account';
+import {
+  ExistedAccountInfoType,
+  existedAccountInfoAtom,
+} from '../../../store/account';
 import useAccountFlow from '../../../hooks/useAccountFlow';
 
+const DEVICE_HEIGHT = Dimensions.get('window').height;
+const HEADER_TO_TXT_HEIGHT = 270; // 헤더부터 설명 문구('선택한 ~ 삭제됩니다')까지의 높이
+
 const AccountIntegrationScreen = () => {
   const insets = useSafeAreaInsets();
   const [existedAccountInfo, setExistedAccountInfo] = useAtom(
     existedAccountInfoAtom,
   );
   const {changeAccountFlow, increaseSignUpFlowStep} = useAccountFlow();
 
+  const selectExistedAccount = (selectedAccount: ExistedAccountInfoType) => {
+    setExistedAccountInfo(prev => {
+      return prev.map(prevItem =>
+        prevItem.id === selectedAccount.id
+          ? {...prevItem, isSelected: true}
+          : {...prevItem, isSelected: false},
+      );
+    });
+  };
+
   const handlePressHeaderBackButton = () =>
     changeAccountFlow({
       commonFlowName: 'SIGNIN',
@@ -51,47 +68,50 @@ const AccountIntegrationScreen = () => {
               typograph="bodyMedium"
             />
           </View>
-          <S.idContainer>
+          <S.idContainer style={{height: DEVICE_HEIGHT - HEADER_TO_TXT_HEIGHT}}>
             {existedAccountInfo.map(item => (
-              <Pressable
-                key={item.id}
-                onPress={() =>
-                  setExistedAccountInfo(prev => {
-                    return prev.map(prevItem =>
-                      prevItem.id === item.id
-                        ? {...prevItem, isSelected: true}
-                        : {...prevItem, isSelected: false},
-                    );
-                  })
-                }>
-                <S.idButtonSelected isSelected={item.isSelected}>
-                  <Txt
-                    label={item.nickname}
-                    color="grey190"
-                    typograph="titleMedium"
-                  />
-                </S.idButtonSelected>
-              </Pressable>
+              <View key={item.id}>
+                {item.nickname && (
+                  <Pressable
+                    key={item.id}
+                    onPress={() => selectExistedAccount(item)}>
+                    <S.idButtonSelected isSelected={item.isSelected}>
+                      <Txt
+                        label={item.nickname}
+                        color="grey190"
+                        typograph="titleMedium"
+                      />
+                    </S.idButtonSelected>
+                  </Pressable>
+                )}
+              </View>
             ))}
+            <S.dummyBox />
           </S.idContainer>
         </View>
-        <Button
-          label="계정 통합하기"
-          onPress={handlePressNextButton}
-          isEnabled={existedAccountInfo.some(item => item.isSelected === true)}
-          isFullWidth
-        />
+        <S.buttonArea>
+          <Button
+            label="계정 통합하기"
+            onPress={handlePressNextButton}
+            isEnabled={existedAccountInfo.some(
+              item => item.isSelected === true,
+            )}
+            isFullWidth
+          />
+        </S.buttonArea>
       </S.accountIntegrationContainer>
     </S.screenContainer>
   );
 };
 
-const getBorderColor = (isSelected: boolean) => {
+const getBorderColor = (isSelected?: boolean) => {
   switch (isSelected) {
     case true:
       return colors.primaryBrand;
     case false:
       return colors.grey40;
+    default:
+      return colors.grey40;
   }
 };
 
@@ -102,19 +122,14 @@ const S = {
     flex: 1;
   `,
   accountIntegrationContainer: styled.View`
-    flex: 1;
-    justify-content: space-between;
     padding: 28px 16px 0;
   `,
   idContainer: styled.ScrollView`
-    gap: 16px;
     padding-bottom: 16px;
   `,
-  idButtonSelected: styled.View<{isSelected: boolean}>`
-    display: flex;
-
-    height: 56px;
+  idButtonSelected: styled.View<{isSelected?: boolean}>`
     border-radius: 10px;
+    margin-bottom: 16px;
     padding: 16px;
     border: 2px solid ${({isSelected}) => getBorderColor(isSelected)};
     justify-content: center;
@@ -124,4 +139,17 @@ const S = {
     color: black;
     font-weight: bold;
   `,
+  buttonArea: styled.View`
+    margin: 0 16px;
+    background-color: white;
+    height: 64px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  `,
+  dummyBox: styled.View`
+    height: 58px;
+  `,
 };

src/store/account/existedAccountInfo.ts

@@ -1,10 +1,10 @@
 import {atom} from 'jotai';
 import {MigrationUserInfoType} from '../../api/services/core/auth/authAPI.type';
 
-export type ExistedAccountInfoType = Array<
-  MigrationUserInfoType & {
-    isSelected?: boolean;
-  }
->;
+export type ExistedAccountInfoArrayType = Array<ExistedAccountInfoType>;
 
-export const existedAccountInfoAtom = atom<ExistedAccountInfoType>([]);
+export type ExistedAccountInfoType = MigrationUserInfoType & {
+  isSelected?: boolean | undefined;
+};
+
+export const existedAccountInfoAtom = atom<ExistedAccountInfoArrayType>([]);