[FE] 작성한 리뷰를 확인할 수 있는 반응형 레이아웃

frontend/src/components/ReviewListItem/index.tsx

@@ -0,0 +1,13 @@
+// 임시 컴포넌트! 작성한 리뷰 확인 && 받은 리뷰 확인 아이템
+
+import * as S from './styles';
+
+interface ReviewListItemProps {
+  handleClick: () => void;
+}
+
+const ReviewListItem = ({ handleClick }: ReviewListItemProps) => {
+  return <S.ReviewListItem onClick={handleClick}>리뷰 목록 아이템입니다</S.ReviewListItem>;
+};
+
+export default ReviewListItem;

frontend/src/components/ReviewListItem/styles.ts

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const ReviewListItem = styled.li`
+  display: flex;
+  flex-direction: column;
+
+  min-width: ${({ theme }) => theme.writtenReviewLayoutSize.width};
+  min-height: 20rem;
+
+  border: 0.2rem solid ${({ theme }) => theme.colors.placeholder};
+  border-radius: ${({ theme }) => theme.borderRadius.basic};
+
+  ${media.small} {
+    min-width: 30rem;
+    min-height: 18rem;
+  }
+`;

frontend/src/pages/WrittenReviewConfirmPage/components/DetailedWrittenReview/index.tsx

@@ -0,0 +1,29 @@
+import { PageContentLayout } from '../../layouts';
+import { NoSelectedReviewGuide } from '../index';
+
+import * as S from './styles';
+
+interface DetailedWrittenReviewProps {
+  $isMobile: boolean;
+  selectedReviewId: number | null;
+}
+
+// 라우팅으로 들어오는 경우 queryParam으로 reviewId를 가져올 수 있음
+// -> 그렇다면 라우터에서 이 컴포넌트를 별도의 props 없이 호출 가능, selectedReviewId는 optional 처리
+// but 일단은 props로 id를 무조건 받도록 구현해둔 상태
+const DetailedWrittenReview = ({ $isMobile, selectedReviewId }: DetailedWrittenReviewProps) => {
+  // 추후 이곳에서 직접 상세 리뷰 데이터 호출
+
+  // 라우팅으로 넘어온 경우 무조건 isMobile은 true
+  return (
+    <S.DetailedWrittenReview $isMobile={$isMobile}>
+      <PageContentLayout title="작성한 리뷰 상세보기">
+        <S.Outline>
+          {selectedReviewId ? <div style={{ height: '120vh' }}>있다</div> : <NoSelectedReviewGuide />}
+        </S.Outline>
+      </PageContentLayout>
+    </S.DetailedWrittenReview>
+  );
+};
+
+export default DetailedWrittenReview;

frontend/src/pages/WrittenReviewConfirmPage/components/DetailedWrittenReview/styles.ts

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+interface DetailedWrittenReviewStyleProps {
+  $isMobile: boolean;
+}
+
+export const DetailedWrittenReview = styled.div<DetailedWrittenReviewStyleProps>`
+  ${media.xSmall} {
+    ${({ $isMobile }) =>
+      $isMobile
+        ? `
+          display: block;
+          width: 100%;
+        `
+        : `
+          display: none;
+        `}
+  }
+`;
+
+export const Outline = styled.div`
+  display: flex;
+  align-items: center;
+
+  min-width: ${({ theme }) => theme.writtenReviewLayoutSize.width};
+  min-height: ${({ theme }) => theme.writtenReviewLayoutSize.height};
+
+  border: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
+  border-radius: ${({ theme }) => theme.borderRadius.basic};
+`;

frontend/src/pages/WrittenReviewConfirmPage/components/NoSelectedReviewGuide/index.tsx

@@ -0,0 +1,14 @@
+import SlideArrowsIcon from '@/assets/slideArrows.svg';
+
+import * as S from './styles';
+
+const NoSelectedReviewGuide = () => {
+  return (
+    <S.NoSelectedReview>
+      <img src={SlideArrowsIcon} alt="" />
+      <p>확인할 리뷰를 선택해주세요!</p>
+    </S.NoSelectedReview>
+  );
+};
+
+export default NoSelectedReviewGuide;

frontend/src/pages/WrittenReviewConfirmPage/components/NoSelectedReviewGuide/styles.ts

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const NoSelectedReview = styled.section`
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0 auto;
+
+  img {
+    height: 3rem;
+
+    ${media.medium} {
+      height: 2.8rem;
+      margin-left: 2.5rem;
+    }
+  }
+
+  p {
+    font-size: ${({ theme }) => theme.fontSize.mediumSmall};
+    font-weight: bold;
+    color: ${({ theme }) => theme.colors.disabled};
+
+    ${media.medium} {
+      font-size: ${({ theme }) => theme.fontSize.basic};
+    }
+  }
+`;

frontend/src/pages/WrittenReviewConfirmPage/components/WrittenReviewList/index.tsx

@@ -0,0 +1,29 @@
+import ReviewListItem from '@/components/ReviewListItem';
+
+import { PageContentLayout } from '../../layouts';
+
+import * as S from './styles';
+
+interface WrittenReviewListProps {
+  handleClick: (reviewId: number) => void;
+}
+
+const WrittenReviewList = ({ handleClick }: WrittenReviewListProps) => {
+  // 리뷰 리스트 받아오기
+  const reviewIdList = [5, 1, 2, 3, 4];
+
+  return (
+    <PageContentLayout title="작성한 리뷰 목록">
+      <S.WrittenReviewList>
+        {/** 추후 이벤트 위임 형식으로 변경 가능 */}
+
+        {/** TODO: 작성한 리뷰 없을 때의 컴포넌트 추가*/}
+        {reviewIdList.map((reviewId) => (
+          <ReviewListItem key={reviewId} handleClick={() => handleClick(reviewId)} />
+        ))}
+      </S.WrittenReviewList>
+    </PageContentLayout>
+  );
+};
+
+export default WrittenReviewList;

frontend/src/pages/WrittenReviewConfirmPage/components/WrittenReviewList/styles.ts

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+
+export const WrittenReviewList = styled.ul`
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.7rem;
+
+  max-height: 68vh;
+
+  ${media.xSmall} {
+    width: 100%;
+  }
+
+  & > li {
+    margin-right: 0.5rem;
+  }
+`;

frontend/src/pages/WrittenReviewConfirmPage/components/index.tsx

@@ -0,0 +1,3 @@
+export { default as NoSelectedReviewGuide } from './NoSelectedReviewGuide';
+export { default as DetailedWrittenReview } from './DetailedWrittenReview';
+export { default as WrittenReviewList } from './WrittenReviewList';

frontend/src/pages/WrittenReviewConfirmPage/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useCurrentMediaType } from './useCurrentMediaType';

frontend/src/pages/WrittenReviewConfirmPage/hooks/useCurrentMediaType/index.ts

@@ -0,0 +1,45 @@
+import { useState, useLayoutEffect } from 'react';
+
+import { breakpoint } from '@/styles/theme';
+import { Breakpoints } from '@/utils/media';
+
+interface CurrentDevice {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+}
+
+/**
+  현재 미디어 쿼리 상태와 디바이스 종류(boolean)를 리턴하는 훅 
+ */
+const useCurrentMediaType = () => {
+  const [currentMediaType, setCurrentMediaType] = useState<Breakpoints | null>(null);
+  const breakpointsArray = Object.entries(breakpoint);
+
+  const getCurrentDeviceType = (mediaType: Breakpoints | null): CurrentDevice => ({
+    isMobile: mediaType === 'xSmall' || mediaType === 'xxSmall',
+    isTablet: mediaType === 'small' || mediaType === 'medium',
+    isDesktop: mediaType === 'large',
+  });
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      const currentWidth = window.innerWidth;
+      const matchedBreakpoint = breakpointsArray.find(([, width]) => currentWidth <= width);
+
+      setCurrentMediaType((matchedBreakpoint?.[0] as Breakpoints) ?? null);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return {
+    currentMediaType,
+    currentDeviceType: getCurrentDeviceType(currentMediaType),
+  };
+};
+
+export default useCurrentMediaType;

frontend/src/pages/WrittenReviewConfirmPage/index.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ErrorSuspenseContainer, AuthAndServerErrorFallback } from '@/components';
+import { useSearchParamAndQuery } from '@/hooks';
+
+import DetailedWrittenReview from './components/DetailedWrittenReview';
+import WrittenReviewList from './components/WrittenReviewList';
+import { useCurrentMediaType } from './hooks';
+import * as S from './styles'; // TODO: 마지막에 import 경로들, 시맨틱 확인하기!
+
+// refactor(선택): 레이아웃 도입 등으로 이 페이지에서는 에러바운더리 + 탭 + 이하 페이지 Content 요소만 쓰도록 분리
+
+const WrittenReviewConfirmPage = () => {
+  const [selectedReviewId, setSelectedReviewId] = useState<number | null>(null);
+
+  const { param: reviewRequestCode } = useSearchParamAndQuery({
+    paramKey: 'reviewRequestCode',
+  });
+  const navigate = useNavigate();
+  const { currentDeviceType } = useCurrentMediaType();
+
+  const handleClick = (reviewId: number) => {
+    if (currentDeviceType.isMobile) {
+      navigate(`/user/written-review-confirm/${reviewRequestCode}/${reviewId}`);
+    } else {
+      setSelectedReviewId(reviewId);
+    }
+  };
+
+  return (
+    <ErrorSuspenseContainer fallback={AuthAndServerErrorFallback}>
+      <S.PageContainer>
+        <WrittenReviewList handleClick={handleClick} />
+        {/* TODO: 모바일에서 DetailedWrittenReview를 화살표 레이아웃으로 감싸기 */}
+        {!currentDeviceType.isMobile && (
+          <DetailedWrittenReview $isMobile={currentDeviceType.isMobile} selectedReviewId={selectedReviewId} />
+        )}
+      </S.PageContainer>
+    </ErrorSuspenseContainer>
+  );
+};
+
+export default WrittenReviewConfirmPage;

frontend/src/pages/WrittenReviewConfirmPage/layouts/PageContentLayout/index.tsx

@@ -0,0 +1,18 @@
+import { EssentialPropsWithChildren } from '@/types';
+
+import * as S from './styles';
+
+interface WrittenReviewItemProps {
+  title: string;
+}
+
+const PageContentLayout = ({ title, children }: EssentialPropsWithChildren<WrittenReviewItemProps>) => {
+  return (
+    <S.PageContentLayout>
+      <S.Title>{title}</S.Title>
+      <S.Content>{children}</S.Content>
+    </S.PageContentLayout>
+  );
+};
+
+export default PageContentLayout;

frontend/src/pages/WrittenReviewConfirmPage/layouts/PageContentLayout/styles.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const PageContentLayout = styled.article`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  ${media.xSmall} {
+    margin: 0 auto;
+  }
+`;
+
+export const Title = styled.h2`
+  margin-top: 4.7rem;
+  margin-bottom: 2.4rem;
+  font-size: 1.8rem;
+  font-weight: bold;
+`;
+
+export const Content = styled.section`
+
+`;

frontend/src/pages/WrittenReviewConfirmPage/layouts/index.tsx

@@ -0,0 +1 @@
+export { default as PageContentLayout } from './PageContentLayout';

frontend/src/pages/WrittenReviewConfirmPage/styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const PageContainer = styled.div`
+  display: flex;
+  gap: 6rem;
+  justify-content: center;
+
+  ${media.medium} {
+    gap: 4rem;
+  }
+
+  ${media.small} {
+    margin: 0 2rem;
+  }
+`;

frontend/src/pages/index.tsx

@@ -7,3 +7,4 @@ export { default as ReviewWritingPage } from './ReviewWritingPage';
 export { default as ReviewWritingCompletePage } from './ReviewWritingCompletePage';
 export { default as ReviewZonePage } from './ReviewZonePage';
 export { default as ReviewCollectionPage } from './ReviewCollectionPage';
+export { default as WrittenReviewConfirmPage } from './WrittenReviewConfirmPage';

frontend/src/router.tsx

@@ -10,6 +10,9 @@ const ReviewWritingPage = lazy(() => import('@/pages/ReviewWritingPage'));
 const ReviewZonePage = lazy(() => import('@/pages/ReviewZonePage'));
 const ReviewCollectionPage = lazy(() => import('@/pages/ReviewCollectionPage'));
 const LoadingPage = lazy(() => import('@/pages/LoadingPage'));
+// 임시
+const WrittenReviewConfirmPage = lazy(() => import('@/pages/WrittenReviewConfirmPage'));
+const DetailedWrittenReview = lazy(() => import('@/pages/WrittenReviewConfirmPage/components/DetailedWrittenReview'));
 
 import App from './App';
 import { ErrorSuspenseContainer } from './components';
@@ -52,6 +55,12 @@ const router = createBrowserRouter([
         ),
       },
       { path: `${ROUTE.reviewCollection}/:${ROUTE_PARAM.reviewRequestCode}`, element: <ReviewCollectionPage /> },
+      // NOTE: 임시 라우팅 및 페이지명
+      { path: `user/written-review-confirm/:${ROUTE_PARAM.reviewRequestCode}`, element: <WrittenReviewConfirmPage /> },
+      {
+        path: `user/written-review-confirm/:${ROUTE_PARAM.reviewRequestCode}/:${ROUTE_PARAM.reviewId}`,
+        element: <DetailedWrittenReview $isMobile={true} selectedReviewId={Number(ROUTE_PARAM.reviewId)} />,
+      },
     ],
   },
 ]);