야놀자 Tech School Wiki

🧑🏻‍💻 프로젝트 소개

Toy Project로 제작된 Yanolja Tech School Wiki는 야놀자 테크 스쿨에 대한 다양한 정보를 담고 있는 Wiki 웹 사이트입니다.

[필수 구현사항]

✅ 문서편집, revision 기능을 제공하여 업무일지를 작성할 수 있는 직원들을 위한 위키사이트 구현(마크다운 형식)
✅ firebase database (Firestore) 이용
✅ 모달을 활용한 근무 시간을 표시하는 시계 및 타이머 창 구현
✅ 캐러셀을 활용한 회사 공지 페이지
✅ 갤러리 페이지 / 업무일지 페이지 등 메뉴를 필터링 또는 카테고리화 하는 선택바 구현
✅ netlify 등을 이용한 정적 페이지 배포 (firebase + github actions)
✅ TypeScript 사용 필수
✅ 과제에 대한 설명을 포함한 README.md 파일 작성
✅ 팀원별로 구현한 부분 소개

[선택 구현사항]

✅ React 사용은 선택
✅ 기타 동작이 완료되기 전에 로딩 애니메이션 구현
✅ 관련된 기타 기능도 고려 (공부 시간 랭킹 구현)
✅ eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트시 필요한 추가 작업들

야놀자 테크 캠프 토이 프로젝트 설명

📅 직원들을 위한 위키 사이트

직원들을 위한 위키 사이트를 만들어보세요! 위키 사이트에는 위키 뿐 아니라 여러 기능이 추가되어야 합니다!

[과제 수행 및 제출 방법]

1. 현재 저장소를 로컬에 클론(Clone)합니다.
2. 자신의 팀명으로 브랜치를 생성합니다.(구분 가능하도록 팀명을 꼭 파스칼케이스로 표시하세요, git branch Y_FE_Toy1_Team13)
3. 자신의 팀명 브랜치에서 과제를 수행합니다.
4. 과제 수행이 완료되면, 자신의 팀명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin Y_FE_Toy1_Team13)
5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== Y_FE_Toy1_Team13)
6. Pull Request 링크를 LMS로도 제출해 주셔야 합니다.
7. main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
8. Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
9. Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사님께 얘기하세요!

[필수 구현사항]

[ ] 문서편집, revision 기능을 제공하여 업무일지를 작성할 수 있는 직원들을 위한 위키사이트 구현(마크다운 형식)
[ ] firebase database (Firestore) 이용
[ ] 모달을 활용한 근무 시간을 표시하는 시계 및 타이머 창 구현
[ ] 캐러셀을 활용한 회사 공지 페이지
[ ] 갤러리 페이지 / 업무일지 페이지 등 메뉴를 필터링 또는 카테고리화 하는 선택바 구현
[ ] netlify 등을 이용한 정적 페이지 배포
[ ] TypeScript 사용 필수
[ ] 과제에 대한 설명을 포함한 README.md 파일 작성
[ ] 팀원별로 구현한 부분 소개

[선택 구현사항]

[ ] React 사용은 선택
[ ] 기타 동작이 완료되기 전에 로딩 애니메이션 구현
[ ] 페이지네이션
[ ] 관련된 기타 기능도 고려
[ ] eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트시 필요한 추가 작업들

🧑🏻‍💻 Contributor

@jinuk0316 (이진욱) : Layout, Carousel
@turkey-kim (김특희) : Layout, Ranking
@JitHoon (최지훈) : Firebase, Wiki
@yangjaehyuk (양재혁) : Firebase, Gallery
@suyeonnnnnnn (박수연) : Firebase, Timer

🧑🏻‍💻 기술 스택

Enviroment & Config

Development & FrontEnd

Deploy

Communication

🧑🏻‍💻 Script

Development Mode

$ git clone https://github.com/turkey-kim/techschool_wiki.git
$ nvm install v18.16.1
$ nvm use 18.16.1
$ npm ci
$ npm run start

🧑🏻‍💻 디자인

1. Userflow

2. 아키텍쳐 파악

3. 파일 구조

# CRA 사용

my-wiki-app/
├── src/
│   ├── assets/         # 폰트, 이미지, 아이콘
|   |    ├── fonts/
|   |    ├── icons/
|   |    └── images/
|   |   
│   ├── components/      # 리액트 컴포넌트
│   │    ├── Home/
│   │    ├── Timer/
│   │    ├── Wiki/
│   │    ├── Gallery/
|   |    |   .
|   |    |   .
|   |    |   .
│   │    ├── Header.tsx
│   │    └── Footer.tsx
│   │ 
|   ├── hooks/           # 커스텀 hook
│   ├── pages/           # 라우터
│   ├── styles/          # css styles
│   ├── types/           # typescripts interface
│   ├── utils/           # db, storagae
│   │ 
│   ├── App.tsx
│   └── index.tsx
│
├── public/
├── node_modules/
├── package.json
├── tsconfig.json
├── .eslintrc.json
├── README.md
└── ...

🧑🏻‍💻 화면 구성

Carousel

Wiki

Gallery

Timer + Ranking

🧑🏻‍💻 팀 소개

최지훈 Frontend	박수연 Frontend	김특희 Frontend	이진욱 Frontend	양재혁 Frontend	구영표 멘토님 멘토링

🧑🏻‍💻 개발 기간 : 2주 23.09.11 ~ 23.09.22