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

[BadaHertz52]

• resolves [FE] 리뷰 링크 생성 폼 컴포넌트 폴더 위치를 변경한다 #1056

---

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

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

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

📦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 머지 후 새로운 브랜치를 파서 작업하는 것을 권장드려요.

[ImxYJL]

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

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

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

[BadaHertz52]

다만 FormLayout, FormBody, InputField...같은 폼을 이루는 컴포넌트들은 form으로 한번 더 묶어버리고, reviewURL 폴더 하위에는 ReviewZoneURLModal처럼 실제로 사용하는 컴포넌트들만 보여주는 건 어떤가요?

이 부분을 고민했었는데 두 컴포넌트 모두 홈 페이지에서 사용하는 리뷰 링크 생성 폼의 디자인에 맞추어서 생성되어 있어서, 해당 폴더 하위에 두었어요.
올리의 조언은 리뷰 링크 생섬 폼/리뷰 링크 모달 이렇게 큰 기능 덩어리로 한번 더 분류를 추천하는 방향인건가요?

form 에 관련된 것들을 묶는 것으로 변경해봤는데, 하위에 컴포넌트와 훅이 있는 URLGeneratorForm 뎁스가 깊어져서 form 바꾸로 빼자니 이것도 폼이라 분류가 망땅치 않네요.

[soosoo22]

로그인을 도입함으로써 리뷰 링크 관련 컴포넌트를 홈 페이지가 아닌 여러 페이지에서 사용해야 되기 때문에 리뷰 링크 관련 컴포넌트들을 reviewURL 폴더 안에서 관리하는 것이 훨씬 좋은 것 같아요!!👍👍👍

URLGeneratorButton의 경로에서 components가 중복으로 포함되어 있어서 이거를 제거하고, URLGeneratorButton을 URLGeneratorForm 바로 하위로 이동시키는 것은 어떨까요?
ex). componets/common/reviewURL/form/URLGeneratorForm/components/URLGeneratorButton ->
components/common/reviewURL/form/URLGeneratorForm/URLGeneratorButton

[BadaHertz52]

URLGeneratorButton의 경로에서 components가 중복으로 포함되어 있어서 이거를 제거하고, URLGeneratorButton을 URLGeneratorForm 바로 하위로 이동시키는 것은 어떨까요? ex). componets/common/reviewURL/form/URLGeneratorForm/components/URLGeneratorButton -> components/common/reviewURL/form/URLGeneratorForm/URLGeneratorButton

URLGeneratorForm 에 사용하는 컴포넌트 뿐만 아니라 훅들도 여러개라서 그 하위에 컴포넌트,훅 폴더를 나누었어요.

[ImxYJL]

"두 컴포넌트 모두 홈 페이지에서 사용하는 리뷰 링크 생성 폼의 디자인에 맞추어서 생성되어 있다~"에서 두 컴포넌트가 무엇인가요? 저는 FormBody, FormLayout같은 컴포넌트라고 생각하고 읽었는데, 이렇게 특정 컴포넌트에 종속된 컴포넌트라면 그 부모 컴포넌트 하단에 있어야 하는 거 아닌가? 싶은 의문이 들어서요.

제 제안은 큰 컴포넌트들을 한번 더 묶는다기보다는 큰 컴포넌트들/공통 컴포넌트들만 reviewURL 하단에 두자는 제안이었습니다!

[BadaHertz52]

"두 컴포넌트 모두 홈 페이지에서 사용하는 리뷰 링크 생성 폼의 디자인에 맞추어서 생성되어 있다~"에서 두 컴포넌트가 무엇인가요? 저는 FormBody, FormLayout같은 컴포넌트라고 생각하고 읽었는데, 이렇게 특정 컴포넌트에 종속된 컴포넌트라면 그 부모 컴포넌트 하단에 있어야 하는 거 아닌가? 싶은 의문이 들어서요.

FormBody, FromLayout를 제가 만들기 않아서 제 나름대로 두 컴포넌트의 적용범위,재사용성을 생각해봤어요. 어떤 부모에 종속되어 있는 코드라기 보다는 props를 변경해 여러 폼에 사용할 수 있어 보이지만, 스타일이 리뷰 생성 폼에 맞춰져 있는 코드라 재사용측면에서 어렵다고 판단했어요.

현재 둘 다 URLGeneratorForm에서만 사용되고 있어요. props를 변경한다면 어느 곳에서나 쓸 수 있지만 이미 지정된 스타일로 인해 버튼 컴포넌트만큼의 재사용성이 있어보지이는 않아요. 그렇다고 리뷰 생성 폼 이외에서 사용되지 않는 상황이라 두 컴포넌트의 스타일을 확장/변경 가능하게 수정하는 것은 프로젝트 진행 상황에 맞지 않다고 판단했어요.

그래서 이 두 컴포넌트를 구현한 올리에게 묻고 싶은게, FormBodyd와 FormLayout을 컴포넌트로 따로 분리한 이유가 있을까요?
이 두 컴포넌트를 구현 할 때의 의도, 컴포넌트의 목적을 알고 싶어요.
현재 두 컴포넌트는 스타일 컴포넌트의 역할만 하고 있고 URLGeneratorForm에서 폼의 레이아웃을 판단할 때 FormBodyd와 FormLayout 두 컴포넌트 파일과 스타일을 봐야해서, URLGeneratorForm 의 스타일 컴포넌트로 합치는 방안이 생각나네요.

[ImxYJL]

구현 의도는 오래돼서 정확히 기억나지는 않지만 아마 초기에 비슷한 폼이지만 레이아웃 디자인이 조금 달랐던 케이스가 있었던 것 같아요. (어떤 폼은 가로 정렬, 어떤 경우에는 세로 정렬) 그래서 레이아웃을 별도로 추출해서 컴포넌트로 만들었는데, 바다 말대로 지금은 URLGeneratorForm 하위의 layout으로 들어가거나 아예 스타일 파일에 합치는 게 나을 것 같습니다.

궁금했던 점은 이렇게 URLGeneratorForm에 종속적인 컴포넌트들이 왜 밖으로 나와 있지? 였고요!

[BadaHertz52]

변경 사항 : FormBody,FormLayout 삭제에 따른 reviewURL 구조 변경

URLGeneratorForm 컴포넌트 변경 사항

• FormBody,FormLayout 삭제 이유 : 처음 구현 상황과 달리 URLGeneratorForm에서만 사용하며 스타일링만 담당하기 때문에 해당 스타일 코드를 URLGeneratorForm으로 이동했어요.
• FormBody,FormLayout 스타일을 URLGeneratorForm에 이관하면서, form 레이아웃을 시맨틱 하게 변경하는 작업을 추가로 진행했어요
  • 여러 input은 fieldset 태그로 묶기
  • form안에는 폼에서 사용되는 태그들을 두고, 토스트는 form과 형제 요소로 두었어요.
  • section 태그로 form을 감싼 것을 유지한 이유:
  • 형제 요소인 리뷰미 사용법 캐러셀과 리뷰 생성 폼은 모두 section으로 감싸있어서 통일성을 유지하고자 했어요.
  • 또한, 폼이 존재하는 화면 부분의 크기를 조절하면서 폼의 헤더에 맞게 폼의 너비가 결정될 수 있게하려면 폼을 전체적으로 감싸는 태그가 필요했어요. 기존의 방식대로 section 태그로 form을 감쌌습니다.

URLGeneratorForm 컴포넌트 변경하고, 릴리즈된 dev 페이지와 비교해서 스타일이 달라지지 않게 했어요. 그럼에도 스타일 상 오류가 발생했다면 알려주세요.

변경된 폴더/파일 구조

• FormBody,FormLayout 문제가 해결되면서 reviewURL를 크게 폼/모달로 분류했어요.

📦reviewURL
 ┣ 📂ReviewZoneURLModal
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜styles.ts
 ┣ 📂URLGeneratorForm
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂InputField
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜style.ts
 ┃ ┃ ┣ 📂PasswordField
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜style.ts
 ┃ ┃ ┣ 📂URLGeneratorButton
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📜ReviewGroupDataField.tsx
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂usePostDataForReviewRequestCode
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┗ 📜test.tsx
 ┃ ┃ ┗ 📜useURLGeneratorState.ts
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜style.ts
 ┗ 📜index.ts

[ImxYJL]

추가 작업까지 하느라 수고 많았어요 👍 겸사겸사 시맨틱까지 더 챙겨가게 되었네요!!

[chysis]

리뷰 링크 폼이 재사용되고 규모가 커지면서 적절한 폴더 구조 변경인 것 같아요. 추가로 수정할 부분은 없는 것 같고, 스타일 깨지는 부분도 없는 것 확인했습니다. 고생했어요!👍🏻