Merge pull request #728 from woowacourse-teams/fix/#726

QA 수정 반영
woowacourse-teams · Oct 23, 2024 · 722b998 · 722b998
2 parents ca576be + a294ea0
commit 722b998
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 44 deletions.
diff --git a/frontend/src/components/Icons/HomeIcon.tsx b/frontend/src/components/Icons/HomeIcon.tsx
@@ -11,14 +11,14 @@ export default function HomeIcon(props: HomeIconProps) {
 
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 20 20"
+      width="27"
+      height="27"
+      viewBox="0 0 27 27"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M19.444 7.47307L17.774 17.4731C17.6613 18.1687 17.3072 18.8024 16.774 19.2631C16.2058 19.7161 15.5007 19.9628 14.774 19.9631H5.16402C4.46134 19.9569 3.78312 19.7043 3.24766 19.2492C2.71219 18.7941 2.35346 18.1656 2.23402 17.4731L0.564023 7.47307C0.473584 6.8961 0.553519 6.30527 0.794023 5.77307C1.03445 5.24361 1.42356 4.79544 1.91402 4.48307L8.39402 0.48307C8.86746 0.191034 9.41276 0.036377 9.96902 0.036377C10.5253 0.036377 11.0706 0.191034 11.544 0.48307L18.014 4.48307C18.521 4.78307 18.925 5.23007 19.174 5.76307C19.4301 6.29415 19.524 6.88892 19.444 7.47307Z"
+        d="M23.625 12.6564V22.7814C23.625 23.0052 23.5361 23.2198 23.3779 23.3781C23.2196 23.5363 23.005 23.6252 22.7812 23.6252H16.875C16.6512 23.6252 16.4366 23.5363 16.2784 23.3781C16.1201 23.2198 16.0312 23.0052 16.0312 22.7814V17.2971C16.0312 17.1852 15.9868 17.0779 15.9077 16.9988C15.8286 16.9196 15.7213 16.8752 15.6094 16.8752H11.3906C11.2787 16.8752 11.1714 16.9196 11.0923 16.9988C11.0132 17.0779 10.9688 17.1852 10.9688 17.2971V22.7814C10.9688 23.0052 10.8799 23.2198 10.7216 23.3781C10.5634 23.5363 10.3488 23.6252 10.125 23.6252H4.21875C3.99497 23.6252 3.78036 23.5363 3.62213 23.3781C3.4639 23.2198 3.375 23.0052 3.375 22.7814V12.6564C3.37521 12.209 3.55313 11.7799 3.86965 11.4636L12.3071 3.02609C12.6236 2.70986 13.0526 2.53223 13.5 2.53223C13.9474 2.53223 14.3764 2.70986 14.6929 3.02609L23.1304 11.4636C23.4469 11.7799 23.6248 12.209 23.625 12.6564Z"
         fill={
           isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
         }

diff --git a/frontend/src/components/Icons/RouletteItemIcon.tsx b/frontend/src/components/Icons/RouletteItemIcon.tsx
@@ -0,0 +1,40 @@
+import { useTheme } from '@emotion/react';
+
+interface ScissorsIconProps {
+  isActive: boolean;
+}
+
+export default function RouletteItemIcon(props: ScissorsIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="48"
+      height="19"
+      viewBox="0 0 48 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.85914 3.92L12.9191 3.96C13.4125 3.96 13.7525 4.02 13.9391 4.14C14.2325 4.32667 14.3791 4.89333 14.3791 5.84C14.3791 6.32 14.2925 6.73333 14.1191 7.08C13.9591 7.41333 13.5391 8.26 12.8591 9.62C12.1925 10.98 11.7258 11.92 11.4591 12.44C10.6325 14.1067 9.75247 15.7267 8.81914 17.3C8.63247 17.6067 8.45247 17.8133 8.27914 17.92C8.11914 18.0267 7.85247 18.08 7.47914 18.08C4.66581 18.08 2.77247 18.04 1.79914 17.96C1.14581 17.9067 0.819141 17.6533 0.819141 17.2C0.819141 16.9467 0.925807 16.6267 1.13914 16.24C2.29914 14.1733 3.30581 12.4333 4.15914 11.02C5.02581 9.59333 5.55914 8.70667 5.75914 8.36C5.95914 8.01333 6.05914 7.78667 6.05914 7.68C6.05914 7.4 5.90581 7.26 5.59914 7.26C5.59914 7.26 4.31247 7.28667 1.73914 7.34C1.45914 7.34 1.25247 7.22 1.11914 6.98C0.985807 6.72667 0.919141 6.42667 0.919141 6.08C0.919141 5.72 0.939141 5.35333 0.979141 4.98C1.01914 4.59333 1.12581 4.33333 1.29914 4.2C1.47247 4.06667 1.94581 3.98667 2.71914 3.96C3.50581 3.93333 4.55247 3.92 5.85914 3.92Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+      <path
+        d="M21.9489 0.399999L30.7739 0.449999C31.3906 0.449999 31.8156 0.524999 32.0489 0.675C32.4156 0.908333 32.5989 1.61667 32.5989 2.8C32.5989 3.4 32.4906 3.91667 32.2739 4.35C32.0739 4.76667 31.5489 5.825 30.6989 7.525C29.8656 9.225 29.2823 10.4 28.9489 11.05C27.9156 13.1333 26.8156 15.1583 25.6489 17.125C25.4156 17.5083 25.1906 17.7667 24.9739 17.9C24.7739 18.0333 24.4406 18.1 23.9739 18.1C20.4573 18.1 18.0906 18.05 16.8739 17.95C16.0573 17.8833 15.6489 17.5667 15.6489 17C15.6489 16.6833 15.7823 16.2833 16.0489 15.8C17.4989 13.2167 18.7573 11.0417 19.8239 9.275C20.9073 7.49167 21.5739 6.38333 21.8239 5.95C22.0739 5.51667 22.1989 5.23333 22.1989 5.1C22.1989 4.75 22.0073 4.575 21.6239 4.575C21.6239 4.575 20.0156 4.60833 16.7989 4.675C16.4489 4.675 16.1906 4.525 16.0239 4.225C15.8573 3.90833 15.7739 3.53333 15.7739 3.1C15.7739 2.65 15.7989 2.19167 15.8489 1.725C15.8989 1.24167 16.0323 0.916666 16.2489 0.749999C16.4656 0.583332 17.0573 0.483332 18.0239 0.449999C19.0073 0.416666 20.3156 0.399999 21.9489 0.399999Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+      <path
+        d="M38.8591 3.92L45.9191 3.96C46.4125 3.96 46.7525 4.02 46.9391 4.14C47.2325 4.32667 47.3791 4.89333 47.3791 5.84C47.3791 6.32 47.2925 6.73333 47.1191 7.08C46.9591 7.41333 46.5391 8.26 45.8591 9.62C45.1925 10.98 44.7258 11.92 44.4591 12.44C43.6325 14.1067 42.7525 15.7267 41.8191 17.3C41.6325 17.6067 41.4525 17.8133 41.2791 17.92C41.1191 18.0267 40.8525 18.08 40.4791 18.08C37.6658 18.08 35.7725 18.04 34.7991 17.96C34.1458 17.9067 33.8191 17.6533 33.8191 17.2C33.8191 16.9467 33.9258 16.6267 34.1391 16.24C35.2991 14.1733 36.3058 12.4333 37.1591 11.02C38.0258 9.59333 38.5591 8.70667 38.7591 8.36C38.9591 8.01333 39.0591 7.78667 39.0591 7.68C39.0591 7.4 38.9058 7.26 38.5991 7.26C38.5991 7.26 37.3125 7.28667 34.7391 7.34C34.4591 7.34 34.2525 7.22 34.1191 6.98C33.9858 6.72667 33.9191 6.42667 33.9191 6.08C33.9191 5.72 33.9391 5.35333 33.9791 4.98C34.0191 4.59333 34.1258 4.33333 34.2991 4.2C34.4725 4.06667 34.9458 3.98667 35.7191 3.96C36.5058 3.93333 37.5525 3.92 38.8591 3.92Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/ScissorsIcon.tsx b/frontend/src/components/Icons/ScissorsIcon.tsx
diff --git a/frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx b/frontend/src/components/NavigationBar/NavigationBarItem/NavigationBarItem.tsx
@@ -6,7 +6,7 @@ import MyPageIcon from '@_components/Icons/MyPageIcon';
 import { Tab } from '@_components/NavigationBar/NavigationBar';
 import { common } from '@_common/common.style';
 import { useTheme } from '@emotion/react';
-import ScissorsIcon from '@_components/Icons/ScissorsIcon';
+import RouletteItemIcon from '@_components/Icons/RouletteItemIcon';
 
 interface NavigationBarItemProps {
   tab: Tab;
@@ -25,7 +25,7 @@ export default function NavigationBarItem(props: NavigationBarItemProps) {
     ) : tab === '채팅' ? (
       <ChattingIcon isActive={isActive} />
     ) : tab === '룰렛' ? (
-      <ScissorsIcon isActive={isActive} />
+      <RouletteItemIcon isActive={isActive} />
     ) : (
       <MyPageIcon isActive={isActive} />
     );

diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts
@@ -18,23 +18,17 @@ export const leftSection = css`
   align-items: flex-start;
 `;
 
-export const title = ({ theme }: { theme: Theme }) => css`
-  font-size: 1.4rem;
-  font-weight: bold;
-  color: ${theme.colorPalette.grey[400]};
-`;
-
 export const deadline = ({
   theme,
   isAnnounced,
   leftMinute,
 }: {
   theme: Theme;
+
   isAnnounced: boolean;
   leftMinute: number;
 }) => css`
-  font-size: ${theme.typography.b2};
-  font-size: 2.2rem;
+  font-size: 1.4rem;
   font-weight: bold;
   color: ${isAnnounced || leftMinute < 0
     ? theme.colorPalette.grey[400]
@@ -49,6 +43,21 @@ export const deadline = ({
             : theme.colorPalette.black[100]};
 `;
 
+export const title = ({
+  theme,
+  isAnnounced,
+}: {
+  theme: Theme;
+  isAnnounced: boolean;
+}) => css`
+  font-size: ${theme.typography.b2};
+  font-size: 2.2rem;
+  font-weight: bold;
+  color: ${isAnnounced
+    ? theme.colorPalette.grey[400]
+    : theme.colorPalette.black[100]};
+`;
+
 export const participantCount = ({ theme }: { theme: Theme }) => css`
   display: flex;
   align-items: center;

diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx
@@ -23,7 +23,6 @@ export default function BetCard(props: BetCardProps) {
   return (
     <div css={S.cardBox} onClick={() => onClick(bet.id)}>
       <div css={S.leftSection}>
-        <div css={S.title({ theme })}>{bet.title}</div>
         <div
           css={S.deadline({
             theme,
@@ -37,11 +36,14 @@ export default function BetCard(props: BetCardProps) {
               ? '마감 임박'
               : `마감 ${bet.leftMinute}분 전`}
         </div>
+        <div css={S.title({ theme, isAnnounced: bet.isAnnounced })}>
+          {bet.title}
+        </div>
         <div css={S.participantCount({ theme })}>
           <PeopleIcon /> {bet.currentParticipants}명
         </div>
         <div css={S.banner({ theme })}>
-          지금 당첨 확률 {probabilityPercentage}%
+          지금 오면 당첨 확률 {probabilityPercentage}%
         </div>
       </div>
       <div css={S.rightSection}>

diff --git a/...end/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts b/...end/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
@@ -1,6 +1,8 @@
 import { css, Theme } from '@emotion/react';
 
 export const profileCard = css`
+  z-index: -1;
+
   display: flex;
   flex-direction: column;
   gap: 0.4rem;