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

[ratafa]

Key Changes

• 계정 통합 할 때 닉네임이 null인 경우 예외 처리를 위해 컴포넌트에 item.nickname이 있을 때만 렌더링하게끔 조건문을 걸어놨습니다.
• 해당 스크린에서 useEffect를 통한 api 받는 코드가 아직 제작되지 않았기에, useEffect 단계에서 Array.filter를 통한 로직 개선이 어렵다 판단해서 컴포넌트 렌더링 단계에서 조건문을 통한 닉네임 null에 대한 예외 처리를 진행했습니다.

Details

• 컴포넌트 내부에 있는 함수를 밖으로 빼내는 리팩토링을 일부 진행했습니다.
• 해당 리팩토링을 위해 ExistedAccountInfoType이 재활용 될 수 있도록, Array Type으로 감싸져 있던 ExistedAccountInfoType를 따로 빼내 객체로 만들고 ExistedAccountInfoArrayType라는 배열을 제작했습니다.
• 기존 계정의 nickName이 null이 나오는 예외 경우를 위해, MigrationUserInfoType의 nickName에 null 타입을 추가했습니다.
• idContainer 이모션 컴포넌트에서 scrollView에 gap이 제대로 적용되지 않는 현상이 발생하여, 이를 해결하기 위해 내부 View 요소에 margin-bottom 값을 추가했습니다.

Allocated Issue

• close [APP-186] 마이그레이션 정보 표출 로직 변경 #153

[commit-lint]

Bug Fixes

• MigrationUserInfoType의 nickname이 null인 경우의 type 추가 (62d65ba)
• 기존 계정의 닉네임이 null인 경우 미표시 처리 (e4dd9bc)
• scrollView의 gap 적용 불가로 인한 margin-bottom 값 추가 (ba1ee87)

Features

• ExistedAccountInfoType 재활용을 위한 Array 분기 처리 (335edcb)

Contributors

ratafa

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

• @Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
• @Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
• @Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
• @Commit-Lint merge disable will desactivate merge dependabot PR
• @Commit-Lint review will approve dependabot PR
• @Commit-Lint stop review will stop approve dependabot PR

[ratafa]

scrollVIew에 footer 버튼을 하단에 고정시켜려 했지만, scroolView의 컨텐츠들로 인해 아래로 밀리는 현상이 발생했습니다. (아래 링크 참고)
https://uoslifeteam.slack.com/files/U05RPJC7W3U/F067MGGCSQH/________________________________2023-11-25______________1.43.42.mov

그래서 구글링 해본 결과
https://stackoverflow.com/questions/65962363/react-native-fixed-footer-doesnt-stay-on-scroll
https://stackoverflow.com/questions/68108693/how-to-fix-the-footer-on-bottom-of-the-page-in-react-native
https://stackoverflow.com/questions/52986234/how-to-fix-a-view-on-screen-inside-a-scrollview-react-native
https://www.youtube.com/watch?v=4Pw4du1IrDs&t=448s&ab_channel=CatalinMiron (07:10 참고)
위와 같이 abosiute를 사용하라는 조언이 있었지만, 왜인지 저는 scrollView의 크기를 px로 정해주지 않는 이상 여전히 버그가 발생했습니다.

그래서 임의로 scrollView의 크기를 지정해주는 방식으로 문제를 해결했습니다.
Dimensions API를 활용하여 스크린의 높이를 구한 후, scrollView 위에 위치하고 있던 컴포넌트들(Header, Txt)의 높이를 빼주는 방식으로 scrollView의 높이를 구했습니다.

[eunbae0]

고생하셨습니다. 아래와 같은 수정 후 main에 병합하겠습니다. @ratafa

• main branch merge
• map 함수에 key값 추가
• MOCK_DATA 삭제
• isSelected의 타입을 Partial하게 변경