diff --git a/frontend/src/components/choice/Choice.jsx b/frontend/src/components/choice/Choice.jsx index 0a3680a..e072f8e 100644 --- a/frontend/src/components/choice/Choice.jsx +++ b/frontend/src/components/choice/Choice.jsx @@ -26,6 +26,13 @@ export default function Choice(props) { isselected={game?.firstItem.isSelected} isshow={game?.firstItem.isSelected || game?.secondItem.isSelected} /> + + {calculatePercent( + game?.firstItem.selected_count, + game?.firstItem.selected_count + game?.secondItem.selected_count, + )} + % + selectItemMutate(game?.secondItem?.item_id)} @@ -40,6 +47,13 @@ export default function Choice(props) { isselected={game?.secondItem.isSelected} isshow={game?.firstItem.isSelected || game?.secondItem.isSelected} /> + + {calculatePercent( + game?.secondItem.selected_count, + game?.firstItem.selected_count + game?.secondItem.selected_count, + )} + % + ); diff --git a/frontend/src/components/choice/Choice.styled.js b/frontend/src/components/choice/Choice.styled.js index 225578e..3796fce 100644 --- a/frontend/src/components/choice/Choice.styled.js +++ b/frontend/src/components/choice/Choice.styled.js @@ -13,7 +13,7 @@ export const ItemContainer = styled.div` export const ItemList = styled.div` position: relative; - word-break: keep-all; + word-break: break-all; width: 50%; padding: 5rem; text-align: center; @@ -33,7 +33,7 @@ export const ItemList = styled.div` export const ItemList2 = styled.div` position: relative; - word-break: keep-all; + word-break: break-all; width: 50%; padding: 5rem; text-align: center; @@ -85,3 +85,17 @@ export const percentBox = styled.div` border-radius: ${(props) => (props.first ? '2rem 0 0 0' : '0 2rem 0 0')}; animation: ${(props) => growHeight(props.percent)} 0.7s ease-in-out forwards; `; + +export const percentText = styled.div` + position: absolute; + bottom: 2.7rem; + right: 2.7rem; + font-family: 'pretendard'; + font-weight: 600; + font-size: 2.2rem; + color: ${(props) => props.theme.colors.white}; + background-color: ${(props) => props.theme.colors.black}; + border-radius: 1rem; + padding: 0.5rem 2.5rem; + z-index: 2; +`; diff --git a/frontend/src/components/comments/comment/Comment.jsx b/frontend/src/components/comments/comment/Comment.jsx index ec7ce1f..3a4bee5 100644 --- a/frontend/src/components/comments/comment/Comment.jsx +++ b/frontend/src/components/comments/comment/Comment.jsx @@ -5,7 +5,6 @@ import timeAgo from '../../../utils/timeAgo'; import useBestCommentLike from '../../../hooks/queries/useBestCommentLike'; import useCommentLike from '../../../hooks/queries/useCommentLike'; import useDeleteComment from '../../../hooks/queries/useDeleteComment'; -import { toast } from 'react-toastify'; export default function Comment(props) { const { mutate: bestCommentLikeMutate } = useBestCommentLike(props.commentId, props.itemId); @@ -15,7 +14,7 @@ export default function Comment(props) { if (props.isBest) { bestCommentLikeMutate({ isHeart: props.isHeart }); return; - } else { + } else { commentLikeMutate({ isHeart: props.isHeart }); return; } diff --git a/frontend/src/components/item/Items.styled.js b/frontend/src/components/item/Items.styled.js index a6a4b1f..8678ea1 100644 --- a/frontend/src/components/item/Items.styled.js +++ b/frontend/src/components/item/Items.styled.js @@ -9,7 +9,7 @@ export const ItemContainer = styled.div` `; export const ItemList = styled.div` - word-break: keep-all; + word-break: break-all; padding: 5rem; text-align: center; display: flex; @@ -27,7 +27,7 @@ export const ItemList = styled.div` `; export const ItemList2 = styled.div` - word-break: keep-all; + word-break: break-all; padding: 5rem; text-align: center; display: flex; diff --git a/frontend/src/components/mygame/MyGame.jsx b/frontend/src/components/mygame/MyGame.jsx index 1f6c411..793832e 100644 --- a/frontend/src/components/mygame/MyGame.jsx +++ b/frontend/src/components/mygame/MyGame.jsx @@ -1,6 +1,5 @@ import DeleteIcon from '../common/icon/DeleteIcon'; import * as S from './MyGame.styled'; -import deleteMyGames from '../../apis/deleteMyGames'; import useDeleteMyGames from '../../hooks/queries/useDeleteMyGames'; export default function MyGame({ id, myGametext1, myGametext2 }) { @@ -9,7 +8,7 @@ export default function MyGame({ id, myGametext1, myGametext2 }) { const handleDelete = async () => { if (window.confirm('삭제하시겠습니까?')) { try { - await deleteGames(id); // 삭제 요청 실행 + deleteGames(id); // 삭제 요청 실행 } catch (error) { console.error('게임 삭제 중 오류 발생:', error); } diff --git a/frontend/src/components/mygame/MyGame.styled.js b/frontend/src/components/mygame/MyGame.styled.js index 03c2e01..1a9563a 100644 --- a/frontend/src/components/mygame/MyGame.styled.js +++ b/frontend/src/components/mygame/MyGame.styled.js @@ -26,7 +26,7 @@ export const ItemListContainer = styled.div` position: relative; `; export const ItemList = styled.div` - word-break: keep-all; + word-break: break-all; padding: 5rem; text-align: center; display: flex; @@ -44,7 +44,7 @@ export const ItemList = styled.div` `; export const ItemList2 = styled.div` - word-break: keep-all; + word-break: break-all; padding: 5rem; text-align: center; display: flex; diff --git a/frontend/src/styles/theme.js b/frontend/src/styles/theme.js index ffc0b2e..f8aa9bf 100644 --- a/frontend/src/styles/theme.js +++ b/frontend/src/styles/theme.js @@ -15,5 +15,6 @@ export const theme = { primaryRed: '#F34343', percentBoxBlue: '#11CEFA', percentBoxGreen: '#37EF85', + white: '#FFFFFF', }, };