Chore/#318 : 꿀팁 페이지 라우팅 추가 & 홈 화면 디자인 수정

src/@types/styles/size.ts

@@ -1,6 +1,12 @@
 import { CSSProperties } from 'react';
 
-export type SizeOption = 'large' | 'medium' | 'small' | 'tiny' | 'building';
+export type SizeOption =
+  | 'large'
+  | 'medium'
+  | 'small'
+  | 'tiny'
+  | 'halfCard'
+  | 'building';
 
 export interface Size {
   height: CSSProperties['height'];

src/components/BodyLayout/index.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
@@ -13,6 +14,7 @@ const BodyLayout = () => {
 export default BodyLayout;
 
 const StyledBodyLayout = styled.div`
+  background-color: ${THEME.BACKGROUND};
   height: calc(100vh - 8vh - 90px);
   padding: 8vh 0 8vh 0;
   overflow-y: scroll;

src/components/Card/InformCard/index.tsx

@@ -50,42 +50,21 @@ const InformCard = ({
       <IconContainer>
         <Icon kind={icon} color={THEME.TEXT.WHITE} />
       </IconContainer>
-      <TextContainer>
-        <span>{title}</span>
-        <span>{title} 보러가기</span>
-      </TextContainer>
+      <InfoTitle>{title}</InfoTitle>
     </Card>
   );
 };
 
 export default InformCard;
 
 const Card = styled.div`
-  padding: 3% 1% 2% 0;
+  padding: 5% 0 0 0;
   height: 4rem;
   display: flex;
   align-items: center;
-
-  span:nth-of-type(1) {
-    font-size: 12px;
-    color: ${THEME.TEXT.GRAY};
-  }
-
-  span:nth-of-type(2) {
-    font-size: 16px;
-    font-weight: bold;
-    color: ${THEME.TEXT.BLACK};
-  }
-
   transition: all 0.2s ease-in-out;
 `;
 
-const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-`;
-
 const IconContainer = styled.div`
   height: 45px;
   width: 45px;
@@ -96,3 +75,8 @@ const IconContainer = styled.div`
   border-radius: 50%;
   background-color: ${THEME.PRIMARY};
 `;
+
+const InfoTitle = styled.span`
+  font-size: 1rem;
+  font-weight: bold;
+`;

src/pages/Home/components/InformHalfCard.tsx → src/components/Card/InformHalfCard/index.tsx

@@ -1,27 +1,21 @@
-import Icon from '@components/Common/Icon';
 import styled from '@emotion/styled';
-import useRouter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
-import { IconKind } from '@type/styles/icon';
 
-interface InformHalfCardProps {
-  iconKind: IconKind;
+interface InformHalfCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  asset: () => JSX.Element;
   title: string;
   subTitle: string;
-  link: string;
 }
 
 const InformHalfCard = ({
-  iconKind,
+  asset,
   title,
   subTitle,
-  link,
+  ...props
 }: InformHalfCardProps) => {
-  const { routerTo } = useRouter();
-
   return (
-    <Container onClick={() => routerTo(link)}>
-      <Icon kind={iconKind} size="45" color={THEME.PRIMARY} />
+    <Container {...props}>
+      {asset()}
       <TitleWrapper>
         <SubTitle>{subTitle}</SubTitle>
         <Title>{title}</Title>
@@ -33,32 +27,32 @@ const InformHalfCard = ({
 export default InformHalfCard;
 
 const Container = styled.div`
+  padding: 3% 5% 3% 5%;
+  width: 90%;
+  height: 55px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 39%;
-  background-color: ${THEME.IVORY};
-  padding: 3% 5% 3% 4%;
+  background-color: ${THEME.BACKGROUND};
   border-radius: 15px;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  height: 55px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
 `;
 
 const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  padding-left: 7px;
+  align-items: flex-end;
 `;
 
 const Title = styled.h2`
-  font-size: 16px;
   font-weight: bold;
+  font-size: 12px;
 `;
 
 const SubTitle = styled.h3`
   color: ${THEME.TEXT.SEMIBLACK};
   display: flex;
   justify-content: flex-end;
-  font-size: 13px;
   padding-bottom: 6px;
+  font-size: 10px;
 `;

src/components/Card/TipCard/TipImage.tsx

@@ -1,31 +1,29 @@
-import Image from '@components/Common/Image';
+import WebpImage from '@components/Common/WebpImage';
 import { css } from '@emotion/react';
 import React from 'react';
 
 interface TipImageProps {
   title: string;
   webpPath: string;
-  pngPath: string;
+  normalPath: string;
 }
 
-const TipImage = ({ title, webpPath, pngPath }: TipImageProps) => {
+const TipImage = ({ title, webpPath, normalPath }: TipImageProps) => {
   return (
-    <picture>
-      <source srcSet={webpPath} type="image/webp" />
-      <Image
-        src={pngPath}
-        size="tiny"
-        alt={title}
-        css={css`
-          padding: 0 16px 16px 0;
-          position: absolute;
-          z-index: -1;
-          right: 0;
-          bottom: 0;
-          opacity: 0.2;
-        `}
-      />
-    </picture>
+    <WebpImage
+      wepbPath={webpPath}
+      normalPath={normalPath}
+      title={title}
+      size="tiny"
+      css={css`
+        padding: 0 16px 16px 0;
+        position: absolute;
+        z-index: -1;
+        right: 0;
+        bottom: 0;
+        opacity: 0.2;
+      `}
+    />
   );
 };
 

src/components/Common/Button/index.tsx

@@ -19,22 +19,18 @@ const Button = ({ children, disabled = false, ...props }: ButtonProps) => {
 export default Button;
 
 const StyledButton = styled.button`
+  height: 50px;
+  width: 100%;
+  padding: 10px;
+  margin: 4px 0;
   display: flex;
   justify-content: center;
   align-items: center;
-
-  cursor: pointer;
-
-  width: 100%;
-  height: 50px;
-  margin: 4px 0;
-
-  border-radius: 8px;
-  padding: 10px;
-
   background-color: ${THEME.BUTTON.BLUE};
   color: #ffffff;
   font-weight: bold;
+  border-radius: 8px;
+  cursor: pointer;
 
   &:disabled {
     background-color: ${THEME.BUTTON.GRAY};

src/components/Common/Image/index.tsx

@@ -8,6 +8,7 @@ const imageSize: ImageSize = {
   medium: setSize(150),
   small: setSize(100),
   tiny: setSize(80),
+  halfCard: setSize(50, 60),
   building: setSize(100, 180),
 };
 

src/components/Common/WebpImage/index.tsx

@@ -0,0 +1,28 @@
+import { SizeOption } from '@type/styles/size';
+import React from 'react';
+
+import Image from '../Image';
+
+interface WebpImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  wepbPath: string;
+  normalPath: string;
+  title: string;
+  size?: SizeOption;
+}
+
+const WebpImage = ({
+  wepbPath,
+  normalPath,
+  title,
+  size = 'medium',
+  ...props
+}: WebpImageProps) => {
+  return (
+    <picture>
+      <source srcSet={wepbPath} type="image/webp" />
+      <Image src={normalPath} alt={title} size={size} {...props} />
+    </picture>
+  );
+};
+
+export default WebpImage;

src/constants/announcement.ts

@@ -3,6 +3,12 @@ export const ANNOUNCEMENT_TITLE = {
   MAROR: '학과 공지사항',
   LANGUAGE: '어학 공지사항',
   RECRUIT: '채용 공지사항',
+  GRADUATION: '졸업요건',
+};
+
+export const ANNOUNCE_SUB_TITLE = {
+  RECURIT: '채용 정보 확인',
+  LANGUAGE: '어학 정보 확인',
 };
 
 export const ANNOUNCEMENT_CATEGORY = {

src/constants/tip.ts

@@ -89,6 +89,13 @@ export const HONEY_TIP_DATA: readonly TipData[] = [
   },
 ] as const;
 
+export const TIP_ROUTING_CARD = {
+  WEBP_PATH: '/assets/tipImages/webp/baekgyeong_suprised.webp',
+  NORMAL_PATH: '/assets/tipImages/png/baekgyeong_suprised.png',
+  TITLE: '꿀팁 사이트 바로가기',
+  SUB_TITLE: '부경대 꿀팁 사이트 모음',
+};
+
 export const TIP_TYPE = {
   SHORTCUT: 'shortcut',
   HONEY_TIP: 'honeytip',

src/pages/Home/Home.test.tsx

@@ -6,6 +6,10 @@ import '@testing-library/jest-dom';
 
 import Home from './index';
 
+interface TextInScreen {
+  [key: string]: string;
+}
+
 describe('Home Page 컴포넌트 테스트', () => {
   it('페이지에 공지사항 및 졸업요건 컴포넌트가 렌더링된다.', () => {
     render(
@@ -18,10 +22,16 @@ describe('Home Page 컴포넌트 테스트', () => {
         wrapper: MemoryRouter,
       },
     );
-    const notificationText = screen.getByText('학교 공지사항');
-    expect(notificationText).toBeInTheDocument();
 
-    const requirementText = screen.getByText('졸업요건');
-    expect(requirementText).toBeInTheDocument();
+    const EXPECTED_TEXT: TextInScreen = {
+      school: '학교 공지사항 보러가기',
+      major: '학과 공지사항 보러가기',
+      graduation: '졸업요건 보러가기',
+    };
+
+    Object.keys(EXPECTED_TEXT).forEach((key) => {
+      const expectedText = screen.getByText(EXPECTED_TEXT[key]);
+      expect(expectedText).toBeInTheDocument();
+    });
   });
 });

src/pages/Home/components/ExtraInfo.tsx

@@ -0,0 +1,68 @@
+import InformHalfCard from '@components/Card/InformHalfCard';
+import Icon from '@components/Common/Icon';
+import WebpImage from '@components/Common/WebpImage';
+import {
+  ANNOUNCEMENT_TITLE,
+  ANNOUNCE_SUB_TITLE,
+} from '@constants/announcement';
+import PATH from '@constants/path';
+import { TIP_ROUTING_CARD } from '@constants/tip';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import useRouter from '@hooks/useRouter';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+const ExtraInfo = () => {
+  const { routerTo } = useRouter();
+
+  return (
+    <>
+      <FlatContainer>
+        <InformHalfCard
+          asset={() => <Icon kind="account" size="45" color={THEME.PRIMARY} />}
+          title={ANNOUNCEMENT_TITLE.RECRUIT}
+          subTitle={ANNOUNCE_SUB_TITLE.RECURIT}
+          onClick={() => routerTo(PATH.NORMAL_ANNOUNCEMENT('recruit'))}
+        />
+        <InformHalfCard
+          asset={() => <Icon kind="language" size="45" color={THEME.PRIMARY} />}
+          title={ANNOUNCEMENT_TITLE.LANGUAGE}
+          subTitle={ANNOUNCE_SUB_TITLE.LANGUAGE}
+          onClick={() => routerTo(PATH.NORMAL_ANNOUNCEMENT('language'))}
+        />
+      </FlatContainer>
+      <InformHalfCard
+        asset={() => (
+          <WebpImage
+            wepbPath={TIP_ROUTING_CARD.WEBP_PATH}
+            normalPath={TIP_ROUTING_CARD.NORMAL_PATH}
+            title="baekgyoung image"
+            size="halfCard"
+          />
+        )}
+        title={TIP_ROUTING_CARD.TITLE}
+        subTitle={TIP_ROUTING_CARD.SUB_TITLE}
+        onClick={() => routerTo(PATH.TIP.SHORTCUT)}
+        css={css`
+          h2 {
+            font-size: 16px;
+          }
+          h3 {
+            font-size: 12px;
+          }
+        `}
+      />
+    </>
+  );
+};
+
+export default ExtraInfo;
+
+const FlatContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  margin-top: 5%;
+  margin-bottom: 5%;
+  gap: 10px;
+`;