3

src/App.js

-import React from 'react';
+import React, { useState } from 'react';
 import SearchPage from './SearchPage';
 import Favorites from './Favorites';
 import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';
 
+const TABS = [
+  { label: 'Search Music', component: SearchPage },
+  { label: 'Favorites', component: Favorites },
+  { label: 'More Contents', component: () => <Typography align="center" variant="h2"> Item Three</Typography> },
+];
+
 export default function App() {
-    const [currentTab, setCurrentTab] = React.useState(0);
-    const [searchResult, setSearchResult] = React.useState([]);
-    const [likes, setLikes] = React.useState({});
-    const [favoriteList, setFavoriteList] = React.useState([]);
+  const [currentTab, setCurrentTab] = useState(0);
+  const [searchResult, setSearchResult] = useState([]);
+  const [likes, setLikes] = useState({});
+  const [favoriteList, setFavoriteList] = useState([]);
 
   const handleTabChange = (event, newValue) => {
     setCurrentTab(newValue);
@@ -18,48 +24,36 @@ export default function App() {
   };
 
   const handleLikes = (id) => {
-        const updatedLikes = { ...likes, [id]: !likes[id] };
-        setLikes(updatedLikes);
+    setLikes((prevLikes) => ({ ...prevLikes, [id]: !prevLikes[id] }));
   };
 
   const removeFromFavoriteList = (id) => {
     setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));
   };
 
+  const TabComponent = TABS[currentTab].component;
+
   return (
     <React.Fragment>
+      <CssBaseline />
       <AppBar position="fixed">
         <Typography align="center" variant="h3" color="inherit">Tae Wook's Favorite Music</Typography>
       </AppBar>
-
       <div style={{ height: 60, width: '100%' }}></div>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered>
-            <Tab label="Search Music" value={0} />
-            <Tab label="Favorites" value={1} />
-            <Tab label="More Contents" value={2} />
+          {TABS.map((tab, index) => <Tab key={index} label={tab.label} value={index} />)}
         </Tabs>
       </Box>
-        {currentTab === 0 && (
-            <SearchPage
+      <TabComponent
         list={searchResult}
         onSearch={setSearchResult}
         favoriteList={favoriteList}
         addToFavoriteList={addToFavoriteList}
         likes={likes}
         handleLikes={handleLikes}
-            />
-        )}
-        {currentTab === 1 && (
-            <Favorites
-            favoriteList={favoriteList}
-            addToFavoriteList={addToFavoriteList}
-            likes={likes}
-            handleLikes={handleLikes}
         removeFromFavoriteList={removeFromFavoriteList}
       />
-        )}
-        {currentTab === 2 && <Typography align="center" variant="h2"> Item Three</Typography>}
     </React.Fragment>
   );
 }

src/Favorites.js

@@ -3,11 +3,6 @@ import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/mat
 import { Favorite, FavoriteBorder } from '@mui/icons-material';
 
 const styles = {
-    content: {},
-    layout: {
-        display: 'flex',
-        justifyContent: 'center'
-    },
   card: {
     minWidth: 275,
     maxWidth: 600,
@@ -26,7 +21,7 @@ export default function Favorites({ favoriteList, likes, handleLikes, removeFrom
     handleLikes(id);
   };
 
-    const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId] === true);
+  const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);
 
   return (
     <div>

src/MusicList.js

 import React from 'react';
 import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
-import { Favorite, FavoriteBorder, Preview } from '@mui/icons-material';
+import { Favorite, FavoriteBorder } from '@mui/icons-material';
 import SnackMsg from './Snackbar';
 
 const styles = {
-    content: {},
-    layout: {
-        display: 'flex',
-        justifyContent: 'center'
-    },
   card: {
     minWidth: 275,
     maxWidth: 600,
@@ -19,11 +14,10 @@ const styles = {
 };
 
 export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {
-    let [snackState, setSnackState] = React.useState({ open: false, msg: '' });
+  const [snackState, setSnackState] = React.useState({ open: false, msg: '' });
 
   const toggleFavorite = (id, name) => () => {
     const updatedLikes = { ...likes, [id]: !likes[id] };
-
     handleLikes(id);
     setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
 
@@ -55,9 +49,9 @@ export default function MusicList({ list, favoriteList, addToFavoriteList, likes
             </CardContent>
             <CardActions>
               <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
-                        {likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
-                        <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
+                {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
               </IconButton>
+              <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
             </CardActions>
           </Card>
         );

src/SearchPage.js

@@ -7,35 +7,44 @@ export default function SearchPage({list, onSearch, favoriteList, addToFavoriteL
 
   const handleSearch = (event) => {
     event.preventDefault();
-        console.log(searchWord);
-        setSearchWord('');
     fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
-        .then(r => r.json()).then(r => {
-            console.log(r);
-            onSearch(r.results);
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        onSearch(data.results);
         setSearchWord('');
-        }).catch(e => console.log('error when search musician'));
-    }
+      })
+      .catch((error) => console.error('Error when searching for musicians', error));
+  };
 
   const handleSearchTextChange = (event) => {
     setSearchWord(event.target.value);
-    }
+  };
 
   return (
     <React.Fragment>
       <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>
-                <div style={{display: 'flex', marginLeft: 'auto', marginRight: 'auto,'}}>
-                    <TextField variant='outlined' label="Music Album Search" type='search' style={{width:450}}
-                    onChange={handleSearchTextChange} value={searchWord}>
-                    </TextField>
-                    <Button variant="contained" color="primary"
-                        type="submit" onClick={handleSearch}
-                        style={{marginLeft: 20}}>
+        <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}>
+          <TextField
+            variant='outlined'
+            label="Music Album Search"
+            type='search'
+            style={{ width: 450 }}
+            onChange={handleSearchTextChange}
+            value={searchWord}
+          />
+          <Button variant="contained" color="primary" type="submit" onClick={handleSearch} style={{ marginLeft: 20 }}>
             Search
           </Button>
         </div>
       </form>
-            <MusicList list={list} favoriteList={favoriteList} addToFavoriteList={addToFavoriteList} likes={likes} handleLikes={handleLikes} ></MusicList>
+      <MusicList
+        list={list}
+        favoriteList={favoriteList}
+        addToFavoriteList={addToFavoriteList}
+        likes={likes}
+        handleLikes={handleLikes}
+      />
     </React.Fragment>
-    )
+  );
 }