[3주차/세미나] UI 단 설계, 같이 해봐요!

[jihyunniiii]

⚙️ 실습 타임 - UI 단 설계, 같이 해봐요!

❗️하단과 같은 앱을 같이 설계해봐요.

하단과 같은 앱을 개발해야한다고 생각해볼게요.
자신의 금잔디조가 3명이면 홈, 건빵집 리스트, 검색 뷰가 있다고 생각하고, 4명이면 마이페이지 뷰까지 있다고 생각하고 실습을 진행해주세요.
그리고 실습의 단계마다 해당 discussion에 기록해주세요.

홈

건빵집 리스트

검색

마이페이지

[t1nm1ksun]

1 공통 컴포넌트 찾기

• 홈뷰, 검색뷰 텍스트필드
• 홈뷰 빵 카드
• 리스트, 검색뷰 카드
  • 사진
  • 카드 제목
  • 카드 저장수 (북마크 아이콘, 저장수)
  • 태그들
  • 식당 위치 (아이콘 + 텍스트)

• 네비게이션 바에 있는 아이템 (아이콘 + 텍스트)
• 건빵집 리스트 화면
  • 검색 키워드 태그 버튼들
  • 검색 필터 아이콘
  • 라디오버튼 + 설명 텍스트

2 뷰 스케치 및 각 화면 컴포넌트화

[HAJIEUN02]

💚공통 컴포넌트 및 각 화면 컴포넌트화

---

• [홈] BEST리뷰에 있는 Chip/[건빵집 리스트] 아이템에 있는 Chip/[검색] 아이템에 있는 Chip/[마이페이지] 형태는 같고 색상만 다르므로 하나의 컴포넌트화
• [마이페이지] 건강.체질 Chip의 색상이나 텍스트를 type으로 관리할 수 있는 컴포넌트로
• [홈] [건빵집 리스트] [검색] [마이페이지] 저장 아이콘과 수, 후기 아이콘과 수를 하나의 컴포넌트로 만들고 type으로 관리
• [마이페이지] 메뉴들 컴포넌트화(클릭 이벤트 람다로 받기)
• [홈] [검색] 검색창
• [건빵집 리스트] 필터링 chip
• [홈] BEST건빵집, BEST리뷰 건빵집 Card
• [건빵집 리스트], [검색] 건빵집 Row

💚뷰 스케치

---

[jm991014]

1. 공통 컴포넌트 찾기

1. 바텀바
2. 검색텍스트 필드
3. 빵 종류 칩
4. 빵 특징 칩
5. 저장 수 텍스트
6. 리뷰 수 텍스트
7. 아이템을 현재 보고 있는 사용자 이미지들
8. 필터 버튼
9. 빵 목록들

2. 뷰 스케치

[yskim6772]

노션으로 정리했습니당
https://spiky-lion-344.notion.site/3-12b57944971d80de9146df917c024668?pvs=4

[Hyobeen-Park]

1. 공통 컴포넌트 찾기

• lazyist 아이템
• 장소칩, 메뉴칩,
• 아이콘 + 숫자 -> 저장 수
• 제목
• 사진 위 아이콘
• 검색 textfield

2. 뷰스케치
   

[ThirFir]

홈

1. 카드뷰
2. 카드뷰 가로 스크롤뷰
3. (아이콘+텍스트) 저장
4. (아이콘 + 텍스트) 수정
5. 태그 칩
6. 지역 칩
7. 원형 중첩 마크
8. 검색 텍스트필드
9. 필터 버튼
10. 카드 위 제목 텍스트

건빵집리스트

1. 아이콘 태그칩
2. 체크박스 + 텍스트
3. (기본순, ...) 정렬
4. 필터 버튼
5. 리스트 카드 아이템
6. 주황색 칩
7. 마크 + 이미지
8. (아이콘 + 텍스트) 홈 컴포넌트 재사용
9. 리스트 전체

서치

1. 검색 텍스트필드 재사용
2. 리스트뷰 재사용

마이페이지

1. 원형 이미지
2. 프로필 태그 칩
3. 프로필 아래 explain 태그 칩
4. 프로필 컴포넌트
5. 위아래 아이콘+텍스트
6. 묶어논거
7. 버튼 아이템
8. 텍스트 + 맨끝에 아이콘

[SYAAINN]

[4조 : 손민재, 조휘원, 장재원, 박세호]

1. 공통 컴포넌트

   검색바, 베이커리 메뉴 칩, 베이커리 위치 칩, 저장 개수, ..

2. 뷰 설계
   홈 : 조휘원
   홈뷰 컴포넌트
   : 사진에 보낼 LazyRow에 들어갈 빵집 정보를 컴포넌트화 시킬 것임. 함수명 BreadCard(), 타입 Cards

   검색, 건빵 리스트 : 손민재, 장재원
   리스트 내 항목 컴포넌트

3. 빵집 항목 컴포넌트(BakeryItem)
   Props: 빵집 이름, 이미지, 태그 리스트, 위치 텍스트, 리뷰 수 등

4. 태그 컴포넌트
   Propts: 태그 텍스트

   마이페이지 : 박세호
   MypageInfoContainer - 닉네임ㅇ이랑 저장목록 이런거 다 묶는 부분

   MypageProfileContainer - 좌측 우측 구분

   MypageProfileImg - 마이페이지 이미지

   MypageProfileDetails - 공통 chip, 닉네임(Text), 공통 chip으로 내부 구성

   MypageUsedContainer - 저장목록 | 내가 쓴 리뷰 묶는 뷰

   MypageUsedSaved - 저장목록 이미지랑 텍스트 묶는

   MypageUsedReviewd - 내가 쓴 리뷰 이미지 텍스트

   MypageBtnContainer - 아래 부분 다 묶는거

   MypageBtn - 이용약관, 자주 묻는 질문, 문의하기, 버전정보, 로그아웃 회원탈퇴도 그대로 가져다 쓰기 가능

   Separator - 굵은 줄 분명 어디선가 또 쓰일듯