Feat/topic create page

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 ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
 import CommentIcon from './comment.svg?react';
@@ -22,6 +23,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';
@@ -53,6 +55,12 @@ export {
   RightDoubleArrowIcon,
   SelectedHomeIcon,
   SizeUpIcon,
+  CloseIcon,
+  DownChevronIcon,
+  BigDownChevronIcon,
+  ALogoIcon,
+  BLogoIcon,
+  RotateIcon,
   ThumbsIcon,
   TopicCreatBackgrounIcon,
   WriteBoxIcon,

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/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/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%);
+`;

src/components/TopicCreate/TopicCreateTextInput.tsx

@@ -0,0 +1,91 @@
+import { Register } from '@tanstack/react-query';
+import React from 'react';
+import { RegisterOptions, useFormContext } from 'react-hook-form';
+import { CONFIG, INPUT_TYPE, InputType } from 'src/constants/form';
+
+import { Col, Row } from '@components/commons/Flex/Flex';
+import Text from '@components/commons/Text/Text';
+
+import { colors } from '@styles/theme';
+
+import { RotateIcon } from '@icons/index';
+
+import {
+  Input,
+  ReplaceButton,
+  ReplaceIcon,
+  TextInputContainer,
+  TextInputTextContainer,
+  InputSuffix,
+} from './TopicCreateTextInput.styles';
+
+interface TopicCreareProps {
+  topic: 'A' | 'B';
+  topicContent: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+const TopicCreateTextInput = ({ topic, topicContent }: TopicCreareProps) => {
+  const { register, watch } = useFormContext();
+  const ATopicProgress = watch(INPUT_TYPE.ATOPIC)
+    ? `${watch(INPUT_TYPE.ATOPIC)?.length}/25`
+    : '0/25';
+  const BTopicProgress = watch(INPUT_TYPE.BTOPIC)
+    ? `${watch(INPUT_TYPE.BTOPIC)?.length}/25`
+    : '0/25';
+  return (
+    <Col gap={16}>
+      <Row gap={83} justifyContent="space-between">
+        <Text size={16} weight={400} color={colors.white_60} align="start">
+          어떤 선택지가 있나요?
+        </Text>
+        <ReplaceButton>
+          <ReplaceIcon>
+            <RotateIcon opacity="0.3" />
+          </ReplaceIcon>
+          <Text style={{ opacity: 0.3 }} size={13} weight={400} color={colors.purple} align="start">
+            AB 선택지 바꾸기
+          </Text>
+        </ReplaceButton>
+      </Row>
+      <Col gap={8}>
+        <TextInputContainer>
+          <TextInputTextContainer>
+            <Text style={{ opacity: 0.2 }} size={128} weight={900} color={colors.A}>
+              A
+            </Text>
+          </TextInputTextContainer>
+          <Input
+            type="text"
+            {...register(INPUT_TYPE.ATOPIC, CONFIG.ATOPIC.options)}
+            placeholder="A 선택지를 입력해주세요."
+          />
+          <InputSuffix>
+            <Text size={15} weight={400} color={colors.purple_60}>
+              {ATopicProgress}
+            </Text>
+          </InputSuffix>
+        </TextInputContainer>
+        <TextInputContainer>
+          <TextInputTextContainer>
+            <Text style={{ opacity: 0.2 }} size={128} weight={900} color={colors.B}>
+              B
+            </Text>
+          </TextInputTextContainer>
+          <Input
+            type="text"
+            {...register(INPUT_TYPE.BTOPIC, CONFIG.BTOPIC.options)}
+            placeholder="B 선택지를 입력해주세요."
+          />
+          <InputSuffix>
+            <Text size={15} weight={400} color={colors.purple_60}>
+              {BTopicProgress}
+            </Text>
+          </InputSuffix>
+        </TextInputContainer>
+      </Col>
+    </Col>
+  );
+};
+
+export default TopicCreateTextInput;

src/components/commons/Button/DefaultButton.tsx

@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+interface DefaultButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  onClick: () => void;
+  disabled: boolean;
+  title: string;
+}
+
+const DefaultButton = ({ onClick, disabled, title }: DefaultButtonProps) => {
+  return (
+    <StyledButton onClick={onClick} disabled={disabled}>
+      {title}
+    </StyledButton>
+  );
+};
+
+const StyledButton = styled.button<{ disabled: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 52px;
+  color: ${(props) => (props.disabled ? colors.navywhite_40 : colors.white)};
+  cursor: pointer;
+  background-color: ${(props) => (props.disabled ? colors.navywhite_20 : colors.purple)};
+  border-radius: 10px;
+`;
+
+export default DefaultButton;

src/components/commons/Header/CloseButton/CloseButton.tsx

@@ -13,7 +13,7 @@ const CloseButton = ({ onClick }: CloseButtonProps) => {
 
   const handleCloseButtonClick = () => {
     navigate(-1);
-  }
+  };
 
   return (
     <Button onClick={onClick ? onClick : handleCloseButtonClick}>
@@ -27,6 +27,7 @@ const Button = styled.button`
   align-items: center;
   width: 24px;
   height: 24px;
+  padding: 5px;
   cursor: pointer;
 `;