[🎉 In The Zoo - 우수작 선정🎉] X 클론 코딩 챌린지 2주 마무리

✔ 개요

https://nomadcoders.co/twitter-contest

2주 트위터 클론코딩 컨테스트 – 노마드 코더 Nomad Coders

X 그대로 클론 코딩하기보다 동물들을 보며 자랑 및 힐링하는 트위터 X를 만들고 싶었다.

+ 이번 기회에 react, typescript, firebase 모두 친해지기

 

✔ 콘셉트

동물 자랑 사이트

자신이 키우는 또는 좋아하는 동물, 캐릭터 애니 등 자랑하고 아끼는 모습을 보여주며 서로 힐링하는 사이트.

 

 

- 최종 배포 URL

https://inthezoo-f1fc8.web.app/

In The Zoo

- github code URL

https://github.com/namoong0917/inthezoo

GitHub - namoong0917/inthezoo

 

📷 스크린샷

1. 로그인 화면

로그인 화면

 

2. HOME 화면, 업로드

업로드 화면

textarea 박스를 클릭하면 작성하기 편하도록 :focus를 활용해 height 값을 20vh 정도 주었습니다.

그러나 포커스가 활성화되어있는 상태에서 이미지 로고나 포스팅 버튼을 누르면 포커스를 잃기 때문에

박스가 다시 올라간다는 점이 있는데 이 부분은 고민 중이다.

 

3. 게시물 삭제

게시물 삭제

 

🛠 추가할 부분

• 업로드 날짜 시간 설정 or 현재 시작을 통해 몇 분 전 몇 시간 전으로 표시되게 하기
• 프로필에서 프로필 사진 호버시 편집할 수 있다는 걸 알려주는 svg 넣기
• search bar + 기능 구현
• 좋아요 하트
• 프로필에 좋아요 한 목록 보기
• 구글, 카카오 로그인
• 유저 고유아이디 표시 추가

🛠 수정할 부분

• 프로필에서 게시글 삭제 시 새로고침을 해야 사라지는 것 수정 필요
• textarea 박스 포커스 수정

🎊 우수작 선정!

https://nomadcoders.co/community/thread/9518

트위터 클론코딩 컨테스트. 4기 졸업하셨어요 :) – 노마드 코더 Nomad Coders

몇십 명으로 시작한 것 같은데 우수작 선정되어 기분 좋다.:)😊