Style/#286: 꿀팁 페이지 디자인 수정

src/App.tsx

@@ -25,7 +25,7 @@ const App = () => {
           <Route path="/announcement/*" element={<Announcement />} />
           <Route path="/major-decision/*" element={<MajorDecision />} />
           <Route path="/my" element={<My />} />
-          <Route path="/tip" element={<Tip />} />
+          <Route path="/tip/:type" element={<Tip />} />
           <Route path="/FAQ" element={<FAQPage />} />
         </Route>
         <Route element={<OverlayProvider />}>

src/components/Card/TipCard/TipImage.tsx

@@ -0,0 +1,32 @@
+import Image from '@components/Common/Image';
+import { css } from '@emotion/react';
+import React from 'react';
+
+interface TipImageProps {
+  title: string;
+  webpPath: string;
+  pngPath: string;
+}
+
+const TipImage = ({ title, webpPath, pngPath }: 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>
+  );
+};
+
+export default TipImage;

src/components/Card/TipCard/TipSubTitle.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+interface TipSubTitleProps {
+  subTitle: string;
+}
+
+const TipSubTitle = ({ subTitle }: TipSubTitleProps) => {
+  const seperatedSubTitle = subTitle.split('\n');
+  return (
+    <SubTitle>
+      {seperatedSubTitle.map((subTitle, index) => (
+        <p key={index}>{subTitle}</p>
+      ))}
+    </SubTitle>
+  );
+};
+
+export default TipSubTitle;
+
+const SubTitle = styled.span`
+  padding: 0 0 0 16px;
+  line-height: 1rem;
+  font-size: 0.8rem;
+`;

src/components/Card/TipCard/TipTitle.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+interface TipTitleProps {
+  title: string;
+}
+
+const TipTitle = ({ title }: TipTitleProps) => {
+  const seperatedTitle = title.split('\n');
+  return (
+    <Title>
+      {seperatedTitle.map((titleItem, index) => (
+        <p key={index}>{titleItem}</p>
+      ))}
+    </Title>
+  );
+};
+
+export default TipTitle;
+
+const Title = styled.span`
+  padding: 20px 0px 10px 16px;
+  line-height: 1.2rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+`;

src/components/Card/TipCard/domain/getTipCardSubElement.ts

@@ -0,0 +1,21 @@
+import { Children, isValidElement } from 'react';
+
+import TipImage from '../TipImage';
+import TipSubTitle from '../TipSubTitle';
+import TipTitle from '../TipTitle';
+
+type TipCardChildType = typeof TipTitle | typeof TipSubTitle | typeof TipImage;
+
+const getTipCardSubElement = (
+  children: React.ReactNode,
+  childType: TipCardChildType,
+) => {
+  const chidrenArray = Children.toArray(children);
+  const targetChild = chidrenArray
+    .filter((child) => isValidElement(child) && child.type === childType)
+    .slice(0, 2);
+
+  return targetChild;
+};
+
+export default getTipCardSubElement;

src/components/Card/TipCard/index.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+import getTipCardSubElement from './domain/getTipCardSubElement';
+import TipImage from './TipImage';
+import TipSubTitle from './TipSubTitle';
+import TipTitle from './TipTitle';
+
+type StrictPropsWithChildren<T = unknown> = T & {
+  children: React.ReactNode;
+  onClick: () => void;
+};
+
+const TipCard = ({ children, onClick }: StrictPropsWithChildren) => {
+  const tipTitle = getTipCardSubElement(children, TipTitle);
+  const tipSubTitle = getTipCardSubElement(children, TipSubTitle);
+  const tipImage = getTipCardSubElement(children, TipImage);
+
+  return (
+    <Container onClick={onClick}>
+      {tipTitle}
+      {tipSubTitle}
+      {tipImage}
+    </Container>
+  );
+};
+
+export default TipCard;
+
+TipCard.TipTitle = TipTitle;
+TipCard.TipSubTitle = TipSubTitle;
+TipCard.TipImage = TipImage;
+
+const Container = styled.div`
+  position: relative;
+  height: 10rem;
+  width: 10rem;
+  display: flex;
+  flex-direction: column;
+  background-color: ${THEME.PRIMARY}20;
+  border: 1px solid ${THEME.PRIMARY}30;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+  gap: 5px;
+  z-index: 1;
+`;

src/components/Common/Image/index.tsx

@@ -7,7 +7,7 @@ const imageSize: ImageSize = {
   large: setSize(200),
   medium: setSize(150),
   small: setSize(100),
-  tiny: setSize(45),
+  tiny: setSize(80),
 };
 
 const Image = ({

src/components/Header/index.tsx

@@ -1,37 +1,33 @@
 import Icon from '@components/Common/Icon';
-import SideBar from '@components/SideBar';
-import SideBarContent from '@components/SideBar/Content';
 import styled from '@emotion/styled';
 import useRoter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
-import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
 
 const Header = () => {
-  const { routerTo, goBack } = useRoter();
-  const [open, setOpen] = useState<boolean>(false);
-  const location = useLocation();
+  const { routerTo, goBack, currentPath } = useRoter();
+  if (currentPath === '/map') return <></>;
 
-  if (location.pathname === '/map') return <></>;
+  const isNotHomePage = currentPath !== '/';
 
   return (
-    <HeaderContainer>
-      <HeaderWrapper>
-        <Icon kind="arrowBack" onClick={goBack} />
-        <Logo onClick={() => routerTo('/')}>부림이</Logo>
-        <SideBar open={open} setOpen={setOpen}>
-          <SideBarContent setOpen={setOpen} />
-        </SideBar>
-      </HeaderWrapper>
-    </HeaderContainer>
+    <Container>
+      {isNotHomePage && (
+        <IconContainer>
+          <Icon kind="arrowBack" onClick={goBack} size="20" />
+        </IconContainer>
+      )}
+      <Logo onClick={() => routerTo('/')}>부림이</Logo>
+    </Container>
   );
 };
 
 export default Header;
 
-const HeaderContainer = styled.div`
+const Container = styled.section`
+  position: relative;
   display: flex;
   justify-content: center;
+  align-items: center;
 
   width: 100%;
   max-width: 480px;
@@ -43,12 +39,9 @@ const HeaderContainer = styled.div`
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 `;
 
-const HeaderWrapper = styled.div`
-  width: 90%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+const IconContainer = styled.div`
+  position: absolute;
+  left: 1rem;
 `;
 
 const Logo = styled.span`

src/components/InformUpperLayout/InformSubTitle.tsx

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+interface InformSubTitleProps {
+  subTitle: string;
+}
+
+const InformSubTitle = ({ subTitle }: InformSubTitleProps) => {
+  const seperatedSubTitle = subTitle.split('\n');
+
+  return (
+    <SubTitle>
+      {seperatedSubTitle.map((subTitle, index) => (
+        <p key={index}>{subTitle}</p>
+      ))}
+    </SubTitle>
+  );
+};
+
+export default InformSubTitle;
+
+const SubTitle = styled.span`
+  padding: 0 0 1rem 0;
+  color: ${THEME.TEXT.GRAY};
+  line-height: 1.3;
+  font-size: 0.9rem;
+`;

src/components/InformUpperLayout/InformTitle.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+interface InformTitleProps {
+  title: string;
+}
+
+const InformTitle = ({ title }: InformTitleProps) => {
+  return <Title>{title}</Title>;
+};
+
+export default InformTitle;
+
+const Title = styled.span`
+  padding: 1.5rem 0 1.5rem 0;
+  color: ${THEME.TEXT.BLACK};
+  font-size: 1.5rem;
+  font-weight: bold;
+`;

src/components/InformUpperLayout/InformTypeButton.tsx

@@ -0,0 +1,35 @@
+import Button from '@components/Common/Button';
+import { css } from '@emotion/react';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+interface InformTypeButtonProps {
+  type: string;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const InformTypeButton = ({
+  type,
+  isActive,
+  onClick,
+}: InformTypeButtonProps) => {
+  return (
+    <Button
+      css={css`
+        height: 2rem;
+        width: 4rem;
+        border-radius: 4rem;
+        font-size: 0.7rem;
+        font-weight: normal;
+        background-color: ${isActive ? THEME.BUTTON.BLUE : THEME.BUTTON.GRAY};
+        color: ${isActive ? THEME.TEXT.WHITE : THEME.TEXT.GRAY};
+      `}
+      onClick={onClick}
+    >
+      {type}
+    </Button>
+  );
+};
+
+export default InformTypeButton;

src/components/InformUpperLayout/domain/getInformUpperLayoutSubElement.ts

@@ -0,0 +1,24 @@
+import { Children, isValidElement } from 'react';
+
+import InformSubTitle from '../InformSubTitle';
+import InformTitle from '../InformTitle';
+import InformTypeButton from '../InformTypeButton';
+
+type InformUpperLayoutChildType =
+  | typeof InformTitle
+  | typeof InformSubTitle
+  | typeof InformTypeButton;
+
+const getInformUpperLayoutSubElement = (
+  children: React.ReactNode,
+  childType: InformUpperLayoutChildType,
+) => {
+  const childrenArray = Children.toArray(children);
+  const targetChild = childrenArray
+    .filter((child) => isValidElement(child) && child.type === childType)
+    .slice(0, 2);
+
+  return targetChild;
+};
+
+export default getInformUpperLayoutSubElement;