README.md

직원들을 위한 위키 사이트 - 9굴 WIKI

💁 프로젝트 정보

회사 공지와 이미지들을 쉽게 수정하고 확인할 수 있고,
출퇴근 시간을 확인할 수 있는 직원들을 위한 위키 사이트 입니다.
개발기간: 2023.09.15 ~ 2023.09.22

🌐 배포 주소

배포 주소: https://chipper-puppy-71c021.netlify.app

🚖 개발 팀 소개

이용훈	이승연	양재준	김소정	서지수
@2YH02	@ewinkite	@yangjaejun	@KSJT	@jseo9732
갤러리 페이지 CRUD 및 세부 기능	로그인 페이지 로그인, 회원가입 기능 및 유저 플로우 작성	WIKI 페이지 CRUD 및 세부 기능	메인 페이지 이미지, WIKI 연동 및 세부 기능	메인 페이지 출퇴근 기록 및 세부기능

💻 개발 스택

🌙 환경

🌙 개발

🌙 소통

💡 User Flow

🗂 디렉토리 구조

📦 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 페이지 연동

• 메인 페이지에서 WIKI에 있는 중요한 공지사항을 슬라이드로 보여줍니다.
• 메인 페이지에서 Gallery 페이지에 등록된 최신 사진 3개를 가져와 보여줍니다.

⭐ 회원가입, 로그인 기능 및 인증

• 회원가입과 로그인이 가능합니다.
• 인증이 안된 유저가 다른 페이지로 접근할 시 로그인 페이지로 이동됩니다.

⭐ WIKI 페이지 게시물 CRUD

• WIKI 페이지에서 게시물을 CRUD 할 수 있습니다.

⭐ Gallery 페이지 게시물 CRUD

• Gallery 페이지에서 게시물을 CRUD 할 수 있습니다.
  

  
  

🔍 팀원별 세부 구현 사항

이용훈: 📷 갤러리 페이지

1. 카테고리 추가

앨범 상위 카테고리 추가

💡 카테고리 편집에서 원하는 앨범 카테고리를 만들 수 있습니다.
카테고리를 생성하면 파이어베이스 데이터베이스에 생성 날짜와 고유한 ID 값을 가지고 저장이 됩니다.

2. 앨범 추가

이미지들을 저장할 앨범 카테고리(폴더) 생성

💡 카테고리 편집에서 원하는 앨범을 만들 수 있습니다. 앨범을 생성하면
파이어베이스 데이터베이스에 생성 날짜, 상위 카테고리 ID, ID 값을 가지고 저장이 됩니다.

3. 이미지 추가

앨범 폴더 내부에 이미지 추가

💡 원하는 앨범 카테고리에 원하는 이미지를 드래그나 클릭으로 추가합니다.
추가 시 이미지 미리보기, 이름, 용량, 파일타입이 화면에 보이고,
파이어베이스 스토리지에 해당 앨범의 ID 값을 이름으로 하는 폴더에 저장됩니다.

4. 이미지 삭제

앨범 폴더 내부에 이미지 삭제

💡 앨범에 있는 이미지를 삭제합니다.
삭제 시 파이어베이스 스토리지에 저장 돼 있던 해당 이미지가 삭제됩니다

5. 이미지 상세보기

이미지 방향 전환 및 크기 조절

💡 이미지 클릭 시 상세보기가 가능하고 버튼 클릭과 화살표 키보드로 다음 이미지로의 방향 전환이 가능합니다.
또한 이미지 크기 조절이 가능하도록 기능을 추가하였습니다.

이승연: 🔑 로그인 페이지

1. 접근 제한 라우팅

로그인 여부에 따른 제한 접근 라우팅

💡 해당 홈페이지는 사내 사이트로, 로그인 정보가 없는 경우 login페이지로 이동합니다.
로그아웃하지 않았다면 탭 종료 후 재접속하여도 로그인 상태를 유지합니다.

2. 회원 가입

회원 가입

💡 회원 가입 버튼 클릭시 회원 가입이 가능한 다이얼로그가 노출됩니다.
ID와 PW 값을 입력후 가입하기 버튼을 클릭시 User로 저장되며 해당 계정으로 사이트 로그인이 가능합니다.

회원가입 유효성 검사

💡 프로세스에 따라 회원가입 유효성 검사 후 얼럿을 노출합니다.
정상적으로 입력이 완료되었다면 로그인 페이지로 진입합니다.

3. 로그인

로그인

💡 회원가입한 계정의 ID와 PW 값을 입력후 들어가기 버튼을 클릭하여 사이트 로그인이 가능합니다.

로그인 유효성 검사

💡 프로세스에 따라 로그인 유효성 검사 후 얼럿을 노출합니다.
정상적으로 입력이 완료되었다면 메인 페이지로 진입합니다.

4. 로그인 정보 전달

로그인한 유저 정보 전달

💡 현재 사이트 로그인 중인 User 정보를 전달합니다.
이를 통해 Header와 WIKI페이지의 등록/수정/삭제 등의 기능 구현을 지원합니다.

양재준: 📂 WIKI 페이지

1. 위키 페이지 로딩 & 초기화

위키 데이터 로딩 및 초기 설정

💡 사용자가 위키 페이지에 접속하면, 확인할 위키를 선택 할 수 있는 사이드 메뉴와 위키의 내용을 확인하고 편집 할 수 있는 화면이 표시됩니다.
데이터베이스의 부하를 방지 하기 위해 상위 위키 항목들만 사이드 메뉴에 표시되며, 그 중 첫번째 위키가 우측 화면에 표시됩니다.

2. 하위 위키 항목 표시

하위 위키 항목 표시

💡 사용자가 상위 위키의 화살표 버튼을 클릭하면, 해당 위키의 하위 위키 항목들을 불러옵니다.
사용자는 상위 위키를 하위 위키들을 묶는 카테고리 개념으로 활용할 수 있으며, 위키의 계층적 구조와 연관된 내용을 한눈에 파악할 수 있습니다.

3. 위키 작성

새로운 위키 작성

💡 사용자는 '등록' 버튼을 통해 새로운 위키를 작성할 수 있습니다.
작성된 위키 항목은 파이어베이스 데이터베이스에 저장되며, 고유한 ID와 함께 등록됩니다.
위키는 마크다운 형식으로 작성이 가능하며, 사용자가 폼에 입력하는 내용은 실시간으로 상태에 반영됩니다.
이를 통해 사용자는 입력 내용을 동적으로 관리하고 확인할 수 있습니다.
또한, 드롭다운 메뉴를 통해 상위 위키를 선택하여 해당 위키의 하위 항목으로 등록이 가능합니다.

4. 위키 편집

선택한 위키 항목의 내용 수정

💡 사용자는 '수정' 버튼을 클릭하여 해당 항목의 내용을 수정할 수 있습니다.
수정이 완료되면 '저장' 버튼을 클릭하여 변경 내용을 데이터베이스에 업데이트합니다.
드롭다운 메뉴를 통해 상위 위키를 선택 및 변경 할 수 있습니다. 이떄, 하위 위키가 등록된 상위 위키의 경우 다른 위키의 하위 위키로는 등록 할 수 없습니다.

5. 위키 삭제

위키 항목 삭제

💡 '삭제' 버튼을 클릭하면, 해당 항목을 데이터베이스에서 완전히 제거할 수 있습니다.
삭제하기 전에 사용자에게 확인 절차를 거칩니다, 이를 통해 실수로 인한 삭제를 방지할 수 있습니다.
하위 위키가 등록된 상위 위키의 경우 하위 위키가 삭제 될 수 있음을 알리는 메시지를 표시하고, '확인'을 클릭 할 시 해당 위키의 하위 위키도 동시에 삭제됩니다.

서지수: 🌐 헤더 및 메인 페이지

1. 헤더 통근 다이얼로그

출근 기능

💡 통근 다이얼로그에서 출근 버튼을 클릭하면 파이어스토어에 출근 시간이 저장되고 헤더에 근무 시간(근무 타이머)가 표시됩니다.
로그아웃, 새로고침을 해도 파이어스토어에서 출근 및 퇴근 시간을 요청하여 표시해줍니다.

퇴근 기능

💡 통근 다이얼로그에서 퇴근 버튼을 클릭하면 파이어스토어에 퇴근 시간이 저장되고 헤더에 총 근무한 시간이 표시됩니다.

2. 로그아웃 기능

💡 파이어베이스의 `signOut`기능을 이용하여 로그아웃을 한 뒤 로그인 페이지로 이동합니다.

3. 최근 작성 위키 조회 기능

💡 파이어스토어에 저장된 위키 중 가장 최근에 작성된 2개의 게시글을 요청하여 표시해줍니다.
게시물을 클릭하면 해당 게시글로 이동합니다.

김소정: 🌐 메인 페이지

1. 메인 캐러셀

홈 화면 공지사항을 보여주는 캐러셀 구현

💡 캐러셀이 3초마다 다음 슬라이드를 보여줍니다.

💡 하단의 버튼을 클릭하면 해당 인덱스의 슬라이드로 캐러셀이 점프합니다.

💡 윈도우가 resize할 때마다 캐러셀의 width가 변화합니다.

2. 홈 화면 갤러리 미리보기 구현

💡 갤러리에 최근 업데이트 된 사진을 3개까지 미리 보여줍니다.
클릭하면 갤러리 페이지로 이동합니다. 최초 로딩 시에는 스켈레톤 애니메이션이 보입니다.