[fix-205/create-nbread] 엔빵 생성 시 카드에서 저장하기 또는 수정하기 버튼 클릭 시 동작하지 않음

[junghogil96]

버그 요약

엔빵 생성(생성 폼 → 미리보기) 화면에서 NbreadCard / NbreadEditCard에 내장된 "수정하기" / "저장하기" 버튼을 클릭하면 아무 동작도 하지 않고 콘솔에 에러가 발생한다.

재현 방법

1. /nbread/create에서 엔빵 생성 폼을 작성한다.
2. /nbread/preview(미리보기 화면)로 이동한다.
3. 카드 우측 상단의 "수정하기" 탭을 클릭한다. (또는 생성 폼 화면 카드 내부의 "저장하기" 탭 클릭)

기대 동작

• /nbread/create (생성 폼) 화면: 카드 내부의 "저장하기" 버튼은 불필요하므로 노출되지 않아야 함 (화면 하단의 별도 "저장하기" 버튼으로만 다음 단계로 진행)
• /nbread/preview (미리보기) 화면: "수정하기" 버튼은 실제로 동작해야 하며, 클릭 시 저장 전 입력값을 수정할 수 있어야 함

실제 동작

클릭 시 아무 반응 없이 아래 에러가 발생함.

Uncaught TypeError: n is not a function
    at onClick (page-4747408fc3cdf684.js:1:1235)
    at onClick (page-aaced14a5aa61764.js:1:7538)
    ...

원인 분석

• nbreadCard.tsx: userData.id === nbreadData.leaderId일 때 "수정하기" Tab을 렌더링하며, onClick={() => handleEditingNbread!()}로 non-null assertion을 사용해 강제 호출한다.
• nbreadEditCard.tsx: "저장하기" Tab을 조건 없이 항상 렌더링하며, 동일하게 handleEditingNbread!()로 강제 호출한다.
• 두 컴포넌트 모두 handleEditingNbread가 optional prop(?:)인데도 호출부에서 ! non-null assertion을 붙여 실제로 undefined가 들어오면 런타임에서 TypeError가 발생한다.
• 정상적으로 동작하는 유일한 사용처는 NbreadDetail.tsx로, 기존 엔빵 상세/수정 화면에서만 handleEditingNbread 핸들러를 전달한다.
• 반면 생성 플로우에서 재사용되는 아래 두 곳은 핸들러를 넘기지 않는다.
  • src/app/nbread/preview/page.tsx → NbreadCard에 handleEditingNbread 미전달
  • src/app/nbread/create/page.tsx → NbreadEditCard에 handleEditingNbread 미전달

영향 범위

• 엔빵 생성/미리보기 화면에서만 발생 (엔빵 상세 화면은 정상)
• 사용자가 실수로 카드 내부 버튼을 누르면 흰 화면 없이 조용히 실패하며, 콘솔 에러 외에는 사용자에게 아무 피드백이 없음

제안하는 해결 방향

1. /nbread/create: NbreadEditCard의 "저장하기" 버튼은 handleEditingNbread가 없을 때 렌더링하지 않도록 조건을 추가한다 (이 화면에서는 하단의 별도 "저장하기" 버튼만 사용).
2. /nbread/preview: NbreadDetail.tsx의 isEditing 토글 패턴을 참고해, "수정하기" 클릭 시 NbreadCard ↔ NbreadEditCard를 전환하고 실제 handleEditingNbread 핸들러를 전달한다. 단, 이 시점에는 아직 DB에 저장되지 않았으므로 updateNbread 호출 대신 수정 결과를 useNbreadStore의 로컬 상태에만 반영한다.

재현 환경

• 배포: dpl_2nYkcKfkeR98bDnMWG9q6ge4Skbz
• 화면:

1. 엔빵 생성 → 저장하기미리보기

2. 엔빵 생성 → 하단 저장하기 → 수정하기