[FIX] 어드민 다운로드 버그 수정

Author: ohjunsang

src/components/Admin_Main/component/MainListContent.js

@@ -1,16 +1,41 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import * as S from '../style/MainStyle';
+import { download } from '../imgs'
 const MainListContent = ({ 
     number, 
     name, 
     isChecked, 
     getFile 
 }) => {
+    const [mouseOver, mouseOverChange] = useState(false);
+    const mouseOverHandler = useCallback((event)=> {
+        mouseOverChange(true);
+    }, []);
+    const mouseOutHandler = useCallback(()=> {
+        mouseOverChange(false);
+    }, []);
     return (
-        <S.MainListContent onClick={()=>{getFile(number)}}>
-            <td>{number}</td>
-            <td>{name}</td>
-            <td>{isChecked ? isChecked === 1 ? "✔️" : "⚠️" : "❌"}</td>
+        <S.MainListContent 
+            onMouseEnter={mouseOverHandler} 
+            onMouseOut={mouseOutHandler}
+        >
+            {
+                mouseOver ? 
+                <td 
+                className="hoverable" 
+                onClick={()=>{getFile(number)}}
+                colSpan={3}
+                >
+                    다운로드 하기
+                </td> :
+                (
+                    <>
+                        <td>{number}</td>
+                        <td>{name}</td>
+                        <td>{isChecked ? isChecked === 1 ? "✔️" : "⚠️" : "❌"}</td>
+                    </>
+                )
+            }
         </S.MainListContent>
     )
 }

src/components/Admin_Main/component/MainTeamClass.js

@@ -59,13 +59,13 @@ const MainTeamClass = ({
                         <div>
                             <AccessTokenConsumer>
                                 {
-                                    ({ state, actions}) => {
+                                    ({ state, actions }) => {
                                         return <MainTeamList 
-                                        state={state} 
-                                        actions={actions} 
-                                        teamList={teamList} 
-                                        text="팀 과제" 
-                                        contentId={contentId}
+                                            state={state} 
+                                            actions={actions} 
+                                            teamList={teamList} 
+                                            text="팀 과제" 
+                                            contentId={contentId}
                                         />
                                     }
                                 }

src/components/Admin_Main/component/MainTeamListContent.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import * as S from '../style/MainStyle';
+import { download } from '../imgs';
 
 const MainTeamListContent = ({ 
     teamList, 
@@ -8,12 +9,40 @@ const MainTeamListContent = ({
     count, 
     getFileCode 
 }) => {
-    const color = count % 2 === 0 ? "#F5F5F5" : "white";  
+    const color = count % 2 === 0 ? "#F5F5F5" : "white";
+    const [mouseOver, mouseOverChange] = useState(false);
+    const mouseOverHandler = useCallback((event)=> {
+        mouseOverChange(true);
+        console.log("mouseOver")
+    }, []);
+    const mouseOutHandler = useCallback(()=> {
+        mouseOverChange(false);
+        console.log("mouseLeave")
+    }, []);  
     return (
         <>
-            <S.MainTeamListContent color={color} onClick={()=> {getFileCode(teamName)}}>
-                <td className="team" colSpan={2}><b>{teamName}</b></td>
-                <td className="status">{submit > 0 ? submit === 1 ? "✔️" : "⚠️" : "❌"}</td>
+            <S.MainTeamListContent 
+                color={color} 
+                onMouseEnter={mouseOverHandler} 
+                onMouseOut={mouseOutHandler}
+            >
+                {
+                    mouseOver ?
+                        <td 
+                        className="hoverable" 
+                        onClick={()=>{getFileCode(teamName)}}
+                        colSpan={3}
+                        >
+                            다운로드 하기
+                            <img alt="" src={download}/>
+                        </td> :
+                        (
+                            <>
+                                <td className="team" colSpan={2}><b>{teamName}</b></td>
+                                <td className="status">{submit > 0 ? submit === 1 ? "✔️" : "⚠️" : "❌"}</td>
+                            </>
+                        ) 
+                }
             </S.MainTeamListContent>
             {
                 teamList.map((info)=> {

src/components/Admin_Main/style/MainStyle.js

@@ -173,8 +173,9 @@ export const MainClassCoutColoredBar = styled.div`
 `
 
 export const MainListContent = styled.tr`
-    background: "white";
     font-size: 14px;
+    position: relative;
+    width: 100%;
     height: ${props => props.isHeader ? 35 : 25}px;
     &:nth-child(odd){
         background-color: #F5F5F5;
@@ -288,7 +289,7 @@ export const MainLoadingContent = styled.div`
     .ldio-dlvqi1wu39l > div div:nth-child(6) {
         width: 80px;
         height: 80px;
-        background: #f1f2f3;
+        background: #F5F5F5;
         border-radius: 50%;
     }.ldio-dlvqi1wu39l > div div:nth-child(3) {
     transform: translate(-50%,-50%) rotate(45deg)
@@ -302,7 +303,7 @@ export const MainLoadingContent = styled.div`
     height: 200px;
     display: inline-block;
     overflow: hidden;
-    background: #f1f2f3;
+    background: #F5F5F5;
     }
     .ldio-dlvqi1wu39l {
     width: 100%;