🔀 Feat/#4 UI,기능 구현 완료

lib/models/song.dart

@@ -8,6 +8,7 @@ class Song {
 
   Song({required this.title, required this.singer, required this.tjNumber, required this.kyNumber, required this.img});
 
+  // JSON에서 Song 객체로 변환
   factory Song.fromJson(Map<String, dynamic> json) {
     return Song(
       title: json['title'] ?? '',
@@ -17,4 +18,15 @@ class Song {
       img: json['img'] ?? '',
     );
   }
+
+  // Song 객체를 JSON으로 변환
+  Map<String, dynamic> toJson() {
+    return {
+      'title': title,
+      'singer': singer,
+      'tj_number': tjNumber,
+      'ky_number': kyNumber,
+      'img': img,
+    };
+  }
 }

lib/pages/song_list_page.dart

@@ -4,6 +4,7 @@ import 'package:tj_musical_number_book/widgets/song_category_panel.dart';
 import 'package:tj_musical_number_book/services/data_service.dart';
 import 'package:tj_musical_number_book/models/song.dart';
 import 'package:tj_musical_number_book/theme/colors.dart';
+import 'package:tj_musical_number_book/pages/today_song_page.dart';
 
 class SongListPage extends StatefulWidget {
   const SongListPage({super.key});
@@ -39,7 +40,12 @@ class _SongListPageState extends State<SongListPage> {
         actions: [
           IconButton(
             icon: const Icon(Icons.menu, color: AppColors.iconColor),
-            onPressed: () {},
+            onPressed: () {
+              Navigator.push(
+                context,
+                MaterialPageRoute(builder: (context) => const SavedSongsPage()),
+              );
+            },
           ),
         ],
       ),

lib/pages/today_song_page.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:tj_musical_number_book/models/song.dart';
+import 'package:tj_musical_number_book/services/song_service.dart';
+import 'package:tj_musical_number_book/theme/colors.dart';
+import 'package:tj_musical_number_book/widgets/song_card.dart';
+
+class SavedSongsPage extends StatefulWidget {
+  const SavedSongsPage({super.key});
+
+  @override
+  _SavedSongsPageState createState() => _SavedSongsPageState();
+}
+
+class _SavedSongsPageState extends State<SavedSongsPage> {
+  late List<Song> savedSongs;
+
+  @override
+  void initState() {
+    super.initState();
+    loadSavedSongs();
+  }
+
+  Future<void> loadSavedSongs() async {
+    savedSongs = await getSavedSongs();
+    setState(() {});
+  }
+
+  void _onReorder(int oldIndex, int newIndex) {
+    setState(() {
+      if (newIndex > oldIndex) {
+        newIndex -= 1; // 인덱스가 하나씩 밀리는 문제 해결
+      }
+      final Song movedSong = savedSongs.removeAt(oldIndex);
+      savedSongs.insert(newIndex, movedSong);
+    });
+    updateSongs(savedSongs); // 새로운 순서 저장
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('오늘 부를 넘버',
+            style: TextStyle(color: AppColors.blackMain)),
+        backgroundColor: AppColors.white,
+      ),
+      body: FutureBuilder<List<Song>>(
+        future: getSavedSongs(), // 저장된 노래들 불러오기
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.waiting) {
+            return const Center(child: CircularProgressIndicator());
+          }
+
+          if (snapshot.hasError) {
+            return const Center(child: Text('에러가 발생했습니다.'));
+          }
+
+          if (!snapshot.hasData || snapshot.data!.isEmpty) {
+            return const Center(child: Text('저장된 노래가 없습니다.'));
+          }
+
+          savedSongs = snapshot.data!;
+
+          return ReorderableListView(
+            onReorder: _onReorder,
+            children: savedSongs
+                .asMap()
+                .map((index, song) {
+                  return MapEntry(
+                    index,
+                    SongCard(
+                      key: ValueKey(index), // 여기에 key를 설정
+                      song: song,
+                      index: index,
+                      onDelete: () async {
+                        await deleteSong(song);
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          SnackBar(
+                              content: Text('"${song.title}" 번호가 삭제되었습니다.')),
+                        );
+                        loadSavedSongs();
+                      },
+                    ),
+                  );
+                })
+                .values
+                .toList(),
+          );
+        },
+      ),
+    );
+  }
+}

lib/services/song_service.dart

@@ -0,0 +1,62 @@
+import 'dart:convert';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:tj_musical_number_book/models/song.dart';
+
+// Song 객체를 SharedPreferences에 저장하는 함수
+Future<void> saveSong(Song song) async {
+  final prefs = await SharedPreferences.getInstance();
+  List<String> savedSongsJson = prefs.getStringList('saved_songs') ?? [];
+
+  // Song 객체를 JSON 문자열로 변환
+  String songJson = json.encode(song.toJson());
+
+  savedSongsJson.add(songJson);
+  await prefs.setStringList('saved_songs', savedSongsJson);
+}
+
+// SharedPreferences에서 저장된 Song 객체를 불러오는 함수
+Future<List<Song>> getSavedSongs() async {
+  final prefs = await SharedPreferences.getInstance();
+
+  // SharedPreferences에서 저장된 노래 목록을 가져옴
+  List<String>? songsJson = prefs.getStringList('saved_songs');
+
+  if (songsJson != null) {
+    // JSON 문자열을 Song 객체 리스트로 변환
+    return songsJson.map((songJson) {
+      return Song.fromJson(jsonDecode(songJson));
+    }).toList();
+  }
+
+  return [];
+}
+
+// 노래 삭제하기
+Future<void> deleteSong(Song song) async {
+  SharedPreferences prefs = await SharedPreferences.getInstance();
+  List<String>? songsJson = prefs.getStringList('saved_songs');
+
+  if (songsJson != null) {
+    // 노래 리스트에서 삭제할 노래를 제거
+    songsJson.removeWhere((songData) {
+      Song s = Song.fromJson(json.decode(songData));
+      return s.tjNumber == song.tjNumber; // tjNumber를 기준으로 삭제
+    });
+
+    // 삭제된 리스트를 다시 저장
+    await prefs.setStringList('saved_songs', songsJson);
+  }
+}
+
+// 노래 순서 업데이트
+Future<void> updateSongs(List<Song> songs) async {
+  // SharedPreferences 인스턴스 가져오기
+  final prefs = await SharedPreferences.getInstance();
+
+  // Song 객체를 JSON 문자열로 변환
+  List<String> songsJson =
+      songs.map((song) => jsonEncode(song.toJson())).toList();
+
+  // SharedPreferences에 저장
+  await prefs.setStringList('saved_songs', songsJson);
+}

lib/widgets/song_card.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:tj_musical_number_book/models/song.dart';
+import 'package:tj_musical_number_book/theme/colors.dart';
+
+class SongCard extends StatelessWidget {
+  final Song song;
+  final int index;
+  final VoidCallback onDelete;
+
+  const SongCard({
+    Key? key,
+    required this.song,
+    required this.index,
+    required this.onDelete,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      key: ValueKey(index.toString()),
+      margin: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
+      child: ListTile(
+        leading: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              '${index + 1}',
+              style: const TextStyle(
+                color: AppColors.primary,
+                fontWeight: FontWeight.bold,
+                fontSize: 16.0,
+              ),
+            ),
+            const SizedBox(width: 8.0),
+            Container(
+              width: 50.0,
+              height: 50.0,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(8.0),
+              ),
+              child: Stack(
+                alignment: Alignment.center,
+                children: [
+                  ClipRRect(
+                    borderRadius: BorderRadius.circular(8.0),
+                    child: Image.asset(
+                      './assets/imgs/logo/${song.img.isNotEmpty ? song.img : 'default.png'}',
+                      fit: BoxFit.cover,
+                    ),
+                  ),
+                  ClipRRect(
+                    borderRadius: BorderRadius.circular(8.0),
+                    child: Container(
+                      color: Colors.black.withOpacity(0.43),
+                    ),
+                  ),
+                  Text(
+                    song.tjNumber,
+                    style: const TextStyle(
+                      color: AppColors.white,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 11.0,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+        title: Text(song.title, style: const TextStyle(fontWeight: FontWeight.bold)),
+        subtitle: Text(song.singer),
+        trailing: IconButton(
+          icon: const Icon(Icons.remove_circle_outline, color: AppColors.circleBorder),
+          onPressed: onDelete,
+        ),
+      ),
+    );
+  }
+}

lib/widgets/song_category_panel.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:tj_musical_number_book/theme/colors.dart';
+import '../models/song.dart';
+import '../services/song_service.dart';
 
 class SongCategoryPanel extends StatelessWidget {
   final String categoryTitle;
@@ -74,7 +76,15 @@ class SongCategoryPanel extends StatelessWidget {
                 subtitle: Text(song['singer']!),
                 trailing: IconButton(
                   icon: const Icon(Icons.add_circle_outline, color: AppColors.circleBorder),
-                  onPressed: () {
+                  onPressed: () async {
+                    Song songToSave = Song(
+                      title: song['title']!,
+                      singer: song['singer']!,
+                      tjNumber: song['tj_number']!,
+                      kyNumber: song['ky_number']!,
+                      img: song['img']!,
+                    );
+                    await saveSong(songToSave); // Song 객체를 저장
                     ScaffoldMessenger.of(context).showSnackBar(
                       SnackBar(
                         content: Text('"${song['title']}" 번호가 오늘 부를 넘버에 추가되었습니다.'),