feat: 메인 페이지 스타일링 고도화

woowacourse-teams · Jul 25, 2024 · e07a200 · e07a200
1 parent 09ef30d
commit e07a200
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 137 deletions.
diff --git a/frontend/src/components/Header/NotiModal/NotiList.tsx b/frontend/src/components/Header/NotiModal/NotiList.tsx
@@ -14,10 +14,10 @@ export default function NotiList() {
   return isEmpty ? (
     <div>알림이 없습니다.</div>
   ) : (
-    notifications.map(({ id, message }) => (
-      <S.NotiItem key={id}>
-        {message}
-        <S.NotiReadBtn onClick={handleRead}>✅</S.NotiReadBtn>
+    notifications.map(({ id, title, message }) => (
+      <S.NotiItem key={id} onClick={handleRead}>
+        <S.NotiTitle>{title}</S.NotiTitle>
+        <S.NotiMessage>{message}</S.NotiMessage>
       </S.NotiItem>
     ))
   );

diff --git a/frontend/src/components/Header/NotiModal/NotiModal.styled.ts b/frontend/src/components/Header/NotiModal/NotiModal.styled.ts
@@ -5,28 +5,31 @@ export const NotiModalContainer = styled.div`
   position: fixed;
   top: 5.5rem;
   right: 17rem;
-  width: 30rem;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 0.6rem 0.9rem rgba(0, 0, 0, 0.12),
+    0 1.2rem 1.8rem rgba(0, 0, 0, 0.08);
 
   border-radius: 1rem;
-  padding: 2rem;
-  background-color: var(--grey-100);
+  padding: 2.5rem 3.4rem;
+  background-color: white;
 `;
 
 export const NotiItem = styled.div`
+  width: 28rem;
   position: relative;
   font-size: 1.1rem;
   margin-bottom: 1rem;
-  padding: 1rem;
-  border-radius: 1rem;
+  padding: 2.3rem 0;
+  border-bottom: 0.1rem solid var(--grey-100);
   background-color: white;
-  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
 `;
 
-export const NotiTitle = styled.h2`
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
+export const NotiModalTitle = styled.h2`
+  color: var(--grey-600);
+  font-size: 1.4rem;
+  margin-bottom: 1.2rem;
+  font-weight: 500;
 `;
 
 export const NotiReadBtn = styled.button`
@@ -37,3 +40,21 @@ export const NotiReadBtn = styled.button`
   right: 0;
   bottom: 0;
 `;
+
+export const NotiTitle = styled.div`
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin-bottom: 0.6rem;
+`;
+
+export const NotiMessage = styled.div`
+  color: var(--grey-500);
+  font-size: 1.4rem;
+  font-weight: 500;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+`;
diff --git a/frontend/src/components/Header/NotiModal/index.tsx b/frontend/src/components/Header/NotiModal/index.tsx
@@ -13,7 +13,7 @@ export default function NotiModal({ closeModal }: NotiModalProps) {
   return (
     <S.NotiModalContainer ref={targetRef}>
       <ListenKeyDown targetKey="Escape" onKeyDown={closeModal} />
-      <S.NotiTitle>🔔 알림</S.NotiTitle>
+      <S.NotiModalTitle>알림</S.NotiModalTitle>
       <NotiList />
     </S.NotiModalContainer>
   );

diff --git a/frontend/src/components/Header/NotiModal/notiMocks.ts b/frontend/src/components/Header/NotiModal/notiMocks.ts
@@ -1,18 +1,23 @@
 export interface Notification {
   id: number;
+  title: string;
   message: string;
   isRead: boolean;
 }
 
 export const NOTI_MOCKS: Notification[] = [
   {
     id: 1,
-    message: '버건디님과 페어 매칭이 완료되었습니다.',
+    title: '리뷰가 도착했어요!',
+    message:
+      '버건디님으로부터 리뷰가 도착했어요. 지금 미션 현황 페이지에서 확인해보세요. 지금 미션 현황 페이지에서 확인해보세요. 지금 미션 현황 페이지에서 확인해보세요.',
     isRead: false,
   },
   {
     id: 2,
-    message: '리브님으로부터 리뷰가 도착했습니다. 지금 미션 현황 페이지에서 확인해보세요.',
+    title: '리뷰가 도착했어요!',
+    message:
+      '리브님으로부터 리뷰가 도착했습니다. 지금 미션 현황 페이지에서 확인해보세요. 지금 미션 현황 페이지에서 확인해보세요. 지금 미션 현황 페이지에서 확인해보세요.',
     isRead: false,
   },
 ];
diff --git a/frontend/src/components/MissionList/MissionItem.tsx b/frontend/src/components/MissionList/MissionItem.tsx
@@ -1,6 +1,8 @@
 import * as S from './MissionList.styled';
 import { Link } from 'react-router-dom';
 import type { Mission } from '@/types';
+import Card from '../common/Card';
+import Badge from '../common/Badge';
 
 interface MissionItemProps {
   mission: Mission;
@@ -11,21 +13,17 @@ export default function MissionItem({ mission }: MissionItemProps) {
 
   return (
     <Link to={`/missions/${id}`}>
-      <S.MissionItemContainer>
-        <S.MissionThumbnailImg src={thumbnail} alt={title} />
-
-        <S.MissionDescription>
-          <S.MissionTitle>[미션] {title}</S.MissionTitle>
-
-          <S.TagWrapper>
-            <S.PopularTag>🔥 인기 미션</S.PopularTag>
-            <S.BackendTag>☕️ JAVA</S.BackendTag>
-            <S.InsuranceTag>🔒 리뷰 100% 보장</S.InsuranceTag>
-          </S.TagWrapper>
-          <S.HorizontalLine />
-          <S.MissionPrice>무료</S.MissionPrice>
-        </S.MissionDescription>
-      </S.MissionItemContainer>
+      <Card
+        key={id}
+        thumbnailSrc={thumbnail}
+        thumbnailFallbackText="Mission"
+        contentElement={
+          <S.MissionDescription>
+            <S.MissionTitle>{title}</S.MissionTitle>
+            <Badge text="백엔드" />
+          </S.MissionDescription>
+        }
+      />
     </Link>
   );
 }
diff --git a/frontend/src/components/MissionList/MissionList.styled.ts b/frontend/src/components/MissionList/MissionList.styled.ts
@@ -1,9 +1,12 @@
 import styled from 'styled-components';
 
 export const MissionListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
   margin: 0 auto;
+  margin-bottom: 10rem;
   width: fit-content;
-  padding-top: 3rem;
 `;
 
 export const MissionListTitle = styled.h2`
@@ -35,51 +38,15 @@ export const MissionThumbnailImg = styled.img`
 `;
 
 export const MissionDescription = styled.div`
-  padding: 2.2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 `;
 
 export const MissionTitle = styled.p`
-  font-size: 1.8rem;
-  font-weight: 700;
+  font-size: 1.6rem;
+  font-weight: bold;
   color: black;
   margin-bottom: 1.7rem;
 `;
-
-export const TagWrapper = styled.div`
-  display: flex;
-  gap: 0.7rem;
-`;
-
-const BaseTag = styled.div`
-  text-align: center;
-  font-size: 1.2rem;
-  font-weight: 600;
-  padding: 0.3rem 1rem;
-  border-radius: 0.5rem;
-`;
-
-export const PopularTag = styled(BaseTag)`
-  color: #ff850a;
-  background-color: #fff7de;
-`;
-
-export const BackendTag = styled(BaseTag)`
-  font-weight: 700;
-  color: #b07219;
-  background-color: #faf5f2;
-`;
-
-export const InsuranceTag = styled(BaseTag)`
-  color: var(--primary-600);
-  background-color: var(--primary-50);
-`;
-
-export const HorizontalLine = styled.div`
-  border-top: 1px solid var(--grey-200);
-  margin: 2.2rem 0;
-`;
-
-export const MissionPrice = styled.div`
-  font-size: 1.6rem;
-  font-weight: 700;
-`;
diff --git a/frontend/src/components/common/Badge/Badge.styled.ts b/frontend/src/components/common/Badge/Badge.styled.ts
@@ -9,6 +9,7 @@ export const BadgeContainer = styled.div<BadgeContainerProps>`
   color: ${({ $fontColor }) => $fontColor};
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   width: fit-content;
-  padding: 0.5rem;
+  padding: 0.4rem 0.8rem;
   border-radius: 0.4rem;
+  font-size: 1.2rem;
 `;
diff --git a/frontend/src/components/common/Badge/index.tsx b/frontend/src/components/common/Badge/index.tsx
@@ -10,7 +10,7 @@ interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
 export default function Badge({
   text,
   fontColor = 'black',
-  backgroundColor = 'var(--primary-50)',
+  backgroundColor = 'var(--primary-100)',
 }: BadgeProps) {
   return (
     <S.BadgeContainer $fontColor={fontColor} $backgroundColor={backgroundColor}>

diff --git a/frontend/src/components/common/Card/Card.styled.ts b/frontend/src/components/common/Card/Card.styled.ts
@@ -2,8 +2,6 @@ import styled from 'styled-components';
 
 export const CardContainer = styled.div`
   width: 30rem;
-  margin: 10rem;
-  width: fit-content;
   box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.12);
   border-radius: 0 0 0.8rem 0.8rem;
   cursor: pointer;
@@ -23,5 +21,5 @@ export const Thumbnail = styled.img`
 
 export const Content = styled.div`
   padding: 2.5rem;
-  height: 21.9rem;
+  height: 20rem;
 `;
diff --git a/frontend/src/pages/MissionListPage.tsx b/frontend/src/pages/MissionListPage.tsx
@@ -2,70 +2,28 @@ import MissionItem from '@/components/MissionList/MissionItem';
 import * as S from '@/components/MissionList/MissionList.styled';
 import Carousel from '@/components/Carousel/Carousel';
 import useMissions from '@/hooks/useMissions';
+import MyMissionInProgress from '@/components/MyMission/MyMissionInProgress/MyMissionInProgress';
+import getPlaceholderImg from '@/components/common/Card/getPlaceholderImg';
 
 export default function MissionListPage() {
   const { data: allMissions } = useMissions();
 
   return (
     <S.MissionListContainer>
-      <S.MissionListTitle>미션 풀고 리뷰 받고, Devel Up!</S.MissionListTitle>
       <Carousel>
-        {/**
-         * 캐러셀 테스트 용으로 만들어본 이미지들입니다. 추후 수정 예정
-         */}
-        <div
-          key={'1'}
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100%',
-          }}
-        >
-          <img
-            src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
-            width={'100%'}
-            height={'100%'}
-          />
-        </div>
-        <div
-          key={'2'}
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-
-            height: '100%',
-          }}
-        >
-          <img
-            src="https://cdn.pixabay.com/photo/2016/07/07/16/46/dice-1502706_640.jpg"
-            width={'100%'}
-            height={'100%'}
-          />
-        </div>
-
-        <div
-          key={'3'}
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100%',
-          }}
-        >
-          <img
-            src="https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092_1280.png"
-            width={'100%'}
-            height={'100%'}
-          />
-        </div>
+        <img src={getPlaceholderImg(1000, 425, 'devel-up banner 1')} />
+        <img src={getPlaceholderImg(1000, 425, 'devel-up banner 2')} />
+        <img src={getPlaceholderImg(1000, 425, 'devel-up banner 3')} />
       </Carousel>
-      <S.MissionList>
-        {allMissions.map((mission) => (
-          <MissionItem key={mission.id} mission={mission} />
-        ))}
-      </S.MissionList>
+      <MyMissionInProgress />
+      <div>
+        <S.MissionListTitle>새로운 미션에 참여해 보세요!</S.MissionListTitle>
+        <S.MissionList>
+          {allMissions.map((mission) => (
+            <MissionItem key={mission.id} mission={mission} />
+          ))}
+        </S.MissionList>
+      </div>
     </S.MissionListContainer>
   );
 }