KDT1-FE · Eojoonhyuk · Sep 10, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,49 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "settings": {
+    "react": { "version": "detect" }
+  },
+  "extends": [
+    "airbnb",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/no-unresolved": "off",
+    "react/prop-types": "off",
+    "import/no-named-as-default": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "eqeqeq": "error",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
+    "import/extensions": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "import/prefer-default-export": "off"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "arrowParens": "avoid",
+  "orderedImports": true,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true
+}
diff --git a/README.md b/README.md
@@ -1,203 +1,115 @@
-# **📅 직원들을 위한 위키 사이트**
+<div align="center">
 
-직원 들을 위한 위키 사이트를 만들어보세요!
-위키 사이트에는 위키 뿐 아니라 여러 기능이 추가되어야 합니다!
+# **🧑🏻‍💻 직원들을 위한 위키 사이트 ( 토이프로젝트1 6조 육캔두잇 )**
 
-### **[과제 수행 및 제출 방법]**
+![youcandoit_logo](https://github.com/Fastcampus-Youcandoit/frontend/assets/42928784/0a36f778-2a02-4e5e-9bee-20069c378ed5)
 
-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. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사님께 얘기하세요!
+    💁🏻‍♂️ 야놀자 테크스쿨 1기, 토이프로젝트 6조의 직원들을 위한 위키 사이트 프로젝트입니다.
 
-### **[필수 구현사항]**
+</div>
 
-- 문서편집, revision 기능을 제공하여 업무일지를 작성할 수 있는 직원들을 위한 위키사이트 구현(마크다운 형식)
-- firebase database (Firestore) 이용
-- 모달을 활용한 근무 시간을 표시하는 시계 및 타이머 창 구현
-- 캐러셀을 활용한 회사 공지 페이지
-- **갤러리 페이지 / 업무일지 페이지 등 메뉴를 필터링 또는 카테고리화 하는 선택바 구현**
-- netlify 등을 이용한 정적 페이지 배포
-- TypeScript 사용 필수
-- 과제에 대한 설명을 포함한 `README.md` 파일 작성
-    - 팀원별로 구현한 부분 소개
+## 📌 프로젝트 Info
 
-### **[선택 구현사항]**
+![image](https://github.com/Fastcampus-Youcandoit/frontend/assets/42928784/44f4dbb1-c506-4060-beb1-881d7a0763c9)
 
-- React 사용은 선택
-- 기타 동작이 완료되기 전에 로딩 애니메이션 구현
-- 페이지네이션
-- 관련된 기타 기능도 고려
-- eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트시 필요한 추가 작업들
+- 🔗 프로젝트 URL : [youcandoit-wiki](https://youcandoit-wiki.netlify.app)
+- 🗓️ 개발 기간 : 20203.09.08 ~ 2023.09.22
+- 🔨 사용 기술 스택
 
----
+  <img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white">
+  <img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white"> 
+  <img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">
+  <img src="https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=Typescript&logoColor=white"/>
+  <img src="https://img.shields.io/badge/firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=white">
+  <img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white">
+  <img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white">
 
-## 가이드
+## 팀원 소개
 
-아래 예시는 모두 하나의 의견입니다!
+<!-- prettier-ignore-start -->
+|어준혁(리더)|박지성|이연수|장영민|채민석|
+|:-:|:-:|:-:|:-:|:-:|
+|<img src="https://github.com/Fastcampus-Youcandoit/frontend/assets/117037249/15f4ae16-28ef-40d1-b9ce-d978884e8d81" alt="Eojoonhyuk" width="100" height="100">|<img src="https://github.com/Fastcampus-Youcandoit/frontend/assets/117037249/c1f038bc-93ae-4d7e-b0c3-d939f71f0293" alt="flamozzi" width="100" height="100">|<img src="https://github.com/Fastcampus-Youcandoit/frontend/assets/117037249/3580cf59-d8be-4f03-9fac-7ce8a06a8c18" alt="suehub" width="100" height="100">|<img src="https://github.com/Fastcampus-Youcandoit/frontend/assets/117037249/d668842a-3a3a-416b-a262-210719d225ec" alt="yeongmins" width="100" height="100">|<img src="https://github.com/Fastcampus-Youcandoit/frontend/assets/117037249/d4856748-092f-498f-a23f-2dd04088b96c" alt="chaeminseok" width="100" height="100">|
+|[Eojoonhyuk](https://github.com/Eojoonhyuk)|[flamozzi](https://github.com/flamozzi)|[suehub](https://github.com/suehub)|[yeongmins](https://github.com/yeongmins)|[chaeminseok](https://github.com/chaeminseok)|
 
-따라하는게 아니라 자신만의 결과물을 만들어보세요.
+<!-- prettier-ignore-end -->
 
-### 공지사항
-[영상 1]
+### ✔ 필수 구현사항
 
+- [x] 문서편집, revision 기능을 제공(CRUD 가능하게)하여 업무일지를 작성할 수 있는 직원들을 위한 위키사이트 구현(마크다운 형식)
+- [x] firebase database (Firestore) 이용
+- [x] 모달을 활용한 근무 시간을 표시하는 시계 및 타이머 창 구현
+- [x] 캐러셀을 활용한 회사 공지 페이지
+- [x] 갤러리 페이지 / 업무일지 페이지 등 메뉴를 필터링 또는 카테고리화 하는 선택바 구현
+- [x] netlify 등을 이용한 정적 페이지 배포
+- [x] TypeScript 사용 필수
+- [x] 과제에 대한 설명을 포함한 README.md 파일 작성
+  - [x] 팀원별로 구현한 부분 소개
 
-### **모달 타이머**
-[영상 2]
+### ✔ 선택 구현사항
 
+- [x] React 사용은 선택
+- [ ] 기타 동작이 완료되기 전에 로딩 애니메이션 구현
+- [ ] 페이지네이션
+- [x] 관련된 기타 기능도 고려
+- [x] eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트시 필요한 추가 작업들
 
-https://github.com/KDT1-FE/Y_FE_Toy1/assets/38754963/20c18d28-5a01-4163-876c-be74a24f62db
+### ✔ 팀원별 주담당 구현부
 
+> 팀원 모두 자신의 주담당 구현부 이외에도 리팩토링 및 다른 팀원의 테스크에 참여하며 프로젝트 전체적으로 협업하였습니다.
 
+- **어준혁**: 팀 리더, 프로젝트 관리 및 병합, 홈 페이지 담당
+- **박지성**: 위키 페이지 및 마크다운 에디터 담당
+- **이연수**: 갤러리 페이지 및 이미지 처리, 로그인 담당
+- **장영민**: 라우팅 및 사이드바, 디자인 담당
+- **채민석**: 출퇴근 타이머 및 회원가입 담당
 
-### **마크다운 위키사이트**
-[영상 3]
+## ✏️ userflow
 
+![youcandoit_userflow](https://github.com/flamozzi/intro/assets/42928784/487f9ea2-9c3e-442b-9786-f41775405536)
 
-https://github.com/KDT1-FE/Y_FE_Toy1/assets/38754963/08e3efca-8137-44d8-a0af-c62a668b810b
+# 🧑🏻‍💻 구현 사항
 
+## 📍 홈
 
+### 출퇴근 타이머
+![홈_출퇴근](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/e677f5d1-2d41-4a9a-b97a-f1c7837d15ee)
 
-### **갤러리**
-[영상 4]
+### 홈\_캐러셀과 공지 및 갤러리
+![홈_공지갤러리](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/cec64cdd-8228-4c39-b928-d1ac05aefd7c)
 
----
+### 홈\_캘린더
+![홈_캘린더](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/26247aa8-d96f-4f97-a6a9-ed34302c1577)
 
-# **[Firestore]**
 
-Firestore에 대한 가이드입니다.
+## 📍 로그인 및 회원가입
 
-자세한 내용은 [공식 홈페이지](https://firebase.google.com/?hl=ko) 를 찾아보길 적극 권장합니다!
+### 로그인 및 회원가입, 비밀번호 찾기와 로그아웃
+![로그인_회원가입](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/d3513c0e-63e2-4980-b429-0344ede8c1ae)
 
-### **App init**
 
-```jsx
-import { getFirestore } from "firebase/firestore";
+## 📍 공지
 
-export const db = getFirestore(fireBaseApp);
-```
+### 공지사항 읽기와 작성 및 삭제
+![공지](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/00816fe6-3a59-49cb-bdac-cac7666ae9fa)
 
-### Firestore 데이터 추가하기
+## 📍 위키
 
-Firestore의 데이터를 추가하는 방법은 크게 두가지이다.
+### 사이드바 탐색과 문서 수정 및 저장
+![위키](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/2c9eb0e6-4f5d-47be-9e4f-9c0d7062417c)
 
-1. Firebase console에서 손수 데이터 추가해주기
-2. 코드로 데이터 추가하기
 
-### 1. Firebase console에서 손수 데이터 추가해주기
+## 📍 갤러리
 
-1. [Firebase console](https://console.firebase.google.com/u/0/?hl=ko)에 접속한다.
-2. 자신의 프로젝트를 선택한다.
-3. 왼쪽 메뉴에서 `Firestore Database`를 선택한다.
-4. `+ 버튼`을 눌러 컬렉션 > 문서를 마음대로 추가해준다.
-5. 필드를 추가하여 문서에 데이터를 넣어준다.
+### 갤러리 사진 읽기 및 사이드바 필터링과 업로드 및 수정과 삭제
+![갤러리](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/689451d0-e468-4458-8771-80bdf072e72a)
 
-### 2. 코드로 데이터 추가하기
+## 📍 반응형 구현
 
-Firestore는 `setDoc`, `addDoc` 두 가지 함수로 데이터를 추가할 수 있다.
+### 홈 반응형 구현
+![홈반응형](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/4022425f-8a56-44bb-9797-02216325419f)
 
-이제 원하는 데이터를 추가해보자.
 
-**1. `addDoc`**
+### 공지와 위키 및 갤러리 반응형 구현
+![공지위키갤러리반응형](https://github.com/KDT1-FE/Y_FE_Toy1/assets/111065848/2ac386fc-21db-4b0d-a507-ca12d11cd6ea)
 
-`addDoc`은 아래와 같이 사용하여 원하는 데이터를 추가할 수 있다.
-
-```
-import { addDoc, collection } from "firebase/firestore";
-
-const writtenDoc = await addDoc(collection(db, "wiki"), {
-  title: "LGH",
-  description: "허먼밀러...사고싶다...",
-});
-
-console.log("Document written with ID: ", writtenDoc.id);
-// 새로 생성된 Document의 ID를 반환한다.
-```
-
-원하는 데이터를 추가하기 위해선 먼저 원하는 collection을 선택해야 한다. 위 예제의 `addDoc` 안에서 사용한 `collection` 함수는 db상에 있는 collection을 선택하거나 없을 경우 새로운 collection을 생성하여 반환한다.
-
-Firebase의 Doc는 기본적으로 ID를 가져야 하는데, addDoc을 사용하면 ID를 자동으로 만든다. 또한, 이미 존재하는 Doc에 `addDoc`을 사용하면 에러가 발생한다.
-
-**2. `setDoc`**
-
-`setDoc`은 아래와 같이 사용하여 원하는 데이터를 추가할 수 있다.
-
-```
-import { setDoc, doc } from "firebase/firestore";
-
-await setDoc(doc(db, "wiki", "new-id"), {
-  title: "LGH",
-  description: "허먼밀러...사고싶다...",
-});
-```
-
-`addDoc`과의 차이점은
-
-1. **id** 를 지정해줘야함
-2. `collection` 대신 `doc`을 사용함
-3. 이미 존재하는 Doc에 사용가능
-
-3가지 이다.
-
-`setDoc`은 `addDoc`과 달리 collection이 아니라 doc를 선택해야 한다. 이는 `setDoc`이 데이터의 추가 뿐 아니라 데이터 덮어쓰기 기능도 가지고 있기 때문이다. 러프하게 생각해보면 `setDoc`은 데이터를 추가할 때
-
-1. doc을 선택하거나 새로운 doc을 생성
-2. doc의 내용을 덮어씀
-
-의 방식으로 동작하는 것이다.
-
-Doc을 선택하는 방법은 `doc` 함수를 사용하는 것이다. `[doc()](https://firebase.google.com/docs/reference/js/firestore_.md?hl=ko#doc)` 함수는 `DocumentReference` instance를 반환한다. 절대 경로를 사용하여 원하는 Document를 선택할 수 있다. 위에서 만들어둔 `wiki > completed` 문서는 아래처럼 불러올 수 있다.
-
-```
-import { doc } from "firebase/firestore";
-
-const docRef = doc(db, "wiki", "completed");
-```
-
-`doc` 함수의 3번째 인자가 바로 **id** 이다. id는 이미 존재하는 Doc의 id를 사용할 수도 있고, 새로운 id를 사용할 수도 있다. 존재하는 id를 사용하는 경우에는 해당 Doc의 데이터를 덮어쓰게 된다. 그렇지 않은 경우엔 새로운 Doc를 생성한다.
-
-어쨌거나 데이터를 새로 추가할 수 있는 것이다.
-
-### Firestore 데이터 수정하기
-
-Firestore의 데이터를 수정하는 방법은 크게 두가지이다.
-
-1. Firebase console에서 손수 데이터 수정해주기
-1. 코드로 데이터 수정하기
-
-1번은 데이터 생성과 비슷하게 진행하면 된다.
-
-**2. 코드로 데이터 수정하기**
-
-Firestore는 `setDoc`, `update` 두 가지 함수로 데이터를 추가할 수 있다.
-
-`setDoc`을 사용하는 방법은 위에 적혀있다.
-
-### `update`
-
-`setDoc`은 데이터를 덮어쓴다. 따라서 기존의 문서를 유지한 채 일부분의 데이터만 변경하고 싶어도 이전의 데이터를 모두 새로 입력해야 한다.
-
-그러나 `update`는 기존의 데이터를 유지한 채 일부분의 데이터만 변경할 수 있다.
-
-```jsx
-import { updateDoc, doc } from "firebase/firestore";
-
-await updateDoc(doc(db, "wiki", "new-id"), {
-  description: "허먼밀러...200만원...",
-});
-```
-
-위와 같이 코드를 작성하면 `new-id`라는 id를 가진 문서의 description만 변경된다.
-
----
-
-### *참고 링크
-
-- **[Firebase](https://firebase.google.com/docs?hl=ko)**
-- [**프로토타입 프로젝트**](https://stfe.vercel.app/)