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

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

Hide file tree

Showing 9 changed files with 38 additions and 56 deletions.
diff --git a/...mpletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts b/...mpletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts
@@ -3,42 +3,32 @@ import styled from 'styled-components';
 export const Layout = styled.div`
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
+  align-items: center;
+  gap: 2rem;
 
   width: 100%;
 `;
 
 export const Container = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
+  align-items: center;
+  gap: 1rem;
 
   width: 100%;
-  height: 6rem;
-
-  cursor: pointer;
 
   img {
     width: 2rem;
+    height: 2rem;
   }
 `;
 
-export const ItemLayout = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-
-  width: 100%;
-`;
-
 export const Item = styled.li<{ $isChecked: boolean }>`
   display: flex;
-  justify-content: space-between;
   align-items: center;
 
   width: 100%;
   height: 4.4rem;
-  padding: 0 1rem;
+  padding: 0 1.2rem;
   border: 1px solid ${({ theme }) => theme.color.black[50]};
   border-radius: 0.5rem;
 
@@ -52,9 +42,4 @@ export const Item = styled.li<{ $isChecked: boolean }>`
     background-color: ${({ theme }) => theme.color.primary[700]};
     color: ${({ theme }) => theme.color.black[10]};
   }
-
-  &:active {
-    background-color: ${({ theme }) => theme.color.primary[800]};
-    color: ${({ theme }) => theme.color.black[10]};
-  }
 `;
diff --git a/...nts/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.tsx b/...nts/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.tsx
@@ -15,29 +15,21 @@ interface CategoryItemProps {
 const CategoryItem = ({ closeModal, categoryName, categoryId, isChecked, handleSelectCategory }: CategoryItemProps) => {
   const { addToast } = useToastStore();
 
+  const handleCategoryClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (isChecked) return;
+
+    handleSelectCategory(event.currentTarget.id);
+    addToast({ status: 'SUCCESS', message: `${categoryName}가 선택되었어요.` });
+    closeModal();
+  };
+
   return (
     <S.Layout>
-      <S.Container>
-        <S.ItemLayout
-          id={categoryId}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            if (event.currentTarget.id === '카테고리') return;
-            if (isChecked) return;
-            handleSelectCategory(event.currentTarget.id);
-            addToast({ status: 'SUCCESS', message: `${categoryName}가 선택되었어요.` });
-
-            closeModal();
-          }}
-        >
-          <img
-            src={isChecked ? CheckBoxChecked : CheckBoxUnchecked}
-            alt={isChecked ? '체크된 체크박스' : '체크되지 않은 체크박스'}
-          />
-
-          <S.Item $isChecked={isChecked}>
-            <p>{categoryName}</p>
-          </S.Item>
-        </S.ItemLayout>
+      <S.Container id={categoryId} onClick={handleCategoryClick}>
+        <img src={isChecked ? CheckBoxChecked : CheckBoxUnchecked} alt={isChecked ? '체크됨' : '체크되지 않음'} />
+        <S.Item $isChecked={isChecked}>
+          <p>{categoryName}</p>
+        </S.Item>
       </S.Container>
     </S.Layout>
   );

diff --git a/...nents/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx b/...nents/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx
@@ -1,5 +1,3 @@
-import { FaFilter } from 'react-icons/fa';
-
 import { Modal } from '@/components/common/Modal';
 import CategoryItem from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem';
 import { Category } from '@/components/PairRoom/ReferenceCard/ReferenceCard.type';
@@ -26,7 +24,6 @@ const CategoryManagementModal = ({
     <Modal isOpen={isOpen} close={closeModal} size="45rem">
       <Modal.Header>
         <S.Header>
-          <FaFilter />
           <p>카테고리 선택</p>
         </S.Header>
       </Modal.Header>

diff --git a/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx b/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx
@@ -1,7 +1,6 @@
 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';
 
@@ -22,10 +21,17 @@ const RetrospectButton = ({ accessCode }: RetrospectButtonProps) => {
   const { isUserInPairRoom, isUserInPairRoomFetching } = useGetUserIsInPairRoom(accessCode);
   const { isUserRetrospectExist, isUserRetrospectExistsFetching } = useGetUserRetrospectExists(accessCode);
 
-  const isLoading = isUserInPairRoomFetching || isUserRetrospectExistsFetching;
-  if (isLoading) {
-    return <Spinner size="sm" />;
+  if (isUserInPairRoomFetching || isUserRetrospectExistsFetching) {
+    return (
+      <S.Layout>
+        <Button size="lg" disabled={true}>
+          회고 작성
+        </Button>
+        <S.ButtonPrompt>잠시만 기다려주세요...</S.ButtonPrompt>
+      </S.Layout>
+    );
   }
+
   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
@@ -71,7 +71,7 @@ export const RoleTextContainer = styled.div`
   width: 50%;
 `;
 
-export const RoleText = styled.p<{ $status: PairRoomStatus }>`
+export const RoleText = styled.p<{ $status: PairRoomStatus; $color: 'secondary' | 'primary' }>`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -81,7 +81,8 @@ export const RoleText = styled.p<{ $status: PairRoomStatus }>`
   transition: color 0.7s ease;
 
   span {
-    color: ${({ $status, theme }) => ($status === 'IN_PROGRESS' ? theme.color.secondary[600] : theme.color.black[70])};
+    color: ${({ $status, theme, $color }) =>
+      $status === 'IN_PROGRESS' ? theme.color[$color][600] : theme.color.black[70]};
     font-size: ${({ theme }) => theme.fontSize.lg};
     font-weight: ${({ theme }) => theme.fontWeight.medium};
 

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

diff --git a/frontend/src/components/MyPage/PairRoomButton/RetrospectButton.tsx b/frontend/src/components/MyPage/PairRoomButton/RetrospectButton.tsx
@@ -46,7 +46,7 @@ const RetrospectButton = ({ accessCode, answer }: RetrospectButtonProps) => {
       <S.LinkWrapper to={`/room/${accessCode}/retrospect`} state={{ valid: true }}>
         <S.PairRoomButton $status="IN_PROGRESS" $color="primary">
           <S.RoleTextContainer>
-            <S.RoleText $status="IN_PROGRESS">
+            <S.RoleText $status="IN_PROGRESS" $color="primary">
               <span>{accessCode}</span>
               {splitAnswer(answer)}
             </S.RoleText>

diff --git a/...onents/PairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts b/...onents/PairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts
@@ -48,6 +48,7 @@ export const Item = styled.li<{ $isChecked: boolean }>`
     color: ${({ theme }) => theme.color.black[10]};
   }
 `;
+
 export const CustomInputMessage = css`
   top: 4rem;
 

diff --git a/frontend/src/components/common/Spinner/Spinner.styles.ts b/frontend/src/components/common/Spinner/Spinner.styles.ts
@@ -24,8 +24,8 @@ export const Layout = styled.div`
   justify-content: center;
   align-items: center;
 
-  width: 100%;
-  height: 100%;
+  width: fit-content;
+  height: fit-content;
 `;
 
 export const Spinner = styled.div<{ $size: SpinnerSize }>`