Feat/topic create page

src/components/commons/BottomNavigation/BottomNavigation.tsx

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 
 import Text from '@components/commons/Text/Text';
 
-import { ABIcon, WriteBoxIcon, ProfileIcon, SelectedHomeIcon } from '@icons/index';
+import { ALogoIcon, BLogoIcon, WriteBoxIcon, ProfileIcon, SelectedHomeIcon } from '@icons/index';
 
 import {
   Container,
@@ -22,20 +22,20 @@ const BottomNavigation = () => {
           <Text size={12}>홈</Text>
         </StyledNavLink>
         <StyledNavLink to={'/a'}>
-          <ABIcon width={26} height={26} />
+          <ALogoIcon width={19} height={20} />
           <Text size={12}>A사이드</Text>
         </StyledNavLink>
         <Empty />
         <StyledNavLink to={'/b'}>
-          <ABIcon width={26} height={26} />
+          <BLogoIcon width={17} height={20} />
           <Text size={12}>B사이드</Text>
         </StyledNavLink>
         <StyledNavLink to={'/profile'}>
           <ProfileIcon width={26} height={26} />
           <Text size={12}>MY</Text>
         </StyledNavLink>
       </RadiusContainer>
-      <StyledNavLink to={'/plus'}>
+      <StyledNavLink to={'/topics/create'}>
         <PlusContainer>
           <WriteBoxIcon width={26} height={26} />
         </PlusContainer>

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

@@ -1,11 +1,22 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { CloseIcon } from '@icons/index';
 
-const CloseButton = () => {
+interface CloseButtonProps {
+  onClick?: () => void;
+}
+
+const CloseButton = ({ onClick }: CloseButtonProps) => {
+  const navigate = useNavigate();
+
+  const handleCloseButtonClick = () => {
+    navigate(-1);
+  }
+
   return (
-    <Button>
+    <Button onClick={onClick ? onClick : handleCloseButtonClick}>
       <CloseIcon />
     </Button>
   );

src/routes/Topic/TopicCreate.styles.tsx

@@ -53,6 +53,7 @@ export const AButton = styled.button<{ selected: 'A' | 'B' | null }>`
   background-color: transparent;
   filter: ${(props) => (props.selected === 'B' ? 'blur(1px)' : 'blur(0px)')};
   opacity: ${(props) => (props.selected === 'B' ? 0.3 : 1)};
+  transition: 0.3s;
 
   &::after {
     position: absolute;
@@ -75,6 +76,7 @@ export const BButton = styled.button<{ selected: 'A' | 'B' | null }>`
   background-color: transparent;
   filter: ${(props) => (props.selected === 'A' ? 'blur(1px)' : 'blur(0px)')};
   opacity: ${(props) => (props.selected === 'A' ? 0.3 : 1)};
+  transition: 0.3s;
 
   &::after {
     position: absolute;
@@ -90,37 +92,32 @@ export const BButton = styled.button<{ selected: 'A' | 'B' | null }>`
   }
 `;
 
-export const ADescription = styled.div<{ selected: 'A' | 'B' | null }>`
+const DescriptionBase = styled.div`
   position: absolute;
-  top: 0;
-  right: -111.78px;
   z-index: 2;
   width: 97px;
   height: 62px;
   font-size: 22px;
   font-weight: 700;
   line-height: 140%;
-  color: ${colors.A};
-  text-align: start;
   text-shadow: 0 0 30px #242036;
   letter-spacing: 0.2px;
+  pointer-events: none;
+`;
+
+export const ADescription = styled(DescriptionBase)<{ selected: 'A' | 'B' | null }>`
+  top: 0;
+  right: -111.78px;
+  color: ${colors.A};
+  text-align: start;
   visibility: ${(props) => (props.selected === 'A' ? 'visible' : 'hidden')};
 `;
 
-export const BDescription = styled.div<{ selected: 'A' | 'B' | null }>`
-  position: absolute;
+export const BDescription = styled(DescriptionBase)<{ selected: 'A' | 'B' | null }>`
   bottom: 0;
   left: -111.78px;
-  z-index: 2;
-  width: 97px;
-  height: 62px;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 140%;
   color: ${colors.B};
   text-align: end;
-  text-shadow: 0 0 30px #242036;
-  letter-spacing: 0.2px;
   visibility: ${(props) => (props.selected === 'B' ? 'visible' : 'hidden')};
 `;
 
@@ -221,4 +218,5 @@ export const TopicCreateButton = styled.button<{ selected: 'A' | 'B' | null }>`
   visibility: ${(props) => (props.selected === null ? 'hidden' : 'visible')};
   background-color: ${(props) => (props.selected === 'A' ? colors.A : colors.B)};
   border-radius: 50px;
+  transition: 0.3s;
 `;

src/routes/Topic/TopicCreate.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import CloseButton from '@components/commons/Header/CloseButton/CloseButton';
 import Layout from '@components/commons/Layout/Layout';
@@ -29,6 +30,7 @@ import {
 
 const TopicCreate = () => {
   const [selected, setSelected] = useState<'A' | 'B' | null>(null);
+  const navigate = useNavigate();
 
   function handleAButtonClick() {
     setSelected('A');
@@ -38,10 +40,14 @@ const TopicCreate = () => {
     setSelected('B');
   }
 
+  function handleCloseButtonClick() {
+    navigate(-1);
+  }
+
   return (
     <Layout
       hasBottomNavigation={false}
-      HeaderLeft={() => <CloseButton />}
+      HeaderLeft={() => <CloseButton onClick={handleCloseButtonClick} />}
       HeaderCenter={() => (
         <Text size={20} weight={600} color={colors.white}>
           토픽 생성