레오니드 팬 페이지 만들기 (1)
리액트경험겸
모 리껨 캐릭터들의 팬 페이지를 만들어보기로
vite + react, ts 사용
중첩라우팅? 잘 모르겠어서 일단 그냥 무지성 라우팅으로
메인에 넣을 페이지는 대충
메인(홈) / 유닛 소개 및 정보 백업 / 멤버별 페이지 / 응원 메시지 게시하는 페이지 / 유저 정보
응원메시지 게시를 위해 (그리고 여건이 된다면 멤버 sns에 reply를 다는 것도...) 파이어베이스를 이용해 authentication을 하기로 했다
근데 솔직히 그냥 익명으로 하는 게 나았을 것 같음 이런걸 누가 로그인 하고 써
연습용이니까 그냥 그렇다고 치자...
계정 생성 페이지부터 만들면
디자인은 생각하지 않았으니 개구려도 어쩔수없음 다하면 수정을 하든가 말든가....
뭔 해킹사이트같지만 무튼
파이어베이스의 이메일 로그인을 사용한다.
이미 계정이 있다면 로그인
유저네임은 안 써도 괜춘하다
비밀번호를 잊었을 경우 재설정 메일을 받을 수 있다. sendPasswordResetEmail()을 썼다 근데 이거 저번에 다른 거 만들 때 시험삼아 받았던 이메일 이제 켜봤는데 리셋이 안된다 ㅎㅎ.. 왜그럴까
그러니 비밀번호를 까먹으면 계정을 버리도록 하자
👍
그리고 이거 쓰다보니 프로텍트 라우팅을 안했다는 게 생각났다
해결
이제 로그인하지 않은 경우에는 직접 주소를 입력해도 로그인 화면으로 팅긴다
홈이랑 팀 화면에 뭘 넣을지 생각을 안해놔서 (사실 지금도) 멤버페이지부터 만들기로
웬 투디 미소녀 등장
이미지는 세카이뷰어에서 가져온 일러스트인데 공식일러 사적사용은 된다하니까... 어차피 이거 데베 만들때 테스트설정으로 해놔서 기간제임
화면이 너무 휑해서 밑에 더 넣을 게 생각난다면 추가하기로
개인 화면도 별거없다..
캐릭터 정보 적을 때 저거 일일이 그냥 복붙했다가 너무 꼴뵈기싫어서 파일 따로 빼고 임포트해서 map으로 쪼금 깔끔하게 해줬다
사실 지금도.. 멤버별 페이지를 다 따로따로 만들어놔서 상당히 불편한데 그 라우팅을... 한번에 하는 법이 잘 안 떠올라서 일단 그냥 다 때려박아놨다
추후에 개선하는걸로?
인선에 뜰 때마다 내 지갑을 착실히 털어가는 오시친구도 한번 비춰주고
밑에 test post라고 적힌 구간은 아직 안 만들었는데
이건 스토리가 있는 게임이라서... 쟤네는 목소리도 있고 대사도 다 있음
그 대사 중에서 열몇개쯤 뽑아두고 거기서 랜덤으로 몇개정도를 sns 포스트처럼 띄워보는게 어떨까 싶다
근데 어케할지도 생각 안 했고 데이터도 안 만들어서 일단 아무것도 없는 상태
뭐 완성하고 넘어간 페이지가 없군
암튼 일단 넘기고 다음
To Leo/need라는 페이지. 레오니드는 팀이름임
authentication을 한 이유인.. 그런곳이다
tmi지만 얘네는 밴드를 하고 있고.. 프로지향이라 공연도 열심히 댕기고 팬도 꽤 있고 그렇다
그러니 여긴 팬레터를 쓰는 공간이라고 보면 되겠다
근데 쓰면서 생각해보니 저 텍스트에리어 부분도 밑에랑 생긴걸 통일하는 게 좋을지도?
고칠게 좀 생기겠지만 흠
텍스트만 작성 가능하고 본인 계정에서 작성한 건 삭제할 수 있다
밑에 나나..는 다른 테스트용 계정인지라 보면 프사도 다르고 삭제도 안 되는 걸 볼 수 있다
대부분을 트위터 클론 했던 걸 참고하면서 거의 비슷하게 만들었기에 크게 막히는 건 없었는데 저기........ 프로필 사진 띄우는 데 예상치 못한 문제가 있었다
포스트를 쓴 계정의 photoURL을 불러오는데 처음에는 이걸 각 메시지가 아니라 메시지리스트 전체에서 메시지 내용과 함께 불러와 props로 내려주려고 했었다. 계속 못 불러오길래 때려치고 메시지 하나하나를 구성하는 msg.tsx 컴포넌트에서 다시 시도함
설정까지는 어찌저찌 했고 사진처럼 무난하게 작동되는 듯 보이는데...
각 계정의 프사는 파이어베이스 스토리지의 avatar/userID 형식으로 저장되게 만들었다.
그랬더니 프사가 있는 경우(사진에 보이는 나나씨의 경우)에는 잘 작동하는데, 프사가 없는 경우에는 저렇게... 오브젝트를 찾을 수 없다며 난리가 난다 (메시지 컴포넌트에 만들었으니 에러도 메시지별로 싹다 난다 와우~~~~!)
근데 콘솔 끄고 눈딱감으면 딱히 사용상의 문제는 없어서...... 후술하겠지만 프사를 넣었다 뺐다 해도 작동이 되긴 해서.... 그냥 둿음
아니 트라이캐치 했으니까 오류 있으면 그냥 딱 끝내주면 안되는걸까
캐치문 사이에 뭘 어떻게 넣어봐도 변화가 없어서 놔뒀다...
일단 흐린눈하고 마지막 유저 페이지
별거없고 그냥 로그인 유저 프사/유저네임/프사변경/로그아웃
프사 아이콘을 누르면 파일을 넣을 수 있다.
왼쪽 버튼 누르면 프로필 사진 삭제하고 기본 아이콘으로 돌아갈 수 있다.
아다리로 끼워맞췄는데 돌아가길래...
프사를 없애면 이전 프사 파일은 필요없으니까 스토리지에서 지워주겠다
스토리지에서 레퍼런스 받아오고 해당 레퍼런스의 오브젝트를 지운 뒤 유저 프로필을 업데이트해준다.
프사 변경 후 팬레터페이지로 돌아가면 잘 적용되어 있음을 확인할 수 있다.
이름 변경은.. 안 만들었음
이름은 신중하게지어야하니까요
헛소리고 여유되면 추가하는걸로
아 맞다 이메일도 적어야 되는데
스테이트도 만들어놓고 까먹음
이건 넣기만 하면 되니까 후딱 추가
음 다했다
백업도 밀리면 귀찮을 것 같아서 여기까지 하고 티스토리 켠 건데 솔직히 뭐 한 게 별로 없어가지고 쓸 것도 없네
해야되는거
홈화면 팀화면 구상
멤버 sns 데이터 만들고 구현
휑...한거 어떻게 채울지?
끝