---
# System prepended metadata

title: 프론트

---

## 로고
![](https://i.imgur.com/Lco9f6T.png)


## 기능 A : 로그인, 회원가입, 메인화면 레이아웃
- 최초 페이지
- 프로젝트 로고
~~- 로그인 버튼~~
~~- 회원가입 버튼~~
- 메인화면
	- 가수의 정보를 알려주는 컴포넌트
    	- 이미지
    	- 가수 이름
    	- 데뷔일
    	- 버튼 3개
    	    - 굿즈 투표 하기
    	    - 굿즈 투표 결과 확인하기
    	    - 기존의 굿즈 확인하기

# 프론트
> 이세은, 이우철, 최장훈, 이충헌
 
- 스크롤 구현
- Firebase DB에서 데이터 받아와 위젯에 출력 
- Button, Card 컴포넌트 분리하여 재사용


![image](https://user-images.githubusercontent.com/49304239/127641671-6bd562d0-24d3-45d7-89f7-3a59adfb27b2.png)

*(+다음주 추가미션 ) 크롱, 호눅스, ivy님 이미지도 추가해주세요..!*

# 백
> 이지수, 안병웅, 신우진, 이창엽

- Firebase - Flutter 연동
- FireStore - singer collection에 가수 정보 등록
- Firebase DB에서 데이터 GET(계정 정보, 가수 정보)




#  참고

## 이미지 깨짐 문제

다음 명령어로 해결 가능합니다.
```
$ flutter run -d chrome --web-renderer html // run
$ flutter build web --web-renderer html --release // build
```
[참고 링크](https://protocoderspoint.com/failed-to-load-network-image-flutter-web/)

## Firebase 설정 방법
 - 파이어베이스 프로젝트가 이미 생성되었기 때문에 데이터 베이스 권한 추가를 요청해야합니다!<br/>(J119_안병웅 님께 이메일 주소 알려주시면 추가해드릴게요!) 
 - [데이터베이스를 새로 생성할때의 참고사이트](https://sudarlife.tistory.com/entry/flutter-firebase-auth-%ED%94%8C%EB%9F%AC%ED%84%B0-%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%97%B0%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%84-%EA%B5%AC%EC%97%B0%ED%95%B4%EB%B3%B4%EC%9E%90-part-1)

## FireStore 이미지 추가 후 반영 방법
 - Firebase Storage에 이미지 업로드
 - 파일 위치 > 엑세스토큰 복사하여 Firebase Firestore > singer collection에 추가
 - main.dart `getSinger()`함수 for문 종료 조건을 id `i <= id_마지막 번호`로 설정

## FireStore Database 데이터 구조
```
name: <string>, image : <string>, debutdate : <string>
```

![](https://i.imgur.com/Zo0TJ1d.png)
- 현재 getSinger 함수로 데이터를 받아올 수 있게 해두었습니다.
- return type은 List<Map>으로 key는 database table명과 동일하게 전달됩니다.
