사전캠프 TIL 23일차 (덧칠하기 - Kotlin | FlutterFlow - 관리자 페이지 & 댓글 기능 구현)

코드카타

 

덧칠하기

 

문제

 

 

정답

class Solution {
    fun solution(n: Int, m: Int, section: IntArray): Int {
        var pos = 0
        var res = 0
        for (i in section.indices) {
            if (pos < section[i]) {
                pos = section[i] + m - 1
                res++
            }
        }
        return res
    }
}

해당 문제는 그리디 알고리즘을 통해 해결할 수 있다.

 

var pos = 0
var res = 0

pos는 페인트를 칠하기 시작하는 현재 위치,

res는 페인트를 칠해야 되는 최소 횟수에 해당한다.

 

for (i in section.indices) {
    if (pos < section[i]) {
        pos = section[i] + m - 1
        res++
    }
}

페인트를 칠해야 되는 구역을 순회하며 롤러의 위치가 해당 구역보다 뒤에 위치한다면 

롤러의 위치를 해당구역에서 페인트를 칠한만큼 이동시키고 페인트 칠 횟수를 추가한다.

 

---

 

FlutterFlow 3주차 숙제

 

 

관리자들이 고객에 대한 정보를 댓글로 소통할 수 있는 페이지를 만드는 것이 숙제이다.

 

 

페이지 접근제어 

 

drawer위젯에 Admin페이지로 이동하는 ListTile을 추가한다.

 

 

 

나같은 경우는 유저의 역할을 '강사'와 '수강생'으로 구분했기 때문에

유저의 role이 관리자에 해당하는 역할인 '강사'에 해당한다면

해당 ListTile을 보이게 하고 유저의 role이 '수강생'이면 해당 ListTile을 숨긴다.

 

 

subCollection 만들기

 

관리자들이 다는 댓글에 해당하는 콜렉션을

users의 subCollection으로 만들어준다.

 

comments에는 댓글 내용, 작성일자, 작성자, 좋아요 수

이렇게 총 4개의 필드가 들어간다.

 

comments는 users 밑에 달린 데이터베이스에 해당하고

유저와 1:1 대응관계를 가지게 된다.

 

 

관리자 페이지 UI

 

관리자 페이지의 리스트뷰 구조는 이런식으로 짜준다.

동그란 이미지는 circleImage라는 위젯에 해당한다.

 

 

User Document 만들기

 

관리자 페이지의 리스트뷰에서 쿼리를 추가한다.

 

 

 

유저들의 정보를 생성 시간을 기준으로 내림차순해서 보여주도록 한다.

 

 

컬렉션 값 할당

 

circleImage의 경로는 users Document의 photo_url로 주고,

사진 옆의 글자는 email을 값으로 준다. 

 

 

컬렉션 추가

 

사용자의 질문을 받아오고 그 응답을 저장하는 컬렉션을 하나 만들어준다. 

원래 2주차에서 만들어야 했는데 넣는 걸 까먹었다..

 

 

쿼리의 개수 출력

 

formula history라는 컬렉션을 불러와 유저 컬렉션이

리스트뷰 내 위치한 유저의 레퍼런스와 일치하는지 검사해

조건이 일치하는 만큼의 쿼리 수를 반환하는 쿼리를 생성한다.

 

 

 

텍스트 내용을 해당 쿼리로 설정해준다. 

 

 

댓글 수 출력

 

해당 유저에 달린 댓글의 개수를 읽어오는 쿼리를 생성한 뒤 텍스트 값에 넣어준다.

.

 

댓글창 컴포넌트 UI 

 

댓글창에 해당하는 컴포넌트를 하나 생성해준다.

 

 

 

컴포넌트 내의 컨테이너의 크기를 가로는 꽉차도록, 세로는 400px로 설정해준다.

 

 

 

컴포넌트 구조는 이런식으로 짜준다.

 

 

parameter 전달하기

 

해당 컴포넌트의 파라미터를 생성해준다.

 

 

 

관리자 페이지에서 유저 밑 댓글을 누르면 밑에서 댓글창이 올라오도록

설정한 뒤, 파라미터에서 유저의 레퍼런스를 전달해주도록 한다.

 

 

List Up 진행

 

파라미터에서 받아온 정보를 기반으로 comments에 대한 List Up을 진행한다.

 

comments 컴포넌트의 리스트 뷰에서 내림차순으로 정렬된

comment에 해당하는 쿼리를 생성해준다.

 

 

Document 가져오기

 

Row에서 users에 대한 reference로부터 documents를 가져오는 쿼리를 생성한다.

이로써 댓글을 단 유저의 정보를 가져오는 것이 가능해진다.

 

 

 

사진과 닉네임은 Users Document에서 가져오고,

댓글은 comments Document에서 가져온다.

 

 

comments 컴포넌트 overflow 방지

 

위 사진에서 쓰이는  Row와 Column에서 comment의 길이로 인한

overflow를 방지하기 위해 위젯의 확장 값을 flexible로 설정해준다.

 

 

좋아요 기능

 

토글아이콘의 토글 밸류값을 설정해줘야 한다.

 

좋아요를 누른 사람들의 리스트에 내가(계정에 로그인한 유저가) 포함되어 있다면

토글아이콘이 활성화 되고 그렇지 않다면 비활성화 된다. 

 

버튼 활성화/비활성화시 보여질 아이콘도 따로 설정해줘야 한다.

 

 

 

위 이미지는 좋아요 버튼을 눌렀을 때의 동작에 해당한다.

 

좋아요의 리스트에서 나를 포함하고 있다면(TRUE),

comment Documents의 레퍼런스의 likes 필드에서 나를 제거한다.

FALSE일 때 동작은 반대로 likes 필드에서 나를 추가하는 동작을 하면 된다.

 

 

 

토글 아이콘 밑 글자는 comments Documents의 likes에 해당한다.

 

 

댓글 작성 기능

 

해당 아이콘 버튼에서 Document를 생성하는 액션을 추가함으로써

댓글 작성 기능을 구현할 수 있다.

 

 

 

해당 액션은 comments 문서를 만든다.

user Reference는 댓글을 작성한 유저로 주고, 각각의 필드값을 설정한다.

 

comment 필드는 댓글을 작성하는 텍스트필드에서 값을 받아오도록 한다.

created_time 필드는 현재시간을 값으로 준다.

comment_user 필드에는 현재 로그인한 유저의 레퍼런스로 설정한다.

 

 

 

댓글 작성 후 텍스트필드를 비우는 동작을 추가한다.

 

 

관리자 페이지 overflow 방지

 

리스트뷰를 감싸는 Column에서 스크롤이 가능하도록 설정해주면 된다.

 

 

테스트

 

보는 건 참 별 거 아닌데 구현할라니까 참 어렵다.

쿼리 같은 거 많이 다뤄보면서 백엔드 이해도를 늘려야 할 필요가 있을 거 같다.