[Issue & TroubleShooting]

구현 과정에서 예상되는 문제 및 고민, 추후 해결방안을 담을 공간입니다.

Front-End

인터랙션 컴포넌트 - 추첨 이벤트 플로우 모달 간 상호작용

저희 서비스는 5개의 인터랙션 컴포넌트가 있고, 인터랙션 컴포넌트를 추첨 이벤트 플로우 모달이 감싸는 형태로 구성되어 있어요. 추첨 이벤트 플로우 모달에서는, 다음의 기능이 인터랙션 컴포넌트의 종류에 상관없이 들어가요.

• 인터랙션 컴포넌트가 어떠한 방식으로도 “상호작용”된다면, 추첨하기 버튼이 활성화되어요.
• 리셋 버튼을 클릭하면 인터랙션 컴포넌트의 초기 상태가 리셋되어요.

처음에는 각각의 컴포넌트를 감싸는 각각의 모달이 인터랙션 컴포넌트의 상태를 관리하는 것을 고려했었으나, 인터랙션의 방식이 제각기 다르고, 향후 여러 개의 인터랙션이 더 추가될 수 있으며, 인터랙션 자체를 독립적으로 구성할 수 있어야 한다고 생각했어요.

그래서 각각의 인터랙션 컴포넌트에서 reset이라는, 모든 상태를 리셋할 수 있는 함수를 외부에 노출하면 어떨까? 라고 생각했어요. 이렇게 구성하면, 인터랙션 컴포넌트는 자신이 갖고 있는 상태에만 집중할 수 있고, 인터페이스를 통해 외부와 상호작용을 할 수 있어서 응집도가 향상돼요.

이 과정에서, 어떠한 방식으로 reset 인터페이스를 외부에 노출할지가 고민입니다.

모달 관리

저희 서비스는 모달이 많아요. 모달은 독립적으로 열고, 닫을 수 있는 UI적 관심사를 가지고 있으며, 닫기 버튼을 따로 가지고 있어요. 하지만, 모달 안에는 특정한 내용이 들어가야 하며, 모달 내부 컴포넌트에서 어떠한 행동을 하면서 모달을 닫아야 하는 경우도 있어요. 문제는, 모달에 들어가는 요소마다 스타일이 다르고, 닫기 버튼 옆에 기능 버튼이 표시되는 경우도 있으며, 닫기 버튼이 x자로 표시되고 위치가 이동되는 경우도 있었어요.

우리가 직면해야 하는 과제는 크게 2개에요.

1. 어디까지를 UI적 요소로 보아서, 모달 자체 컴포넌트가 무엇까지 가지고 있어야 하는가?
2. 모달을 여는 상태를 어떻게 관리할 것인가?

Back-End