Merge pull request #984 from woowacourse-teams/FE/feature/#982

[FE] 색상 및 버튼 디자인 오류 해결
woowacourse-teams · Dec 17, 2024 · 8885d31 · 8885d31
2 parents 3c5f105 + 9d1e19d
commit 8885d31
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 30 deletions.
diff --git a/frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.tsx b/frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.tsx
@@ -23,7 +23,7 @@ const Header = ({ selectedCategoryName, onButtonClick }: React.PropsWithChildren
         <IoIosLink size={theme.fontSize.h6} color={theme.color.primary[700]} />
         <p>링크</p>
       </S.Container>
-      <Button size="sm" width="fit-content" rounded={true} onClick={handleButtonClick}>
+      <Button size="sm" rounded={true} onClick={handleButtonClick}>
         {selectedCategoryName}
       </Button>
     </S.Layout>

diff --git a/...tend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts b/...tend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts
@@ -1,16 +1,27 @@
+import { MdClose } from 'react-icons/md';
 import styled, { css } from 'styled-components';
 
 export const Layout = styled.div<{ $columns: number }>`
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  align-items: ${({ $columns }) => ($columns > 2 ? 'center' : '')};
+  align-items: ${({ $columns }) => $columns > 2 && 'center'};
   gap: 1rem;
   overflow-y: auto;
 
   padding: 3rem;
 `;
 
+export const EmptyLayout = styled.div`
+  flex-grow: 1;
+
+  height: 0;
+  padding: 2rem;
+
+  color: ${({ theme }) => theme.color.black[400]};
+  font-size: ${({ theme }) => theme.fontSize.md};
+`;
+
 export const List = styled.ul<{ $columns: number }>`
   gap: 3rem 0;
 
@@ -35,16 +46,6 @@ export const List = styled.ul<{ $columns: number }>`
   }
 `;
 
-export const EmptyLayout = styled.div`
-  flex-grow: 1;
-
-  height: 0;
-  padding: 2rem;
-
-  color: ${({ theme }) => theme.color.black[400]};
-  font-size: ${({ theme }) => theme.fontSize.md};
-`;
-
 export const Item = styled.div`
   display: flex;
   flex-direction: column;
@@ -53,7 +54,7 @@ export const Item = styled.div`
 
   width: 17rem;
   height: 20rem;
-  border: 1px solid ${({ theme }) => theme.color.black[300]};
+  border: 1px solid ${({ theme }) => theme.color.black[100]};
   border-radius: 1.5rem;
 `;
 
@@ -74,8 +75,8 @@ export const EmptyImage = styled.div`
   width: 100%;
   height: 10rem;
 
-  background-color: ${({ theme }) => theme.color.black[400]};
-  color: ${({ theme }) => theme.color.black[700]};
+  background-color: ${({ theme }) => theme.color.black[200]};
+  color: ${({ theme }) => theme.color.black[300]};
   font-size: ${({ theme }) => theme.fontSize.sm};
   line-height: 1.3;
 
@@ -123,3 +124,24 @@ export const Content = styled.p`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 `;
+
+export const DeleteButton = styled(MdClose)`
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  width: 2rem;
+  height: 2rem;
+  padding: 0.3rem;
+  border-radius: 100%;
+
+  background-color: ${({ theme }) => theme.color.black[900]};
+  opacity: 0.6;
+  color: ${({ theme }) => theme.color.black[50]};
+
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
diff --git a/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts b/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts
@@ -10,7 +10,7 @@ export const Layout = styled.div<{ $isChecked: boolean; $isIconHovered: boolean
   padding: 1.6rem;
   border-radius: 1rem;
 
-  background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[300] : theme.color.secondary[200])};
+  background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[200] : theme.color.secondary[100])};
   font-size: ${({ theme }) => theme.fontSize.md};
 
   transition: background 0.1s ease;

diff --git a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts
@@ -157,7 +157,7 @@ export const PairRoomButton = styled.button<{ $status: PairRoomStatus; $color: '
 
   &:hover::before {
     background-position: 105.8% 0;
-    opacity: 1;
+    opacity: 0.9;
   }
 
   &:hover ${StatusText} {

diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts
@@ -14,7 +14,3 @@ export const Layout = styled.div<{ $isOpen: boolean }>`
 
   transition: min-width 0.3s;
 `;
-
-export const Sidebar = styled.div`
-  overflow: hidden;
-`;
diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx b/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx
@@ -44,12 +44,10 @@ const PairListCard = ({ driver, navigator, missionUrl, accessCode }: PairListCar
     <S.Layout $isOpen={isOpen} aria-label="페어 목록">
       <PairRoomCard>
         <Header isOpen={isOpen} toggleOpen={toggleOpen} />
-        <S.Sidebar>
-          <AccessCodeSection isOpen={isOpen} accessCode={accessCode} />
-          {missionUrl !== '' && <RepositorySection isOpen={isOpen} missionUrl={missionUrl} />}
-          <PairListSection isOpen={isOpen} driver={driver} navigator={navigator} />
-          <CompleteRoomButton isOpen={isOpen} openModal={openModal} />
-        </S.Sidebar>
+        <AccessCodeSection isOpen={isOpen} accessCode={accessCode} />
+        {missionUrl !== '' && <RepositorySection isOpen={isOpen} missionUrl={missionUrl} />}
+        <PairListSection isOpen={isOpen} driver={driver} navigator={navigator} />
+        <CompleteRoomButton isOpen={isOpen} openModal={openModal} />
       </PairRoomCard>
       <ConfirmModal
         isOpen={isModalOpen}

diff --git a/frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts b/frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts
@@ -72,11 +72,11 @@ const RoleLabel = styled.div`
 `;
 
 export const DriverLabel = styled(RoleLabel)`
-  background-color: ${({ theme }) => theme.color.secondary[600]};
+  background-color: ${({ theme }) => theme.color.secondary[500]};
 `;
 
 export const NavigatorLabel = styled(RoleLabel)`
-  background-color: ${({ theme }) => theme.color.primary[800]};
+  background-color: ${({ theme }) => theme.color.primary[600]};
 `;
 
 export const DriverText = styled.p`

diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx
@@ -62,9 +62,9 @@ const SignUp = () => {
         </InputField>
         <Button
           width="50rem"
+          height="10rem"
           fontSize={theme.fontSize.md}
           type="submit"
-          size="lg"
           disabled={validateName(username).status === 'ERROR'}
         >
           계정 만들기 🥳