[REFACTOR] 상세페이지 하단 토스트 & 작성 중지 경고 모달 추가

[HiJuwon]

체크리스트

• 🧰 npm run dev로 실행 환경에서 잘 돌아가는걸 확인했나요?
• 🎋 base 브랜치를 develop 브랜치로 설정했나요?
• 🖌️ PR 제목은 형식에 맞게 잘 작성했나요?
• 🏷️ 라벨은 등록했나요?
• 🙆 리뷰어는 등록했나요?

---

📌 관련 이슈번호

• Closed [REFACTOR] 상세페이지 하단 토스트 컴포넌트 추가 #66

---

✅ Key Changes

(1) 상세페이지 하단 토스트 UI를 구현했습니다.

• src/components/Toast 폴더 내
• ToastProvider.tsx 토스트 노출/삭제 트리거 및 노출시간 등 각종 상태를 관리하는 컴포넌트
• ToastViewport.tsx 토스트 UI 구현 컴포넌트 (createPortal을 사용하여 다른 DOM 계층과 분리된 컴포넌트로 화면에 나타날 수 있게 구현했습니다.)

(2) 해당 토스트 UI를 실제 상세페이지 내부에 적용했습니다.

• 상세페이지 제목 입력창(src/components/DetailView 폴더 내 DetailTitle.tsx): 제목 글자 수 20자를 넘길 경우 "최대 20자까지 작성할 수 있습니다." 토스트가 뜨게 했습니다. + 20자 이상은 작성이 안 되도록 막았습니다.
• 외부 상세페이지(ExternalDetail.tsx, WorkspaceExternalDetail.tsx): 1) 외부 툴 선택 안 했을 때 "반드시 외부 툴을 설정해야 합니다." 토스트, 2) 외부 툴 초기 설정 후 외부 항목 누르면 "외부 툴은 생성 시 한번만 설정 가능합니다." 토스트가 뜨게 했습니다.

(3) 상세페이지 작성 중 화면 바깥으로 나가려고 할 때(다른 경로로 라우팅될 때): 라우팅을 블로킹하고 작성 중지 경고 모달이 뜨도록 했습니다.

---

📸 스크린샷 or 실행영상

(1) 제목 글자수 20자 제한 토스트

20.mov

(2) 토스트 여러개 쌓일 때 (스택)

• 토스트 중복 처리를 막기 전에, 여러개가 뜰 경우 어떻게 뜨는지 보여드리기 위해 찍은 영상입니다.
• 이 영상 촬영 후 토스트 중복 처리 막았습니다.

default.mov

(3) 외부 툴 선택 안 했을 때 토스트

default.mov

(4) 외부 툴 변경 제한 토스트

default.mov

(5) 작성 중지 경고 모달

default.mov

---

💬 To Reviewers

[github-actions]

✅ PREVIEW https://veco-5o829wpd4-gaeulzzangs-projects.vercel.app

[sunhwaaRj]

오른쪽 하단에 토스트 발생하는 것 좋은 것 같아요!! 외부 툴 변경 안되도록 하는 것도 반영해주셔서 감사합니다

[github-actions]

✅ PREVIEW https://veco-j0g4mkf8v-gaeulzzangs-projects.vercel.app

[jinj00oo]

토스트 너무 고급스러워요..!! 그리고 작성 중단 경고 모달 뜨는 것도 좋은 것 같아요 수고하셨습니다!!