회사 공지와 이미지들을 쉽게 수정하고 확인할 수 있고,
출퇴근 시간을 확인할 수 있는 직원들을 위한 위키 사이트 입니다.
개발기간: 2023.09.15 ~ 2023.09.22
| 이용훈 | 이승연 | 양재준 | 김소정 | 서지수 |
|---|---|---|---|---|
| @2YH02 | @ewinkite | @yangjaejun | @KSJT | @jseo9732 |
 |
 |
 |
 |
 |
| 갤러리 페이지 CRUD 및 세부 기능 | 로그인 페이지 로그인, 회원가입 기능 및 유저 플로우 작성 | WIKI 페이지 CRUD 및 세부 기능 | 메인 페이지 이미지, WIKI 연동 및 세부 기능 | 메인 페이지 출퇴근 기록 및 세부기능 |
📦 public
📦 src
┣📦 components 공통 또는 페이지별로 활용되는 컴포넌트가 포함된 폴더입니다.
┃ ┣ 📦 common
┃ ┣ 📦 gallery
┃ ┣ 📦 home
┃ ┣ 📦 login
┃ ┣ 📦 wiki
┃ ┣ 📦 styles
┃ ┣ 📦 utils
┣📦 db/wiki
┣📦 pages Router를 사용하여 이동할 큰 단위의 컴포넌트가 포함된 폴더입니다.
┃ ┣ 📦 gallery
┃ ┣ 📦 home
┃ ┣ 📦 login
┃ ┣ 📦 wiki
┃ ┣ 📦 styles
┃ ┣ 📦 utils
┣📜 App.tsx
┣📜 AppRouter.tsx
┣📜 main.tsx
...
커밋 컨벤션, 코딩 컨벤션, 깃허브 규칙 등의 내용은 아래의 노션 페이지를 참고해주세요!
- 출근 시간과 퇴근 시간을 기록할 수 있고 헤더에 출근 경과시간이 표시됩니다.
- 메인 페이지에서 WIKI에 있는 중요한 공지사항을 슬라이드로 보여줍니다.
- 메인 페이지에서 Gallery 페이지에 등록된 최신 사진 3개를 가져와 보여줍니다.
- 회원가입과 로그인이 가능합니다.
- 인증이 안된 유저가 다른 페이지로 접근할 시 로그인 페이지로 이동됩니다.
- WIKI 페이지에서 게시물을 CRUD 할 수 있습니다.
-
Gallery 페이지에서 게시물을 CRUD 할 수 있습니다.
이용훈: 📷 갤러리 페이지
💡 카테고리 편집에서 원하는 앨범 카테고리를 만들 수 있습니다.
카테고리를 생성하면 파이어베이스 데이터베이스에 생성 날짜와 고유한 ID 값을 가지고 저장이 됩니다.
💡 카테고리 편집에서 원하는 앨범을 만들 수 있습니다. 앨범을 생성하면
파이어베이스 데이터베이스에 생성 날짜, 상위 카테고리 ID, ID 값을 가지고 저장이 됩니다.
💡 원하는 앨범 카테고리에 원하는 이미지를 드래그나 클릭으로 추가합니다.
추가 시 이미지 미리보기, 이름, 용량, 파일타입이 화면에 보이고,
파이어베이스 스토리지에 해당 앨범의 ID 값을 이름으로 하는 폴더에 저장됩니다.
💡 앨범에 있는 이미지를 삭제합니다.
삭제 시 파이어베이스 스토리지에 저장 돼 있던 해당 이미지가 삭제됩니다
💡 이미지 클릭 시 상세보기가 가능하고 버튼 클릭과 화살표 키보드로 다음 이미지로의 방향 전환이 가능합니다.
또한 이미지 크기 조절이 가능하도록 기능을 추가하였습니다.
이승연: 🔑 로그인 페이지
💡 해당 홈페이지는 사내 사이트로, 로그인 정보가 없는 경우 login페이지로 이동합니다.
로그아웃하지 않았다면 탭 종료 후 재접속하여도 로그인 상태를 유지합니다.
💡 회원 가입 버튼 클릭시 회원 가입이 가능한 다이얼로그가 노출됩니다.
ID와 PW 값을 입력후 가입하기 버튼을 클릭시 User로 저장되며 해당 계정으로 사이트 로그인이 가능합니다.
💡 프로세스에 따라 회원가입 유효성 검사 후 얼럿을 노출합니다.
정상적으로 입력이 완료되었다면 로그인 페이지로 진입합니다.
💡 회원가입한 계정의 ID와 PW 값을 입력후 들어가기 버튼을 클릭하여 사이트 로그인이 가능합니다.
💡 프로세스에 따라 로그인 유효성 검사 후 얼럿을 노출합니다.
정상적으로 입력이 완료되었다면 메인 페이지로 진입합니다.
💡 현재 사이트 로그인 중인 User 정보를 전달합니다.
이를 통해 Header와 WIKI페이지의 등록/수정/삭제 등의 기능 구현을 지원합니다.
양재준: 📂 WIKI 페이지
💡 사용자가 위키 페이지에 접속하면, 확인할 위키를 선택 할 수 있는 사이드 메뉴와 위키의 내용을 확인하고 편집 할 수 있는 화면이 표시됩니다.
데이터베이스의 부하를 방지 하기 위해 상위 위키 항목들만 사이드 메뉴에 표시되며, 그 중 첫번째 위키가 우측 화면에 표시됩니다.
💡 사용자가 상위 위키의 화살표 버튼을 클릭하면, 해당 위키의 하위 위키 항목들을 불러옵니다.
사용자는 상위 위키를 하위 위키들을 묶는 카테고리 개념으로 활용할 수 있으며, 위키의 계층적 구조와 연관된 내용을 한눈에 파악할 수 있습니다.
💡 사용자는 '등록' 버튼을 통해 새로운 위키를 작성할 수 있습니다.
작성된 위키 항목은 파이어베이스 데이터베이스에 저장되며, 고유한 ID와 함께 등록됩니다.
위키는 마크다운 형식으로 작성이 가능하며, 사용자가 폼에 입력하는 내용은 실시간으로 상태에 반영됩니다.
이를 통해 사용자는 입력 내용을 동적으로 관리하고 확인할 수 있습니다.
또한, 드롭다운 메뉴를 통해 상위 위키를 선택하여 해당 위키의 하위 항목으로 등록이 가능합니다.
💡 사용자는 '수정' 버튼을 클릭하여 해당 항목의 내용을 수정할 수 있습니다.
수정이 완료되면 '저장' 버튼을 클릭하여 변경 내용을 데이터베이스에 업데이트합니다.
드롭다운 메뉴를 통해 상위 위키를 선택 및 변경 할 수 있습니다. 이떄, 하위 위키가 등록된 상위 위키의 경우 다른 위키의 하위 위키로는 등록 할 수 없습니다.
💡 '삭제' 버튼을 클릭하면, 해당 항목을 데이터베이스에서 완전히 제거할 수 있습니다.
삭제하기 전에 사용자에게 확인 절차를 거칩니다, 이를 통해 실수로 인한 삭제를 방지할 수 있습니다.
하위 위키가 등록된 상위 위키의 경우 하위 위키가 삭제 될 수 있음을 알리는 메시지를 표시하고, '확인'을 클릭 할 시 해당 위키의 하위 위키도 동시에 삭제됩니다.
서지수: 🌐 헤더 및 메인 페이지
💡 통근 다이얼로그에서 출근 버튼을 클릭하면 파이어스토어에 출근 시간이 저장되고 헤더에 근무 시간(근무 타이머)가 표시됩니다.
로그아웃, 새로고침을 해도 파이어스토어에서 출근 및 퇴근 시간을 요청하여 표시해줍니다.
💡 통근 다이얼로그에서 퇴근 버튼을 클릭하면 파이어스토어에 퇴근 시간이 저장되고 헤더에 총 근무한 시간이 표시됩니다.
💡 파이어베이스의 `signOut`기능을 이용하여 로그아웃을 한 뒤 로그인 페이지로 이동합니다.
💡 파이어스토어에 저장된 위키 중 가장 최근에 작성된 2개의 게시글을 요청하여 표시해줍니다.
게시물을 클릭하면 해당 게시글로 이동합니다.
