[인스타그램 클론코딩] 댓글 UI 구현2 - 스택 네비게이션을 이용한 댓글창

스크롤뷰 안에서 댓글 달기.. 버튼을 클릭하면 화면 밑에서 키보드와 함께 댓글 입력창이 나오도록 구성해 보겠습니다.

[인스타그램 클론코딩] 앱 로그인 구조 포스트에서 로그인에 성공하면 DummyNavigation으로 이동한다고 했었습니다.

인스타그램 클론 로그인 구조

DummyNavigation은 스택 네비게이션이면서 NavController 네비게이션의 스크린입니다.

그리고 다음과 같이 MainNavigation과 Comment 두 개의 스크린을 포함하고 있습니다.

 

 

MainNavigation 안에서 다음 코드를 실행하면 Comment 스크린이 생성되면서 MainNavigation 스크린 위로 올라옵니다.

이때 파라미터로 me과 postId에 대한 정보도 함께 넘겨줍니다.

const GoComment = () => {
    navigation.navigate("Comment", {
        postId: id,
        me: me
    });
}

참고로 me와 postId는 MainNavigation의 Home 스크린에서 FEED_QUERY로 얻어와 Post 컴포넌트에게 넘겨준 정보입니다. 전체 코드는 제 github에서 확인할 수 있습니다.

 

맨 위에 있는 스크린이 화면에 보이는 스크린입니다. Comment 스크린은 텍스트 에디터(TextInput) 부분을 제외한 영역은 투명이기 때문에, MainNavigation 위에 있는 스크린도 같이 보입니다.

그래서 댓글 달기... 버튼을 터치하면 MainNavigation 위에 있는 스크린은 그대로 보이면서, 텍스트 에디터만 키보드와 함께 올라오는 것 처럼 보입니다.

MainNavigation	댓글 달기... 버튼 터치

인스타그램 클론코딩 댓글 UI

Commnet.js

이제 해당 컴포넌트로 라우트될 때 연결될 포스트의 ID를 받았기 때문에, 나머지는 간단합니다. addComment GraphQL API에 댓글 내용(text)과 연결될 Post의 ID(postId)를 담아서 보내면됩니다.

누가 보냈는지에 대한 정보는 백앤드에서 토큰으로 부터 추출하기 때문에 입력할 필요가 없습니다.

참조1: Cognito ID 토큰 복호화

참조2: [인스타그램 클론코딩] 사용자 인증 & GraphQL Context 활용

 

 

addComment Resolver는 포스팅하지 않았지만 제 github에서 확인할 수 있습니다.

 

Comment.js가 반환하는 컴포넌트입니다.

EditorContainer 컴포넌트가 최소 65px 높이만 차지하고 나머지는 투명(transparent)입니다.

EditorContainer 컴포넌트 안에 아바타 이미지(Image), 텍스트 입력창(TextInput), 게시 버튼(TouchableOpacity)가 가로로 나열되어 있습니다.

 

 

DummyNavigation을 없애고 MainNavigation에 Comment 스크린을 추가할 수는 없나요?

두 가지 문제가 있었습니다.

1. modal 문제

iOS에서 댓글 입력창만 (키보드가 밀고 올라오는 것 처럼 보이기 위해서) 밑에서 위로 나오게 하고 싶었습니다. 그러기 위해선 네비게이션의 mode 속성을 modal로 설정해야 합니다. 그리고 나머지 스크린은 (스와이프해서 뒤로 갈 수 있도록) 왼쪽에서 오른쪽으로 나오게 하고 싶었습니다. 그러기 위해선 네비게이션의 mode 속성을 card로 설정해야 합니다.

물론 Comment 스크린으로 이동할 때, MainNavigation의 mode 속성을 동적으로 변화시킬 수 있었습니다. 하지만 버벅임이 발생하고, 가끔씩 안되는 경우도 있어서 이 방법은 사용하지 않았습니다.

 

2. 탭 메뉴 문제

Comment 스크린이 탭 네비게이션인 MainNavigation에 포함되면, 댓글 입력창이 다음과 같이 탭 메뉴 위쪽 영역에 위치하게 됩니다.

탭 메뉴를 가리려면 MainNavigation과 동격 스크린이 되어야 합니다.

인스타그램 클론코딩 댓글 UI2