refactor: study·signup 플로우 리팩터링 및 terms 버그 수정#67
Conversation
…ng to study-splash
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
JuHyeong424
left a comment
JuHyeong424
left a comment
There was a problem hiding this comment.
굿 만나서 더 자세한 이야기를 해봐요
There was a problem hiding this comment.
보면 requestAlarm, skipAlarm을 처음에 setLoading(true)를 해주는데 이후의 잘 동작하는과정에서 setLoading(false)를 기존에는 호출하지 않고 있습니다.
또한 router/push와 postMessage는 동기 호출이고 실제로 throw하지 않는데 지금 보면 catch블록은 도달하지못하는 데드코드이고, loading이란 오버레이는 해제되지 않는 구조라 로딩상태와 에러상태 두개를 제거했습니다.
더 깊은 이해를 위해서 말슴드리자면 postMessage는 웹뷰 브릿지에 메세지를 queue에 넣는 것뿐이라, 전달이 성공됬는지 실패됬는지에 대한 여부를 동기적으로 알 수도 없고 실패해도 throw하지 않습니다.
router.push또한 네비게이션을 예약만하고 즉시 반환되기 때문에 실제 페이지 전환은 나중에 비동기로 일어나는데 그 과정에서의 에러는 어쩔수없이 try블록 밖에서 발생하게 됩니다.
There was a problem hiding this comment.
닉네임 설정인데 아이디 로직 있어서 이상함.
손 봐야할듯
There was a problem hiding this comment.
음.. 닉네임 설정관련 훅이라기보다는 회원가입 완료 훅에 가까웠기 때문에 이름을 useSignupSubmit으로 네이밍해서 직관적으로 알 수 있게 했습니다.
| {needSettings && ( | ||
| <div | ||
| onClick={() => setNeedSettings(false)} | ||
| onClick={clearNeedSettings} |
There was a problem hiding this comment.
보면 커스텀훅으로 clearNeedSettings라고 빼놨는데 useCallback으로 감쌌죠, 원래 콜백함수로 되어있을때는 컴포넌트가 렌더링될 때마다 새 함수를 만들었는데 이렇게 useCallback으로 메모이제이션해서 참조를 안정적으로 만들기 위해 조치해놨습니다.
2 participants
PR 타입
Refactor : 코드 리펙토링
반영 브랜치
refactor/study-flow -> dev
변경 사항
[study 리팩터링]
useDeviceCornerRadius 커스텀 훅 추출
7개 파일에 동일하게 반복되던 RN WebView 메시지 처리 + cornerRadius 상태 관리 코드를 커스텀 훅으로 분리했습니다. RN 통신 방식이 바뀌어도 한 파일만 수정하면 됩니다.
🔗 f45faa4
listen/page.tsx 역할 분리
8가지 책임이 한 파일에 몰려있던 구조를 useListenAudio, useStudyComplete 커스텀 훅과 ListenView 컴포넌트로 분리했습니다.
🔗 d374301
listen/page.tsx 서버 컴포넌트 전환
클라이언트에서 useEffect 두 개로 순차 fetch하던 방식을 서버 컴포넌트에서 Promise.all 병렬 fetch로 전환했습니다. 다른 step들의 fetch 패턴과 통일했습니다.
🔗 84921fb
study/_components → [step]/_components 이동
[step]/page.tsx에서만 쓰이는 컴포넌트들이 상위 폴더에 위치해있던 구조를 사용되는 위치 기준으로 이동했습니다.
🔗 8ac495f
StepIntroPage 공유 컴포넌트 추출
step2-intro, recall-intro, record-intro 세 페이지에 100% 동일하게 반복되던 borderSpin 애니메이션, 라우팅 로직을 공유 컴포넌트로 통합했습니다.
🔗 c82522f
Record.tsx fetch 패턴 통일
Record 컴포넌트가 단독으로 Firebase를 재호출하던 구조를 제거하고 page.tsx에서 props로 내려받도록 변경했습니다. 동일 verseId에 대한 이중 fetch가 제거됩니다.
🔗 9ae5d78
useRNRecordPermission 커스텀 훅 분리
Record.tsx에서 RN 마이크 권한 브릿지 로직을 커스텀 훅으로 분리했습니다. function 키워드 호이스팅을 활용해 beginRecording과 훅 간의 순환 참조 문제를 해결했습니다.
🔗 7b7e541
completeListening, completeRetry 폴더 이동
verseId 컨텍스트 없이 study/ 최상위에 있던 두 페이지를 [verseId]/ 하위로 이동했습니다.
🔗 636768e
[signup 리팩터링]
afterLogin → signup 폴더명 및 URL 정리
URL만 봐서는 역할을 알 수 없던 /afterLogin 구조를 /signup으로 변경하고 하위 라우트도 케밥케이스로 통일했습니다. (setNickName → set-nickname, setAlarmTime → set-alarm-time 등)
🔗 f227a2b
a11y 및 alt 수정
<p> 태그로 구현된 버튼을<button>으로 교체하고, 이미지 alt 불일치(hungryTolli → 실제 이미지 설명)를 수정했습니다.🔗 d11c318
WheelPicker 컴포넌트 분리
set-alarm-time/page.tsx에 인라인으로 정의되어 있던 WheelPicker를 _components/WheelPicker.tsx로 분리했습니다.
🔗 ff063f9
useSignupSubmit 커스텀 훅 분리 + 버그 수정
80줄 이상의 handleSubmit을 커스텀 훅으로 분리했습니다. 함께 encodeURIComponent 누락과 정규식 g 플래그로 인한 lastIndex 버그도 수정했습니다.
🔗 54effdb
Link 안 button 중첩 구조 제거 / loading 데드코드 제거
안 중첩(HTML 스펙 위반)을 제거하고, happy path에서 해제되지 않는 loading 상태와 불필요한 catch 블록을 제거했습니다.
🔗 54effdb
[terms 리팩터링]
필수 동의 미체크 시 버튼 disabled 미적용 버그 수정
opacity-40으로 시각적으로만 막혀있던 버튼이 실제로는 클릭 가능해서 동의 없이 다음 단계로 넘어갈 수 있었습니다. disabled 속성을 추가해 클릭 자체를 차단했습니다.
🔗 85fa743
테스트 결과