From d0d8a7bb563d771a56964a05136edc88d37e950d Mon Sep 17 00:00:00 2001 From: CJY Date: Mon, 6 May 2024 00:03:49 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20track=20=EC=86=8D=EC=84=B1=20=EC=98=B5?= =?UTF-8?q?=EC=85=94=EB=84=90=20=EC=B2=B4=EC=9D=B4=EB=8B=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mypage/MyScoreSection.tsx | 3 - src/components/mypage/TotalScoreSection.tsx | 4 +- .../mypage/component/ScoreEditModal.tsx | 336 +++++++++--------- 3 files changed, 169 insertions(+), 174 deletions(-) diff --git a/src/components/mypage/MyScoreSection.tsx b/src/components/mypage/MyScoreSection.tsx index d8d2339a..a69dbec8 100644 --- a/src/components/mypage/MyScoreSection.tsx +++ b/src/components/mypage/MyScoreSection.tsx @@ -36,10 +36,7 @@ const MyScoreSection = ({ userProfile }: { userProfile: UserProfile }) => { ); useEffect(() => { - console.log('과제 데이터:', userAssignment); if (userAttendance && userAssignment) { - console.log(userAttendance); - console.log(userAssignment); const score = getTotalScore({ absence: userAttendance.absence, truancy: userAttendance.truancy, diff --git a/src/components/mypage/TotalScoreSection.tsx b/src/components/mypage/TotalScoreSection.tsx index ed735037..5db54966 100644 --- a/src/components/mypage/TotalScoreSection.tsx +++ b/src/components/mypage/TotalScoreSection.tsx @@ -43,7 +43,7 @@ const TotalScoreSection = ({ myName }: { myName: string }) => { totalAttendance.forEach((userAttendance: UserAttendance, i: number) => { const target = tmpObject[userAttendance.name]; - if (target.track === userAttendance.track) { + if (target?.track === userAttendance?.track) { target.user_id = userAttendance.user_id; target.tardiness = userAttendance.tardiness; target.truancy = userAttendance.truancy; @@ -76,7 +76,7 @@ const TotalScoreSection = ({ myName }: { myName: string }) => { {userScore.name} handleScoreEditModal(userScore)} /> - {TRACK_NAME[userScore.track]} + {TRACK_NAME[userScore?.track]} {userScore.absence} {userScore.truancy} {userScore.tardiness} diff --git a/src/components/mypage/component/ScoreEditModal.tsx b/src/components/mypage/component/ScoreEditModal.tsx index 76cdfa03..07698c4a 100644 --- a/src/components/mypage/component/ScoreEditModal.tsx +++ b/src/components/mypage/component/ScoreEditModal.tsx @@ -13,209 +13,207 @@ import { getTotalAttendance } from 'src/apis/mypage'; import { ATTENDANCE_CATEGORY_NAME, TRACK_NAME } from '@utils/constant'; interface ScoreEditModalProps { - targetUserScore: UserScore; - isEditModalOn: boolean; - handleScoreEditModal: (userScore: UserScore) => void; + targetUserScore: UserScore; + isEditModalOn: boolean; + handleScoreEditModal: (userScore: UserScore) => void; } const ScoreEditModal = ({ targetUserScore, isEditModalOn, handleScoreEditModal }: ScoreEditModalProps) => { - const tokenState = useRecoilValue(token); - const [scoreChanged, setScoreChanged] = useRecoilState(userScoreChanged); - const [truancyValue, onChangeTruancyValue] = useInput(Number(targetUserScore.truancy), /^[0-9]*$/); - const [tardinessValue, onChangeTardinessValue] = useInput(Number(targetUserScore.tardiness), /^[0-9]*$/); - const [absenceValue, onChangeAbsenceValue] = useInput(Number(targetUserScore.absence), /^[0-9]*$/); - - const editScore = useMutation({ - mutationFn: ({ userScore, accessToken }: { userScore: RequestEditUserScore; accessToken: IToken; }) => editUserScore(userScore, accessToken), - onSuccess: (res) => { - if (res.status === 200) { - () => getTotalAttendance(tokenState); - setScoreChanged(!scoreChanged); - } + const tokenState = useRecoilValue(token); + const [scoreChanged, setScoreChanged] = useRecoilState(userScoreChanged); + const [truancyValue, onChangeTruancyValue] = useInput(Number(targetUserScore.truancy), /^[0-9]*$/); + const [tardinessValue, onChangeTardinessValue] = useInput(Number(targetUserScore.tardiness), /^[0-9]*$/); + const [absenceValue, onChangeAbsenceValue] = useInput(Number(targetUserScore.absence), /^[0-9]*$/); + + const editScore = useMutation({ + mutationFn: ({ userScore, accessToken }: { userScore: RequestEditUserScore; accessToken: IToken }) => + editUserScore(userScore, accessToken), + onSuccess: (res) => { + if (res.status === 200) { + () => getTotalAttendance(tokenState); + setScoreChanged(!scoreChanged); + } + }, + }); + + const handleSubmit = () => { + if (tokenState.access) { + editScore.mutate({ + userScore: { + user_id: targetUserScore.user_id, + truancy: Number(truancyValue), + absence: Number(absenceValue), + tardiness: Number(tardinessValue), }, - }); - - const handleSubmit = () => { - if (tokenState.access) { - editScore.mutate({ - userScore: { - user_id: targetUserScore.user_id, - truancy: Number(truancyValue), - absence: Number(absenceValue), - tardiness: Number(tardinessValue) - }, - accessToken: tokenState - }); - } - handleScoreEditModal(targetUserScore); - }; - - return ( - - -
- 출결사항 수정 - <span>[{TRACK_NAME[targetUserScore.track]}] {targetUserScore.name}</span> - - handleScoreEditModal(targetUserScore)} > - - -
- - - - {Array.from({ length: 5 }, (_, i) => ( - {ATTENDANCE_CATEGORY_NAME[i]} - ))} - - - - - - - - - - - - {targetUserScore.notSubmitted} - {targetUserScore.lateSubmitted} - - - - - - - ); + accessToken: tokenState, + }); + } + handleScoreEditModal(targetUserScore); + }; + + return ( + + +
+ + 출결사항 수정 + <span> + [{TRACK_NAME[targetUserScore.track]}] {targetUserScore.name} + </span> + + handleScoreEditModal(targetUserScore)}> + + +
+ + + + {Array.from({ length: 5 }, (_, i) => ( + + {ATTENDANCE_CATEGORY_NAME[i]} + + ))} + + + + + + + + + + + + {targetUserScore.notSubmitted} + {targetUserScore.lateSubmitted} + + + + + + + ); }; export default ScoreEditModal; const Layer = styled.div` - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: rgba(0, 0, 0, 0.6); - z-index: 10000; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.6); + z-index: 10000; `; const Title = styled.div` - &>span { - font-size: 1.5rem; - font-weight: 500; - margin-left: 10px; - text-align: center; - } - font-family: 'Pretendard'; - font-style: normal; - font-weight: 800; - font-size: 2.5rem; - width: 100%; - display: flex; - align-items: center; - justify-content: flex-start; + & > span { + font-size: 1.5rem; + font-weight: 500; + margin-left: 10px; + text-align: center; + } + font-family: 'Pretendard'; + font-style: normal; + font-weight: 800; + font-size: 2.5rem; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; `; const Wrapper = styled.div` - position: fixed; - top: 50%; - left: 50%; - width: 70%; - transform: translate(-50%, -50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; - background-color: ${BackgroundColor}; - border-radius: 1rem; - box-shadow: 10px 10px 30px 0px #00000014; - padding: 2rem 5rem; - z-index: 10001; + position: fixed; + top: 50%; + left: 50%; + width: 70%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + background-color: ${BackgroundColor}; + border-radius: 1rem; + box-shadow: 10px 10px 30px 0px #00000014; + padding: 2rem 5rem; + z-index: 10001; `; const FormWrapper = styled.div` - display: flex; - flex-direction: column; - width: 100%; + display: flex; + flex-direction: column; + width: 100%; `; const Header = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - margin: 15px 0; - + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin: 15px 0; `; const MenuButton = styled.div` - cursor: pointer; + cursor: pointer; `; - const ScoreWrapper = styled.div` - margin: 3rem 0; - width: 100%; - border-radius: 10px; - display: flex; - flex-direction: column; - border: 1px solid #BBBBBB; - justify-content: space-between; - overflow: hidden; + margin: 3rem 0; + width: 100%; + border-radius: 10px; + display: flex; + flex-direction: column; + border: 1px solid #bbbbbb; + justify-content: space-between; + overflow: hidden; `; const ScoreRow = styled.div` - display: flex; - width: 100%; + display: flex; + width: 100%; `; const ScoreInput = styled.input` - font-family: 'Pretendard'; - padding: 0.8rem 0; - font-style: normal; - font-weight: 500; - font-size: 1.4rem; - flex-basis: 50%; - display: flex; - justify-content: center; - align-items: center; - background-color: #FEFEFE; - border: 0.5px solid gray; - padding: 0.5rem; + font-family: 'Pretendard'; + padding: 0.8rem 0; + font-style: normal; + font-weight: 500; + font-size: 1.4rem; + flex-basis: 50%; + display: flex; + justify-content: center; + align-items: center; + background-color: #fefefe; + border: 0.5px solid gray; + padding: 0.5rem; `; -const ScoreTitle = styled.div<{ index: number; }>` - font-family: 'Pretendard'; - font-style: normal; - font-weight: 500; - font-size: 1.4rem; - flex-basis: 50%; - padding: 1rem 0; - display: flex; - justify-content: center; - align-items: center; - background-color: ${GreyScale.light}; - border-right: ${props => props.index == 4 ? 'none' : '1px solid gray'}; +const ScoreTitle = styled.div<{ index: number }>` + font-family: 'Pretendard'; + font-style: normal; + font-weight: 500; + font-size: 1.4rem; + flex-basis: 50%; + padding: 1rem 0; + display: flex; + justify-content: center; + align-items: center; + background-color: ${GreyScale.light}; + border-right: ${(props) => (props.index == 4 ? 'none' : '1px solid gray')}; `; -const Score = styled.div<{ border?: boolean; }>` - font-family: 'Pretendard'; - padding: 0.8rem 0; - font-style: normal; - font-weight: 500; - font-size: 1.4rem; - flex-basis: 50%; - display: flex; - justify-content: center; - align-items: center; - background-color: #FEFEFE; - border-right: ${props => props.border == false ? 'none' : '1px solid gray'}; -`; \ No newline at end of file +const Score = styled.div<{ border?: boolean }>` + font-family: 'Pretendard'; + padding: 0.8rem 0; + font-style: normal; + font-weight: 500; + font-size: 1.4rem; + flex-basis: 50%; + display: flex; + justify-content: center; + align-items: center; + background-color: #fefefe; + border-right: ${(props) => (props.border == false ? 'none' : '1px solid gray')}; +`;