Merge branch 'dev' into feat/topic-create-page

src/App.tsx

@@ -1,30 +1,22 @@
 import isValidProp from '@emotion/is-prop-valid';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { StyleSheetManager, ThemeProvider } from 'styled-components';
 
 import GlobalStyle from '@styles/global';
 import { theme } from '@styles/theme';
 
-import client from '@apis/fetch';
+import { enableScrollLock } from '@utils/scrollLock';
 
 import Router from './routes';
 
 const App = () => {
   const queryClient = new QueryClient();
 
-  // useEffect(() => {
-  //   if (import.meta.env.DEV) {
-  //     [1, 27, 19, 2, 7, 25, 17, 14, 11, 23].map((topicId) => {
-  //       client.delete(`topics/${topicId}/vote`, {
-  //         canceledAt: Math.floor(new Date().getTime() / 1000),
-  //       });
-  //     });
-  //   }
-  // }, []);
+  useEffect(() => {}, []);
 
   return (
-    <StyleSheetManager shouldForwardProp={(propName) => isValidProp(propName)}>
+    <StyleSheetManager shouldForwardProp={() => true}>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <GlobalStyle />

src/assets/icons/index.ts

@@ -6,10 +6,13 @@ import NewAlarmIcon from './alarm-new.svg?react';
 import AppleIcon from './apple.svg?react';
 import BLogoIcon from './b-logo.svg?react';
 import BigDownChevronIcon from './big-down-chevron.svg?react';
+import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
+import CommentIcon from './comment.svg?react';
 import DownChevronIcon from './down-chevron.svg?react';
 import GoogleIcon from './google.svg?react';
 import HideIcon from './hide.svg?react';
+import HitIcon from './hit.svg?react';
 import SelectedHomeIcon from './home-selected.svg?react';
 import KakaoIcon from './kakao.svg?react';
 import LeftDoubleArrowIcon from './left-double-arrow.svg?react';
@@ -30,9 +33,16 @@ export {
   ABIcon,
   ABLogoIcon,
   AlarmIcon,
+  ALogoIcon,
   AppleIcon,
+  BLogoIcon,
+  ClockIcon,
+  CloseIcon,
+  CommentIcon,
+  DownChevronIcon,
   GoogleIcon,
   HideIcon,
+  HitIcon,
   KakaoIcon,
   LeftDoubleArrowIcon,
   MeatballIcon,
@@ -44,14 +54,14 @@ export {
   RightChevronIcon,
   RightDoubleArrowIcon,
   SelectedHomeIcon,
-  ThumbsIcon,
-  WriteBoxIcon,
   SizeUpIcon,
   CloseIcon,
   DownChevronIcon,
   BigDownChevronIcon,
-  TopicCreatBackgrounIcon,
   ALogoIcon,
   BLogoIcon,
   RotateIcon,
+  ThumbsIcon,
+  TopicCreatBackgrounIcon,
+  WriteBoxIcon,
 };

src/components/Home/Comment/Thumbs.tsx

@@ -22,6 +22,8 @@ const Thumbs = ({ type, count, hasClicked, onClick }: ThumbsProps) => {
     <button onClick={onClick}>
       <Row gap={3} justifyContent={'space-between'} alignItems={'center'}>
         <ThumbsIcon
+          width={22}
+          height={22}
           fill={fill}
           stroke={stroke}
           style={{ transform: type === 'down' ? 'rotate(180deg)' : 'rotate(0deg)' }}

src/components/Home/CommentBox/CommentBox.styles.tsx

@@ -62,7 +62,7 @@ export const Comment = styled.div`
   border-radius: 0 0 10px 10px;
 `;
 
-export const Blur = styled('div')<{ isVote: boolean }>`
+export const Blur = styled('div')<{ $voted: boolean }>`
   box-sizing: border-box;
   display: flex;
   gap: 10px;
@@ -71,7 +71,7 @@ export const Blur = styled('div')<{ isVote: boolean }>`
   width: 100%;
   height: 29px;
   background-color: transparent;
-  filter: ${(props) => (!props.isVote ? 'blur(2px)' : 'blur(0px)')};
+  filter: ${(props) => (!props.$voted ? 'blur(2px)' : 'blur(0px)')};
 `;
 
 export const HighlightText = styled.span`

src/components/Home/CommentBox/CommentBox.tsx

@@ -88,7 +88,7 @@ const CommentBox = ({
           </Text>
         </CommentInfoContainer>
         <Comment>
-          <Blur isVote={hasVoted}>
+          <Blur $voted={hasVoted}>
             <UserProfileImage src={latestComment?.writer?.profileImageUrl || ''} />
             <Text size={15} weight={'regular'} color={colors.white}>
               {latestComment?.content || ''}

src/components/Home/TopicCard/TopicCard.styles.tsx

@@ -85,12 +85,12 @@ export const UserProfileImage = styled.img`
   border-radius: 50%;
 `;
 
-export const SelectTextContainer = styled.div<{ hasVoted: boolean }>`
+export const SelectTextContainer = styled.div<{ $voted: boolean }>`
   display: flex;
   gap: 6px;
   align-items: center;
   justify-content: space-between;
   height: 25px;
   margin: 4px 0 0;
-  visibility: ${(props) => (props.hasVoted ? 'hidden' : 'visible')};
+  visibility: ${(props) => (props.$voted ? 'hidden' : 'visible')};
 `;

src/components/Home/TopicCard/TopicCard.tsx

@@ -125,7 +125,7 @@ const TopicCard = ({ topic }: TopicCardProps) => {
           <ChoiceSlider onVote={handleOnVote} choices={choices} />
         )}
         <Timer endTime={topic.deadline} />
-        <SelectTextContainer hasVoted={topic.selectedOption !== null}>
+        <SelectTextContainer $voted={topic.selectedOption !== null}>
           <LeftDoubleArrowIcon />
           <Text size={14} weight={'regular'} color={colors.white_40}>
             밀어서 선택하기

src/components/Login/LoginButton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Row } from '@components/commons/Flex/Flex';
+import Text from '@components/commons/Text/Text';
+import { LoginButton as Button } from '@routes/Auth/login/Login.styles';
+
+import { colors } from '@styles/theme';
+
+interface LoginButtonProps {
+  onClick: () => void;
+  backgroundColor: string;
+  color?: string;
+  Icon: () => React.ReactNode;
+  buttonText: string;
+}
+
+const LoginButton = ({
+  onClick,
+  backgroundColor,
+  color = colors.black,
+  Icon,
+  buttonText,
+}: LoginButtonProps) => (
+  <Button onClick={onClick} style={{ backgroundColor }}>
+    <Row padding={'15px 20px'} justifyContent={'space-between'}>
+      <Icon />
+      <Text size={16} color={color} weight={'bold'}>
+        {buttonText}
+      </Text>
+      <div style={{ width: 18, height: 18 }} />
+    </Row>
+  </Button>
+);
+
+export default LoginButton;

src/components/Notifications/NotificationItem.styles.tsx

@@ -0,0 +1,14 @@
+import { styled } from 'styled-components';
+
+const IconWrapper = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background-color: #473672;
+  border-radius: 50%;
+`;
+
+export { IconWrapper };

src/components/Notifications/NotificationItem.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Col, Row } from '@components/commons/Flex/Flex';
+import Text from '@components/commons/Text/Text';
+
+import { colors } from '@styles/theme';
+
+import { ClockIcon, CommentIcon, HitIcon, ThumbsIcon } from '@icons/index';
+
+import { IconWrapper } from './NotificationItem.styles';
+
+interface NotificationItem {
+  onClick: () => void;
+  notification: {
+    type: 'hit' | 'comment' | 'like' | 'close';
+    title: string;
+    date: number;
+    checked: boolean;
+  };
+}
+
+const NotificationItem = ({ onClick, notification }: NotificationItem) => {
+  const renderIcon = () => {
+    switch (notification.type) {
+      case 'close':
+        return <ClockIcon />;
+      case 'comment':
+        return <CommentIcon />;
+      case 'hit':
+        return <HitIcon />;
+      case 'like':
+        return (
+          <ThumbsIcon
+            stroke={colors.white_40}
+            fill={'none'}
+            strokeWidth={2}
+            width={32}
+            height={33}
+            style={{ marginLeft: 1 }}
+          />
+        );
+    }
+  };
+
+  return (
+    <Row
+      onClick={onClick}
+      justifyContent="space-between"
+      padding={'24px 20px'}
+      style={{ ...(!notification.checked && { backgroundColor: '#2e234a' }) }}
+      gap={28}
+    >
+      <Row gap={16}>
+        <IconWrapper>{renderIcon()}</IconWrapper>
+        <Col gap={8}>
+          <Text size={15} weight={500} color={colors.white}>
+            투표가 마감 되었어요, 지금 바로 결과를 확인해 보세요!
+          </Text>
+          <Text size={14} weight={400} color={colors.sub_purple2}>
+            성수 치킨 버거의 종결지는? 성수 치킨 버거의 종결지는?
+          </Text>
+        </Col>
+      </Row>
+      <Text size={13} weight={400} color={colors.white_40} style={{ flexShrink: 0 }}>
+        방금
+      </Text>
+    </Row>
+  );
+};
+
+export default NotificationItem;

src/components/Notifications/TabHeader.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Row } from '@components/commons/Flex/Flex';
+import Text from '@components/commons/Text/Text';
+import { NOTIFICATIONS_TABS } from '@routes/Notification/Notification';
+import { SelectedTabIndicator } from '@routes/Notification/Notification.styles';
+
+import { colors } from '@styles/theme';
+
+interface TabHeaderProps {
+  currentTab: (typeof NOTIFICATIONS_TABS)[number];
+  setCurrentTab: React.Dispatch<React.SetStateAction<(typeof NOTIFICATIONS_TABS)[number]>>;
+}
+
+const TabHeader = ({ currentTab, setCurrentTab }: TabHeaderProps) => {
+  const handleTabClick = (tabName: (typeof NOTIFICATIONS_TABS)[number]) => {
+    setCurrentTab(tabName);
+  };
+  return (
+    <Row justifyContent={'center'} gap={45} padding={'30px 0 24px 0'}>
+      {NOTIFICATIONS_TABS.map((tabName) => {
+        return (
+          <div
+            key={tabName}
+            style={{ position: 'relative' }}
+            onClick={() => handleTabClick(tabName)}
+          >
+            {tabName === currentTab && <SelectedTabIndicator />}
+            <Text
+              size={18}
+              weight={600}
+              color={tabName === currentTab ? colors.sub_purple2 : colors.white}
+              style={{ position: 'relative', zIndex: 1 }}
+            >
+              {tabName}
+            </Text>
+          </div>
+        );
+      })}
+    </Row>
+  );
+};
+
+export default TabHeader;

src/components/commons/Flex/Flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-interface FlexProps {
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   justifyContent?: React.CSSProperties['justifyContent'];
   alignItems?: React.CSSProperties['alignItems'];

src/components/commons/Header/NotificationButton/NotificationButton.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { AlarmIcon } from '@icons/index';
 
 const NotificationButton = () => {
+  const navigate = useNavigate();
+
   return (
-    <AlarmButton>
+    <AlarmButton onClick={() => navigate('/notifications')}>
       <AlarmIcon />
     </AlarmButton>
   );

src/components/commons/Text/Text.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
   size: number;
   children: React.ReactNode;
   tagName?: keyof JSX.IntrinsicElements;

src/routes/Auth/login/Login.styles.tsx

@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 
 export const Container = styled.div`
-  height: 100vh;
+  height: 100%;
   background-color: ${(props) => props.theme.colors.navy};
 `;
 
@@ -19,8 +19,6 @@ export const Divider = styled.div`
 `;
 
 export const LoginButtonContainer = styled.div`
-  position: absolute;
-  bottom: 104px;
   display: flex;
   flex-direction: column;
   gap: 17px;