Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] refactor : 리뷰 링크 관련 컴포넌트,훅,유틸 위치 변경 #1057

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from

Conversation

BadaHertz52
Copy link
Contributor

@BadaHertz52 BadaHertz52 commented Jan 14, 2025


🚀 어떤 기능을 구현했나요 ?

  • 회원기능이 추가되면서, 홈 페이지외의 다른 페이지에도 사용되는 리뷰 링크를 생성과 관련된 컴포넌트,훅,유틸 위치를 변경했어요

리뷰 링크 관련 컴포넌트가 담긴 폴더 구조

📦reviewURL
 ┣ 📂FormBody
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜styles.ts
 ┣ 📂FormLayout
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜styles.ts
 ┣ 📂InputField
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜style.ts
 ┣ 📂PasswordField
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜style.ts
 ┣ 📂ReviewZoneURLModal
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜styles.ts
 ┣ 📂URLGeneratorForm
 ┃ ┣ 📂components
 ┃ ┃ ┗ 📂URLGeneratorButton
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂usePostDataForReviewRequestCode
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┗ 📜test.tsx
 ┃ ┃ ┗ 📜useURLGeneratorState.ts
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜style.ts
 ┣ 📜ReviewGroupDataField.tsx
 ┗ 📜index.ts
  • 리뷰 연결/목록/상세 페이지에서 사용 가능한 리뷰 리퀘스트 코드를 리뷰 링크 생성 시 발급하도록 변경
    • 목 서버에서 리뷰 링크 생성 시 반환하는 리뷰 리퀘스트 코드와 리뷰 연결/목록/상세 페이지에서 사용 가능한 리뷰 리퀘스트 코드를 통일했어요.

🔥 어떻게 해결했나요 ?

  • 하나의 컴포넌트에 관련된 훅,유틸은 해당 컴포넌트 하위에 두는 컨벤션을 지키면서 최대한 폴더/파일 뎁스가 깊어지지 않게 했어요.
  • 원래 inputs라는 폴더로 inputField가 묶여있었는데, components/reviewURL 폴더로 옮긴 상황이에요. 여기에 추가로 폴더를 묶으면 뎁스가 길어져 피로도가 높을 거고 묶지 않아도 폴더명/파일명으로 충분히 inputField라는 겻을 인식할 수 있겠다 판단했어요.
  • InputField, PasswordField 관련 스타일이 URLGeneratorForm/style.ts에 들어있어서 스타일을 각각 분리했어요.
  • validateInput의 경우 @/utils로 이동했어요. 여러 페이지에서 사용 중인 usePasswordValidation훅에서도 사용 중이라 공통 유틸로 빼는 편이 좋을 거라 판단했어요.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

  • file change가 많아서 파일 자체보다는 파일/폴더 구조를 보는 것을 먼저 보는 것을 추천드려요

📚 참고 자료, 할 말

⚠️ 폴더 위치 변경으로 file change가 많습니다. 그래서 이 pr 머지 후 새로운 브랜치를 파서 작업하는 것을 권장드려요.

- components/reviewURL 폴더로 이동
- URLGeneratorForm/style.ts 파일명 변경 (styles.ts -> style.ts)
- URLGeneratorForm/style.ts에서 InputField, PasswordField 스타일 분리
- 리뷰 연결 페이지에서 사용 가능한 리뷰 리퀘스트 코드를 리뷰 링크 생성 시 발급하도록 변경
@ImxYJL
Copy link
Contributor

ImxYJL commented Jan 15, 2025

먼저 원활한 로그인 작업을 위해 폴더 구조를 손봐준 바다 짱...! 👍🥰 목데이터에도 중복이 있었군요...
대 AI 시대임에도 이런 번거로운 작업은 인간이 손수 해야 한다니 😂

validateInput이 유틸로 빠진 것, inputs 폴더를 삭제하는 것은 동의합니다!
다만 FormLayout, FormBody, InputField...같은 폼을 이루는 컴포넌트들은 form으로 한번 더 묶어버리고, reviewURL 폴더 하위에는 ReviewZoneURLModal처럼 실제로 사용하는 컴포넌트들만 보여주는 건 어떤가요?

폴더 뎁스가 깊어져서 생기는 귀찮음도 있지만, 폴더를 열었을 때 등장하는 것들이 많은 것도 나름 보기 힘들겠다는 생각이 들어서요.
저 컴포넌트들(FormLayout~)은 새로운 폼 UI를 만들 때는 열어서 사용해야겠지만, 개발 이후 흐름을 파악할 때는 꼭 들어가볼까? 싶어 제안합니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

[FE] 리뷰 링크 생성 폼 컴포넌트 폴더 위치를 변경한다
2 participants