나무야3

lib/poet_screen.dart

@@ -13,7 +13,7 @@ class PoetScreen extends StatefulWidget {
   State<PoetScreen> createState() => _PoetScreenState();
 }
 
-class _PoetScreenState extends State<PoetScreen> {
+class _PoetScreenState extends State<PoetScreen> with WidgetsBindingObserver {
   late String _backgroundImage;
   final AudioPlayer _audioPlayer = AudioPlayer();
   bool _isPlaying = false;
@@ -25,11 +25,11 @@ class _PoetScreenState extends State<PoetScreen> {
   @override
   void initState() {
     super.initState();
-    if (Platform.isAndroid) {
-      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
-    }
+    WidgetsBinding.instance.addObserver(this);
+    _setSystemUIOverlayStyle();
+
     _backgroundImage =
-        'assets/images/00${(widget.selectedIndex + 1).toString()}.jpg';
+        'assets/images/subsets/Sub_${(widget.selectedIndex + 1).toString().padLeft(2, '0')}.webp';
     _source = AssetSource('audio/00${(widget.selectedIndex + 1).toString()}.wav');
 
     _audioPlayer.onPlayerStateChanged.listen((state) {
@@ -66,6 +66,19 @@ class _PoetScreenState extends State<PoetScreen> {
     _setAudio();
   }
 
+  void _setSystemUIOverlayStyle() {
+    if (Platform.isAndroid) {
+      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
+    }
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    if (state == AppLifecycleState.resumed) {
+      _setSystemUIOverlayStyle();
+    }
+  }
+
   Future<void> _setAudio() async {
     try {
       await _audioPlayer.setSource(_source);
@@ -77,6 +90,7 @@ class _PoetScreenState extends State<PoetScreen> {
 
   @override
   void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
     if (Platform.isAndroid) {
       SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
     }
@@ -110,11 +124,13 @@ class _PoetScreenState extends State<PoetScreen> {
                   Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      _buildCircularButton(Icons.arrow_back, () {
+                      _buildCircularImageButton('assets/images/ui/UI_Back.webp', () {
                         // 이 버튼을 누르면 이전 화면으로 돌아갑니다.
                         Navigator.pop(context);
-                      }, size: 50, iconSize: 25),
-                      _buildCircularButton(Icons.refresh, () {}, size: 50, iconSize: 25),
+                      }, size: 50, imageSize: 25),
+                      _buildCircularImageButton('assets/images/ui/UI_Replay.webp', () {
+                        // Refresh action here
+                      }, size: 50, imageSize: 25),
                     ],
                   ),
 
@@ -157,24 +173,14 @@ class _PoetScreenState extends State<PoetScreen> {
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            _buildCircularButton(Icons.replay_5, () {
+            _buildCircularImageButton('assets/images/ui/UI_5minus.webp', () {
               final newPosition = _position - const Duration(seconds: 5);
               _audioPlayer.seek(newPosition > Duration.zero ? newPosition : Duration.zero);
             }),
             const SizedBox(width: 16),
-            _buildCircularButton(_isPlaying ? Icons.pause : Icons.play_arrow, () {
-              if (_isPlaying) {
-                _audioPlayer.pause();
-              } else {
-                if (_playerState == PlayerState.completed) {
-                  _audioPlayer.play(_source);
-                } else {
-                  _audioPlayer.resume();
-                }
-              }
-            }),
+            _buildPlayPauseButton(),
             const SizedBox(width: 16),
-            _buildCircularButton(Icons.forward_5, () {
+            _buildCircularImageButton('assets/images/ui/UI_5plus.webp', () {
               final newPosition = _position + const Duration(seconds: 5);
               _audioPlayer.seek(newPosition < _duration ? newPosition : _duration);
             }),
@@ -184,6 +190,62 @@ class _PoetScreenState extends State<PoetScreen> {
     );
   }
 
+  Widget _buildPlayPauseButton() {
+    return GestureDetector(
+      onTap: () {
+        if (_isPlaying) {
+          _audioPlayer.pause();
+        } else {
+          if (_playerState == PlayerState.completed) {
+            _audioPlayer.play(_source);
+          } else {
+            _audioPlayer.resume();
+          }
+        }
+      },
+      child: Container(
+        width: 80,
+        height: 80,
+        decoration: BoxDecoration(
+          color: const Color(0xFFF07B41),
+          shape: BoxShape.circle,
+          border: Border.all(color: Colors.white, width: 2),
+        ),
+        child: Center(
+          child: _isPlaying
+              ? const Icon(Icons.pause, color: Colors.white, size: 50)
+              : Image.asset(
+                  'assets/images/ui/UI_Play.webp',
+                  width: 50,
+                  height: 50,
+                ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildCircularImageButton(String imagePath, VoidCallback onPressed, {double size = 80, double imageSize = 50}) {
+    return GestureDetector(
+      onTap: onPressed,
+      child: Container(
+        width: size,
+        height: size,
+        decoration: BoxDecoration(
+          color: const Color(0xFFF07B41),
+          shape: BoxShape.circle,
+          border: Border.all(color: Colors.white, width: 2),
+        ),
+        child: Center(
+          child: Image.asset(
+            imagePath,
+            width: imageSize,
+            height: imageSize,
+          ),
+        ),
+      ),
+    );
+  }
+
   String _formatDuration(Duration duration) {
     String twoDigits(int n) => n.toString().padLeft(2, '0');
     final hours = twoDigits(duration.inHours);
@@ -196,21 +258,5 @@ class _PoetScreenState extends State<PoetScreen> {
     ].join(':');
   }
 
-  // 원형 버튼을 만드는 헬퍼 함수
-  Widget _buildCircularButton(IconData icon, VoidCallback onPressed, {double size = 80, double iconSize = 50}) {
-    return Container(
-      width: size,
-      height: size,
-      decoration: BoxDecoration(
-        color: const Color(0xFFF07B41),
-        shape: BoxShape.circle,
-        border: Border.all(color: Colors.white, width: 2),
-      ),
-      child: IconButton(
-        onPressed: onPressed,
-        icon: Icon(icon, color: Colors.white),
-        iconSize: iconSize,
-      ),
-    );
-  }
-}
+  
+}