Y_FE_Toy1_Team4 WIKI 서비스 #1
Conversation
[#6] Gallery Create - Modal
react-lottie 라이브러리 설치 --force (이용)
Lottie 애니메이션 구현(react-lottie 사용) (size 조절 가능)
[#39] Publishing Login Page
[#42] Lottie Animation in MainPage Component
[#44] Implement Google Login
This reverts commit 9059936.
캐러셀 이미지들의 이름을 변경 !
[#107] rename: Carousel Image Name Change
[#94] Mainpage Lottie Error & commuteList desgin revise
[#106] favicon 추가
[#101] Refactor Wiki
[feat] firestore내 User데이터 불러오기
Remove .env file from git repository
디자인 초안이 나옴에 따른 컴포넌트 관계 설정 및 컴포넌트 레이아웃 재조정 (이슈 #1)
Revert "디자인 초안이 나옴에 따른 컴포넌트 관계 설정 및 컴포넌트 레이아웃 재조정 (이슈 #1)"
There was a problem hiding this comment.
필수 구현 + 캘린더(일정 등록 등) 기능으로 완성도 있게 마무리한 것 같아 깔끔하네요.
컴포넌트(파일)도 잘 분리해서 적당한 사이즈(코드라인 수)인 것 같고, 타입이나 스타일컴포넌트 네이밍 등이 다 일관성이 있어 가독성도 너무 좋고요. 타이머 등등 일부 로직 구현도 어렵게 하진 않으신 것 같아보여요.
고생하셨습니다~👍👍👍
- 이미지 리소스 관리
이미지 리소스가 무거워서 느렸을 건데요,
cdn 주소로 활용해서 최적화할 수 있어요.(현업에서 많이 활용. AWS S3+ cloudfront 사용하는 것인데 image cdn에 대해서 검색해서 공부해보시는 것 추천드립니다.)
- img태그의 width, height 속성을 지정해줘서 실제 사이즈 그대로 가져오는 걸 막을 수도 있고요.
아니면 imgur같은 곳에 업로드 해서 이미지 주소를 가져다 활용할 수 도 있습니다.
| @@ -0,0 +1 @@ | |||
| * @gahyuun @zoeyourlife @applevalley @wkdtnqls0506 | |||
| @@ -0,0 +1,11 @@ | |||
| ### ⛳️ Task | |||
There was a problem hiding this comment.
PR 템플릿 너무 좋습니다~ 협업을 위한 준비를 잘하셨군요.
| @@ -0,0 +1,8 @@ | |||
| import { render, screen } from '@testing-library/react'; | |||
There was a problem hiding this comment.
위 기본 로고 이미지나, 테스트도 사용하고 있지 않으면 cra생긴 기본 파일들은 제거해도 좋아요~
| <Route | ||
| path={ROUTES.MAIN} | ||
| element={user ? <Main /> : <Navigate to="/login" />} | ||
| ></Route> | ||
| <Route | ||
| path={ROUTES.GALLERY} | ||
| element={user ? <Gallery /> : <Navigate to="/login" />} | ||
| ></Route> | ||
| <Route | ||
| path={ROUTES.WIKI} | ||
| element={user ? <Wiki /> : <Navigate to="/login" />} | ||
| ></Route> | ||
| <Route | ||
| path={ROUTES.CALENDAR} | ||
| element={user ? <Calendar /> : <Navigate to="/login" />} | ||
| ></Route> | ||
| <Route | ||
| path={ROUTES.LOGIN} | ||
| element={user ? <Navigate to="/" /> : <Login />} | ||
| /> |
There was a problem hiding this comment.
토이 진행중 멘토링 시간때 로그인 관련 질문을 주셨었었죠~
모든 라우트에서 element에서 분기처리하는 것보다
최상위에서 (path가 바뀔때마다) 한번씩만 검사하도록 하면 편할 것 같아요. 코드 수도 그렇고요.
로그인여부만 검사하는 컴포넌트를 훅처럼 사용할 수 있을 것 같습니다.
예시
const CheckUser = () => {
useEffect(() => {
if (localStorage.getItem(AUTH_KEY.accessToken)) {
// 특정 페이지로 간다던지
else {
// refreshToken 을 받아온다든지
}
}, [ // location path])
return null
}
// Main.tsx
funcion Main () {
return (
..
<CheckUser/>
)| interface ICalendarData { | ||
| content: string; | ||
| startDate: string; | ||
| endDate: string; | ||
| } | ||
|
|
||
| interface ICalendarResponse { | ||
| start: Date; | ||
| end: Date; | ||
| title: string; | ||
| id: string; | ||
| } |
There was a problem hiding this comment.
타입명 규칙도 정확하네요! 저는 CalendarDataType / 컴포넌트 props인 경우 CalendarProps 이런식으로 정의하기도 합니다.
interface인 경우 I, type인 경우 T를 반드시 붙여야하는 건 아니지만 이렇게 하면 구분이 좋긴 한 것 같네요~
| const clickRunButton = () => { | ||
| setIsRunning(!isRunning); | ||
| }; | ||
| const clickFinishButton = () => { | ||
| setIsFinishing(true); | ||
| setIsRunning(!isRunning); | ||
| }; | ||
| const clickOkayButton = () => { | ||
| setShowModal(false); | ||
| setWorkTime(WORK_TIME_INITIAL_VALUE); | ||
| setIsRunning(false); | ||
| setIsFinishing(false); | ||
| setIsStopping(false); | ||
| addWorkTimeData(workTime); | ||
| }; |
There was a problem hiding this comment.
상태값이 많아 헷갈렸을 수도 있겠네요.
혹시 isRunning <-> isFinishing <-> isStopping 간에 서로 동작 트리거가 되거나 연쇄성이 있는 부분은 없을까요?
만약 서로 dependency가 있다면 useCallback 등을 적절히 사용해야 할 수도 있을 것 같아요. (없다면 문제없고요)
| <StyledCommuteMenu | ||
| onClick={() => { | ||
| setShowModal(true); | ||
| }} | ||
| > |
There was a problem hiding this comment.
코드 한 줄의 printWidth를 얼마로 정해두었나요? 보통 148~160 대 정도는 충분한 것 같아요. 일부러 하신 거라면 상관없습니다.
파일 내 코드라인이 길어지면 보기 힘들 수도 있으니까요.
<StyledCommuteMenu onClick={() => setShowModal(true)}>이렇게 한줄로도 충분한 것 같아요 이정도는.
| </StyledCustomModal> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
사용자관점에서 의견인데요!
stop이라는 버튼이 타이머 옆에 있어서, 이 스탑 버튼을 누르면 마치 시간이 멈춰야할 것 같은 인상이 들어서요.
밑에 퇴근 버튼 쪽에 있는 게 더 인지하기 쉬운 것 같아요!
| @@ -0,0 +1,15 @@ | |||
| export const CALENDAR_TITLE = '님의 캘린더'; | |||
There was a problem hiding this comment.
꼼꼼한 상수 활용 너무 좋습니다. 효율적인 코딩/유지보수 등에 있어서 가장 중요한 부분 같아요.
| } | ||
|
|
||
| function WikiCreate({ setIsEdit, selectedCategory, data }: createProps) { | ||
| const isCreate = data === undefined; |
There was a problem hiding this comment.
내려온 data 가 없을 때 "생성" 이다, 라는 의미인거죠?
이런 플래그 값을 만들때는 memoization을 하면 좋습니다.(성능면)
| const isCreate = data === undefined; | |
| import isNil from 'lodash/isNil' | |
| const isCreateMode = useMemo(() => isNil(data), [data]); |
WIKI
WIKI 바로 가기
WIKI repositories 바로가기
🔖 프로젝트 소개
WIKI는 사내 업무 효율성을 극대화하는 종합적인 서비스입니다.
직원들의 업무 시간 체크, 이미지 및 캐러셀을 통한 회사 공지 제공, 개인 캘린더 관리 등 다양한 기능을 통해 원활한 커뮤니케이션과 정보 공유를 지원합니다.
💻 기능 소개
Main
메인 페이지의 캐러셀 기능을 react-slick 라이브러리를 사용하여 구현하였습니다. 다양한 커스터마이징을 통해 동적인 캐러셀을 만들었습니다.
react-lottie 라이브러리를 사용해 로티 애니메이션을 만들었고, 사용자에게 조금 더 다양한 경험을 하게 해줄 수 있었습니다.
date-fns를 통한 업무 기록 리스트 렌더링에서도 사용자가 자신이 언제 통근 했는지 수치적으로 더 알기 쉽게 만들었습니다
Modal
타이머 모달을 통해 현재 시간을 출력, 업무 시간 측정, 휴게시간 (정지) 기능을 구현하였습니다
업무 시간은 database에 저장 후 메인 페이지에서 출력합니다
Wiki
선택한 카테고리에 대해 새롭게 글을 등록하거나, 등록된 글을 수정/삭제할 수 있는 기능을 구현하였습니다.
@uiw/react-md-editor 패키지를 사용해서 작성한 텍스트를 마크다운 양식으로 보여줄 수 있게 구현하였습니다.
페이지 내 네비게이션 바와 컨텐츠 영역의 크기를 해상도에 따라 분기해 반응형 웹 구현을 진행하였습니다.
Gallery
갤러리 페이지에서 파이어베이스를 사용하여 시간 순으로 사진을 등록/삭제 할 수 있도록 구현하였고, 카테고리 별로 필터링하여 해당 사진들만 보여줍니다.
사진을 업로드할 수 있는 모달창을 구현하였고, 파일 업로드시 선택한 사진의 프리뷰를 미리 볼 수 있습니다.
반응형을 구현하여 기기별로 사용자가 이용하기 편리하게 작업하였습니다.
Calendar
fullCalendar 라이브러리를 사용하여 개인 캘린더를 구현하였습니다
모달창을 통해 일정 등록이 가능하며 일정 확인과 일정 삭제는 sweetalert를 통해 구현하였습니다
모든 일정은 database에 저장됩니다
Login
구글 로그인 기능을 도입하였고 로그인 여부에 따라 페이지 접근 권한을 분기 처리 하였습니다
(백오피스이므로 로그인을 하지 않으면 모든 페이지 접근 불가합니다)
🔨기술 스택
📘Convention
개발 Convention
작업플로우 및 브랜치 전략
커밋 Convention
이슈 라벨 Convention
코드 리뷰
업무 공유
디렉토리 구조
🙋♀️Contributors
-live clock 출력
-업무 시간 기록
-휴게시간(정지) 구현
-로그인 페이지
-소셜 로그인 구현
-페이지 접근 권한
분기처리
-캘린더 페이지
-일정 CRD 구현
-헤더 구현
-wiki 로딩 로직 구현
-gallery로딩 로직 구현
-반응형 구현
-캐러셀 기능
-작성 시간 계산
-404 페이지 구현
-로딩애니메이션 구현
-반응형 구현
-사진 CRD 작업
-업로드 모달 구현
-카테고리 별 필터링
-로딩애니메이션 구현
-반응형 구현
- 위키 CRUD 작업
-카테고리 별 필터링
-마크다운 구현
-반응형 구현
🤲느낀 점
가현
수빈
재훈
현준