Merge branch 'dev' into feat/mypage

package.json

@@ -14,6 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@sentry/react": "^7.101.0",
     "@tanstack/react-query": "^5.4.3",
     "@toss/date": "^1.1.8",
     "@types/styled-components": "^5.1.28",

src/assets/styles/global.tsx

@@ -19,6 +19,8 @@ const GlobalStyle = styled.createGlobalStyle`
   body {
     font-size: 1.6rem;
     background-color: ${(props) => props.theme.colors.navy};
+
+    /* transition: 0.2s; */
   }
 
   html,

src/components/A/ATopicCard.tsx

@@ -16,25 +16,19 @@ import { getDateDiff } from '@utils/date';
 
 interface AlphaTopicCardProps extends TopicResponse {
   chip?: 'popular' | 'close';
+  onVote: (topicId: number, side: 'CHOICE_A' | 'CHOICE_B') => void;
 }
 
 const AlphaTopicCard = React.memo((props: AlphaTopicCardProps) => {
   const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});
-  const voteMutation = useVoteTopic({ side: 'TOPIC_A', sort: 'createdAt,DESC' });
   const [A, B] = props.choices;
 
   const handleCommentChipClick = () => {
     toggleSheet();
   };
 
   const handleVote = (side: 'CHOICE_A' | 'CHOICE_B') => {
-    if (props.selectedOption === null) {
-      voteMutation.mutate({
-        topicId: props.topicId,
-        choiceOption: side,
-        votedAt: new Date().getTime() / 1000,
-      });
-    }
+    props.onVote(props.topicId, side);
   };
 
   return (

src/components/B/BTopicCard.styles.tsx

@@ -0,0 +1,21 @@
+import { styled } from 'styled-components';
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme }) => theme.colors.navy2_60};
+  backdrop-filter: blur(1.5px);
+  border-radius: 10px;
+`;
+
+const CardFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 22px;
+  background-color: rgb(100 81 155 / 60%);
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+`;
+
+export { CardContainer, CardFooter };

src/components/B/BTopicCard.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import CommentChip from '@components/commons/Chip/CommentChip';
+import { Col, Row } from '@components/commons/Flex/Flex';
+import Text from '@components/commons/Text/Text';
+import { TopicResponse } from '@interfaces/api/topic';
+
+import { colors } from '@styles/theme';
+
+import { getDateDiff } from '@utils/date';
+
+import { CardContainer, CardFooter } from './BTopicCard.styles';
+import BTopicChoice from './BTopicChoice';
+
+interface BTopicCardProps {
+  topic: TopicResponse;
+}
+
+const BTopicCard = ({ topic }: BTopicCardProps) => {
+  const navigate = useNavigate();
+
+  const handleCardClick = () => {
+    navigate(`/topics/b/${topic.topicId}`, { state: { topic } });
+  };
+
+  return (
+    <>
+      <CardContainer onClick={handleCardClick}>
+        <Col padding={'12px 22px 20px'}>
+          <Row justifyContent={'space-between'} alignItems={'center'} style={{ marginBottom: 2 }}>
+            <Row gap={10}>
+              <Text size={13} color={colors.purple}>
+                {topic.keyword?.keywordName}
+              </Text>
+              <Text size={13} color={colors.white_40}>
+                {getDateDiff(topic.createdAt)} 전
+              </Text>
+            </Row>
+            {topic.selectedOption && (
+              <Text
+                size={13}
+                weight={600}
+                color={colors.purple}
+                noWrap
+                style={{
+                  borderRadius: 30,
+                  padding: '2px 12px',
+                  backgroundColor: colors.purple_30,
+                }}
+              >
+                선택완료
+              </Text>
+            )}
+          </Row>
+          <Row justifyContent={'space-between'} alignItems={'center'} style={{ marginBottom: 17 }}>
+            <Text size={18} weight={600} color={colors.white}>
+              {topic.topicTitle}
+            </Text>
+            <button>-</button>
+          </Row>
+          <Row gap={5}>
+            <BTopicChoice
+              side={topic.choices[0].choiceOption}
+              content={topic.choices[0].content.text || ''}
+            />
+            <BTopicChoice
+              side={topic.choices[1].choiceOption}
+              content={topic.choices[1].content.text || ''}
+            />
+          </Row>
+        </Col>
+        <CardFooter>
+          <Row gap={5}>
+            <Text size={13} weight={600} color={colors.white_80}>
+              선택
+            </Text>
+            <Text size={13} weight={600} color={colors.white_40}>
+              {topic.voteCount.toLocaleString()} 명
+            </Text>
+          </Row>
+          <CommentChip
+            count={topic.commentCount}
+            backgroundColor={colors.black_20}
+            onClick={function (): void {
+              throw new Error('Function not implemented.');
+            }}
+          />
+        </CardFooter>
+      </CardContainer>
+    </>
+  );
+};
+
+export default BTopicCard;

src/components/B/BTopicChoice.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Text from '@components/commons/Text/Text';
+
+import { colors } from '@styles/theme';
+
+interface BTopicChoiceProps {
+  side: 'CHOICE_A' | 'CHOICE_B';
+  content: string;
+}
+
+const BTopicChoice = ({ side, content }: BTopicChoiceProps) => {
+  return (
+    <ChoiceContainer>
+      <Text size={13} weight={600} color={colors.white_40} align={'center'}>
+        {content}
+      </Text>
+      <Text
+        size={20}
+        weight={900}
+        color={side === 'CHOICE_A' ? colors.A_60 : colors.B_60}
+        style={{ position: 'absolute', top: 0, left: 6 }}
+      >
+        {side === 'CHOICE_A' ? 'A' : 'B'}
+      </Text>
+    </ChoiceContainer>
+  );
+};
+
+const ChoiceContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 72px;
+  padding: 0 20px;
+  background-color: ${({ theme }) => theme.colors.navy2};
+  border-radius: 10px;
+`;
+
+export default BTopicChoice;

src/components/Home/ChoiceSlide/ChoiceSlide.styles.tsx

@@ -31,6 +31,7 @@ export const BetaSideContainer = styled(SlideContainer)`
 
 export const TextContainer = styled.div`
   z-index: 1;
+  box-sizing: content-box;
   justify-content: flex-start;
   width: 87px;
   padding: 0 44px;

src/components/Home/CommentBox/CommentBox.tsx

@@ -60,7 +60,9 @@ const CommentBox = ({
     toggleModal();
   };
 
-  const handleRevoteTopic = () => {};
+  const handleRevoteTopic = () => {
+    throw new Error('투표 다시하기 기능을 사용할 수 없습니다.');
+  };
 
   return (
     <CommentContainer>

src/components/commons/BottomNavigation/BottomNavigation.tsx

@@ -59,7 +59,7 @@ const BottomNavigation = () => {
           )}
         </StyledNavLink>
         <Empty />
-        <StyledNavLink to={'/b'}>
+        <StyledNavLink to={'/topics/b'}>
           {({ isActive }) => (
             <>
               {isActive ? <BFillLogoIcon /> : <BStrokeLogoIcon />}

src/components/commons/Chip/CommentChip.tsx

@@ -9,11 +9,16 @@ import Text from '../Text/Text';
 interface CommentChipProps {
   count: number;
   onClick: () => void;
+  backgroundColor?: string;
 }
 
-const CommentChip = ({ count, onClick }: CommentChipProps) => {
+const CommentChip = ({ count, onClick, backgroundColor }: CommentChipProps) => {
   return (
-    <Container type="button" onClick={onClick}>
+    <Container
+      type="button"
+      onClick={onClick}
+      style={{ backgroundColor: backgroundColor || colors.black_40 }}
+    >
       <CommentIcon width={18} height={18} />
       <Text size={13} weight={400} color={colors.white}>
         댓글
@@ -29,10 +34,10 @@ export default CommentChip;
 
 const Container = styled.button`
   display: flex;
+  flex-shrink: 0;
   gap: 5px;
   align-items: center;
   justify-content: center;
   padding: 2px 10px;
-  background-color: ${({ theme }) => theme.colors.black_40};
   border-radius: 20px;
 `;

src/components/commons/Header/BackButton/BackButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+import { RightChevronIcon } from '@icons/index';
+
+interface BackButtonProps {
+  onClick?: () => void;
+}
+
+const BackButton = ({ onClick }: BackButtonProps) => {
+  const navigate = useNavigate();
+
+  const handleBackButtonClick = () => {
+    navigate(-1);
+  };
+
+  return (
+    <Button onClick={onClick ? onClick : handleBackButtonClick}>
+      <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white} />
+    </Button>
+  );
+};
+
+const Button = styled.button`
+  display: flex;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 5px;
+  cursor: pointer;
+`;
+
+export default BackButton;

src/components/commons/Layout/Layout.styles.tsx

@@ -5,7 +5,8 @@ export const Main = styled.main`
   max-width: 512px;
   height: calc(var(--vh, 1vh) * 100);
   margin: 0 auto;
-  background-color: ${(props) => props.theme.colors.navy};
+
+  /* background-color: ${(props) => props.theme.colors.navy}; */
 
   &::-webkit-scrollbar {
     display: none;

src/components/commons/Loading/Loading.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { zIndex, colors } from '@styles/theme';
+
+import { ALogoIcon, BLogoIcon } from '@icons/index';
+
+import { Row } from '../Flex/Flex';
+
+const Loading = () => {
+  return (
+    <div
+      className="loading"
+      style={{
+        position: 'fixed',
+        overflow: 'hidden',
+        height: 'calc(var(--vh, 1vh) * 100)',
+        width: '100vw',
+        zIndex: zIndex.modal,
+        backgroundColor: colors.navy_60,
+      }}
+    >
+      <Row
+        justifyContent={'center'}
+        alignItems={'center'}
+        gap={7.5}
+        style={{ width: '100%', height: '100%' }}
+      >
+        <ALogoIcon width={65} fill={colors.A} />
+        <BLogoIcon width={66} fill={colors.B} />
+      </Row>
+    </div>
+  );
+};
+
+export default Loading;

src/main.tsx

@@ -1,8 +1,23 @@
+import * as Sentry from '@sentry/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './App.tsx';
 
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />