[Flutter] Firebase를 통한 사용자 감상평 저장 화면: WriteReviewScreen 클래스

WriteReviewWrapper 클래스 소개 ✨

WriteReviewScreen 클래스는 사용자가 도서에 대한 감상평을 작성하고 저장할 수 있는 화면을 구현한 StatefulWidget입니다. 이 화면은 Firebase와 Cloud Firestore를 사용하여 사용자의 감상평을 저장하고 관리합니다. 아래는 이 클래스의 주요 기능과 코드 분석입니다.

주요 기능과 코드 분석 🎭

1. 감상평 작성

WriteReviewScreen 클래스는 StatefulWidget으로 구현되며, bookTitle과 review라는 두 개의 필수 인자를 받습니다.review는 사용자의 감상평을 저장하는 변수입니다.

Copy code
class WriteReviewScreen extends StatefulWidget {
  final String bookTitle;
  String? review; // 사용자 감상평을 저장할 변수

  WriteReviewScreen({super.key, required this.bookTitle, this.review});

  @override
  State<WriteReviewScreen> createState() => _WriteReviewScreenState();
}

_WriteReviewScreenState 클래스는 WriteReviewScreen의 상태를 나타내며, initState 메서드를 오버라이드하여 초기화 작업을 수행합니다. 이전에 작성된 감상평이 있다면 텍스트 컨트롤러에 설정합니다.

class _WriteReviewScreenState extends State<WriteReviewScreen> {
  final TextEditingController _reviewController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 이전에 작성된 감상평이 있다면 텍스트 컨트롤러에 설정합니다.
    if(widget.review != null){
      _reviewController.text = widget.review!;
    }
  }

도서 정보와 감상평 작성 폼이 담긴 컨테이너를 구성합니다. 감상평 입력 폼을 구성하고, TextField를 사용하여 텍스트 입력을 받습니다.

@override
Widget build(BuildContext context) {
  double deviceWidth = MediaQuery.of(context).size.width;
  double deviceHeight = MediaQuery.of(context).size.height;
  double widthRatio = deviceWidth / 375;
  double heightRatio = deviceHeight / 812;

  return Scaffold(
    appBar: appbar_widget(context),
    drawer: drewer_widget(context), // 드로어 위젯을 추가합니다.
    body: Center(
      child: Container(
        height: widthRatio * 812,
        // 배경색상 및 그래디언트 설정
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(-0.00, -1.00),
            end: Alignment(0, 1),
            colors: [Color(0xA545B0C5), Color(0xFF4580C5), Color(0xFF4580C5)],
          ),
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              nav_widget(context),
              // 감상평 작성 UI를 위한 컨테이너
              Container(
                // 감상평 작성 영역
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 감상평 작성 UI 요소들이 포함된 컨테이너
                    Container(
                      // 도서 정보와 감상평 작성 폼이 담긴 컨테이너
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              // 도서 이미지 표시
                              FutureBuilder(
                                future: getBookImage(widget.bookTitle),
                                builder: (BuildContext context,
                                    AsyncSnapshot<Image> snapshot) {
                                  // Future의 결과에 따라 이미지를 표시
                                },
                              ),
                              // 도서 정보 표시
                              Container(
                                // 도서 정보가 담긴 컨테이너
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    // 제목 표시
                                    Text('제목', ...),
                                    // 저자 표시
                                    FutureBuilder(...),
                                    // 출판사 표시
                                    FutureBuilder(...),
                                  ],
                                ),
                              ),
                            ],
                          ),
                          // 감상평 입력 폼
                          Container(
                            // 감상평 입력 폼이 담긴 컨테이너
                            child: TextField(
                              // 텍스트 필드 설정
                              maxLength: 500, // 최대 길이 제한
                              maxLines: 8, // 최대 줄 수 설정
                              decoration: InputDecoration(...), // 입력 필드 모양 설정
                              controller: _reviewController, // 컨트롤러 설정
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

2. 작성된 감상평을 Cloud Firestore에 저장

저장하기 버튼이 클릭되었을 때 사용자의 도서 목록에 대한 DocumentReference를 생성하고, 해당 도서의 감상평을 업데이트하거나 추가합니다. 작성된 감상평이 저장된 후에는 마이페이지로 이동합니다. 아래와 같이 WriteReviewScreen 클래스는 사용자가 도서에 대한 감상평을 작성하고 저장할 수 있는 화면을 제공하며, Firebase와 Cloud Firestore를 통해 감상평을 관리합니다.

onTap: () async {
  // 현재 로그인한 사용자 정보 가져오기
  final User? user = FirebaseAuth.instance.currentUser;
  // Cloud Firestore 인스턴스 생성
  FirebaseFirestore _firestore = FirebaseFirestore.instance;
  // 사용자의 도서 목록에 대한 DocumentReference 생성
  DocumentReference<Map<String, dynamic>> documentRef = await _firestore
      .collection('users')
      .doc(user!.email)
      .collection('finishedBookList')
      .doc(widget.bookTitle);
  // DocumentReference를 사용하여 해당 도서의 감상평을 업데이트 또는 추가
  DocumentSnapshot<Map<String, dynamic>> documentSnapshot =
      await documentRef.get();
  if (documentSnapshot.exists) {
    await documentRef.update({'review': _reviewController.text.toString()});
  } else {
    CollectionReference<Map<String, dynamic>> collectionRef =
        await _firestore
            .collection('users')
            .doc(user.email)
            .collection('finishedBookList');
    await collectionRef
        .doc(widget.bookTitle)
        .set({'review': _reviewController.text.toString()});
  }
  // 작성된 감상평 저장 후, 마이페이지로 이동
  Navigator.pop(context);
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => FinishedBookListScreen(),
    ),
  );
},