feat: choice percent text 추가

Ureca-miniproject2 · Sep 30, 2024 · b8fa8fd · b8fa8fd
1 parent a0d80b4
commit b8fa8fd
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 10 deletions.
diff --git 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}
         />
+        <S.percentText>
+          {calculatePercent(
+            game?.firstItem.selected_count,
+            game?.firstItem.selected_count + game?.secondItem.selected_count,
+          )}
+          %
+        </S.percentText>
       </S.ItemList>
       <S.ItemList2
         onClick={() => 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}
         />
+        <S.percentText>
+          {calculatePercent(
+            game?.secondItem.selected_count,
+            game?.firstItem.selected_count + game?.secondItem.selected_count,
+          )}
+          %
+        </S.percentText>
       </S.ItemList2>
     </S.ItemContainer>
   );

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,5 +15,6 @@ export const theme = {
     primaryRed: '#F34343',
     percentBoxBlue: '#11CEFA',
     percentBoxGreen: '#37EF85',
+    white: '#FFFFFF',
   },
 };