Merge pull request #916 from woowacourse-teams/FE/feature/#915

[FE] 카테고리 UI 수정
woowacourse-teams · Oct 24, 2024 · d355bb4 · d355bb4
2 parents 1d6aefd + e1ebe99
commit d355bb4
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 15 deletions.
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/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/common/Input/Input.styles.ts b/frontend/src/components/common/Input/Input.styles.ts
@@ -54,7 +54,7 @@ export const Label = styled.label`
   font-weight: ${({ theme }) => theme.fontWeight.medium};
 `;
 
-export const Message = styled.p<{ $height: string; $status: InputStatus }>`
+export const Message = styled.p<{ $css?: ReturnType<typeof css>; $height: string; $status: InputStatus }>`
   ${({ $status }) => messageStatusStyles[$status]};
   position: absolute;
   top: ${({ $height }) => $height};
@@ -63,6 +63,8 @@ export const Message = styled.p<{ $height: string; $status: InputStatus }>`
   margin-left: 0.2rem;
 
   font-size: ${({ theme }) => theme.fontSize.sm};
+
+  ${({ $css }) => $css}
 `;
 
 export const Input = styled.input<{

diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx
@@ -13,17 +13,29 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   $css?: ReturnType<typeof css>;
   width?: string;
   height?: string;
+
+  $messageCss?: ReturnType<typeof css>;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ width = '100%', status = 'DEFAULT', message, label, height = '4.8rem', ...props }: InputProps, ref) => {
+  (
+    { width = '100%', status = 'DEFAULT', message, label, height = '4.8rem', $messageCss, ...props }: InputProps,
+    ref,
+  ) => {
     return (
       <S.Layout $width={width}>
         {label && <S.Label htmlFor={props.id}>{label}</S.Label>}
         <S.Container>
           <S.Input ref={ref} $status={status} $width={width} $height={height} {...props} />
           {message && (
-            <S.Message role="alert" aria-live="assertive" aria-atomic="true" $height={height} $status={status}>
+            <S.Message
+              role="alert"
+              aria-live="assertive"
+              aria-atomic="true"
+              $height={height}
+              $status={status}
+              $css={$messageCss}
+            >
               {message}
             </S.Message>
           )}