[ Style ] 설정 뷰 내의 경고 모달 뷰 구현

[seueooo]

🔥 Related Issues

• close [ Style ] 설정 뷰 경고 모달 구현 #222

✅ 작업 리스트

• ButtonAlert 생성
• ModalContentsAlert 생성

🔧 작업 내용

설정 뷰 내에서 사용되는 경고 모달 뷰를 구현했습니다!

경고 모달 내에서 사용되는 버튼은 경고 모달 안에서 공통으로 사용할 수 있게 primary, danger로 variant 설정한 ButtonAlert 컴포넌트 생성했습니다. 현재 경고 모달이 설정 뷰 안에만 있으므로 Setting 폴더 안의 components에 위치해뒀습니다.

ModalContentsAlert 컴포넌트를 생성하고, variant를 'logout' | 'delete-account' | 'delete-account-complete'로 설정하여 세 가지 경고 뷰를 하나의 컴포넌트 안에 담았습니다.

코드리뷰 반영하여 Setting 폴더 안에 ModalContentsAlert 폴더 생성하고 Logout, DeleteAccount, Complete 파일 생성한 후에 ModalContentsAlert.tsx에서 하나의 객체로 export하도록 했습니다.

const ModalContentsAlert = {
	Logout: Logout,
	DeleteAccount: DeleteAccount,
	Complete: Complete,
};

export default ModalContentsAlert;

사용 예시

<ModalWrapper ref={modalRef} backdrop={true}>
       <ModalContentsAlert.Logout/>
</ModalWrapper>

<ModalWrapper ref={modalRef} backdrop={true}>
       <ModalContentsAlert.DeleteAccount userEmail={userEmail} handleClose={handleClose}/>
</ModalWrapper>

<ModalWrapper ref={modalRef} backdrop={true}>
       <ModalContentsAlert.Complete userEmail={userEmail} handleClose={handleClose}/>
</ModalWrapper>

🤔 궁금한 점

경고 모달이 세 가지 뷰로 나뉘어서, 이걸 svg와 텍스트, input창을 children props으로 받아서 사용하도록 할까 고민하다가, 어차피 현재는 설정뷰에서만 경고모달이 존재하고, 재사용이 필요하면 나중에 경고모달이 늘어날때 분리해도 괜찮을 것 같아 일단은 variant를 설정하여 한 컴포넌트에다 두었습니다.
아니면 이걸 각각의 컴포넌트로 나눠서 사용하는게 나을까요? input창에 에러 상태랑 스타일 추가하니까 코드가 좀 긴것 같기도.. 의견이 궁금합니다

참고로 뷰 퍼블리싱만 하고 모달 연결은 해두지 않았습니다..!

📸 스크린샷 / GIF / Link

logout

delete-account

2024-12-05.8.24.24.mov

delete-account-complete

[suwonthugger]

고생 많으셨습니다~~
경고 모달이라는 의미에서 비슷한 맥락이기 때문에 variant를 주어서 구현해주셨군요.
흠 제 생각에는 이 3개의 모달은 스타일이 모두 달라서 variant 보다는 다른 컴포넌트다 라는 것을 나타내주면 좋을것 같은데요.
합성 컴포넌트 패턴으로 사용할수 있게 하면 어떨까 싶은데 다른 분들은 어떻게 생각하시나요? @KIMGEONHWI @Ivoryeee

const ModalContentsAlert = {
  Logout: LogoutModal,
  DeleteAccount: DeleteAccountModal,
  Complete: CompleteModal,
}

export default ModalContentsAlert

<ModalWrapper>
  <ModalContentsAlert.Logout/>
<ModalWrapper>

<ModalWrapper>
  <ModalContentsAlert.DeleteAccount/>
<ModalWrapper>

<ModalWrapper>
  <ModalContentsAlert.Complete/>
<ModalWrapper>

[suwonthugger]

p1: api 연결 시 해당 부분에는 실제 이메일을 넣어야되기 때문에 prop으로 받을 수 있게 변경 부탁드려요!

<p className="subhead-bold-22 flex justify-center text-white">{`${userEmail} 계정이`}</p>
	<p className="subhead-bold-22 mb-[3rem] flex justify-center text-white">
		영구적으로 삭제됩니다. 삭제하시겠습니까?
	</p>

[suwonthugger]

p1: 이 부분의 이메일도 prop으로 받을수 있게 변경 부탁드립니다~~

[suwonthugger]

p1: 이 부분도 이메일 prop으로 받을수있게 부탁드려요~

[Ivoryeee]

수고 많으셨습니다!! 👍🏻

[Ivoryeee]

p1: 이 부분도 prop으로 변경해 주세요!

[Ivoryeee]

p5: 에러 부분 스타일을 분리해 두신 이유가 있을까요? 테일윈드를 사용하는 만큼 스타일로 인해 가독성이 크게 저하되지 않는다면 클래스 내에 직관적으로 나타내도 좋을 것 같아요!

[KIMGEONHWI]

p5: 에러 부분 스타일을 분리해 두신 이유가 있을까요? 테일윈드를 사용하는 만큼 스타일로 인해 가독성이 크게 저하되지 않는다면 클래스 내에 직관적으로 나타내도 좋을 것 같아요!

저도 이 의견에 동의합니다!

[seueooo]

반영했습니다~

[seueooo]

고생 많으셨습니다~~ 경고 모달이라는 의미에서 비슷한 맥락이기 때문에 variant를 주어서 구현해주셨군요. 흠 제 생각에는 이 3개의 모달은 스타일이 모두 달라서 variant 보다는 다른 컴포넌트다 라는 것을 나타내주면 좋을것 같은데요. 합성 컴포넌트 패턴으로 사용할수 있게 하면 어떨까 싶은데 다른 분들은 어떻게 생각하시나요? @KIMGEONHWI @Ivoryeee

저는 좋은 의견인 것 같습니다!! variant 보다는 다른 컴포넌트다 라는 것을 나타내주면 좋을 것 같다는 의견에 동의하나 경고모달이라는 공통점이 있고 사용하기에 더 편리할 것 같아서 이렇게 구현했는데, 합성 패턴을 이용하면 각각의 역할을� 더 명확하게 하고 확장성을 유지할 수 있겠네요!! 반영하겠습니다~

[Ivoryeee]

고생 많으셨습니다~~ 경고 모달이라는 의미에서 비슷한 맥락이기 때문에 variant를 주어서 구현해주셨군요. 흠 제 생각에는 이 3개의 모달은 스타일이 모두 달라서 variant 보다는 다른 컴포넌트다 라는 것을 나타내주면 좋을것 같은데요. 합성 컴포넌트 패턴으로 사용할수 있게 하면 어떨까 싶은데 다른 분들은 어떻게 생각하시나요? @KIMGEONHWI @Ivoryeee

const ModalContentsAlert = {
  Logout: LogoutModal,
  DeleteAccount: DeleteAccountModal,
  Complete: CompleteModal,
}

export default ModalContentsAlert

<ModalWrapper>
  <ModalContentsAlert.Logout/>
<ModalWrapper>

<ModalWrapper>
  <ModalContentsAlert.DeleteAccount/>
<ModalWrapper>

<ModalWrapper>
  <ModalContentsAlert.Complete/>
<ModalWrapper>

말씀 주신대로 합성 컴포넌트를 사용한다면 역할 분리와 재사용성 측면에서 더 좋은 구현이 될 것 같아요!

[KIMGEONHWI]

p1: 이 부분의 이메일도 prop으로 받을수 있게 변경 부탁드립니다!

[KIMGEONHWI]

p1: 이 부분의 이메일도 prop으로 받을수 있게 변경 부탁드립니다!

[KIMGEONHWI]

p5: 에러 부분 스타일을 분리해 두신 이유가 있을까요? 테일윈드를 사용하는 만큼 스타일로 인해 가독성이 크게 저하되지 않는다면 클래스 내에 직관적으로 나타내도 좋을 것 같아요!

저도 이 의견에 동의합니다!

[KIMGEONHWI]

p1: 이 부분의 이메일도 prop으로 받을수 있게 변경 부탁드립니다!

[KIMGEONHWI]

고생 많으셨습니다~~ 경고 모달이라는 의미에서 비슷한 맥락이기 때문에 variant를 주어서 구현해주셨군요. 흠 제 생각에는 이 3개의 모달은 스타일이 모두 달라서 variant 보다는 다른 컴포넌트다 라는 것을 나타내주면 좋을것 같은데요. 합성 컴포넌트 패턴으로 사용할수 있게 하면 어떨까 싶은데 다른 분들은 어떻게 생각하시나요? @KIMGEONHWI @Ivoryeee

const ModalContentsAlert = {
  Logout: LogoutModal,
  DeleteAccount: DeleteAccountModal,
  Complete: CompleteModal,
}

export default ModalContentsAlert

<ModalWrapper>
  <ModalContentsAlert.Logout/>
<ModalWrapper>

<ModalWrapper>
  <ModalContentsAlert.DeleteAccount/>
<ModalWrapper>

<ModalWrapper>
  <ModalContentsAlert.Complete/>
<ModalWrapper>

저도 합성 컴포넌트 패턴을 적용하는 것이 좋아보여요. 한컴포넌트내에서 상반되는 디자인들을 모두 처리하려고 하다보니, 코드 가독성도 많이 떨어지는 거 같습니다.

[suwonthugger]

제가 말씀을 잘못드렸는데 위 방식은 합성 컴포넌트 방식이라기보다는 단순히 컴포넌트를 매핑해서 export 하는 방식이라고 할 수 있겠네요! 이점 유의 부탁드립니다

[suwonthugger]

logout, DeleteAccount, complete 컴포넌트를 모두 파일로 분리했주셨군요!
개인적인 의견으로 3개의 컴포넌트를 모두 ModalContentAlert에 작성하는게 관련성 있는것을 더 가까히 배치해서 가독성을 높일 수 있지 않을까 싶어요.
코드의 길이가 매우 길어진다면 분리해도 무방하겠지만 지금 같은 상황에서는 하나의 파일에서 관리하는게 어떨까 싶은데 어떻게 생각하시나요?!
@KIMGEONHWI @Ivoryeee 다른 분들 의견도 궁금합니다.

[seueooo]

logout, DeleteAccount, complete 컴포넌트를 모두 파일로 분리했주셨군요! 개인적인 의견으로 3개의 컴포넌트를 모두 ModalContentAlert에 작성하는게 관련성 있는것을 더 가까히 배치해서 가독성을 높일 수 있지 않을까 싶어요. 코드의 길이가 매우 길어진다면 분리해도 무방하겠지만 지금 같은 상황에서는 하나의 파일에서 관리하는게 어떨까 싶은데 어떻게 생각하시나요?! @KIMGEONHWI @Ivoryeee 다른 분들 의견도 궁금합니다.

좋은 의견 감사합니다! 컴포넌트가 길어져 가독성을 해칠 수 있다고 생각해 분리했지만, ModalContentsAlert 폴더 내에서 관리하기 때문에 관련성 있는 코드가 모여 있다는 점에서는 가독성 측면에서 크게 차이가 없다고 생각했습니다.
개인적으로는 현재 방식과 하나의 파일로 합치는 방식 모두 큰 문제는 없다고 보는데,, 현재는 경고모달이 많지 않으니 합치는게 좋을지,, 다른 분들의 의견도 궁금합니다! @Ivoryeee @KIMGEONHWI

[KIMGEONHWI]

logout, DeleteAccount, complete 컴포넌트를 모두 파일로 분리했주셨군요! 개인적인 의견으로 3개의 컴포넌트를 모두 ModalContentAlert에 작성하는게 관련성 있는것을 더 가까히 배치해서 가독성을 높일 수 있지 않을까 싶어요. 코드의 길이가 매우 길어진다면 분리해도 무방하겠지만 지금 같은 상황에서는 하나의 파일에서 관리하는게 어떨까 싶은데 어떻게 생각하시나요?! @KIMGEONHWI @Ivoryeee 다른 분들 의견도 궁금합니다.

저도 한서님의 의견에 동의합니다! 폴더구조 변경 작업 들어가게 되면, 동일 폴더 내에서 관리될 것이라 가독성 측면에서는 문제 없을 것이라고 판단됩니다. 또한, 추후에 경고모달이 추가되게 되면 코드가 길어져서 오히려 관리하기 힘들수도 있을것 같아요.

[Ivoryeee]

logout, DeleteAccount, complete 컴포넌트를 모두 파일로 분리했주셨군요! 개인적인 의견으로 3개의 컴포넌트를 모두 ModalContentAlert에 작성하는게 관련성 있는것을 더 가까히 배치해서 가독성을 높일 수 있지 않을까 싶어요. 코드의 길이가 매우 길어진다면 분리해도 무방하겠지만 지금 같은 상황에서는 하나의 파일에서 관리하는게 어떨까 싶은데 어떻게 생각하시나요?! @KIMGEONHWI @Ivoryeee 다른 분들 의견도 궁금합니다.

저도 동의합니다! 파일을 번갈아 보며 코드를 확인하는 것도 비용이기에 현재 코드 상으로는 같은 파일 내에 위치시키는 게 가독성을 높일 수 있을 것 같습니다. 추후 코드가 길어지게 돼 코드 가독성 저하가 우려된다면 그때 특정 파일로 분리해도 좋을 것 같아요!