Merge pull request #918 from woowacourse-teams/FE/dev

[FE] 🚀 테스트 서버 배포
woowacourse-teams · Oct 24, 2024 · ed4f325 · ed4f325
2 parents 17822c3 + c2378ad
commit ed4f325
Show file tree

Hide file tree

Showing 41 changed files with 404 additions and 358 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -17,7 +17,8 @@ import Main from '@/pages/Main/Main';
 import MyPage from '@/pages/MyPage/MyPage';
 import PairRoomOnboarding from '@/pages/PairRoomOnboarding/PairRoomOnboarding';
 import PrivateRoutes from '@/pages/PrivateRoutes';
-import Retrospect from '@/pages/Retrospect/Retrospect';
+import RetrospectForm from '@/pages/RetrospectForm/RetrospectForm';
+import RetrospectView from '@/pages/RetrospectView/RetrospectView';
 import SignUp from '@/pages/SignUp/SignUp';
 
 import HowToPair from '@/components/Landing/HowToPair/HowToPair';
@@ -100,11 +101,11 @@ const App = () => {
             },
             {
               path: ':accessCode/retrospect',
-              element: <Retrospect />,
+              element: <RetrospectView />,
             },
             {
               path: ':accessCode/retrospectForm',
-              element: <Retrospect readOnly={false} />,
+              element: <RetrospectForm />,
             },
           ],
         },

diff --git a/...nts/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.tsx b/...nts/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.tsx
@@ -1,5 +1,7 @@
 import { CheckBoxChecked, CheckBoxUnchecked } from '@/assets';
 
+import useToastStore from '@/stores/toastStore';
+
 import * as S from './CategoryItem.styles';
 
 interface CategoryItemProps {
@@ -11,6 +13,8 @@ interface CategoryItemProps {
 }
 
 const CategoryItem = ({ closeModal, categoryName, categoryId, isChecked, handleSelectCategory }: CategoryItemProps) => {
+  const { addToast } = useToastStore();
+
   return (
     <S.Layout>
       <S.Container>
@@ -20,6 +24,8 @@ const CategoryItem = ({ closeModal, categoryName, categoryId, isChecked, handleS
             if (event.currentTarget.id === '카테고리') return;
             if (isChecked) return;
             handleSelectCategory(event.currentTarget.id);
+            addToast({ status: 'SUCCESS', message: `${categoryName}가 선택되었어요.` });
+
             closeModal();
           }}
         >

diff --git a/...CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts b/...CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts
@@ -18,7 +18,7 @@ export const Header = styled.div`
 export const CategoryList = styled.ul`
   display: flex;
   flex-direction: column-reverse;
-  gap: 1rem;
+  gap: 2rem;
 
   width: 100%;
 `;
diff --git a/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx b/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import Button from '@/components/common/Button/Button';
+import Spinner from '@/components/common/Spinner/Spinner';
 
 import useUserStore from '@/stores/userStore';
 
@@ -18,9 +19,13 @@ const RetrospectButton = ({ accessCode }: RetrospectButtonProps) => {
 
   const { userStatus } = useUserStore();
 
-  const { isUserInPairRoom } = useGetUserIsInPairRoom(accessCode);
-  const { isUserRetrospectExist } = useGetUserRetrospectExists(accessCode);
+  const { isUserInPairRoom, isUserInPairRoomFetching } = useGetUserIsInPairRoom(accessCode);
+  const { isUserRetrospectExist, isUserRetrospectExistsFetching } = useGetUserRetrospectExists(accessCode);
 
+  const isLoading = isUserInPairRoomFetching || isUserRetrospectExistsFetching;
+  if (isLoading) {
+    return <Spinner size="sm" />;
+  }
   if (userStatus !== 'SIGNED_IN' || !isUserInPairRoom)
     return (
       <S.Layout>

diff --git a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts
@@ -102,7 +102,7 @@ export const ConnectText = styled.div`
   transition: color 0.7s ease;
 `;
 
-export const PairRoomButton = styled.button<{ $status: PairRoomStatus }>`
+export const PairRoomButton = styled.button<{ $status: PairRoomStatus; $color: 'secondary' | 'primary' }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -130,14 +130,14 @@ export const PairRoomButton = styled.button<{ $status: PairRoomStatus }>`
     height: 100%;
     border-radius: 1rem;
 
-    background-color: ${({ $status, theme }) =>
-      $status === 'IN_PROGRESS' ? theme.color.secondary[100] : theme.color.black[30]};
-    background-image: ${({ $status, theme }) =>
+    background-color: ${({ $status, $color, theme }) =>
+      $status === 'IN_PROGRESS' ? theme.color[$color][100] : theme.color.black[30]};
+    background-image: ${({ $status, theme, $color }) =>
       $status === 'IN_PROGRESS'
         ? `linear-gradient(
       90deg,
-      ${theme.color.secondary[100]} 0 75%,
-      ${theme.color.secondary[600]} 75% 100%
+      ${theme.color[$color][100]} 0 75%,
+      ${theme.color[$color][600]} 75% 100%
     )`
         : `linear-gradient(
       90deg,

diff --git a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.tsx b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.tsx
@@ -45,7 +45,7 @@ const PairRoomButton = ({ driver, navigator, status, accessCode }: PairRoomButto
   return (
     <S.Layout>
       <S.LinkWrapper to={`/room/${accessCode}`} state={{ valid: true }} replace={true}>
-        <S.PairRoomButton $status={status}>
+        <S.PairRoomButton $status={status} $color="secondary">
           <S.RoleTextContainer>
             <S.RoleText $status={status}>
               <span>드라이버</span>

diff --git a/frontend/src/components/MyPage/PairRoomButton/RetrospectButton.tsx b/frontend/src/components/MyPage/PairRoomButton/RetrospectButton.tsx
@@ -44,15 +44,15 @@ const RetrospectButton = ({ accessCode, answer }: RetrospectButtonProps) => {
   return (
     <S.Layout>
       <S.LinkWrapper to={`/room/${accessCode}/retrospect`} state={{ valid: true }}>
-        <S.PairRoomButton $status="IN_PROGRESS">
+        <S.PairRoomButton $status="IN_PROGRESS" $color="primary">
           <S.RoleTextContainer>
             <S.RoleText $status="IN_PROGRESS">
               <span>{accessCode}</span>
               {splitAnswer(answer)}
             </S.RoleText>
           </S.RoleTextContainer>
           <S.ConnectText>
-            더보기
+            보기
             <IoIosArrowForward size="1.8rem" />
           </S.ConnectText>
         </S.PairRoomButton>

diff --git a/...onents/PairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts b/...onents/PairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Layout = styled.div`
   display: flex;
@@ -48,3 +48,8 @@ export const Item = styled.li<{ $isChecked: boolean }>`
     color: ${({ theme }) => theme.color.black[10]};
   }
 `;
+export const CustomInputMessage = css`
+  top: 4rem;
+
+  font-size: 1rem;
+`;
diff --git a/...c/components/PairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.tsx b/...c/components/PairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.tsx
@@ -3,6 +3,8 @@ import { CheckBoxChecked, CheckBoxUnchecked } from '@/assets';
 import Input from '@/components/common/Input/Input';
 import IconButton from '@/components/PairRoom/ReferenceCard/CategoryManagementModal/IconButton/IconButton';
 
+import useToastStore from '@/stores/toastStore';
+
 import { DEFAULT_CATEGORY_ID } from '@/hooks/PairRoom/useCategories';
 import useEditCategory from '@/hooks/PairRoom/useEditCategory';
 
@@ -35,6 +37,8 @@ const CategoryItem = ({
     deleteCategoryName,
   } = useEditCategory(accessCode, categoryId, categoryName);
 
+  const { addToast } = useToastStore();
+
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
     await updateCategoryName();
@@ -49,6 +53,7 @@ const CategoryItem = ({
     if (isChecked) return;
 
     handleSelectCategory(event.currentTarget.id);
+    addToast({ status: 'SUCCESS', message: `${categoryName}가 선택되었어요.` });
     closeModal();
   };
 
@@ -63,6 +68,7 @@ const CategoryItem = ({
             status={newCategoryName.status}
             message={newCategoryName.message}
             onChange={(event) => handleCategoryName(event, categoryName)}
+            $messageCss={S.CustomInputMessage}
           />
           <S.IconContainer>
             <IconButton icon="CHECK" type="submit" />

diff --git a/...mponents/PairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts b/...mponents/PairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts
@@ -19,7 +19,7 @@ export const Header = styled.div`
 export const CategoryList = styled.ul`
   display: flex;
   flex-direction: column-reverse;
-  gap: 1rem;
+  gap: 2rem;
 
   width: 100%;
 `;

diff --git a/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx b/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx
@@ -35,7 +35,7 @@ const AddPairModal = ({ isOpen, closeModal, onPairData }: AddPairModalProps) =>
       addToast({ status: 'SUCCESS', message: '페어 정보 연동에 성공했습니다.' });
     } catch (error) {
       if (error instanceof Error) {
-        addToast({ status: 'ERROR', message: '회원 정보가 없습니다. 아이디를 다시 확인해 주세요.' });
+        addToast({ status: 'ERROR', message: error.message });
       }
     }
   };

diff --git a/frontend/src/components/PairRoomOnboarding/InformationBox/InformationBox.tsx b/frontend/src/components/PairRoomOnboarding/InformationBox/InformationBox.tsx
@@ -3,17 +3,19 @@ import { RiInformation2Line } from 'react-icons/ri';
 import * as S from './InformationBox.styles';
 
 interface InformationBoxProps {
-  title: string;
+  title?: string;
   description: string;
 }
 
 const InformationBox = ({ title, description }: InformationBoxProps) => {
   return (
     <S.Layout role="presentation">
-      <S.Title>
-        <RiInformation2Line size="2rem" aria-hidden="true" />
-        {title}
-      </S.Title>
+      {title && (
+        <S.Title>
+          <RiInformation2Line size="2rem" aria-hidden="true" />
+          {title}
+        </S.Title>
+      )}
       <S.Description>{description}</S.Description>
     </S.Layout>
   );

diff --git a/frontend/src/components/Retrospect/Header/Header.styles.ts b/frontend/src/components/Retrospect/Header/Header.styles.ts
@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+export const buttonStyles = css`
+  width: 11rem;
+  border-color: ${({ theme }) => theme.color.secondary[600]};
+
+  color: ${({ theme }) => theme.color.secondary[600]};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.color.secondary[700]};
+
+    color: ${({ theme }) => theme.color.secondary[700]};
+  }
+`;
+
+export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const Title = styled.h1`
+  color: ${({ theme }) => theme.color.primary[800]};
+  font-size: ${({ theme }) => theme.fontSize.h3};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+`;
+
+export const SubTitle = styled.h2`
+  color: ${({ theme }) => theme.color.primary[700]};
+  font-size: ${({ theme }) => theme.fontSize.lg};
+`;
diff --git a/frontend/src/components/Retrospect/Header/Header.tsx b/frontend/src/components/Retrospect/Header/Header.tsx
@@ -0,0 +1,26 @@
+import Button from '@/components/common/Button/Button';
+
+import * as S from './Header.styles';
+
+interface HeaderProps {
+  title: string;
+  subTitle: string;
+  buttonText: string;
+  onButtonClick: () => void;
+}
+
+const Header = ({ title, subTitle, buttonText, onButtonClick }: HeaderProps) => {
+  return (
+    <S.Layout>
+      <S.TitleContainer>
+        <S.Title>{title}</S.Title>
+        <S.SubTitle>{subTitle}</S.SubTitle>
+      </S.TitleContainer>
+      <Button $css={S.buttonStyles} filled={false} rounded={true} size="sm" color="primary" onClick={onButtonClick}>
+        {buttonText}
+      </Button>
+    </S.Layout>
+  );
+};
+
+export default Header;
diff --git a/frontend/src/components/Retrospect/Question/Question.styles.ts b/frontend/src/components/Retrospect/Question/Question.styles.ts
@@ -3,15 +3,17 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 2rem;
+`;
+
+export const LabelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
 `;
 
 export const Label = styled.label`
   color: ${({ theme }) => theme.color.primary[700]};
   font-size: ${({ theme }) => theme.fontSize.lg};
-`;
-
-export const Subtitle = styled.p`
-  color: ${({ theme }) => theme.color.black[70]};
-  font-size: ${({ theme }) => theme.fontSize.md};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
 `;
diff --git a/frontend/src/components/Retrospect/Question/Question.tsx b/frontend/src/components/Retrospect/Question/Question.tsx
@@ -1,15 +1,20 @@
+import InformationBox from '@/components/PairRoomOnboarding/InformationBox/InformationBox';
+
 import * as S from './Question.styles';
 
 interface QuestionProps extends React.PropsWithChildren {
+  readonly?: boolean;
   id: string;
   title: string;
   subtitle: string;
 }
 
-const Question = ({ id, title, subtitle, children }: QuestionProps) => (
+const Question = ({ readonly = false, id, title, subtitle, children }: QuestionProps) => (
   <S.Container>
-    <S.Label htmlFor={id}>{title}</S.Label>
-    <S.Subtitle>💡 {subtitle}</S.Subtitle>
+    <S.LabelContainer>
+      <S.Label htmlFor={id}>{title}</S.Label>
+      {!readonly && <InformationBox description={`💡 ${subtitle}`} />}
+    </S.LabelContainer>
     {children}
   </S.Container>
 );

diff --git a/frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.styles.ts b/frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.styles.ts