[FE] feat: 뒤로 가기 버튼 구현

frontend/src/components/common/BackButton/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { NavigateOptions, useNavigate } from 'react-router';
+
+import BackButtonIcon from '@/assets/backButton.svg';
+
+import * as S from './styles';
+
+interface BackButtonProps {
+  prevPath: string;
+  options?: NavigateOptions;
+  buttonStyle?: React.CSSProperties;
+  wrapperStyle?: React.CSSProperties;
+}
+
+const BackButton = ({ prevPath, options, buttonStyle, wrapperStyle }: BackButtonProps) => {
+  const navigate = useNavigate();
+
+  const handleBackButtonClick = () => {
+    navigate(prevPath, options);
+  };
+
+  return (
+    <S.BackButtonWrapper $style={wrapperStyle}>
+      <S.BackButton onClick={handleBackButtonClick} $style={buttonStyle}>
+        <img src={BackButtonIcon} alt="뒤로가기 버튼" />
+      </S.BackButton>
+    </S.BackButtonWrapper>
+  );
+};
+
+export default BackButton;

frontend/src/components/common/BackButton/styles.ts

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+
+interface BackButtonStyleProps {
+  $style?: React.CSSProperties;
+}
+
+export const BackButtonWrapper = styled.div<BackButtonStyleProps>`
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+
+  ${({ $style }) => $style && { ...$style }}
+`;
+
+export const BackButton = styled.button<BackButtonStyleProps>`
+  width: 3.5rem;
+  height: 3.5rem;
+
+  ${({ $style }) => $style && { ...$style }}
+`;

frontend/src/pages/DetailedReviewPage/components/DetailedReviewPageContents/index.tsx

@@ -46,7 +46,6 @@ const DetailedReviewPageContents = () => {
     };
   }, [detailedReview]);
 
-  // TODO: 리뷰 공개/비공개 토글 버튼 기능
   return (
     <S.DetailedReviewPageContents>
       <ReviewDescription

frontend/src/pages/ReviewCollectionPage/index.tsx

@@ -1,4 +1,4 @@
-import { AuthAndServerErrorFallback, ErrorSuspenseContainer, TopButton } from '@/components';
+import { AuthAndServerErrorFallback, ErrorSuspenseContainer } from '@/components';
 import ReviewDisplayLayout from '@/components/layouts/ReviewDisplayLayout';
 
 import ReviewCollectionPageContents from './components/ReviewCollectionPageContents';
@@ -8,7 +8,6 @@ const ReviewCollectionPage = () => {
     <ErrorSuspenseContainer fallback={AuthAndServerErrorFallback}>
       <ReviewDisplayLayout isReviewList={false}>
         <ReviewCollectionPageContents />
-        <TopButton />
       </ReviewDisplayLayout>
     </ErrorSuspenseContainer>
   );

frontend/src/pages/ReviewListPage/index.tsx

@@ -1,4 +1,4 @@
-import { ErrorSuspenseContainer, AuthAndServerErrorFallback, TopButton } from '@/components';
+import { ErrorSuspenseContainer, AuthAndServerErrorFallback } from '@/components';
 import ReviewDisplayLayout from '@/components/layouts/ReviewDisplayLayout';
 
 import ReviewListPageContents from './components/ReviewListPageContents';
@@ -8,7 +8,6 @@ const ReviewListPage = () => {
     <ErrorSuspenseContainer fallback={AuthAndServerErrorFallback}>
       <ReviewDisplayLayout isReviewList={true}>
         <ReviewListPageContents />
-        <TopButton />
       </ReviewDisplayLayout>
     </ErrorSuspenseContainer>
   );