| 김병준 | 김재훈 | 한효림 | 김휘진 | 김동신 |
|---|---|---|---|---|
 @Captain-Kim |
 @hoondolla |
 @hyorimhan |
 @hwijinkim22 |
 @KimDongSin |
src
┣ assets
┃ ┗ react.svg
┣ components
┃ ┣ FetchData.jsx
┃ ┣ HomeFeed.jsx
┃ ┣ HomeHeader.jsx
┃ ┣ HomeInput.jsx
┃ ┣ ImgUpload.jsx
┃ ┣ Modal.jsx
┃ ┣ SignUp.jsx
┃ ┣ Test.jsx
┃ ┗ useOutsideClick.jsx
┣ image
┃ ┣ homeimage.png
┃ ┗ inputimage.png
┣ pages
┃ ┣ CommitDetail.jsx
┃ ┣ DetailPage.jsx
┃ ┣ Home.jsx
┃ ┣ LoginPage.jsx
┃ ┣ MyPage.jsx
┃ ┗ SignUpPage.jsx
┣ shared
┃ ┗ Router.jsx
┣ App.css
┣ App.jsx
┣ Globalstyles.js
┣ index.css
┣ main.jsx
┗ supabaseClient.js
- UI
- 준비중입니다.
- 기능
- 준비중입니다.
- UI
- 페이지 : 메인페이지
- 공통 컴포넌트 : 헤더, 푸터
- 기능
- 페이지의 배율을 높였을 때 버튼이 사라짐 (윈도우 기준 ctrl + 휠) (줌 레벨을 백분율로 계산하여 zoomLevel 의 * 값이 150 이상이라면 버튼들이 숨김 처리 됩니다.)
- HOME 이미지 및 각 버튼 클릭 시 페이지 이동
- 퀼 에디터로 쓴 게시글들을 dangerouslySetInnerHTML 로 불러와 피드에 렌더링
- 돋보기 그림 토글 -> 인풋창에 posts (슈퍼베이스 게시글 데이터)의 내용, 제목, 닉네임 검색 가능
- 게시글 클릭 시 게시글의 id 를 가진 상세 페이지로 이동
- 피드 갯수는 10개로 제한, 더보기 버튼 클릭 시 나머지 게시글도 노출 -> 닫기 버튼으로 바뀌며 클릭 시 원상복구 (토글)
- About us, Contact, Privacy Policy 클릭 시 팀 노션으로 이동
- UI
- 페이지 : 마이 페이지
- 기능
- 버튼 클릭시 모달창 띄워 받아 닉네임 수정 & 업데이트
- 모달창은 모달창 외부 화면 클릭시 닫히도록 만듦
- 사용자가 작성한 게시글을 불러오고, 오래된 순으로 자동 정렬
- 작성한 게시글이 없으면 새 글 작성을 유도하는 박스 표시
- 닉네임 왼쪽 이미지 클릭시 input type="file"과 연결해 이미지를 업로드, 업데이트
- UI
- 페이지 : 로그인, 회원가입 페이지
- 기능
- supabase signUp() 메서드를 이용한 회원정보 등록
- supabase signIn() 메서드를 통한 로그인 및 로그인 상태 관리
- supabase 메서드를 활용하여 회원가입 절차 진행 시에 이미 등록된 정보와 동일한 값을 입력할 경우, 중복 경고 문구 출력
- 로그인 상태에 따른 조건부 헤더 부분 버튼
- ex) 로그인 상태 시, 헤더 부분에 로그아웃, 글쓰기 버튼을 출력 / 로그아웃 상태 시, 로그인 버튼을 출력
- UI
- 기존 헤더 수정, 상세페이지 퍼블리싱
- 기능
- X
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent