[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/constants/amplitudeEventName.ts

@@ -24,6 +24,7 @@ export const PAGE_VISITED_EVENT_NAME: { [key in Exclude<PageName, undefined>]: s
   detailedReview: '[page] 리뷰 상세 보기 페이지',
   reviewWriting: '[page] 리뷰 작성 페이지',
   reviewWritingComplete: '[page] 리뷰 작성 완료 페이지',
+  writtenReview: '[page] 작성한 리뷰 확인 페이지',
 };
 
 export const REVIEW_WRITING_EVENT_NAME = {

frontend/src/constants/route.ts

@@ -7,4 +7,5 @@ export const ROUTE = {
   detailedReview: 'user/detailed-review',
   reviewZone: 'user/review-zone',
   reviewCollection: 'user/review-collection',
+  writtenReview: 'user/written-review',
 };

frontend/src/hooks/useSearchParamAndQuery.ts

@@ -1,13 +1,13 @@
 import { useLocation, useParams } from 'react-router';
 
 interface UseSearchParamAndQueryProps {
-  paramKey: string;
+  paramKey?: string;
   queryStringKey?: string;
 }
 /**
  * url에서 원하는 param, queryString의 값을 가져온다.
  * @param paramKey: 가져오고 싶은 param의 key
- * @param queryStringKey: 가져오고 싶은 queryString의 key (옵셔널)
+ * @param queryStringKey: 가져오고 싶은 queryString의 key
  */
 const useSearchParamAndQuery = ({ paramKey, queryStringKey }: UseSearchParamAndQueryProps) => {
   const location = useLocation();

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

@@ -0,0 +1,27 @@
+import { NoSelectedReviewGuide } from '../index';
+import { PageContentLayout } from '../layouts';
+
+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>{selectedReviewId} 선택함 </div> : <NoSelectedReviewGuide />}</S.Outline>
+      </PageContentLayout>
+    </S.DetailedWrittenReview>
+  );
+};
+
+export default DetailedWrittenReview;

frontend/src/pages/WrittenReviewPage/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/WrittenReviewPage/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/WrittenReviewPage/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/WrittenReviewPage/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/WrittenReviewPage/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/WrittenReviewPage/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/WrittenReviewPage/components/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/WrittenReviewPage/components/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/WrittenReviewPage/components/layouts/index.tsx

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

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

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

frontend/src/pages/WrittenReviewPage/hooks/useDeviceBreakpoints/index.ts

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

frontend/src/pages/WrittenReviewPage/index.tsx

@@ -0,0 +1,51 @@
+import { useLocation, 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 { useDeviceBreakpoints } from './hooks';
+import * as S from './styles';
+
+const WrittenReviewPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { deviceType } = useDeviceBreakpoints();
+
+  const { queryString: reviewIdString } = useSearchParamAndQuery({
+    queryStringKey: 'reviewId',
+  });
+
+  const selectedReviewId = reviewIdString ? Number(reviewIdString) : null;
+
+  const handleReviewItemClick = (reviewId: number) => {
+    const params = new URLSearchParams();
+    params.set('reviewId', reviewId.toString());
+
+    navigate(`${location.pathname}?${params.toString()}`);
+  };
+
+  const renderContent = () => {
+    if (deviceType.isMobile) {
+      // 모바일: queryString 없으면 목록, 있으면 상세보기
+      return selectedReviewId ? (
+        <DetailedWrittenReview $isMobile={true} selectedReviewId={selectedReviewId} />
+      ) : (
+        <WrittenReviewList handleClick={handleReviewItemClick} />
+      );
+    }
+
+    // 태블릿 ~ : 목록 + 상세보기
+    return (
+      <S.PageContainer>
+        <WrittenReviewList handleClick={handleReviewItemClick} />
+        <DetailedWrittenReview $isMobile={false} selectedReviewId={selectedReviewId} />
+      </S.PageContainer>
+    );
+  };
+
+  return <ErrorSuspenseContainer fallback={AuthAndServerErrorFallback}>{renderContent()}</ErrorSuspenseContainer>;
+};
+
+export default WrittenReviewPage;