Merge pull request #101 from prgrms-web-devcourse-final-project/43-design/design-social-page

[Design] #43 소셜 관련 페이지

Author: shlee9999

src/App.tsx

@@ -1,12 +1,11 @@
-import PWABadge from '~/PWABadge'
-import { router } from '~/router'
-import GlobalStyle from '~/styles/globalStyle'
-import { lightTheme, darkTheme } from '~/styles/theme'
 import { Suspense, useState } from 'react'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { RouterProvider } from 'react-router-dom'
 import styled, { ThemeProvider } from 'styled-components'
-import { Helmet, HelmetProvider } from 'react-helmet-async'
-import ModalContainer from '~modals/ModalContainer'
+import PWABadge from '~/PWABadge'
+import { router } from '~/router'
+import GlobalStyle from '~/styles/globalStyle'
+import { darkTheme, lightTheme } from '~/styles/theme'
 import Loader from '~components/Loader'
 
 function App() {
@@ -28,7 +27,6 @@ function App() {
           <MobileContainer>
             <Suspense fallback={<Loader />}>
               <RouterProvider router={router} />
-              <ModalContainer />
             </Suspense>
           </MobileContainer>
           <PWABadge />

src/assets/dog_food.svg

@@ -3,15 +3,14 @@ import { FaRegCalendarCheck } from 'react-icons/fa6'
 import { IoMdPeople } from 'react-icons/io'
 import { IoHomeSharp } from 'react-icons/io5'
 import { MdOutlineFamilyRestroom } from 'react-icons/md'
-import { Link } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import { Typo11 } from '~components/Typo'
 import * as S from './styles'
 
 const FOOTER_NAV_LIST = [
   { Icon: IoHomeSharp, endpoint: '/', typo: '홈' },
   { Icon: FaRegCalendarCheck, endpoint: '/log', typo: '댕댕로그' },
-  { Icon: IoMdPeople, endpoint: '/walk', typo: '소셜' },
+  { Icon: IoMdPeople, endpoint: '/social', typo: '소셜' },
   {
     Icon: MdOutlineFamilyRestroom,
     endpoint: '/mypage',
@@ -28,9 +27,9 @@ export default function Footer() {
     <S.Footer>
       <S.FooterNavList>
         {FOOTER_NAV_LIST.map(({ Icon, endpoint, typo }, index) => (
-          <S.FooterNavItem key={index}>
-            <Link to={endpoint}>{<Icon color={theme.colors.brand.default} size={28} />}</Link>
-            <Typo11 weight='500' color='font_3'>
+          <S.FooterNavItem key={index} to={endpoint}>
+            <Icon color={theme.colors.brand.default} size={28} />
+            <Typo11 $weight='500' $color='font_3'>
               {typo}
             </Typo11>
           </S.FooterNavItem>

src/assets/dog_howling.svg

@@ -1,16 +1,27 @@
+import { Link } from 'react-router-dom'
 import { styled } from 'styled-components'
+import { FOOTER_HEIGHT } from '~constants/layout'
 
-export const Footer = styled.nav``
+export const Footer = styled.footer`
+  height: ${FOOTER_HEIGHT}px;
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  box-shadow: inset 0 1px 0 0 ${({ theme }) => theme.colors.grayscale.gc_1};
+`
 
 export const FooterNavList = styled.ul`
   display: flex;
   justify-content: space-between;
+  height: 100%;
 `
 
-export const FooterNavItem = styled.li`
+export const FooterNavItem = styled(Link)`
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-decoration: none;
 `

src/components/Footer/index.tsx

@@ -13,7 +13,7 @@ export default function GenderSelectButton({ gender, isActive, onClick }: Gender
   return (
     <S.GenderBtn $isActive={isActive} onClick={onClick}>
       <S.GenderIcon $isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
-      <Typo17 weight={isActive ? '700' : '400'}>{gender === 'male' ? '남' : '여'}</Typo17>
+      <Typo17 $weight={isActive ? '700' : '400'}>{gender === 'male' ? '남' : '여'}</Typo17>
     </S.GenderBtn>
   )
 }

src/components/Footer/styles.ts

@@ -10,6 +10,7 @@ type HeaderProps = {
   children?: ReactNode
   type: HeaderType
   className?: string
+  title?: string
 }
 
 export default function Header({
@@ -20,9 +21,11 @@ export default function Header({
   prevBtn,
   closeBtn,
   className,
+  title,
 }: HeaderProps) {
   return (
     <S.Header className={className} $type={type}>
+      {title ? <S.Title $weight='700'>{title}</S.Title> : null}
       {prevBtn ? <S.HeaderPrevBtn onClick={onClickPrev} /> : null}
       {closeBtn ? <S.HeaderCloseBtn onClick={onClickClose} /> : null}
       {children}

src/components/GenderSelectButton/index.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import CloseButton from '~components/Button/CloseButton'
 import PrevButton from '~components/Button/PrevButton'
+import { Typo17 } from '~components/Typo'
 import { HEADER_HEIGHT, HEADER_HEIGHT_LG, HEADER_Z_INDEX } from '~constants/layout'
 import { HeaderType } from '~types/headerType'
 
@@ -30,3 +31,8 @@ export const HeaderCloseBtn = styled(CloseButton)`
   position: absolute;
   right: 1.25rem;
 `
+export const Title = styled(Typo17)`
+  position: absolute;
+  left: 50%;
+  translate: -50%;
+`

src/components/Header/index.tsx

@@ -5,5 +5,7 @@ export const LoginPage = lazy(() => import('~pages/LoginPage'))
 export const LogPage = lazy(() => import('~pages/LogPage'))
 export const MyPage = lazy(() => import('~pages/MyPage'))
 export const WalkPage = lazy(() => import('~pages/WalkPage'))
+export const SocialPage = lazy(() => import('~pages/SocialPage'))
 export const RegisterPage = lazy(() => import('~pages/RegisterPage/Register'))
 export const RegisterDogPage = lazy(() => import('~pages/RegisterPage/Dog'))
+export const ProfilePage = lazy(() => import('~pages/ProfilePage'))