기능 상세

• 이슈 템플릿 작성
• Bug 이슈 템플릿 작성
• PR 템플릿 작성

버그 기능

• Panel 컴포넌트에서 PanelContext의 타입이 맞지 않아 정상적인 컴파일이 진행되지 않는 문제가 있습니다.

버그 상황 재연

• yarn start로 개발 서버를 실행합니다.

기대 동작

• 개발 서버가 정상적으로 동작합니다.

현재 동작

• Panel 컴포넌트와 관련된 타입 문제로 인해 개발 서버가 열리지 않습니다.

import 순서 정렬을 eslint 규칙에 맞게 적용
(유조: 귀찮은 일은 기계에게!)

백엔드

• 참고자료
  https://goodgid.github.io/Ubuntu-Change-Local-Time/#2st-method
  https://goodgid.github.io/Spring-Local-Time/

• Windows 환경에서 Node.js의 process.env 사용을 위한 NODE_ENV를 사용할 수 없는 문제를 해결하기 위해 cross-env 패키지 적용이 필요함.

설명

• Input 컴포넌트에서 상단에 라벨만큼 추가적으로 여백을 주지 않아, 다른 요소들과 나란히 보였을 때 다음과 같이 보이는 문제가 있습니다.
  

기능명

• 테스트 코드 작성

기능 상세

• 서비스 테스트 코드 작성
• 테스트 코드 중복 처리 (fixture)

기능명

• 페이지 : 예약자 - 예약

기능 상세

• 사용자 입력값 : 비밀번호
• API 데이터 : 예약ID, 비밀번호
  • 비밀번호 일치 시 200?
  • 비밀번호 불일치 시 400?
• 사용자 입력값 : 시작일시, 종료일시, 이름, 회의명(용도)
• API 데이터 : 예약ID, 시작일시, 종료일시, 이름, 회의명(용도)
  • 수정 성공 시 200
  • 수정 실패 시 400

회원가입 UI 구현

상세 목록

• 회원가입 페이지 구현

예약자 메인페이지 공간 예약 폼 UI 구현

기능 상세

• 예약자 메인 페이지 공간 예약 폼 구현

로그인 UI 구현

상세 목록

• Input Component 구현
• Button Component 구현
• Header Component 구현
• 로그인 페이지 구현

기능명

• 페이지 :

기능 상세

백엔드

• 패키지 구조 잡기
• Member Entity 생성
• Reservation Entity 생성
• Map Entity 생성
• Space Entity 생성
• 더미데이터 넣기

기능명

• 토큰 발급

기능 상세

• 로그인 시 AccessToken을 바디에 담아 응답합니다.
• 사용자 입력값 및 API 데이터: 이메일, 비밀번호

Table 컴포넌트

• 페이지 : 관리자 메인 페이지(예약 목록)

기능 상세

• 표를 그릴 수 있는 Table 컴포넌트를 구현한다.

상세

• Header 컴포넌트가 최상위 레이어에서 보이지 않는 문제가 있습니다. z-index: 99;를 정의해주면 해결할 수 있는 문제로 보입니다.

기능명

• 페이지 : 예약페이지 - 예약

기능 상세

• 사용자가 예약 삭제 클릭시 비밀번호를 입력 받는다.
• 비밀번호가 일치하면 예약을 삭제한다.
• 비밀번호가 일치하지 않으면 사용자에게 알려준다.

기능명

• 페이지 : 예약자 - 예약

기능 상세

• 사용자 입력값 : 이름, 비밀번호
• API 데이터 : 예약id, 비밀번호
  • 비밀번호 일치 시 예약 삭제 후 204 No Content
  • 비밀번호 불일치 시 400?

기능 상세

• 요청 헤더에 첨부된 AccessToken의 유효성 검사

기타

• 검증 후 토큰에 첨부된 이메일("sub"키에 담긴 Value)을 ArgumentResolver로 Parsing 할 수 있는 기능을 추가하고 및 활용할지에 대한 논의가 필요합니다.
• 인증이 필요한 API에 대해 검증 로직을 추가하고, 이를 개발 과정에서도 사용할 건지 논의하면 좋을 것 같습니다. (개발과정에서는 검증 로직이 빠지면 개발 속도가 빨라질 수 있을 것 같다는 생각이 들었습니다)

예약자 메인페이지 맵 UI 구현

• 페이지 : 예약자 - 메인페이지

기능명

• 페이지 :

기능 상세

백엔드

• application-local.properties 수정
• application-prod.properties 수정

기능명

• 페이지 : 예약자 - 예약

기능 상세

• 사용자 입력값 : 비밀번호
• API 데이터 : 예약ID, 비밀번호
  • 비밀번호 일치 시 200?
  • 비밀번호 불일치 시 400?
• 사용자 입력값 : 시작일시, 종료일시, 이름, 회의명(용도)
• API 데이터 : 예약ID, 시작일시, 종료일시, 이름, 회의명(용도)
  • 수정 성공 시 200
  • 수정 실패 시 400

기능명

• 페이지 :

기능 상세

백엔드

• 이메일 중복확인 성공에 대한 테스트 작성
• 로그인 API RestDocs 적용

기능 상세

• 예외 클래스/패키지 분리
• 프로덕션 코드 패키지 분리
• Dto 중복코드 정리

기능명

• 페이지 : -

기능 상세

• 리소스 빌드, 배포 환경 구성
  • 젠킨스 등
  • 삭정이 정리한 wiki 문서 참조

기능명

• 페이지 : Join

기능 상세

• [FULL] 회원가입시 입력항목 : 이메일, 비밀번호, 조직명
• [FULL] 입력값 validation
  • 이메일 형식 검사
  • 이메일 중복 확인

기능명

• 페이지 :

기능 상세

백엔드

• 인스턴스 생성 후 배포 환경 구성

Panel 컴포넌트

• 페이지 : 관리자 메인 페이지

기능 상세

Panel 컴포넌트

• props
  • children: ReactNode
  • expanded: boolean
  • expandable: boolean

기능명

• 페이지 : 예약자 - 예약

기능 상세

• 사용자 입력값 : 시작일시, 종료일시, 비밀번호, 이름, 회의명(용도)
  • 시작시간은 과거가 될 수 없다.
  • 비밀번호 : 숫자 4자리 고정
• API 데이터 : 맵ID, 공간ID, 시작일시, 종료일시, 비밀번호, 이름, 회의명(용도)

기능명

• 페이지 : Join

기능 상세

• 비밀번호 : (필수) 영어 + 숫자 8자 이상, (선택) 특수문자 입력가능
• 조직명 : 1자 이상, 특수문자 일부 허용([ - , _ , !, ?, ., , ])
• 회원가입 성공시 → 리다이렉션(로그인 페이지) + snackbar("회원가입에 성공하였습니다.")
• 회원가입 실패시 → 인풋 창 밑에 글자로 알려줌

기능명

• 페이지 : 예약자 - 예약

• SpaceMapList 컴포넌트
• ProviderMain 페이지

버그 기능

• 현재 ESLint가 동작하지 않지 않습니다.

버그 상황 재연

class A extends Component {
  render() {
    const [expanded, setExpanded] = useState(false);
    return (
      <div></div>
    )
  }
}

다음과 같이 hook을 클래스 컴포넌트에 작성하는 코드를 작성했습니다.

기대 동작

react-hooks/rules-of-hooks에 의해 Warning이 발생합니다.

현재 동작

아무런 Warning도 없습니다.

설명

현재 eslint-plugin-prettier와 eslint-config-prettier를 설치하지 않은 채로 ESLint 설정을 해서 ESLint가 제대로 동작하지 않습니다.

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

기능 상세

• exception 발생 시 log를 보여주도록 한다

기능 상세

• theme의 역할에 맞도록 theme 객체를 재정의한다.

설명

현재 theme 객체는 유동적으로 페이지의 색상을 변경할 수 있는 theme 객체의 역할보다는 Color palette의 역할에 가깝습니다.
예를 들어, 현재 텍스트 색상을 지정하는 스타일의 경우 다음과 같이 정의되어 있습니다.

color: ${theme.black[400]};

만약 theme을 이용하여 페이지를 다크 모드로 변경한다고 했을 때, 텍스트 색상은 밝은 색이 되어야 할 것입니다. 하지만 현재 상태에서는 무조건 검은색의 텍스트 색상만 보여진다는 의미가 됩니다.

따라서, 텍스트나 선과 같이 element의 색상이 theme에 따라서 어색하지 않게 보여줄 수 있도록 theme을 다시 정의해주어야 합니다.

예를 들어서 텍스트 색상은 다음과 같이 쓸 수 있을 듯합니다.

color: ${theme.color.text[400]};

어느 정도 기능 정의가 끝나면 함께 리팩토링을 진행해봤으면 합니다.
그 동안 theme과 관련하여 좀 더 공부해보고, 관련 사례도 찾아보겠습니다.

기능명

• 페이지 : 공간 제공자 - 로그인

기능 상세

프론트엔드

• [FE] 로컬 스토리지에 토큰 저장
• [FE] 로그인 성공시 → 리다이렉션(메인 페이지)
• [FE] 로그인 실패시 → 인풋 창 밑에 글자로 알려줌 + 인풋 창 border를 빨간색으로 변경
• [FE] 로그인 유효성 검사
  • Email 형식이 아니면 submit X
  • Email or Password 가 null이면 submit X

백엔드

• [BE] 로그인 성공시 토큰 (JWT) 발급
  • 토큰 payload에 뭐 넣을거야? EMAIL
• [BE] 로그인 실패시 400 발생
  • 비밀번호 불일치
  • 유효성 검사(null 체크)

• 응답 형식 예시

{
    "message": "",
    "data": ""
}

// 에러
{
    "message": ""
}

기능명

• 페이지 : 공간 제공자 - 로그인

기능 상세

프론트엔드

• [FE] 로컬 스토리지에 토큰 저장
• [FE] 로그인 성공 시 → 리다이렉션(메인 페이지)
• [FE] 로그인 실패 시
  • 인풋 창 밑에 글자로 알려줌
• [FE] 로그인 유효성 검사
  • Email 형식이 아니면 submit X
  • Email or Password 가 null이면 submit X

기능명

• 페이지 : -

기능 상세

• version 수정
• package name 수정
• main 수정

기능명

• 페이지 : 예약자 - 예약

기능명

• 페이지 :

기능 상세

백엔드

• Spring Rest Docs를 적용한다.

기능명

• 페이지 :

기능 상세

백엔드

• 인수테스트 saveMember 충돌 해결
• RestDocs 적용 오류 해결

기능명

• 페이지 : 회원가입 페이지, 로그인 페이지

기능 상세

• Header Component의 z-index를 조절하여 CSS 우선순위가 항상 1순위가 되도록 조절

기능명

• 페이지 : 예약자 - 예약

기능 상세

• 사용자 입력값 : 시작일시, 종료일시, 비밀번호, 이름, 회의명(용도)
  • 시작시간은 과거가 될 수 없다.
  • 비밀번호 : 숫자 4자리 고정
• API 데이터 : 맵ID, 공간ID, 시작일시, 종료일시, 비밀번호, 이름, 회의명(용도)

기능명

• 페이지 : 사용자 메인 페이지, 사용자 예약 페이지

기능 상세

ReservationList 컴포넌트 구현

• props
  • header : ReactNode

ReservationListItem 컴포넌트 구현

• props
  • controls : ReactNode

백엔드

• CORS 설정을 추가한다.

예약자 메인 페이지 공간 별 예약 현황 목록 UI 구현

• 페이지 : 예약자 - 메인 페이지

기능명

• 페이지 : 공간 제공자 - 회원가입

기능 상세

• [FULL] 회원가입시 입력항목 : 이메일, 비밀번호, 조직명
• [FULL] 입력값 validation
  • 이메일 형식 검사
  • 이메일 중복 확인
  • 비밀번호 : (필수) 영어 + 숫자 8자 이상, (선택) 특수문자 입력가능
  • 조직명 : 1자 이상, 특수문자 일부 허용([ - , _ , !, ?, ., , ])

백엔드

• [BE] DB(Member Table)에 저장
  • 회원가입 성공시 201 반환