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',
},
};