woowacourse-teams · soosoo22 · Jan 22, 2025 · Jan 22, 2025 · Jan 22, 2025 · Jan 22, 2025
@@ -75,11 +75,12 @@ const endPoint = {
   postingDataForReviewRequestCode: `${serverUrl}/${VERSION2}/groups`,
   checkingPassword: `${serverUrl}/${VERSION2}/${REVIEW_PASSWORD_API_PARAMS.resource}/${REVIEW_PASSWORD_API_PARAMS.queryString.check}`,
   gettingReviewGroupData: (reviewRequestCode: string) =>
-    `${REVIEW_GROUP_DATA_API_URL}?${REVIEW_GROUP_DATA_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`,
+    `${REVIEW_GROUP_DATA_API_URL}/summary?${REVIEW_GROUP_DATA_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`,
   gettingSectionList: `${serverUrl}/${VERSION2}/sections`,
   gettingGroupedReviews: (sectionId: number) =>
     `${REVIEW_GROUP_API_URL}?${REVIEW_GROUP_API_PARAMS.queryString.sectionId}=${sectionId}`,
   postingHighlight: `${serverUrl}/${VERSION2}/highlight`,
+  gettingReviewLinks: REVIEW_GROUP_DATA_API_URL,
 };
 
 export default endPoint;
@@ -6,6 +6,7 @@ import {
   GroupedSection,
   GroupedReviews,
   ReviewInfoData,
+  ReviewLinks,
 } from '@/types';
 
 import createApiErrorMessage from './apiErrorMessageCreator';
@@ -138,3 +139,19 @@ export const getGroupedReviews = async ({ sectionId }: GetGroupedReviewsProps) =
   const data = await response.json();
   return data as GroupedReviews;
 };
+
+export const getReviewLinksApi = async () => {
+  const response = await fetch(endPoint.gettingReviewLinks, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+  });
+
+  if (!response.ok) throw new Error(createApiErrorMessage(response.status));
+
+  const data = await response.json();
+
+  return data as ReviewLinks;
+};
@@ -8,17 +8,19 @@ interface EmptyContentProps {
   iconWidth?: string;
   iconMessageGap?: string;
   messageFontSize?: string;
+  isBorder?: boolean;
 }
 
 const EmptyContent = ({
   iconHeight,
   iconWidth,
   iconMessageGap,
   messageFontSize,
+  isBorder,
   children,
 }: EssentialPropsWithChildren<EmptyContentProps>) => {
   return (
-    <S.EmptyContent $iconMessageGap={iconMessageGap}>
+    <S.EmptyContent $iconMessageGap={iconMessageGap} $isBorder={isBorder}>
       <S.Img $height={iconHeight} $width={iconWidth} alt="" src={Icon} />
       <S.MessageContainer $messageFontSize={messageFontSize}>{children}</S.MessageContainer>
     </S.EmptyContent>

@@ -1,11 +1,20 @@
 import styled from '@emotion/styled';
 
-export const EmptyContent = styled.div<{ $iconMessageGap?: string }>`
+export const EmptyContent = styled.div<{ $iconMessageGap?: string; $isBorder?: boolean }>`
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.$iconMessageGap ?? '3.2rem'};
   align-items: center;
+
+  ${({ theme, $isBorder }) =>
+    $isBorder &&
+    `
+    border: 0.2rem solid ${theme.colors.lightGray};
+    border-radius: 1rem;
+    padding: 4rem 0;
+  `}
 `;
+
 interface ImgProps {
   $height?: string;
   $width?: string;

@@ -2,13 +2,13 @@ import * as S from './styles';
 
 interface NavItemProps {
   label: string;
-  $isSelected: boolean;
+  $isActiveTab: boolean;
   onClick: () => void;
 }
 
-const NavItem = ({ label, $isSelected, onClick }: NavItemProps) => {
+const NavItem = ({ label, $isActiveTab, onClick }: NavItemProps) => {
   return (
-    <S.NavItem $isSelected={$isSelected}>
+    <S.NavItem $isActiveTab={$isActiveTab}>
       <button onClick={onClick}>{label}</button>
     </S.NavItem>
   );

@@ -3,16 +3,16 @@ import styled from '@emotion/styled';
 import media from '@/utils/media';
 
 interface NavItemProps {
-  $isSelected: boolean;
+  $isActiveTab: boolean;
 }
 
 export const NavItem = styled.li<NavItemProps>`
-  border-bottom: 0.3rem solid ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary : 'none')};
+  border-bottom: 0.3rem solid ${({ theme, $isActiveTab }) => ($isActiveTab ? theme.colors.primary : 'none')};
   padding: 0 1rem 1.3rem 1rem;
 
   button {
     font-weight: ${({ theme }) => theme.fontWeight.semibold};
-    color: ${({ theme, $isSelected }) => ($isSelected ? theme.colors.black : theme.colors.disabled)};
+    color: ${({ theme, $isActiveTab }) => ($isActiveTab ? theme.colors.black : theme.colors.disabled)};
 
     &:hover {
       color: ${({ theme }) => theme.colors.black};

@@ -1,24 +1,33 @@
-import useNavigationTabs from '@/hooks/useNavigationTabs';
+import { useLocation } from 'react-router';
 
 import NavItem from './NavItem';
 import * as S from './styles';
+export interface Tab {
+  label: '리뷰 링크 관리' | '작성한 리뷰 확인';
+  activePathList: string[];
+  handleTabClick: () => void;
+}
 
-const NavigationTab = () => {
-  const { currentTabIndex, tabList } = useNavigationTabs();
+interface NavigationTabProps {
+  tabList: Tab[];
+}
+
+const NavigationTab = ({ tabList }: NavigationTabProps) => {
+  const { pathname } = useLocation();
+
+  const isActiveTab = (activePaths: string[]) => activePaths.some((activePath) => pathname.includes(activePath));
 
   return (
     <S.NavContainer>
       <S.NavList>
-        {tabList.map((tab, index) => {
-          return (
-            <NavItem
-              key={tab.label}
-              label={tab.label}
-              $isSelected={currentTabIndex === index}
-              onClick={tab.handleTabClick}
-            />
-          );
-        })}
+        {tabList.map((tab) => (
+          <NavItem
+            key={tab.label}
+            label={tab.label}
+            $isActiveTab={isActiveTab(tab.activePathList)}
+            onClick={tab.handleTabClick}
+          />
+        ))}
       </S.NavList>
     </S.NavContainer>
   );

@@ -6,9 +6,9 @@ export const NavContainer = styled.nav`
   position: relative;
   display: flex;
   width: calc(100vw - ${({ theme }) => theme.scrollbarWidth.basic});
-  height: 4rem;
+  height: ${({ theme }) => theme.componentHeight.navigationTab};
 
-  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
+  border-bottom: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
 
   ${media.small} {
     width: calc(100vw - ${({ theme }) => theme.scrollbarWidth.small});

@@ -21,7 +21,7 @@ export const Footer = styled.footer`
 
   background-color: ${({ theme }) => theme.colors.white};
 
-  border-top: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
+  border-top: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
 
   ${media.xSmall} {
     flex-direction: column;

@@ -4,11 +4,12 @@ import * as S from './styles';
 
 interface MainProps {
   isShowBreadCrumb?: boolean;
+  isShowNavigationTab?: boolean;
 }
 
-const Main = ({ children, isShowBreadCrumb }: EssentialPropsWithChildren<MainProps>) => {
+const Main = ({ children, isShowBreadCrumb, isShowNavigationTab }: EssentialPropsWithChildren<MainProps>) => {
   return (
-    <S.MainContainer $isShowBreadCrumb={isShowBreadCrumb}>
+    <S.MainContainer $isShowBreadCrumb={isShowBreadCrumb} $isShowNavigationTab={isShowNavigationTab}>
       <S.Contents>{children}</S.Contents>
     </S.MainContainer>
   );

@@ -3,13 +3,15 @@ import styled from '@emotion/styled';
 
 interface MainContainerProps {
   $isShowBreadCrumb?: boolean;
+  $isShowNavigationTab?: boolean;
 }
-const calculateMinHeight = ({ $isShowBreadCrumb, ...theme }: MainContainerProps & Theme) => {
+const calculateMinHeight = ({ $isShowBreadCrumb, $isShowNavigationTab, ...theme }: MainContainerProps & Theme) => {
   const topbarHeight = theme.componentHeight.topbar;
   const footerHeight = theme.componentHeight.footer;
   const breadCrumbHeight = $isShowBreadCrumb ? theme.componentHeight.breadCrumb : '0rem';
+  const navigationTabHeight = $isShowNavigationTab ? theme.componentHeight.navigationTab : '0rem';
 
-  return `calc(100vh - ${topbarHeight} - ${footerHeight} - ${breadCrumbHeight})`;
+  return `calc(100vh - ${topbarHeight} - ${footerHeight} - ${breadCrumbHeight}) - ${navigationTabHeight}`;
 };
 
 export const MainContainer = styled.div<MainContainerProps>`

@@ -1,5 +1,10 @@
+import { useLocation } from 'react-router';
+
 import Breadcrumb from '@/components/common/Breadcrumb';
+import NavigationTab from '@/components/common/NavigationTab';
+import { ROUTE } from '@/constants';
 import useBreadcrumbPaths from '@/hooks/useBreadcrumbPaths';
+import useNavigationTabs from '@/hooks/useNavigationTabs';
 import { EssentialPropsWithChildren } from '@/types';
 
 import Footer from '../Footer';
@@ -11,16 +16,28 @@ import * as S from './styles';
 interface PageLayoutProps {
   isNeedBreadCrumb?: boolean;
 }
+
 const PageLayout = ({ children, isNeedBreadCrumb = true }: EssentialPropsWithChildren<PageLayoutProps>) => {
+  // TODO: NavigationTab은 사용자가 홈 페이지와 연결 페이지가 아닌 다른 페이지에서 로그인 상태일 때만 보여준다.
+  // 임시로 true 설정 (로그인 기능 추가하면서 여기도 수정해야 한다.)
+  const isUserLoggedIn = true;
+
+  const { pathname } = useLocation();
+
   const breadcrumbPathList = useBreadcrumbPaths();
-  const isShowBreadCrumb = isNeedBreadCrumb && breadcrumbPathList.length > 1;
+  const navigationTabList = useNavigationTabs();
+  const isShowBreadCrumb = !isUserLoggedIn && isNeedBreadCrumb && breadcrumbPathList.length > 1;
+  const isShowNavigationTab = isUserLoggedIn && pathname !== '/' && !pathname.includes(ROUTE.reviewZone);
 
   return (
     <S.Layout>
       <S.Wrapper>
         <Topbar />
+        {isShowNavigationTab && <NavigationTab tabList={navigationTabList} />}
         {isShowBreadCrumb && <Breadcrumb pathList={breadcrumbPathList} />}
-        <Main isShowBreadCrumb={isShowBreadCrumb}>{children}</Main>
+        <Main isShowBreadCrumb={isShowBreadCrumb} isShowNavigationTab={isShowNavigationTab}>
+          {children}
+        </Main>
         <Footer />
       </S.Wrapper>
     </S.Layout>

@@ -6,7 +6,6 @@ export const ReviewInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  margin: 2rem 0 3rem 0;
 
   ${media.small} {
     margin-bottom: 1rem;

@@ -1,4 +1,6 @@
 import { TopButton, OptionSwitch } from '@/components/common';
+import BackButton from '@/components/common/BackButton';
+import { ROUTE } from '@/constants';
 import { EssentialPropsWithChildren } from '@/types';
 
 import ReviewInfoSection from './components/ReviewInfoSection';
@@ -13,9 +15,13 @@ interface ReviewDisplayLayoutProps extends EssentialPropsWithChildren {
 const ReviewDisplayLayout = ({ isReviewList, children }: ReviewDisplayLayoutProps) => {
   const reviewDisplayLayoutOptions = useReviewDisplayLayoutOptions();
 
+  // TODO: 임시로 true 설정 (로그인 기능 추가하면서 여기도 수정해야 한다.)
+  const isUserLoggedIn = true;
+
   return (
     <ReviewInfoDataProvider>
       <S.ReviewDisplayLayoutContainer>
+        {isUserLoggedIn && <BackButton prevPath={`/${ROUTE.reviewLinks}`} />}
         <S.Container>
           <ReviewInfoSection isReviewList={isReviewList} />
           <OptionSwitch options={reviewDisplayLayoutOptions} />

@@ -5,6 +5,10 @@ export const ReviewDisplayLayoutContainer = styled.div`
   flex-direction: column;
   width: 90%;
   min-height: inherit;
+
+  gap: 2rem;
+
+  margin: 2rem;
 `;
 
 export const Container = styled.div`
@@ -15,6 +19,7 @@ export const Container = styled.div`
   @media screen and (max-width: 530px) {
     flex-direction: column;
     align-items: flex-start;
-    margin-bottom: 2.5rem;
+
+    margin-bottom: 2rem;
   }
 `;
@@ -7,11 +7,14 @@ import Logo from './components/Logo';
 import * as S from './styles';
 
 const Topbar = () => {
+  // TODO: 임시로 true 설정 (로그인 기능 추가하면서 여기도 수정해야 한다.)
+  const isUserLoggedIn = true;
   const { pathname } = useLocation();
-  const $hasNavigationTab = [ROUTE.reviewLinks, ROUTE.writtenReview].includes(pathname);
+
+  const isShowNavigationTab = isUserLoggedIn && !['/', ROUTE.reviewZone].includes(pathname);
 
   return (
-    <S.Layout $hasNavigationTab={$hasNavigationTab}>
+    <S.Layout $hideBorder={isShowNavigationTab}>
       <S.Container>
         <UndraggableWrapper>
           <Logo />

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const Layout = styled.section<{ $hasNavigationTab: boolean }>`
+export const Layout = styled.section<{ $hideBorder: boolean }>`
   z-index: ${({ theme }) => theme.zIndex.topbar};
 
   display: flex;
@@ -11,8 +11,7 @@ export const Layout = styled.section<{ $hasNavigationTab: boolean }>`
   height: ${({ theme }) => theme.componentHeight.topbar};
   padding: 2rem 2.5rem;
 
-  border-bottom: ${({ theme, $hasNavigationTab }) =>
-    $hasNavigationTab ? `0.1rem solid ${theme.colors.lightGray}` : 'none'};
+  border-bottom: ${({ theme, $hideBorder }) => ($hideBorder ? 'none' : `0.1rem solid ${theme.colors.lightGray}`)};
 `;
 
 export const Container = styled.div`

@@ -20,8 +20,9 @@ const TOAST_INFORM = {
 };
 interface URLGeneratorFormProps {
   isMember?: boolean;
+  handleNewReviewLink?: () => void;
 }
-const URLGeneratorForm = ({ isMember = false }: URLGeneratorFormProps) => {
+const URLGeneratorForm = ({ isMember = false, handleNewReviewLink }: URLGeneratorFormProps) => {
   const { revieweeName, projectName, password, isFormValid, resetForm, urlGeneratorStateUpdater } =
     useURLGeneratorState({ isMember });
 
@@ -48,6 +49,8 @@ const URLGeneratorForm = ({ isMember = false }: URLGeneratorFormProps) => {
     const completeReviewZoneURL = getCompleteReviewZoneURL(data.reviewRequestCode);
     setReviewZoneURL(completeReviewZoneURL);
 
+    handleNewReviewLink?.();
+
     resetForm();
 
     handleOpenToast(false);

@@ -75,7 +75,6 @@ export const FormContainer = styled.section`
   justify-content: center;
 
   width: 40%;
-  padding: 0px 9rem;
 
   ${media.medium} {
     width: 45%;

@@ -7,6 +7,7 @@ export const REVIEW_QUERY_KEY = {
   groupedReviews: 'groupedReviews',
   reviewInfoData: 'reviewInfoData',
   highlight: 'highlight',
+  reviewLinks: 'reviewLinks',
 };
 
 export const GROUP_QUERY_KEY = {

@@ -10,8 +10,9 @@ export const REVIEW_MESSAGE = {
 };
 
 export const REVIEW_EMPTY = {
-  noReviewInTotal: '아직 받은 리뷰가 없어요!',
-  noReviewInQuestion: '이 질문은 아직 받은 답변이 없어요!',
+  noReviewInTotal: '아직 받은 리뷰가 없어요...',
+  noReviewLink: '생성한 리뷰 링크가 없어요...',
+  noReviewInQuestion: '이 질문은 아직 받은 답변이 없어요...',
 };
 
 export const REVIEW_URL_GENERATOR_FORM_VALIDATION = {