[FEAT] [HIGH-68] 쇼츠, 모달 QA 수정 및 금칙어 검사

[0Jaemin0]

User description

✨ PR 세부 내용

• 사용자 이름 금칙어 검사 로직 구현
• 외부 클릭 감지를 위한 공통 useOutsideClick 훅 구현
• 쇼츠 영상 무한 스크롤 강제 지속 처리 추가

☑️ 체크리스트

🛠 기본 검사 항목

• ESLint 검사 완료
• Prettier 적용
• 함수, 변수, 파일 네이밍 검토
• 코드 작성 순서 (import, 내부 코드) 점검
• 폴더 구조에 맞는 파일 분리 여부 확인
• 코드 작성 스타일 점검

📸 스크린샷

✅ 리뷰 요구사항

사용자 이름 금칙어에 대한 에러 메시지를 이름 입력창 하단에 표시하는 것과 다음 버튼 근처에 표시하는 것 중, UX적으로 어떤 위치가 더 적절한지 조언해주시면 감사하겠습니다.

---

PR Type

Bug fix, Enhancement

---

Description

• Add API call and mutation for name profanity check

• Display error and block next on reserved names

• Implement outside-click hook for modal closure

• Fix infinite scroll by treating null cursor as zero

---

File Walkthrough

	Relevant files

---

[netlify]

✅ Deploy Preview for lead-me ready!

Name	Link
🔨 Latest commit	7a7ae81
🔍 Latest deploy log	https://app.netlify.com/projects/lead-me/deploys/68944a0304803400084769f0
😎 Deploy Preview	https://deploy-preview-58--lead-me.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing imports The Name component uses Input and useUserStore but lacks the corresponding import statements, leading to runtime errors. const Name = ({ setStep, isActive, nameInputRef, hasNameError }: NameProps) => { const name = useUserStore((state) => state.user.name); const setName = useUserStore((state) => state.setName); const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => { setName(e.target.value.replace(/\s/g, "")); }; return ( <section aria-labelledby="name-heading" className="flex flex-col gap-9 w-[90%] max-w-sm"> <h2 id="name-heading" className="sr-only"> 이름 확인 </h2> <div className="flex flex-col gap-2"> <Input ref={nameInputRef} className={`h-14 bg-white !text-heading-h1 font-pretendard text-center leading-[5rem] px-4 rounded-md focus:border-2 focus:border-custom-point focus:border-2 focus:border-custom-point ${ isActive ? "border-2 border-custom-point" : "border border-transparent" }`} placeholder="이름을 작성해주세요" value={name} onChange={handleNameChange} /> {hasNameError && ( <p className="text-body-md text-red-500" role="alert" aria-live="polite"> 이름에 사용할 수 없는 단어가 있어요. </p> )} </div> Error flag not reset The hasNameError flag isn’t cleared on successful validation, so once set, the error persists even after entering a valid name. const handleNextClick = async () => { try { const result = await mutateSlangCheck(name); if (result.slangFlag) { setHasNameError(true); nameInputRef.current?.focus(); return; } setStep("content"); } catch (error) { makeToast( "이름 확인 중 문제가 발생했어요. 잠시 후 다시 시도해주세요.", "warning" ); } }; Infinite pagination loop Treating nextCursor null as 0 may cause continuous requests when 0 is a valid cursor. Consider using undefined to stop pagination. queryFn: ({ pageParam = null }) => getShorts({ cursor: pageParam as number }), getNextPageParam: (lastPage) => { return lastPage.nextCursor === null ? 0 : lastPage.nextCursor; },

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Return undefined at pagination end The getNextPageParam should return undefined instead of 0 when there is no next page, otherwise the infinite query will continue fetching with a cursor of 0. Change the return value to undefined or use nullish coalescing. src/hooks/queries/shorts/useShortsInfiniteQuery.ts [11-13] -getNextPageParam: (lastPage) => { - return lastPage.nextCursor === null ? 0 : lastPage.nextCursor; -}, +getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined, Suggestion importance[1-10]: 9 __ Why: Returning 0 as the next cursor causes the infinite query to refetch with a valid page parameter instead of stopping; using undefined correctly halts pagination.	High