react-antd applied with component hierarchy changes

[ghost]

ANTD applied to already existing homepage components

• main page("/")에 react-antd design 적용을 완료하였습니다.
• 새로운 페이지는 header와 sider를 포함합니다.
• 기존의 routing 방식을 버리고 sider의 각 메뉴를 클릭할 시 컨텐츠 화면에 서로 다른 page component가 rendering되도록 구현하였습니다.
• trip creator를 admin 계정으로 지정하자는 조교님의 조언에 따라 settings menu를 추가하였습니다.
  • settings 내에 add user가 들어가 있으며, user list 및 delete도 추가 구현할 예정입니다.
  • settings에서 trip title, 기간을 수정할 수 있게 할 수도 있을 것 같습니다.
  • settings menu는 admin 계정일 경우만 보이도록 rendering할 예정입니다.
• header 왼쪽에는 login한 username을 보여주고 오른쪽에는 logout button을 넣었으며, center에는 trip title이 들어갈 예정입니다. 들어갑니다.

• money의 budget과 expense는 tab으로 구현하였습니다.
• photo와 diary의 목록과 추가 페이지도 tab으로 구현하였습니다.
• sider 아래의 접기 버튼으로 icon만 보이게 접을 수 있습니다. (redux-saga까지 완료)

[ghost]

settings page

[ghost]

Changed routing urls

현재 남은 페이지는 (routing) 다음과 같습니다.

• /
• /intro
• /signup
• /user : addtrip molecule 포함
• /test : 만들고 있는 component를 test할 때 사용할 수 있습니다. None page에 container나 component를 넣으면 됩니다.

[ghost]

New component hierarchy

page	organism	molecule	atom
Home	Antd, Diary, HomePage, Photo, Money, Rules	AddUser, AddRule, AddSchedule, AddTodo, AddDiary, AddPhoto, Budget, Expense, Diaries, Photos, Calendar, RuleList, ScheduleList, Logout, TodoList	Rule, Todo
User		AddTrip, User	TripTitle
Intro		Intro
Signup		SignUp

[ghost]

Link to user page button added

• user 이름을 누르면 /user page로 이동하도록 구현하였습니다.
• sider 접힌 모습도 함께 확인하실 수 있습니다.

[ghost]

Intro page design

• intro page 디자인하였습니다. antd button을 사용하여 정상적으로 동작하는 것을 확인하였습니다.
• antd input component도 있으나 default 을 사용하지 않으면 ref가 잘 동작하지 않아 그대로 두었습니다.
• 배경 image는 styled를 이용하여 추가하였으며 변경 가능합니다.

import img from './../../image.jpg';
const Wrapper = styled.div`
  font-family: ${font('primary')};
  text-align: center;
  margin: auto;
  border: 1px solid #000;
  background-image: url(${img});
  background-size: cover;
  width: 100vw;
  height: 100vh;
`;

[ghost]

AddTrip component updated

• AddTrip component를 antd form을 이용하여 구현하였습니다. user page에서 버튼을 클릭하면 됩니다.
• component를 class type으로 변환하였습니다. redux-saga와의 연결도 확인하였습니다. 참고하시기 바랍니다.
• add 성공 후 user page re-rendering은 아직 안됩니다. sessionStorage로 해결되었습니다. #23 을 확인해주세요.
• 입력 하지 않고 add할 시 경고 메시지도 지원됩니다.

[ghost]

User page, sider, header updated

• user page에 sider를 적용했습니다.
• 5월 25일 회의 결과에 따라 user page sider의 배경을 사진으로 변경하였습니다.

• 마찬가지로 home page header의 배경을 사진으로 변경하였습니다.

• 사진을 사용해서 loading에 시간이 걸립니다. 사진 용량과 관련이 있는 것 같습니다.
  1M 이하의 아름다운 사진이 있으면 변경해주셔도 됩니다.

[ghost]

Change in rules menu - new todo tab

• 5월 25일 회의 내용에 따라 home menu의 todolist를 rules&todos menu로 이동하였습니다.
• rule과 todo는 tab으로 분리됩니다.