React 관심사 선택 모달 개선하기

 

React 관심사 선택 모달 개선하기

📌 기능 개요

사용자가 관심사를 선택할 수 있는 모달을 만들었지만, 기존에는 선택 즉시 user 상태가 변경되는 문제가 있었습니다.
이를 해결하기 위해 임시 상태(tempInterests)를 추가하고, "수정하기" 버튼을 눌러야 반영되도록 개선했습니다.

---

🛠 구현 과정

1️⃣ 임시 상태(tempInterests) 추가

• 기존에는 interests가 바로 변경되었지만, 이제 tempInterests를 사용하여 선택한 항목을 임시 저장합니다.
• 관심사가 변경되었을 때만 "수정하기" 버튼이 활성화됩니다.

2️⃣ "수정하기" 버튼 동작

• tempInterests와 interests가 다를 때 버튼이 활성화됩니다.
• 선택된 취미가 없으면 버튼이 비활성화됩니다.

const [tempInterests, setTempInterests] = useState(interests); 

const handleHobbyClick = (name) => {
  const isAlreadySelected = tempInterests.includes(name);
  const updatedHobbies = isAlreadySelected
    ? tempInterests.filter((hobby) => hobby !== name)
    : tempInterests.length < 10
    ? [...tempInterests, name]
    : tempInterests;

  setTempInterests(updatedHobbies);
};

3️⃣ 버튼 활성화 조건 설정

<button 
  className={`edit-button ${tempInterests.length > 0 && tempInterests !== interests ? "active" : "inactive"}`} 
  onClick={handleSave}
  disabled={tempInterests.length === 0 || tempInterests === interests}
>
  수정하기
</button>

✔ 버튼 활성화 조건:
✅ tempInterests.length > 0 → 최소 하나 이상의 취미가 선택됨
✅ tempInterests !== interests → 기존 관심사와 다를 경우

---

🎯 결과 및 개선점

✅ 관심사가 즉시 변경되지 않고, 수정 버튼을 눌러야 반영됨
✅ 관심사가 바뀌지 않으면 버튼이 비활성화됨
✅ 최소 1개 이상 선택해야 수정 가능

👉 추가 개선 가능성:

• 선택 가능한 최대 개수(10개)를 UI에서 시각적으로 표시
• 사용자 경험을 개선하기 위해 애니메이션 추가

---