# 4주차 C 기능 구현

## 프로젝트 K-PLAY🤟

많은 외국인들이 `K-pop`을 좋아합니다. 그것을 바탕으로 한국어를 배우는 외국인들도 급증하고 있습니다. 이러한 수요에 맞춰서 저희는 `K-PLAY`라는 프로그램을 기획했습니다. 저희 프로그램은 원하는 노래를 입력받아 가사에 대한 의미와 발음을 분석해서 보여줍니다.

## 🍎 4주차 relay_02 멤버

<br>

| <a href="https://github.com/BonJunKu"><img src="https://avatars.githubusercontent.com/u/62752488?v=4" width=100/><br><center>J007\_구본준</center></a> | <a href="https://github.com/se030"><img src="https://avatars.githubusercontent.com/u/63814960?v=4" width=100/><br> <center>J034_김세영</center></a> | <a href="https://github.com/icarus1513"><img src="https://avatars.githubusercontent.com/u/46317018?v=4" width=100/><br><center>J043\_김용현</center></a> | <a href="https://github.com/sa02045"><img src="https://avatars.githubusercontent.com/sa02045" width=100/><br> <center>J196\_조승희</center></a> | <a href="https://github.com/sa02045"><img src="https://avatars.githubusercontent.com/u/55880566?s=400&v=4" width=100/><br> <center>J217\_현상엽</center></a> | <a href="https://github.com/svclaw2000"><img src="https://avatars.githubusercontent.com/svclaw2000" width=100/><br> <center>K018\_박규훤</center></a> | <a href="https://github.com/jsj7878"><img src="https://avatars.githubusercontent.com/u/61611131?v=4" width=100/><br> <center>S052\_정세진</center></a> |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |

<br>

---
## 🍑 프로젝트 README

[1주차 설계](https://github.com/boostcampwm-2021/relay_02#readme)

[2주차 A기능 구현 설명](https://github.com/boostcampwm-2021/relay_02/wiki/2%EC%A3%BC%EC%B0%A8-A-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)

[3주차 B기능 구현 설명](https://github.com/boostcampwm-2021/relay_02/wiki/3%EC%A3%BC%EC%B0%A8-B-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84)

## 🍏 4주차 C 기능

- [영상](https://drive.google.com/file/d/1G_yEhvTmfmvG7chPNUDsiscFygK_mEVt/view?usp=sharing)

class DataStorage {
  static List<detailPage> bookmarks = [];
}

북마크 클래스를 만들어 static하게 북마크 데이터에 접근

* Detail Page: 북마크 등록과 해제 기능

Widget build(BuildContext context) {
    // 북마크 되어있는지 확인 (이후 북마크 버튼 이미지와 동작 관련)
    bool isFavorite = DataStorage.bookmarks.fold(false, (previousValue, element) => (element.title == widget.title && element.singer == widget.singer) ? true : previousValue);

    String ttsSpeak = widget.lyricTexts.join('\n');
    List<Widget> lyricTextTmp =
        widget.lyricTexts.map((e) => Align(child: Text(e!))).toList();
	@@ -409,9 +412,18 @@ class _detailPageState extends State<detailPage> {
                                      ),
                                      Container(
                                        child: IconButton(
                                          // 북마크 여부에 따라 버튼 색상 다름 (red / white)
                                            icon: isFavorite ? Icon(Icons.favorite, color: Colors.red,) : Icon(Icons.favorite_border_outlined),
                                            onPressed: () {
                                              setState(() {
                                                // 북마크 추가 / 제거
                                                if (isFavorite) {
                                                  DataStorage.bookmarks.removeWhere((element) => element.title == widget.title && element.singer == widget.singer);
                                                } else {
                                                  DataStorage.bookmarks.add(widget);
                                                }
                                              });
                                            } // TODO : C
                                            ),
                                      )
                                    ],
	@@ -441,21 +453,37 @@ class Page2 extends StatelessWidget {

<br>

* Bookmark Page

  @override
  Widget build(BuildContext context) {
    // 북마크 리스트 받아와서 화면에 보여줌
    List<detailPage> bookmarks = DataStorage.bookmarks;
    return ListView(
      children: List.generate(bookmarks.length, (index) => ListTile(
        title: Text(bookmarks[index].title),
        subtitle: Text(bookmarks[index].singer),
        onTap: () {
          // 클릭해서 넘어가는 화면은 구현된거 가져다 쓰기..
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => detailPage(
                    title: bookmarks[index].title,
                    singer: bookmarks[index].singer,
                    lyrics: bookmarks[index].lyrics,
                    thumbUrl: bookmarks[index].thumbUrl,
                    lyricTexts: bookmarks[index].lyricTexts,
                    translationResult: bookmarks[index].translationResult,
                    translationResultTexts: bookmarks[index].translationResultTexts,
                  )));
        },
      )),
    );
  }
}