Y_FE_Toy1_Team13 Pokemon Wiki #9

JSH99 · 2023-09-22T13:10:59Z

💻 Toy Project1

📌 개요

직원들을 위한 위키 사이트를 만든다.
Firebase Storage, DataBase, Auth를 활용하여 리소스를 관리한다.
TypeScript 사용을 익힌다.

🐱 사이트

포켓몬스터를 주제로 포켓몬들을 위한 위키 사이트를 제작.

🧚‍♂️ 역할 분담

김민서	신하연	윤석민	이재준	정서현
wiki page ・ about page 구현, 피그마 디자인, firebase 호스팅 및 배포	footer ・ login page ・ my page 구현, firebase 기본 설정 및 연결, 디자인 통합 및 모바일 반응형 구현	gallery page (members 소개 ・ projects 관리) 구현, 피그마 디자인 및 정리	header ・ nav bar ・ commute modal 구현, 피그마 디자인, 프로젝트 생성 및 기본 설정, 공통 util 관리, 유저플로우 작성	main page ・ notice page 구현, 캐러셀 배너 이미지 제작, 회의록 관리, 리드미 작성

✨ 구현 내용

회원 정보 관리

[ 담당 개발자: 신하연 ]

헤더의 로그인 클릭 시 회원 인증 페이지로 이동 (로그인, 회원가입)
회원가입 시 휴대폰 인증 가능
로그인한 경우 헤더에서 아이콘 클릭 시 회원 정보 확인 및 마이페이지 이동
마이페이지에서 회원 정보 확인 및 수정
마이페이지에서 이메일 인증, 휴대폰 인증, 회원 탈퇴
마이페이지에서 이메일 인증 시 비밀번호 변경 가능

공지 캐러셀

[ 담당 개발자: 정서현 ]

캐러셀 이미지 5초마다 자동으로 무한 슬라이드
화살표 버튼, 동그라미 버튼으로 이미지 이동
캐러셀 이미지 클릭 시 해당 공지 상세 페이지로 이동
파이어베이스 데이터 가져오는 동안 로딩 스피너 동작

위키 페이지

[ 담당 개발자: 김민서 ]

마크다운 형식의 위키 글 편집
GUI를 통해 쉬운 편집 기능 제공
편집 시 마크다운 미리보기 기능 제공
수정한 글 저장 시 작성자 및 작성 시간 업데이트

갤러리 페이지

[ 담당 개발자: 윤석민 ]

멤버 소개 페이지에서 회원가입한 멤버들의 프로필 조회
프로젝트 진행 상황 별로 예정, 진행중, 완료된 프로젝트 조회
프로젝트 추가를 통한 새로운 프로젝트 생성
등록되어 있는 프로젝트 상태 및 내용 수정
프로젝트 생성자 표시 및 프로젝트 참여 가능

출퇴근 기록

[ modal 개발자: 이재준, table 개발자: 정서현 ]

출퇴근 모달 클릭 시 타이머를 통해 출근 시간, 퇴근 시간 기록
퇴근 클릭 시 총 근무시간 확인
당일 출근 기록이 이미 있을 경우 재출근할 건지 확인
같은 날 출퇴근 여러 번 기록 가능
퇴근 완료했을 경우 해당 날짜의 가장 최근 출퇴근 기록 출퇴근 테이블에 추가 (메인 페이지)

🙋🏻‍♀️ 유저 플로우

🛠️ Stack

공통 요소를 만든다

공통 요소를 수정한다.

위키 마크다운 에디터 기능을 추가한다.

디자인을 통합한다.

공지 페이지를 반응형으로 디자인한다.

…contact

모달 디자인을 수정한다.

…contact

README.md 파일을 업데이트한다.

…contact

about page를 최종 수정한다.

Feat: 직원 리스트 페이지 모달 마크업

마크다운 에디터 구현을 위한 초기 세팅 (이슈 #7)

marshallku

고생 많으셨습니다!
프로젝트의 컨셉에 맞춰 프로젝트도 모험같은 것 처럼 관련된 느낌으로 제작됐으면 어땠을까 싶네요.

코드 스타일 통일
반복되는 로직 및 UI 공통화
조건문 / 비동기 반복되는 상황에 코드 단순화
비동기 에러 처리

정도를 다음 프로젝트 때 고려해보시면 좋을 것 같습니다!

중복되는 리뷰는 생략했으니, 본인의 코드에 대한 리뷰가 아니더라도 한 번씩 참고해주시면 감사하겠습니다~

marshallku · 2023-09-30T12:01:48Z

index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">


en -> ko로 변경하셔야겠죠?

marshallku · 2023-09-30T12:05:13Z

src/common/CommuteButton.tsx

+  );
+};
+
+const Button = styled.button<{ backgroundColor: string; hoverColor: string }>`


styled component에 넘기는 props를 DOM element까지 전달하지 않으려면, prop의 이름을 $로 시작해야하지 않나요?

marshallku · 2023-09-30T12:06:24Z

src/common/CommuteButton.tsx

+import { MouseEventHandler, ReactNode } from 'react';
+import styled from 'styled-components';
+
+interface Props {


CommuteButton 외부에서 이 Props에 접근하려면 Parameters<typeof CommuteButton>[0] 처럼 접근해야 하는데, 이 interface의 이름을 CommuteButtonProps로 바꾸고 export하도록 하면 좀 더 접근이 편하지 않을까요?

marshallku · 2023-09-30T12:07:50Z

src/common/CommuteButton.tsx

+  );
+};
+
+const Button = styled.button<{ backgroundColor: string; hoverColor: string }>`


여기 사용된 value 값들을 Props에서 가져오도록 작업하면, CommuteButton의 props 타입이 변경되면 유동적으로 따라가도록 할 수 있을 것 같아요.

marshallku · 2023-09-30T12:09:53Z

src/common/UserContext.tsx

+
+// 컨텍스트의 타입 정의
+interface UserContextType {
+  user: User | null;


이 패턴이 많이 반복되는데, type Nullable<T> = T | null;같은 헬퍼를 만들었으면 어땠을까요?

marshallku · 2023-09-30T19:05:21Z

src/pages/wiki/Info.tsx

+  const [editor, setEditor] = useState<string>(''); //작성자 추가
+  const editorRef = useRef<Editor | null>(null);


주석도 이런 이유에서 추가된 것 같은데, 편집자와 편집기가 좀 헷갈리네요...
editorComponentRef처럼 조금 더 구체적으로 변수명을 지어보면 어떨까요?

marshallku · 2023-09-30T19:08:09Z

src/pages/wiki/Info.tsx

+        } else {
+          console.log('문서가 없음');
+        }


문서가 없을 땐 console에 출력 외에 아무 동작을 진행하지 않는데, 문서가 존재하지 않으면 early return만 해버려도 되지 않을까요?

marshallku · 2023-09-30T19:09:59Z

src/pages/wiki/Rule.tsx

+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const docRef = doc(db, 'wiki', 'rule');


이 영역도, db 컬럼 명만 다른 거라면 한 컴포넌트로 묶어두는 게 관리하기 편할 것 같네요.

marshallku · 2023-09-30T19:11:00Z

src/utils/CategoryTitleSection.ts

이런 것들은 유틸리티보단 컴포넌트라고 보는 게 맞지 않을까요?

marshallku · 2023-09-30T19:13:53Z

src/utils/formatTime.ts

+  const startIndex = newTime.indexOf('T');
+  const lastIndex = newTime.indexOf('.');
+  const formattedTime = newTime.slice(startIndex + 1, lastIndex);


getHours() 등의 메서드를 활용하는 게 조금 더 안전하지 않을까요?

gaori and others added 30 commits September 8, 2023 13:29

init: Do initail setting

0dac7e4

docs: Edit RADME.md

db20264

docs: Edit README.md

3f6e34c

chore: Edit eslintrc

22aee7e

design: Add default theme

2f5e34c

feat: Add Header

9bf6613

feat: Test routing

362048a

feat: Add default pages

d30c0e4

Merge branch 'dev' into feat/header

3c1b7a8

feat: Add nav links

bba51fe

style: Change font family

8f5df07

feat: Add common flex container

3546f83

style: Change main layout

5392a18

style: Change layout

f9871be

Merge pull request #1 from JSH99/feat/header

46fdb4f

공통 요소를 만든다

feat: Add search bar

0a10fd7

feat: Add user icon

19d2b07

feat: Add categories type

4c4f7c4

refactor: Get categories efficiently

dd50e2e

refactor: Separate category related components

309456c

feat: Add commute icon and remove write button

413b184

feat: Add category toggle

63168a6

feat: Change position of sidebar

43c240f

feat: Add router elements

e888cff

Merge pull request #2 from JSH99/feat/header

3829132

공통 요소를 수정한다.

feat : Add markdown

989226b

feat : Edit markdown editor

ad5dfef

Merge pull request #3 from JSH99/feat/wiki

0c365ba

위키 마크다운 에디터 기능을 추가한다.

feat : Connection firebase

80ae5f1

feat : Add universal variable for firebase

f270829

dbstjrals and others added 22 commits September 22, 2023 18:07

fix: Change setDoc to updateDoc while editing projects

3ea472a

Merge pull request #38 from JSH99/feat/gallery

791373d

design : Unify design css

757309d

fix : Resolve merge conflict

ac22fdd

design : Design common css

1f16843

Merge pull request #39 from JSH99/feat/login

9831fca

디자인을 통합한다.

design : Design notice

d7641f2

Feat: Add user flow page

968c423

Merge pull request #40 from JSH99/feat/login

fe5fdae

공지 페이지를 반응형으로 디자인한다.

Merge branch 'dev' of https://github.com/JSH99/Toy1_Team13 into feat/…

8ca14a9

…contact

design: Change modal design

e68aa69

Merge pull request #41 from JSH99/feat/modal#2

ecb5054

모달 디자인을 수정한다.

Merge branch 'dev' of https://github.com/JSH99/Toy1_Team13 into feat/…

0b1026c

…contact

docs: Update README.md

72335f1

Merge pull request #42 from JSH99/feat/readme

5d2c35a

README.md 파일을 업데이트한다.

Merge branch 'dev' of https://github.com/JSH99/Toy1_Team13 into feat/…

7697a0c

…contact

Fix : change image

e949cc2

Style: add color

894b45a

Style: add color

15f3139

Merge pull request #43 from JSH99/feat/contact

464fca5

about page를 최종 수정한다.

fix : Resolve merge conflict

78d85a9

Update README.md

6aab030

minseokiim assigned dbstjrals, minseokiim, JSH99, Gaoridang and Sinary00 Sep 22, 2023

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

Merge pull request #22 from im-na0/feature/#9

1e3837e

Feat: 직원 리스트 페이지 모달 마크업

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

Merge pull request #9 from TaePoong719/feature/#7

b4da623

마크다운 에디터 구현을 위한 초기 세팅 (이슈 #7)

marshallku reviewed Sep 30, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Y_FE_Toy1_Team13 Pokemon Wiki #9

Y_FE_Toy1_Team13 Pokemon Wiki #9

JSH99 commented Sep 22, 2023

marshallku left a comment •

edited

Loading

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

marshallku Sep 30, 2023

		const [editor, setEditor] = useState<string>(''); //작성자 추가
		const editorRef = useRef<Editor \| null>(null);

Y_FE_Toy1_Team13 Pokemon Wiki #9

Are you sure you want to change the base?

Y_FE_Toy1_Team13 Pokemon Wiki #9

Conversation

JSH99 commented Sep 22, 2023

💻 Toy Project1

📌 개요

🐱 사이트

🧚‍♂️ 역할 분담

✨ 구현 내용

회원 정보 관리

공지 캐러셀

위키 페이지

갤러리 페이지

출퇴근 기록

🙋🏻‍♀️ 유저 플로우

🛠️ Stack

marshallku left a comment • 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

marshallku left a comment •

edited

Loading