[Feature] 질문 수정 및 삭제 api 추가

[E0min]

설명

• 본 PR은 사용자 경험을 개선하고 애플리케이션의 안정성을 높이기 위한 다양한 UI/UX 개선 및 기능
  안정화 작업을 포함합니다. 사이드바의 토픽 이름 표시 문제, 카드 컴포넌트의 스타일 불일치, 질문
  수정/삭제 시 사용자 피드백 부족 등의 문제를 해결하고, 전역 상태 관리 라이브러리(Zustand)를
  도입하여 토픽 이름 변경 시 전역 상태를 업데이트하도록 개선했습니다.

---

주요 변경사항

• UI/UX 개선

  • src/components/app-sidebar.tsx: 사이드바 토픽 이름이 길어질 경우 말줄임표(...)로
    표시되도록 min-w-0 및 truncate Tailwind CSS 클래스를 추가했습니다.
  • src/components/ui/card.tsx: 카드 컴포넌트의 불필요한 왼쪽 파란색 보더를 제거하고,
    rounded-xl을 rounded-md로 변경하여 모서리 둥글기를 조정했습니다.
  • src/components/enhanced-breadcrumb-focus-view/sub-question-list.tsx: 하위 질문 목록의
    질문 텍스트 색상을 회색 톤으로 변경하여 전체적인 디자인 일관성을 높였습니다.
  • src/components/enhanced-breadcrumb-focus-view/new-question-form.tsx 및
    src/components/start-new-topic-form.tsx: 로딩 스피너의 파란색 테두리 색상을 제거하여
    모든 로딩 스피너가 일관된 회색 톤을 유지하도록 했습니다.

• 기능 안정화 및 피드백 개선

  • src/components/enhanced-breadcrumb-focus-view/use-question-tree.ts:
    • 질문 수정(handleSaveEdit) 및 삭제(handleDeleteQuestion) 시 낙관적 UI 업데이트 로직을
      추가하여 사용자 경험을 향상시켰습니다. API 호출 실패 시에는 이전 상태로 롤백되도록
      구현했습니다.
    • toast 알림을 추가하여 질문 수정 및 삭제 성공/실패 여부를 사용자에게 명확하게
      전달합니다.
  • src/components/app-sidebar.tsx: 토픽 이름 수정 시 useTopicStore를 통해 전역 상태를
    업데이트하도록 연동했습니다.

• 전역 스타일 및 상태 관리

  • src/app/globals.css: CSS 변수에 대한 주석을 추가하여 가독성을 높였으며, --primary,
    --secondary, --muted, --accent, --destructive, --border, --input, --ring, --chart-,
    --sidebar- 등 주요 색상 변수들을 회색 톤으로 조정하여 전체적인 디자인 팔레트를
    통일했습니다.
  • package.json 및 package-lock.json: 전역 상태 관리를 위해 zustand 라이브러리를
    추가했습니다.

---

관련이슈

• [Feature] 질문 수정 및 삭제 API 추가 #20

---

테스트 방법

1. 사이드바 토픽 이름 말줄임표 확인:
   • 사이드바에서 토픽 이름이 긴 항목을 생성하거나 확인하여, 이름이 영역을 넘어갈 때
     말줄임표(...)가 올바르게 표시되는지 확인합니다.
2. 카드 컴포넌트 스타일 확인:
   • 질문 상세 보기 페이지(/[id]/page.tsx)에서 하위 질문 목록의 카드 컴포넌트에 파란색 왼쪽
     보더가 없는지, 그리고 모서리가 rounded-md 스타일로 적용되었는지 확인합니다.
3. 질문 수정/삭제 기능 테스트:
   • 질문을 수정하고 저장할 때, UI가 즉시 업데이트되는지 확인합니다.
   • 네트워크 요청을 차단하거나 서버 에러를 시뮬레이션하여 수정 실패 시 UI가 이전 상태로
     롤백되는지 확인합니다.
   • 질문을 삭제할 때, UI에서 해당 질문이 즉시 사라지는지 확인합니다.
   • 네트워크 요청을 차단하거나 서버 에러를 시뮬레이션하여 삭제 실패 시 UI가 이전 상태로
     롤백되는지 확인합니다.
   • 수정 및 삭제 시 toast 알림이 올바르게 표시되는지 확인합니다.
4. 로딩 스피너 색상 확인:
   • 새 질문 생성 폼 및 새 토픽 시작 폼에서 질문을 제출할 때 로딩 스피너의 색상이 파란색이
     아닌 회색 톤으로 표시되는지 확인합니다.
5. 전역 스타일 확인:
   • 애플리케이션 전반적으로 변경된 색상 팔레트(회색 톤)가 올바르게 적용되었는지 확인합니다.
6. 토픽 이름 변경 시 전역 상태 업데이트 확인:
   • 사이드바에서 토픽 이름을 수정했을 때, 해당 토픽의 상세 페이지(/[id]/page.tsx)에서 토픽
     이름이 즉시 업데이트되는지 확인합니다.
7. 빌드 및 실행:
   • npm install 및 npm run dev 또는 npm run build를 실행하여 애플리케이션이 오류 없이
     빌드되고 정상적으로 실행되는지 확인합니다.