refactor: Mbti Result Summary

Qomi Yoo·2023년 2월 5일

업무

목록 보기

5/6

리팩토링 개선 이유

☑️ 모든 페이지에 같은 컴포넌트 사용으로 component가 여러 기능을 수행

☑️ 모든 페이지에 동일한 path 사용

☑️ MbtiResultScreen이 active 및 default 상태에 적용되어 있어 네비게이션 Stack에 남아있음 따라 회원가입에서 Home으로 페이지 이동 시 이용약관이 보이는 이슈 발생

☑️ 추후 추가되는 UI & UX , 로직에 대한 복잡도 최소화

장점

☑️ 페이지 분리로 인해 비즈니스 로직 복잡도 저하

☑️ entryPoint에 대한 로직 삭제로 인한 직관성 증가

☑️ 불필요한 path 사용 개선

☑️ 한 컴포넌트에 하나의 기능만을 수행

단점

☑️ 페이지별로 동일한 component 가 x3배로 작업 시 동일 작업 반복해야함

🔨 리팩토링 진행한 부분

mainStackNavigation 분리

⛔️ as-is : mbtiResultScreen으로 sign-up, profile-edit, home, profile-card, subMbti 구성

✅ to-be : screen을 분리하여 구성하여 각 페이지 기능만을 수행한다.

sign-up : MbtiTestResultScreen
profile-edit : MyPageMbtiScreen
home : ProfileMbtiScreen
subMbti : SubMbtiResultScreen // 현재는 resultScreen 사용

✅ to-be

//mainStackNavigation.tsx
export const MainStackNavigation = () => {

  const navigationGroup = useMemo(() => {
    switch (userState) {
      case 'active':
      case 'review':
      case 'dormant':
        return (
          <>
            <Stack.Screen
              name={ScreenName.MyPageMbtiScreen}
              component={MyPageMbtiScreen}
            />
            <Stack.Screen
              name={ScreenName.ProfileMbtiScreen}
              component={ProfileMbtiScreen}
            />
          </>
        );
...
...
   
      default:
        return (
          <>
            <Stack.Screen
              name={ScreenName.MbtiTestResultScreen}
              component={MbtiTestResultScreen}
            />
          </>
        );
    }
  }, [userState]);
...
...
   
  return (
			<Stack.Navigator
      screenOptions={{
        headerShown: false,
        cardStyle: { backgroundColor: ThemeColor.SystemBackground },
      }}>
      {navigationGroup}
      <Stack.Screen
        name={ScreenName.SubMbtiResultScreen}
        component={MbtiResultScreen}
        options={({ route }) => ({
          gestureDirection:
            route?.params?.isSubMbti === 'true' ? 'horizontal' : 'vertical',
          cardStyleInterpolator:
            route?.params?.isSubMbti === 'true'
              ? CardStyleInterpolators.forHorizontalIOS
              : CardStyleInterpolators.forVerticalIOS,
        })}
      />
    </Stack.Navigator>
  );
};

path Variable ⇒ query string 으로 변경

☑️ 기존 path Variable 조합으로 인해 사용하지 않는 path임에도 모든 페이지 내에서 존재하였지만 현재는 페이지별로 꼭 필요한 데이터만 qeury string으로 명시한다.

⛔️ as-is

/enfpy/mbti-test/result/infp/profile-edit/isfj/75/true/undefined/undefined

✅ to-be

/enfpy/my-page/mbti?mbti=isfj&subMbti=infp&purity=75

Page 분리

☑️ page는 기본적으로 한페이지에 하나의 기능만을 수행한다.

⛔️ as-is

MbtiResultScreen = 'mbti/result', // deprecated 1.9.5 over

✅ to-be

 MbtiTestResultScreen = 'mbti/test-result',
 MyPageMbtiScreen = 'my-page/mbti',
 ProfileMbtiScreen = 'profile/mbti',
 SubMbtiResultScreen = 'mbti/Sub' // 현재는 MbtiResultScreen 사용

page 내부

☑️ ~.page.tsx에서는 component 의 기능적 event 를 가급적 명시하지 않고 하위 component 안에서 사용한다.

component 분리

☑️ 하나의 컴포넌트는 하나의 기능만을 수행한다.

☑️ 컴포넌트가 분리됨에 따라 같은 event의 중복을 방지하기 위해 useHooks로 변경하여 작성한다.

⛔️ as-is

*// MbtiResultSignUp에도 동일로직 사용*

const MbtiResultMyPage = ()=>{ 

const handleTestAgain = () => {
    navigation?.replace({
        screenName: ScreenName.CommonWebViewScreen,
        params: {
          uri: '/enfpy/mbti-test/again',
          showHeaderComponent: false,
        },
      });
  };

return (
				<ButtonSection>
          <TestAgainButton onClickTestAgain={handleTestAgain} />
        </ButtonSection>
)}

✅ to-be

const MbtiResultMyPage = ()=>{
const testAgain = useTestAgain();

const handleTestAgain = useCallback(() => {
    testAgain();
  }, [testAgain]);

return (
				<ButtonSection>
          <TestAgainButton onClickTestAgain={handleTestAgain} />
        </ButtonSection>
)}

☑️ props가 아닌 구조분해로 간결하게 작성한다.

⛔️ as-is

interface ShareMbtiTestButtonProps {
  onClickShareMbtiTest: () => void;
}

const ShareMbtiTestButton = ({
  ...props,
}: ShareMbtiTestButtonProps) => (
  <Container>
    <Button buttonType="border" onClickEvent={props.onClickShareMbtiTest}>
      <span>
        <ShareLinkIcon />
      </span>
      성격 유형 테스트 공유하기
    </Button>
  </Container>
);

✅ to-be

interface ShareMbtiTestButtonProps {
  onClickShareMbtiTest: () => void;
}

const ShareMbtiTestButton = ({
  onClickShareMbtiTest,
}: ShareMbtiTestButtonProps) => (
  <Container>
    <Button buttonType="border" onClickEvent={onClickShareMbtiTest}>
      <span>
        <ShareLinkIcon />
      </span>
      성격 유형 테스트 공유하기
    </Button>
  </Container>
);