Frontend Implementation Log for Iteration2

[ghost]

Iteration2

• 박규연 :
  • Intro page
  • User page
• 양지훈 :
  • Signup page
  • Addtrip page
• 김지우 :
  • Rule page
  • Saga
• 최현지 :
  • Routing & redirecting
  • Header
• 박규연 양지훈 :
  • Trip homepage : add user, add schedule, add todo

[ghost]

Routing

• 현재 npm start 로 각 url에서 12개의 page를 확인할 수 있습니다.
• components/pages에 12개의 page를 생성하였습니다.

• 각각의 page에 지우씨처럼 다음과 같이 여러개의 container를 넣어주시면 됩니다.

• localhost:3000에서 다음과 같이 확인할 수 있습니다.

[choppaluv]

Proxy 설정

frontend와 backend 통신을 위해 proxy 설정을 해놓았습니다. backend api에서 GET을 할 수 있으며 POST의 경우 token을 주면 headers에 'Authorization': token ${token}을 넣어주면 가능합니다.

[choppaluv]

Rule page

• Rule page UI 변경했습니다.

• localhost:3000/rules에서 다음 페이지를 확인하실 수 있습니다.

• backend와의 통신이 잘 이루어지며 GET을 통해 기존 rule list를 보여주며 input에 새로운 rule content를 넣어 Add Rule 버튼을 누르면 POST가 성공적으로 이루어져 list에 바로 추가되는 것을 확인하실 수 있습니다.

• 각각의 rule 옆에 있는 delete 버튼을 누르는 경우 해당 rule이 삭제되는 것을 확인할 수 있습니다. 삭제 후에 rule list에 바로 반영되는 것 또한 확인하실 수 있습니다.

• 아래 그림에 대한 시나리오는 다음과 같습니다.

1. id 1~6까지에 해당하는 각각의 rule들을 Add Rule을 통해 생성합니다.
2. 4번 id에 해당하는 rule을 삭제합니다. (network에 이부분은 생략되어 있습니다)
3. 6번, 5번에 해당하는 rule을 차례대로 삭제합니다. (method=DELETE, status code=204)
4. 새로운 rule 두개를 생성합니다. (method=POST, status code=201)

[choppaluv]

Add Trip page

• 지훈님이 만드신 UI에 saga 추가해서 trip이 성공적으로 추가되는 것을 확인했습니다. (method=POST, status code=201)

[ghost]

Signup Page

지훈님이 만드신 page와 지우님이 만드신 saga에 새로운 signup backend를 반영하여 성공적으로 user registeration 되는 것을 확인했습니다. (method=POST, status code=201)

[choppaluv]

User page

규연님이 만드신 component 에 action, reducer, container, saga 추가하여 backend 통신이 잘 됨을 확인했습니다. 아래 그림은 admin user의 User page이며 admin user가 속한 trip list를 backend에서 받아온 것입니다. (method=GET, status code=200)

[choppaluv]

Intro page

규연님이 만드신 component, action, reducer, container에 saga 추가하여 backend 통신이 잘 됨을 확인하였습니다. 첫번째 그림의 경우 login fail의 경우이고(method=POST, status code=400), 두번째 그림의 경우 login success의 경우입니다(method=POST, status code=200).

[ghost]

Page 이동

만들어주신 page에서 state, action, saga, component 조금씩 수정하여 page 이동을 구현하였습니다. 현재까지 가능한 기능은 다음과 같습니다.

• login 실패 : intro page 유지, error message 표시
• login 성공 : user page로 전환
• signup 실패 : signup page 유지, error message 표시
• signup 성공 : login page로 전환 (자동 로그인은 안됨)
• addtrip 성공 : user page로 전환 (목록에 추가되는 것까지 확인됨)
• addtrip 실패 : addtrip page 유지, error message 표시
• trip 선택 : trip homepage로 이동

자세한 내용은 #12 를 참고해주세요

[choppaluv]

Home page

home page에 있는 adduser, schedules, todos에 해당하는 store부분을 구혀하였습니다.

1. adduser

   • 처음 home page로 redirect 되었을 때, 새로운 user가 성공적으로 추가되었을 때 추가된 user가 반영된 list를 add user 아래부분에 볼 수 있도록 하였습니다. 또한 username이 valid(user ID가 존재하는 경우) backend로 통신이 성공적으로 이루어짐을 확인하였습니다. (method=PATCH, status code=200)

   • invalid한 username이 들어오는 경우 'Invalid username'이라는 error message를 보이도록 하였으며, 이 경우 backend로 request가 전송되지 않습니다

   • user가 이미 trip member에 포함되어 있는 경우 'already exists'라는 error message를 띄울 수 있도록 하였습니다. 또한 이 경우에도 마찬가지로 backend로 request가 전송되지 않습니다.

2. schedules

   • home page로 redirect되면 backend로부터 schedule list를 받아옵니다. (method=GET, status code=200)

• 새로운 schedule이 추가되는 경우 backend로 POST가 성공적으로 이루어집니다. (method=POST, status code=201)

3. todos
   • homepage로 redirect되면 bacend로부터 todolist를 받아옵니다. (method=GET, status code=200) 새로운 todo를 입력하고 Add todo 버튼을 누르면 성공적으로 backend에 POST가 됩니다. (method=POST< status code=201)

[ghost]

Header

• react-router Link와 css로 header 구현하였습니다.
• 각 page로 정상적으로 이동하는 것을 확인하였습니다.

[ghost]

Session Login && Logout

• sessionStorage를 이용하여 username, token, tripID를 저장하였습니다. 새로고침을 해도 로그인상태가 유지됩니다. (이후 saga도 함께 수정할 예정입니다.)
• sessionStorage를 이용하여, 로그인 하지 않으면 signup, intro page를 제외한 모든 페이지를 볼 수 없고, intro page로 redirect되도록 하였습니다.
• logout button을 생성하였습니다. 클릭하면 sessionStorage를 초기화하고 intro page로 redirect됩니다.

[ghost]

For components, see log in #16 and #17.