Merge branch 'feat/#29/footerNavigation' into develop

RedCross-Revive-Hackthon · Aug 24, 2023 · 54e3ff1 · 54e3ff1
2 parents e0797ae + 6b29c31
commit 54e3ff1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git a/src/assets/svgs/postBtn.svg b/src/assets/svgs/postBtn.svg
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -3,6 +3,7 @@ import { Community, CommunityRed, Event, EventRed, Home, HomeRed, Volunteer, Vol
 import { IconArea } from '../icon/icon';
 import { Link } from 'react-router-dom';
 import { PlusBtn } from '../icon/icon';
+import { PostBtn } from '../icon/icon';
 import React from 'react';
 import { styled } from 'styled-components';
 import { theme } from '../../styles/theme';
@@ -24,9 +25,15 @@ const Footer = () => {
         </IconSection>
       </IconContainer>
       <IconArea />
-      <Link to="/barcode">
-        <StyledPlusBtn />
-      </Link>
+      {location === '/community' ? (
+        <Link to="#">
+          <StyledPostBtn />
+        </Link>
+      ) : (
+        <Link to="/barcode">
+          <StyledPlusBtn />
+        </Link>
+      )}
     </FooterWrapper>
   );
 };
@@ -46,6 +53,13 @@ const StyledPlusBtn = styled(PlusBtn)`
   transform: translate(-3.7rem, 0);
 `;
 
+const StyledPostBtn = styled(PostBtn)`
+  position: absolute;
+  bottom: 5.3rem;
+  left: 50%;
+  transform: translate(-3.7rem, 0);
+`;
+
 const IconContainer = styled.div`
   display: flex;
   position: absolute;

diff --git a/src/components/community/Header.tsx b/src/components/community/Header.tsx
@@ -7,6 +7,7 @@ import { useRecoilState } from 'recoil';
 
 const Header = () => {
   const [currentTap, setCurrentTap] = useRecoilState(communityTapState);
+
   const handleTap = () => {
     setCurrentTap(!currentTap);
   };
@@ -51,7 +52,7 @@ const HeaderWrapper = styled.header`
 const HeaderTap = styled.div<{ $isCurrentTap: boolean }>`
   display: flex;
   justify-content: center;
-  border-bottom: 0.2rem solid ${(props) => (props.isCurrentTap ? theme.colors.deepred : theme.colors.gray01)};
+  border-bottom: 0.2rem solid ${(props) => (props.$isCurrentTap ? theme.colors.deepred : theme.colors.gray01)};
   cursor: pointer;
   width: 100%;
   height: 5.6rem;

diff --git a/src/components/home/RankTitle.tsx b/src/components/home/RankTitle.tsx
@@ -1,9 +1,9 @@
+import { Link } from 'react-router-dom';
 import { MyPage } from '../icon/icon';
 import React from 'react';
 import Text from '../common/Text';
 import { styled } from 'styled-components';
 import { theme } from '../../styles/theme';
-
 const dummy = {
   university: '적십자대학교',
   name: '홍길동',
@@ -26,7 +26,9 @@ const RankTitle = () => {
           </Text>
         </MainTextWrapper>
       </TextWrapper>
-      <MyPage />
+      <Link to="/mypage">
+        <MyPage />
+      </Link>
     </RankTitleWrapper>
   );
 };

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
@@ -34,6 +34,7 @@ import { ReactComponent as MyPage } from '../../assets/svgs/myPage.svg';
 import { ReactComponent as MypageBackground } from '../../assets/svgs/mypageBackground.svg';
 import { ReactComponent as NotChecked } from '../../assets/svgs/notChecked.svg';
 import { ReactComponent as PlusBtn } from '../../assets/svgs/PlusBtn.svg';
+import { ReactComponent as PostBtn } from '../../assets/svgs/postBtn.svg';
 import { ReactComponent as SecondPlace } from '../../assets/svgs/secondPlace.svg';
 import { ReactComponent as ThirdPlace } from '../../assets/svgs/thirdPlace.svg';
 import { ReactComponent as Trophy } from '../../assets/svgs/trophy.svg';
@@ -45,6 +46,7 @@ export {
   Checked,
   NotChecked,
   DetailPost,
+  PostBtn,
   VolunteerRed,
   HomeRed,
   EventRed,