SideProject
-
회원가입 팝업 완성Project/실시간 채팅 앱 2022. 9. 20. 13:05
회원가입 팝업을 만들었다. 우선 팝업 내에서 상황에 따른 컴포넌트를 랜더할 수 있도록 로그인 컴포넌트와 회원가입 컴포넌트를 나누었다. 로딩방식은 Popup Content 컴포넌트에 state를 하나 부여해서 login버튼을 누르면 login에 대한 화면이 나오고, 회원가입을 누르면 login컴포넌트와 연결된 state가 false로 바뀌면서 동시에 회원가입 컴포넌트가 랜더된다. 여기서 생긴 욕심이 하나 있다. 로그인 팝업은 그냥 생겨도 아무 상관이 없는데 여기서 회원가입 버튼을 누르면 팝업 전체가 작아졌다가 다시 커지면서 회원가입창이 로딩되는 인터렉션을 구현하고 싶다. 회원가입이나 로그인이나 전체 높이가 크게 차이나지 않아서 큰 이펙트로 다가오진 않겠지만 이런 소소한 인터렉션이 내 웹에 재미를 주는 요소..
-
로그인을 위한 팝업Project/실시간 채팅 앱 2022. 9. 10. 22:14
결국 처음 접속하면 guest계정으로 chat을 이용할 수 있게 하도록 결정했다. 그리고 원한다면 login을 해서 본인 고유의 닉네임을 사용하도록 하는게 좋을 것 같다. 일회성으로 들어오는 사람도 번거롭게 가입하지 않아도 되고, 자신을 표현하고 싶다면 회원가입으로 고유 닉네임을 부여받아 활동하게 하는 게 좋은 방향이라고 결론지었다. React-Dom으로 children을 새로 render해서 기존 render된 화면 위에 새로 popUp을 띄웠다. 이제 아이디 비밀번호 입력창이랑 회원가입 배너만 만들면 될 것 같다. firebase로 할지말지 고민이긴 한데 나름 유용할 것 같다. 오늘은 시간이 없었으니 여기까지만 하도록 하고 다음엔 Login PopUp 스타일링을 완성해야겠다.