[PR] 게시글 추가 모달 컴포넌트 생성

[kimnamheeee]

#️⃣ 연관된 이슈

관련된 이슈 번호를 적어주세요. 예: #이슈번호

#8

#️⃣ 작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요. (이미지 첨부 가능)

게시글 추가 모달 컴포넌트 생성

동작은 아래 동영상 참고 부탁드립니다

redpandacompress_.2026-01-09.44641.mp4

ui 구현

• drop area

• input 영역

• exit confirm 모달

• 인터랙션 구현

  • 사진 드래그 앤 드랍
  • 클릭 후 파일 탐색기에서 업로드
  • 사진 업로드 후 '다음' 버튼 클릭시 expand
  • 게시글 input
  • 중도 이탈 시도시 이중 모달 표시
  • 10장 이상의 사진 업로드 시 앞 10장만 업로드되고 toast로 알림

• '공유하기' 버튼 클릭 시 로딩 후 '게시글이 공유되었습니다' 전환 같은 경우 api 연결 때 같이 하는 게 좋을 것 같아서 생략했습니다

#️⃣ 테스트 결과

코드 변경에 대해 테스트를 수행한 결과를 요약해주세요. 예: 모든 테스트 통과 여부, 새로 작성한 테스트 케이스 등

#️⃣ 변경 사항 체크리스트

• 코드에 영향이 있는 모든 부분에 대한 테스트를 작성하고 실행했나요?
• 문서를 작성하거나 수정했나요? (필요한 경우)
• 코드 컨벤션에 따라 코드를 작성했나요?
• 본 PR에서 발생할 수 있는 모든 의존성 문제가 해결되었나요?

#️⃣ 스크린샷 (선택)

관련된 스크린샷이 있다면 여기에 첨부해주세요.

#️⃣ 리뷰 요구사항 (선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요.
예시: 이 부분의 코드가 잘 작동하는지 테스트해 주실 수 있나요?

• 아까 yarn.lock에서 컨플릭트가 터진 걸 확인했습니다. 일단 임의로 수정해 뒀지만 혹시 모르니 다음 작업 때는 yarn.lock 파일 삭제 후 yarn install 한 번만 다시 실행해 주시면 감사하겠습니다
• 이번에도 shadcn 자동생성 코드가 좀 있어서, shared/ui 내부 파일은 dropzone.tsx만 확인하셔도 됩니다

📎 참고 자료 (선택)

관련 문서, 스크린샷, 또는 예시 등이 있다면 여기에 첨부해주세요

[github-actions]

✅ CI 통과했습니다!

• Lint / Type / Test / Build 모두 성공
• dev 브랜치로 머지 가능합니다 🚀

[c0912jy]

처음에 npm install로 인해 조금 꼬인 것 같습니다. 말씀 주신 대로 yarn install 해보겠습니다.
내용은 확인했습니다!

[c0912jy]

앗 comment로 남겼습니다