Eojin Han

🚨

요약 : TMI 지양하자!

handlePressCell에 너무 과한 정보가 담겨있다.

몸상태 선택 스크린에선 서버로부터 받아온 몸상태를 화면에 나열하고, 유저가 선택한 몸상태들을 담아둔다. 라는 것만 보이면 된다.

드러나야 하는 정보는 몸상태 셀을 누르면 선택된 몸상태 목록에 변동을 준다. 라는 점이다.

선택된 몸상태 정보

몸상태 상태 변경함수

두 가지만 프롭으로 받도록 하고, 나머지 구체적인, 그다지 관심있지 않은 부분은 추상화로 감춰 핵심 흐름만 읽어내려갈 수 있도록 하면 깔끔하게 읽히는 코드가 된다.

어떻게 선택된 몸상태 목록을 바꾸지? 라는 게 궁금할 때에야 비로소, 해당 훅 내부를 들어가서 살펴보면 된다.


import { BodyConditionGroup } from '@components/UserMain/BodyConditionGroup';
import { FrequentlySelectedConditionList } from '@components/UserMain/FrequentlySelectedConditionList';
import { UserMainStartDispensingComponent } from 'components/UserMain/UserMainStartDispensingComponent';
import React, { useState } from 'react';
import { ScrollView } from 'react-native';
import { useGetUserState } from 'states/userState';
import { BodyConditionInfo, BodyConditionObject } from 'types/schema';
import { VFC } from 'utils';
import { verticalScale } from 'utils/functions/scale';
import { useGetBodyConditionList } from './useGetBodyConditionList';

interface Props {
  disabled: boolean;
}

export const UserMainContainer: VFC<Props> = ({ disabled }) => {
  const { id: userId } = useGetUserState();

  const { frequentlySelectedConditions, conditionList } =
    useGetBodyConditionList(userId);

  const [selectedConditionList, setSelectedConditionList] =
    useState<BodyConditionObject>({});

  const handlePressCell = (bodyCondition: BodyConditionInfo): void => {
    const maxSeverity = Object.keys(bodyCondition.id).length;
    const newSelectedConditions = { ...selectedConditionList };

    const isSelected = newSelectedConditions.hasOwnProperty(bodyCondition.name);

    // 새로운 몸상태 선택 or 기존에 선택된 몸상태 심각도 변경
    if (!isSelected) {
      newSelectedConditions[bodyCondition.name] = {
        ...bodyCondition,
        id: { 1: bodyCondition.id[1] },
      };
      setSelectedConditionList(newSelectedConditions);
      return;
    }

    const nextSeverity =
      Number(Object.keys(newSelectedConditions[bodyCondition.name].id)[0]) + 1; // 선택된 몸상태 목록에는 심각도 값을 하나로만 유지하므로 [0]만 참조하면 된다.

    // 심각도가 최대치인 경우에는 몸상태 취소
    if (
      newSelectedConditions[bodyCondition.name].id.hasOwnProperty(maxSeverity)
    ) {
      delete newSelectedConditions[bodyCondition.name];
      setSelectedConditionList(newSelectedConditions);
      return;
    }

    // 다음 심각도 선택
    newSelectedConditions[bodyCondition.name].id = {
      [nextSeverity]: bodyCondition.id[nextSeverity],
    };
    setSelectedConditionList(newSelectedConditions);
  };

  return (
    <>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: verticalScale(356 + 60) }} // footer 높이 + 카테고리 간 간격
      >
        {Object.keys(frequentlySelectedConditions.FREQUENTLY).length > 0 && (
          <FrequentlySelectedConditionList
            data={frequentlySelectedConditions}
            selectedConditionList={selectedConditionList}
            onPressCell={handlePressCell}
          />
        )}
        <BodyConditionGroup
          data={conditionList}
          selectedConditionList={selectedConditionList}
          onPressCell={handlePressCell}
        />
      </ScrollView>

      <UserMainStartDispensingComponent
        selectedConditionList={selectedConditionList}
        setSelectedConditionList={setSelectedConditionList}
        disabled={disabled}
      />
    </>
  );
};

꼭 필요한 정보만 노출시키고, 나머진 추상화 시킨다.