디자인

[lekosk2001]

피그마

와이어프레임(https://www.figma.com/file/ipVxC7za24yRPddogxsZ8y/What-a-Chad-Project-wireframe?node-id=0%3A1&t=O1N7WLd4fJ0sQpkX-0)

[lekosk2001]

UI 메모

구현 페이지는 아래와 같습니다.

1. 유저 관련

1-1. 회원가입 폼 화면 1-2. 로그인 폼 화면

2. 홈 화면 및 글로벌 스타일

3. 운동설비 페이지

3-1. 리스트 화면 (카드 리스트 / 검색기능) 3-2. 운동설비 추가/수정 화면

4. 자기관리 페이지

4-1. 리스트 화면 (가계부리스트, todo리스트 및 달력) 4-2 .작성/수정 화면

[iDevBrandon]

상의 하면서 프로젝트 구조 및 공통 컴포넌트 잡아가면 좋을거 같습니다.

그리고 제 경험상 UI작업 하면서 동시에 리덕스 initialState에 더미 데이터 대략적으로 작성해두면 백앤드 분들과 소통이 더 원할하게 되면서 작업이 수월해지는거 같습니다.

const initialState = {
  facilities: [
    { 
      id: 1, 
      address: '123 Main St',
      location: {
        lat: 37.7749,
        lng: -122.4194
      },
      description: 'Beautiful park with playground and picnic area',
      type: 'Park'
    },
    { 
      id: 2, 
      address: '456 Maple Ave',
      location: {
        lat: 37.7833,
        lng: -122.4167
      },
      description: 'Indoor gym with weights and cardio equipment',
      type: 'Gym'
    },
    { 
      id: 3, 
      address: '789 Oak St',
      location: {
        lat: 37.7749,
        lng: -122.4312
      },
      description: 'Historic theater with live performances',
      type: 'Theater'
    }
  ],
daywork: [
    { id: 1, title: 'Finish project proposal', content: 'Research and write up proposal for new project', completed: false },
    { id: 2, title: 'Attend meeting with team', content: 'Discuss progress and plan for next steps', completed: true },
    { id: 3, title: 'Update website content', content: 'Write and publish new blog post', completed: false }
  ],
  accounting: [
    { id: 1, type: 'expense', account: 'Office Supplies', amount: 25.00 },
    { id: 2, type: 'earning', account: 'Client Payment', amount: 500.00 },
    { id: 3, type: 'expense', account: 'Advertising', amount: 100.00 }
  ],
  user: {
    name: 'John Doe',
    email: 'johndoe@example.com'
  },
  loading: false
}

[lekosk2001]

위의 내용 확인하였습니다. ui 구현 들어가게되면 해당 데이터를 바탕으로 진행하겠습니다.

1. 차후 initialState에 다른 state를 추가할 시점이 있을까요? 아니면 기획단계에서 처음에 잘 잡고 진행하는게 더 좋을까요?

2. 보통 글로벌 스타일은 어떤 순서로 진행하시나요?

   • 하위페이지의 기능을 먼저 만들고, 레이아웃과 글로벌 스타일을 나중에 잡아서 합치게 되나요?
   • 아니면 레이아웃과 글로벌스타일의 ui를 먼저 만들고, 그 스타일대로 하위 페이지를 만들게되나요?

3. 지금 프로젝트가 어떤 시점에 있나요? (제가 지금 어떠한 롤이 주어진 것인지 조금 구체화하고싶습니다.)

   • 기획은 ui를 구현하면서 더욱 같이 구체화할 예정이고, 디자인을 먼저 진행해보면 되는지
   • 곧 더욱더 구체적인 기획을 잡을 예정이고, 그 전까지 디자인을 대기하면 되는지

[iDevBrandon]

1. initialState는 마지막엔 빈 객체가 될거고, 다른 state는 추가가 필요하면 대략적으로 만들어두고, 백앤드분들께 먼저 애기 드려야 할거같습니다
2. 저는 보통 2번처럼 작업합니다. 대략적인 페이지/레이아웃만 미리 만들어두고, 이후에 필요한 기능을 레고처럼 쌓아올리는 방식으로 햇습니다. 이 부분은 정해진게 없어서 같이 상의해보고 정하면 될거같아요
3. 내일 회의 할때, 상세한 일정을 정할거 같습니다. 현재는 디자이너가 없이 시작을 햇기에 제가 대략적으로 디자인 작업을 했고, 백앤드분들은 ERD 작성이 끝난걸로 알고있습니다. 프론트는 혼자했기에, 폴더 구조만 제가 잡아둿습니다. 기획/디자인 수정하고 싶은 부분있으면 팀원분들과 같이 애기해보고 수정해 나가면 될거같습니다.

[lekosk2001]

피그마 디자인 https://www.figma.com/file/aeuWbLtbaP8ttYFRufwjjq/What-A-Chad-Frontend?node-id=0%3A1&t=W0H9MbrqxUA6EFA5-1

메인화면, 운동설비 화면입니다. :) (아이콘이 들어갈 곳은 아직 비워두었습니다.)