[체크리스트] 상태관리

체크 리스트의 상태 관리는 다음과 같다.

 

App.tsx

아래의 state를 관리한다. 

const [selectedWeek, setSelectedWeek] = useState(15);

const [addlist, setAddlist] = useState('');

const [isVisibleAddBtn, setIsVisibleAddBtn] = useState<boolean>(true);

const [isVisibleInput, setIsVisibleInput] = useState<boolean>(false);

const [isVisibleEditBtn, setIsVisibleEditBtn] = useState<boolean>(false);

const [isEditing, setIsEditing] = useState<boolean>(false);

 

 

ChecklistTitle.tsx

아래의 state를 관리한다. 

const ChecklistTitle: React.FC<ChecklistTitleProps> = ({

title,

isVisibleEditBtn,

isEditing,

setIsEditing,

}) => {

const editText = isEditing ? 'Done' : 'Edit';

 

 

WeekSelection.tsx

아래의 state를 관리한다. 

const WeekSelection: React.FC<WeekSelectionProps> = ({

selectedWeek,

onSelectWeek,

})

 

 

WeeklyData.tsx

아래의 state를 관리한다. 

const WeeklyData = forwardRef<any, WeeklyDataProps>(

({selectedWeek, setIsVisibleEditBtn, isEditing}, ref) => {

const [checklistData, setChecklistData] = useState<ChecklistItem[]>([]);

const [selectedWeekData, setSelectedWeekData] = useState<ChecklistItem[]>(

[],

);

const [updatedSelectedData, setUpdatedSelectedData] = useState<

ChecklistItem[]

>([]);

const [completedCount, setCompletedCount] = useState<number>(0);

const [totalItems, setTotalItems] = useState<number>(0);

ProgressBar.tsx

아래의 state를 관리한다. 

const ProgressBar: React.FC<ProgressBarProps> = ({

completedCount,

totalItems,

}) => {

const percentage =

totalItems > 0 ? Math.round((completedCount / totalItems) * 100) : 0;

 

 

추가로 하나의  Icons.ts파일 안에 svgs들을 모았다.

 

색상만 달리할 때는 함수로 생성해서 색상 여부를 판별하도록 작성했다. 

export const Rectangle897 = (isChoice: boolean): JSX.Element => (

<Svg width="50" height="62" viewBox="0 0 50 62" fill="none">

<Path

d="M0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V37C50 50.8071 38.8071 62 25 62C11.1929 62 0 50.8071 0 37V25Z"

fill={isChoice ? '#44CEC6' : '#F6F5F8'}

/>

</Svg>

);

export const CheckboxIcon = (isCompleted: boolean): JSX.Element => (

<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">

<Circle cx="12" cy="12" r="12" fill={isCompleted ? '#44CEC6' : '#F0F0F0'} />

<Path

fillRule="evenodd"

clip-rule="evenodd"

d="M18.3989 8.26758C18.7113 8.58 18.7113 9.08653 18.3989 9.39895L10.8155 16.9823C10.5031 17.2947 9.99658 17.2947 9.68416 16.9823L5.60083 12.899C5.28841 12.5865 5.28841 12.08 5.60083 11.7676C5.91325 11.4552 6.41978 11.4552 6.7322 11.7676L10.2498 15.2852L17.2675 8.26758C17.5799 7.95516 18.0864 7.95516 18.3989 8.26758Z"

fill={isCompleted ? 'white' : '#C4C4C4'}

/>

</Svg>

);