Merge branch 'dev' into fix/login-flow

.github/pull_request_template.md

@@ -0,0 +1,11 @@
+## What is this PR? 🔍
+- 무슨 목적/이유로 구현했는지
+
+### 🛠️ Issue
+- Closes #number
+
+## Changes 📝
+- 작업한 내용 적어주세요
+
+## To Reviewers 📢
+- 이 부분 좀 같이 봐주세요 / 혹은 하고 싶은 말

src/assets/icons/index.ts

@@ -5,6 +5,7 @@ import AlarmIcon from './alarm-default.svg?react';
 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 CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
@@ -23,6 +24,7 @@ import RefreshIcon from './refresh.svg?react';
 import ReportIcon from './report.svg?react';
 import RightChevronIcon from './right-chevron.svg?react';
 import RightDoubleArrowIcon from './right-double-arrow.svg?react';
+import RotateIcon from './rotate.svg?react';
 import SizeUpIcon from './size-up.svg?react';
 import ThumbsIcon from './thumbs.svg?react';
 import TopicCreatBackgrounIcon from './topic-create-background.svg?react';
@@ -34,6 +36,7 @@ export {
   AlarmIcon,
   ALogoIcon,
   AppleIcon,
+  BigDownChevronIcon,
   BLogoIcon,
   CheckIcon,
   ClockIcon,
@@ -53,6 +56,7 @@ export {
   ReportIcon,
   RightChevronIcon,
   RightDoubleArrowIcon,
+  RotateIcon,
   SelectedHomeIcon,
   SizeUpIcon,
   ThumbsIcon,

src/assets/styles/theme.ts

@@ -2,14 +2,29 @@ import { DefaultTheme } from 'styled-components/dist/types';
 
 export const colors = {
   purple: '#A46FF3',
-  sub_purple: '#624392',
-  sub_purple2: '#BE28F3',
+  purple_30: 'rgba(164, 111, 243, 0.30)',
+  purple_60: 'rgba(164, 111, 243, 0.60)',
+  purple2: '#BE28F3',
   navy: '#242036',
+  navy_20: 'rgba(36, 32, 54, 0.20)',
+  navy_40: 'rgba(36, 32, 54, 0.40)',
+  navy_60: 'rgba(36, 32, 54, 0.60)',
+  navy_80: 'rgba(36, 32, 54, 0.80)',
   navy2: '#4D3B7C',
-  sub_navy2: '#4D3B7C',
+  navy2_20: 'rgba(77, 59, 124, 0.20)',
+  navy2_40: 'rgba(77, 59, 124, 0.40)',
+  navy2_60: 'rgba(77, 59, 124, 0.60)',
+  navy2_80: 'rgba(77, 59, 124, 0.80)',
   A: '#D04376',
-  sub_A: '#DF8AA9',
+  A_20: 'rgba(208, 67, 118, 0.20)',
+  A_40: 'rgba(208, 67, 118, 0.40)',
+  A_60: 'rgba(208, 67, 118, 0.60)',
+  A_80: 'rgba(208, 67, 118, 0.80)',
   B: '#1498AA',
+  B_20: 'rgba(20, 152, 170, 0.20)',
+  B_40: 'rgba(20, 152, 170, 0.40)',
+  B_60: 'rgba(20, 152, 170, 0.60)',
+  B_80: 'rgba(20, 152, 170, 0.80)',
   black: '#000000',
   white: '#FFFFFF',
   white_20: 'rgba(255, 255, 255, 0.20)',
@@ -20,6 +35,10 @@ export const colors = {
   black_60: 'rgba(0, 0, 0, 0.60)',
   white_80: 'rgba(255, 255, 255, 0.80)',
   black_80: 'rgba(0, 0, 0, 0.80)',
+  navywhite_20: '#504D5E',
+  navywhite_40: '#7C7986',
+  navywhite_60: '#A7A6AF',
+  navywhite_80: '#D3D2D7',
 };
 
 export const zIndex = {
@@ -43,7 +62,7 @@ export const input = {
       backgroundColor: '#342b52',
     },
     error: {
-      border: `1px solid ${colors.sub_purple2}`,
+      border: `1px solid ${colors.purple2}`,
       backgroundColor: '#342b52',
     },
   },
@@ -54,7 +73,7 @@ export const input = {
       lineHeight: '140%',
       padding: '0 0 10px 0',
       border: 'none',
-      borderBottom: `1px solid ${colors.sub_navy2}`,
+      borderBottom: `1px solid ${colors.navy2}`,
       backgroundColor: 'transparent',
       borderRadius: 0,
       outline: 'none',
@@ -65,7 +84,7 @@ export const input = {
       lineHeight: '140%',
       padding: '0 0 10px 0',
       border: 'none',
-      borderBottom: `1px solid ${colors.sub_purple2}`,
+      borderBottom: `1px solid ${colors.purple2}`,
       borderRadius: 0,
       backgroundColor: 'transparent',
       outline: 'none',

src/components/Home/Comment/Comment.tsx

@@ -66,7 +66,7 @@ const Comment = React.memo(({ comment }: CommentProps) => {
                   {'·'} {distanceText}전
                 </Text>
               </Row>
-              <Text size={14} color={colors.sub_A} weight={600}>
+              <Text size={14} color={colors.A} weight={600}>
                 {comment.writersVotedOption}
               </Text>
             </Col>

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/TopicSwiper/TopicSwiper.tsx

@@ -4,6 +4,8 @@ import SwiperCore from 'swiper';
 import { Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
+import { colors } from '@styles/theme';
+
 import { RightChevronIcon } from '@icons/index';
 
 SwiperCore.use([Navigation]);
@@ -27,7 +29,7 @@ const TopicSwiper = ({ children }: TopicSwiperProps) => {
           setNextDisabled(false);
         }}
       >
-        <RightChevronIcon style={{ transform: 'rotate(180deg)' }} />
+        <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white_40} />
       </PrevButton>
       <Swiper
         allowTouchMove={false}
@@ -51,16 +53,17 @@ const TopicSwiper = ({ children }: TopicSwiperProps) => {
           setPrevDisabled(false);
         }}
       >
-        <RightChevronIcon />
+        <RightChevronIcon stroke={colors.white_40} />
       </NextButton>
     </React.Fragment>
   );
 };
 
 const SlideButton = styled.button<{ disabled: boolean }>`
   z-index: 100;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
+  padding: 4.8px 10.4px;
   cursor: pointer;
   background-color: transparent;
 

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.tsx

@@ -56,7 +56,7 @@ const NotificationItem = ({ onClick, notification }: NotificationItem) => {
           <Text size={15} weight={500} color={colors.white}>
             투표가 마감 되었어요, 지금 바로 결과를 확인해 보세요!
           </Text>
-          <Text size={14} weight={400} color={colors.sub_purple2}>
+          <Text size={14} weight={400} color={colors.purple2}>
             성수 치킨 버거의 종결지는? 성수 치킨 버거의 종결지는?
           </Text>
         </Col>

src/components/Notifications/TabHeader.tsx

@@ -29,7 +29,7 @@ const TabHeader = ({ currentTab, setCurrentTab }: TabHeaderProps) => {
             <Text
               size={18}
               weight={600}
-              color={tabName === currentTab ? colors.sub_purple2 : colors.white}
+              color={tabName === currentTab ? colors.purple2 : colors.white}
               style={{ position: 'relative', zIndex: 1 }}
             >
               {tabName}

src/components/TopicCreate/TopicCreateTextInput.styles.tsx

@@ -0,0 +1,69 @@
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+export const ReplaceButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  align-items: center;
+  justify-content: space-between;
+  width: 111px;
+  height: 18px;
+`;
+
+export const ReplaceIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+`;
+
+export const TextInputContainer = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 57px;
+  overflow: hidden;
+  background-color: transparent;
+  border-radius: 10px;
+`;
+
+export const TextInputTextContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+`;
+
+export const Input = styled.input`
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: ${colors.white};
+  background-color: rgb(77 59 124 / 40%);
+  border: none;
+  border-radius: 10px;
+  outline: none;
+
+  &::placeholder {
+    color: ${colors.purple};
+  }
+`;
+
+export const InputSuffix = styled.div`
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+`;