Y_FE_Toy1_Team11 : YANOLJA TECH SCHOOL 위키 서비스 #2

turkey-kim · 2023-09-22T08:45:17Z

야놀자 Tech School Wiki

🧑🏻‍💻 프로젝트 소개

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

[필수 구현사항]

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

[선택 구현사항]

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

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

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

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

[과제 수행 및 제출 방법]

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

[필수 구현사항]

[ ] 문서편집, 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`

feat: slide추가, fix: footer수정

Feat/wiki: 마크다운 구현 및 기타 수정 사항 반영

Feat/timer: 타이머 모달 팝업 구현 (인터페이스 분리)

…into feat/gallery

Feat/gallery: 업로드 모달창 구현 및 삭제 모달창 구현, 파이어스토어 사진 불러오기 기능 에러 해결, 파이어스토어 사진 업로드 기능 구현

config: rehype-raw, remark-gfm 플러그인 설치

Feat/wiki: Markdown 디자인

refact: clock.tsx, Header.tsx, Carousel.css

setting: custom.d.ts파일 types폴더로 이동

Refact/ranking: 랭킹 UI 리펙토링 + 타입 지정

feat: wiki 제출 버튼 위치 변경

Feat/doc: 리드미 아키텍쳐 제외 테스트

docs: 찐막

…_Toy1_Team11

Env: Update PR template

Feat: 로그인 페이지 라우터 추가

회원가입 새로운 유저 인증 생성

gitflow install

공통 요소를 수정한다.

Feat: Wiki 페이지 마크업

Feature/#2

marshallku

고생 많으셨습니다!

컨벤션 정비 및 미흡한 컨벤션 추가
폴더 규칙 정리(컴포넌트가 아닌 파일이 components에 많이 들어있음)
컴포넌트 간 상태 주고받는 방법 탐색
런타임 에러 방지
과도한 local storage 사용 자제

다음 프로젝트 전에 위 사항들을 확인해보시면 좋을 것 같습니다.

중복되는 리뷰는 생략했으니, 본인 코드가 아니더라도 확인해주시면 감사하겠습니다!

marshallku · 2023-10-01T02:26:29Z

.github/CODEOWNERS

CODEOWNERS syntax 참고하셔서 문법 수정하셔야할 것 같습니다!

CODEOWNERS 사용법을 잘못 이해했던 것 같습니다..!
멘토님께서 주신 syntax 참고하여 수정해 보았습니다.

turkey-kim/techschool_wiki@15d6bb6

marshallku · 2023-10-01T02:36:01Z

.github/workflows/firebase-hosting-pull-request.yml

+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_TECHSCHOOL_WIKI }}"
+          projectId: techschool-wiki


멘토링 때 말씀드렸듯, 이 영역은 제거되는 게 어떨까 합니다.
PR을 생성하자마자 운영 서버로 배포가 이뤄지고 있는데, 이러면 운영 환경에 잘못된 코드가 배포될 확률이 아주 높아집니다.

개발 환경을 따로 구성하여 그 곳에 배포하거나, 코드 유효성 검사 정도만 진행하는 게 어떨까 합니다.

Unit test 수행

Build 수행

Linting

정적 코드 분석

Code coverage 검사

등을 일반적으로 pull request가 생성됐을 때 진행합니다.
위 사항들을 진행하도록 수정되면, 8번 라인의 조건도 삭제하여 fork해서 진행된 작업을 포함한 모든 작업이 병합되기 전에 코드를 검사할 수 있습니다.

Firestore Hosting 에서 channelId: live를 명시하지 않으면
운영 서버로 배포되지 않고 미리보기 서버로 배포되는 걸로 알고 있습니다..!

이를통해 말씀하신 것 처럼 '개발 환경을 따로 구성하여 그 곳에 배포'한 효과를 볼 수 있어서 위 코드를 그대로 사용하였습니다.

with: 블럭 안에 channelId: live를 넣어준 firebase-hosting-merge.yml 의 경우,
실제 운영 서버로 배포가 이뤄지도록 하였습니다..!

@JitHoon
테스트 환경이 구성되어 있었나보네요! 운영 서버밖에 없다고 들어서 두 파일 모두 운영 환경으로 배포하는 스크립트인 줄 알았습니다.
그럼 추가적으로 말씀드린 사항들만 진행해봐도 좋을 것 같습니다!

marshallku · 2023-10-01T02:42:16Z

public/index.html

+      content="Web site created using create-react-app"
+    />
+    <meta
+      name="Keywords"


HTML5 스펙에 정의된 메타 태그(w3 참고)는 case-insensitive하지만, 다른 태그들은 case-sensitive할 수 있으니 주의가 필요합니다.

각 태그들이 case-(in)sensitive한지 고려하면서 작성하지 않았던 것 같습니다. 앞으로 주의하며 사용하겠습니다!

marshallku · 2023-10-01T02:46:42Z

public/index.html

+    <meta
+      name="Keywords"
+      content="야놀자 테크 스쿨 위키, 야놀자 테크 스쿨, 야놀자 부트캠프, 야놀자"
+    />


keywords 메타 데이터는, 10년 이상 전부터 google에선 무시하는 값으로 알고 있습니다!
SEO를 위해서라면, keywords 데이터 제공보다 structured data 제공, 웹 표준 준수 등을 신경써보면 좋을 것 같습니다.

감사합니다!

우선 keywords 데이터를 지우고 아래 사이트를 참고하여 일부 structured 데이터를 추가해 보았습니다.
turkey-kim/techschool_wiki@427a4c9

structured 데이터 참고 사이트

marshallku · 2023-10-02T13:02:52Z

.gitignore

+.firebase
+
+# env
+.env


POSIX 명세 3.206 Line을 확인해보시면, 모든 파일은 개행문자로 끝내도록 정의되어 있습니다.
가급적 파일은 작성 이후 개행을 한 번 하시는 게 좋습니다.

헉 전혀 모르고 있었습니다! 다음부터 파일 작성 이후 개행을 하도록 하겠습니다.
turkey-kim/techschool_wiki@ceb767f

marshallku · 2023-10-03T10:49:38Z

src/types/Modal.ts

+  timerArray: Array<number | string>;
+  onBreak: boolean;
+  setOnBreak: React.Dispatch<React.SetStateAction<boolean>>;
+  playTime: string | null;


type Nullable<T> = T | null 같은 헬퍼를 만들어보시면 어떨까요?

marshallku · 2023-10-03T10:50:54Z

src/types/Modal.ts

+export interface ModalType {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface ModalProps {
+  onClose: () => void;
+}


ModalType과 ModalProps는 어떻게 다른 걸까요?

marshallku · 2023-10-03T10:51:19Z

src/types/Ranking.ts

+export interface ListProps {
+  num: number;
+  name: string;
+  time: any;
+}


RankingList 타입을 활용할 수 있지 않을까요?

marshallku · 2023-10-03T10:52:16Z

src/utils/timerAndRanking.ts

+// collection에 있는 데이터 다 가져온 후 배열로 반환
+export async function getRankingDocsToArr() {


/** collection에 있는 데이터 다 가져온 후 배열로 반환 */ export async function getRankingDocsToArr() {

처럼 JSDoc 문법을 사용해보셔도 좋을 것 같습니다!

marshallku · 2023-10-03T10:52:45Z

src/utils/timerAndRanking.ts

+export async function getDayAndReset() {
+  const date = new Date();
+  const today: number = date.getDay();
+  const dayFromDb: any = await getDayFromDb();


가급적 타입을 명시해보시면 좋을 것 같네요~

JitHoon and others added 30 commits September 14, 2023 17:57

refact: 필요없는 script 제거

f123648

refact: PR 템플릿 .github 파일로 이동

9472216

refact: 카테고리 이름 변경

b6e979f

design: 마크다운 스타일 추가

867d793

fix: 타입가드로 firebase 불러오기 오류 해결

cd3f93a

refact: Header.tsx, TiemrModal.tsx 수정

6f6c94d

fix: 배포 에러로 인한 스크립트 build 다시 추가

6d15e1a

Merge pull request #20 from turkey-kim/feat/carousel

a3f190a

feat: slide추가, fix: footer수정

Merge pull request #21 from turkey-kim/feat/wiki

8508e97

Feat/wiki: 마크다운 구현 및 기타 수정 사항 반영

feat: 재사용 모달 CSS를 위한 Modal.css 생성

90a19ba

refact: ModalType 인터페이스를 modal.ts로 분리

1a4869c

refact: 사용하지 않는 export 제거

450b001

Merge pull request #23 from turkey-kim/feat/timer

61d8381

Feat/timer: 타이머 모달 팝업 구현 (인터페이스 분리)

feat: gallery 불러오기 기능 추가

ea5cfee

Merge branch 'main' of https://github.com/turkey-kim/techschool_wiki …

50cb5b0

…into feat/gallery

feat: 업로드 모달창, 삭제 모달창 구현

790bdf9

fix: 불러오기 에러 수정

148a768

feat: 사진 업로드 기능 구현 완료

b63b9c6

config: rehype-raw, remark-gfm 플러그인 설치

fae0640

Merge pull request #25 from turkey-kim/feat/gallery

d5d478b

Feat/gallery: 업로드 모달창 구현 및 삭제 모달창 구현, 파이어스토어 사진 불러오기 기능 에러 해결, 파이어스토어 사진 업로드 기능 구현

design: content 헤더 디자인 변경

234072b

Merge pull request #26 from turkey-kim/feat/wiki

8d6eda1

config: rehype-raw, remark-gfm 플러그인 설치

fix: 위키 url 에러 해결

48f0946

design: Markdown 디자인

18b439d

Merge pull request #27 from turkey-kim/feat/wiki

dd704de

Feat/wiki: Markdown 디자인

refact: clock.tsx, Header.tsx, Carousel.css

68b7e0a

desgin: 마크다운 커스텀

8ff925e

feat: 갤러리 삭제 기능 추가

8bc274a

design: 글수정 텍스트에디터 디자인 수정 & 마크다운 디자인 일부 수정

d4b92b0

Merge pull request #28 from turkey-kim/feat/carousel

0ad2b21

refact: clock.tsx, Header.tsx, Carousel.css

turkey-kim and others added 16 commits September 22, 2023 13:52

rename: 갤러리 타입파일 확장자 변경

986dc45

Merge pull request #77 from turkey-kim/refact/layout

9166df3

setting: custom.d.ts파일 types폴더로 이동

Merge pull request #76 from turkey-kim/refact/ranking

1be1e7b

Refact/ranking: 랭킹 UI 리펙토링 + 타입 지정

docs: 배치 변경 및 화면 구성 업로드

600ed90

feat: wiki 제출 버튼 위치 변경

247b4b1

fix: 알람이 한번만 동작하는 오류 수정

f3af143

docs: 아키텍쳐 디자인 사진 업데이트

3c5aa88

docs: 디자인 넘버링 추가

f54b7a9

Merge pull request #78 from turkey-kim/feat/wiki

c1aab3d

feat: wiki 제출 버튼 위치 변경

docs: 아키텍쳐 제목 수정

4d77be3

Merge pull request #79 from turkey-kim/feat/doc

d57a796

Feat/doc: 리드미 아키텍쳐 제외 테스트

docs: 찐막

9116a0a

Merge pull request #80 from turkey-kim/feat/doc

53e7fff

docs: 찐막

Update README.md

df765c7

Merge branch 'main' of https://github.com/KDT1-FE/Y_FE_Toy1 into Y_FE…

20b792a

…_Toy1_Team11

docs: 마지막 리드미

85467be

yangjaehyuk assigned yangjaehyuk, KittelLee, turkey-kim, suyeonnnnnnn and JitHoon Sep 22, 2023

2YH02 added a commit that referenced this pull request Sep 22, 2023

Merge pull request #2 from toy-1/develop

2940f03

Env: Update PR template

wowba added a commit that referenced this pull request Sep 22, 2023

Merge pull request #2 from wowba/feature-login

8b0acf1

Feat: 로그인 페이지 라우터 추가

noSPkeepgoing added a commit that referenced this pull request Sep 22, 2023

Merge pull request #2 from noSPkeepgoing/ChoiSunPa

7912640

회원가입 새로운 유저 인증 생성

NamgungJongMin added a commit that referenced this pull request Sep 22, 2023

Merge pull request #2 from IAMISTP/develop

4749536

gitflow install

Sinary00 pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #2 from JSH99/feat/header

3829132

공통 요소를 수정한다.

im-na0 pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #17 from im-na0/feature/#2

4032948

Feat: Wiki 페이지 마크업

TaePoong719 pushed a commit that referenced this pull request Sep 22, 2023

Merge branch 'dev' into feature/#2

d4bbae2

TaePoong719 pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #18 from TaePoong719/feature/#2

ff68079

Feature/#2

marshallku reviewed Oct 3, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Y_FE_Toy1_Team11 : YANOLJA TECH SCHOOL 위키 서비스 #2

Y_FE_Toy1_Team11 : YANOLJA TECH SCHOOL 위키 서비스 #2

turkey-kim commented Sep 22, 2023 •

edited by JitHoon

Loading

marshallku left a comment

marshallku Oct 1, 2023

JitHoon Oct 14, 2023

marshallku Oct 1, 2023

JitHoon Oct 14, 2023 •

edited

Loading

marshallku Oct 14, 2023

marshallku Oct 1, 2023

JitHoon Oct 14, 2023

marshallku Oct 1, 2023

JitHoon Oct 14, 2023

marshallku Oct 2, 2023

JitHoon Oct 14, 2023

marshallku Oct 3, 2023

marshallku Oct 3, 2023

marshallku Oct 3, 2023

marshallku Oct 3, 2023

marshallku Oct 3, 2023

		// collection에 있는 데이터 다 가져온 후 배열로 반환
		export async function getRankingDocsToArr() {

Y_FE_Toy1_Team11 : YANOLJA TECH SCHOOL 위키 서비스 #2

Are you sure you want to change the base?

Y_FE_Toy1_Team11 : YANOLJA TECH SCHOOL 위키 서비스 #2

Conversation

turkey-kim commented Sep 22, 2023 • edited by JitHoon Loading

야놀자 Tech School Wiki

🧑🏻‍💻 프로젝트 소개

[필수 구현사항]

[선택 구현사항]

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

[과제 수행 및 제출 방법]

[필수 구현사항]

[선택 구현사항]

🧑🏻‍💻 Contributor

🧑🏻‍💻 기술 스택

Enviroment & Config

Development & FrontEnd

Deploy

Communication

🧑🏻‍💻 Script

Development Mode

🧑🏻‍💻 디자인

1. Userflow

2. 아키텍쳐 파악

3. 파일 구조

🧑🏻‍💻 화면 구성

Carousel

Wiki

Gallery

Timer + Ranking

🧑🏻‍💻 팀 소개

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

marshallku left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JitHoon Oct 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turkey-kim commented Sep 22, 2023 •

edited by JitHoon

Loading

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

JitHoon Oct 14, 2023 •

edited

Loading