doWork

https://do-work.vercel.app/

1. Outline

doWork는 협업을 위해 스케쥴을 관리할 수 있는 서비스이다. 파이어베이스를 이용하여 데이터 바인딩하고 있다. 현재 typescript를 적용하며 기술적으로나 UI 측면으로 리뉴얼하고 있다. 브레인 스토밍을 통해 work에 대한 생각을 정리하였고 기획에 맞게 기능들을 구현해나갈 것이다.

기획

• 브레인 스토밍

• Process Flow

• 디자인 : doWork Figma

주요 기능

현재 아래 기능들이 구현되어 있습니다.

• 로그인
• 회원가입
• 메인
  • 스케쥴 검색
  • 스케쥴 타임라인
  • status 필터
  • 캘린더
• 스케쥴 추가 모달
  • datepicker
  • 사용자 검색
• 스케쥴 조회/삭제 모달
• 마이페이지
  • 로그아웃

2. Folder Structure

📁 deeWork/
├── 📁 public/
├── 📁 src/
|    ├── 📁 assets/
|    ├── 📁 components/
|    ├── 📁 pages/
|    ├── 📁 types/
|    ├── 📜 App.tsx
|    ├── 📜 Constant.ts
|    ├── 📜 firebase.ts
|    ├── 📜 index.tsx
|    └── 📜 router.tsx
├── ⚙️ ts.confing.json
└── 📦 package.json

• assets : 이미지와 scss같은 정적인 파일을 담은 폴더
• components : 작은 단위의 컴포넌트를 담은 폴더
• pages : 화면을 구성하는 컴포넌트를 담은 폴더
• types : 글로벌로 선언되어야 하는 타입들을 담은 폴더

3. Issue & Slove

1. typescript 적용에 따른 타입 오류

   • 원인 : 비동기 호출하는 함수 부분에서 return값의 타입에 대한 오류가 발생했다.
   • 해결 : async & await 문의 return 값은 Promise<T>의 형태로 지정되어야 한다.

   const request = async (url: string, options : Options): Promise<any> => {
     try {
       const response = await fetch(url, options);
       const json = await response.json();
   
       if(response.ok){
           return response.json();
       }
       
       throw new Error('에러입니다.')
     } catch (e) {
       console.log(e);
     }
   };

2. Unexpected any. Specify a different type.eslint@typescript-eslint/no-explicit-any 오류 : 타입 any의 노란색 물결

   • 원인 : eslint가 명시적으로 선언되는 any를 방지하기 위하여 뜨는 경고이다.
   • 해결 : eslintrc.js에 "@typescript-eslint/no-explicit-any": "off" 추가

3. 인터페이스 타입 설정에 따른 문제점

   • 원인 : 안에 같은 내용을 담은 인터페이스를 각 컴포넌트에서 생성하여 사용할 경우 서로 다른 인터페이스로 인식
   • 해결 : 인터페이스를 정의하는 파일을 만들어 export하여 사용

4. 캘린더 타임라인 화면 표시될 시 겹치지 않아도 위치가 0에서부터 시작하지 않는 문제.

   • 원인 : top의 값을 index에 따라 주었기 때문.
   • 해결 : 현재 해결 중입니다.

회고

회고록을 보시려면 여기를 클릭해주세요:)