Merge pull request #28 from RedCross-Revive-Hackthon/feat/#26/communi…

…tyView

Feat/#26/community view

src/Router.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Barcode from './pages/Barcode';
+import Community from './pages/Community';
 import Home from './pages/Home';
 import Mypage from './pages/Mypage';
 
@@ -9,6 +10,7 @@ const Router = () => {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />}></Route>
+        <Route path="/community" element={<Community />}></Route>
         <Route path="/barcode" element={<Barcode />}></Route>
         <Route path="/mypage" element={<Mypage></Mypage>}></Route>
       </Routes>

src/components/common/Footer.tsx

@@ -4,7 +4,6 @@ import { IconArea } from '../icon/icon';
 import { Link } from 'react-router-dom';
 import { PlusBtn } from '../icon/icon';
 import React from 'react';
-import Text from './Text';
 import { styled } from 'styled-components';
 
 const Footer = () => {

src/components/community/GivePosts.tsx

@@ -0,0 +1,23 @@
+import { GivePost1, GivePost2, GivePost3, GivePost4, GivePost5 } from '../icon/icon';
+
+import React from 'react';
+import { styled } from 'styled-components';
+
+const GivePosts = () => {
+  return (
+    <PostsWrapper>
+      <GivePost1 />
+      <GivePost2 />
+      <GivePost3 />
+      <GivePost4 />
+      <GivePost5 />
+    </PostsWrapper>
+  );
+};
+
+export default GivePosts;
+
+const PostsWrapper = styled.main`
+  margin-top: 8.2rem;
+  margin-bottom: 15rem;
+`;

src/components/community/Header.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Text from '../common/Text';
+import { communityTapState } from '../../states/communityTapState';
+import { styled } from 'styled-components';
+import { theme } from '../../styles/theme';
+import { useRecoilState } from 'recoil';
+
+const Header = () => {
+  const [currentTap, setCurrentTap] = useRecoilState(communityTapState);
+  const handleTap = () => {
+    setCurrentTap(!currentTap);
+  };
+
+  return (
+    <HeaderWrapper>
+      <HeaderTap onClick={handleTap} isCurrentTap={currentTap === false}>
+        {currentTap === false ? (
+          <Text font="head5" color={theme.colors.black}>
+            헌혈증서 나눔
+          </Text>
+        ) : (
+          <Text font="head5" color={theme.colors.gray01}>
+            헌혈증서 나눔
+          </Text>
+        )}
+      </HeaderTap>
+      <HeaderTap onClick={handleTap} isCurrentTap={currentTap === true}>
+        {currentTap === true ? (
+          <Text font="head5" color={theme.colors.black}>
+            지정헌혈 구인
+          </Text>
+        ) : (
+          <Text font="head5" color={theme.colors.gray01}>
+            지정헌혈 구인
+          </Text>
+        )}
+      </HeaderTap>
+    </HeaderWrapper>
+  );
+};
+
+export default Header;
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  position: absolute;
+  width: 100%;
+`;
+
+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)};
+  cursor: pointer;
+  width: 100%;
+  height: 5.6rem;
+`;

src/components/community/HelpPosts.tsx

@@ -0,0 +1,23 @@
+import { HelpPost1, HelpPost2, HelpPost3, HelpPost4, HelpPost5 } from '../icon/icon';
+
+import React from 'react';
+import { styled } from 'styled-components';
+
+const HelpPosts = () => {
+  return (
+    <PostsWrapper>
+      <HelpPost1 />
+      <HelpPost2 />
+      <HelpPost3 />
+      <HelpPost4 />
+      <HelpPost5 />
+    </PostsWrapper>
+  );
+};
+
+export default HelpPosts;
+
+const PostsWrapper = styled.main`
+  margin-top: 8.2rem;
+  margin-bottom: 15rem;
+`;

src/components/icon/icon.ts

@@ -8,6 +8,16 @@ import { ReactComponent as DefaultUser } from '../../assets/svgs/defaultUser.svg
 import { ReactComponent as Down } from '../../assets/svgs/down.svg';
 import { ReactComponent as Event } from '../../assets/svgs/event.svg';
 import { ReactComponent as FirstPlace } from '../../assets/svgs/firstPlace.svg';
+import { ReactComponent as GivePost1 } from '../../assets/svgs/givePost1.svg';
+import { ReactComponent as GivePost2 } from '../../assets/svgs/givePost2.svg';
+import { ReactComponent as GivePost3 } from '../../assets/svgs/givePost3.svg';
+import { ReactComponent as GivePost4 } from '../../assets/svgs/givePost4.svg';
+import { ReactComponent as GivePost5 } from '../../assets/svgs/givePost5.svg';
+import { ReactComponent as HelpPost1 } from '../../assets/svgs/helpPost1.svg';
+import { ReactComponent as HelpPost2 } from '../../assets/svgs/helpPost2.svg';
+import { ReactComponent as HelpPost3 } from '../../assets/svgs/helpPost3.svg';
+import { ReactComponent as HelpPost4 } from '../../assets/svgs/helpPost4.svg';
+import { ReactComponent as HelpPost5 } from '../../assets/svgs/helpPost5.svg';
 import { ReactComponent as Home } from '../../assets/svgs/home.svg';
 import { ReactComponent as IcnPoint } from '../../assets/svgs/icnPoint.svg';
 import { ReactComponent as IcnRank } from '../../assets/svgs/icnRank.svg';
@@ -25,6 +35,16 @@ import { ReactComponent as Up } from '../../assets/svgs/up.svg';
 import { ReactComponent as Volunteer } from '../../assets/svgs/volunteer.svg';
 
 export {
+  GivePost1,
+  GivePost2,
+  GivePost3,
+  GivePost4,
+  GivePost5,
+  HelpPost1,
+  HelpPost2,
+  HelpPost3,
+  HelpPost4,
+  HelpPost5,
   Close,
   Home,
   DefaultProfileImg,

src/pages/Community.tsx

@@ -0,0 +1,21 @@
+import Footer from '../components/common/Footer';
+import GivePosts from '../components/community/GivePosts';
+import Header from '../components/community/Header';
+import HelpPosts from '../components/community/HelpPosts';
+import React from 'react';
+import { communityTapState } from '../states/communityTapState';
+import { useRecoilValue } from 'recoil';
+
+const Community = () => {
+  const currentTap = useRecoilValue(communityTapState);
+  return (
+    <>
+      <Header />
+      {currentTap ? <HelpPosts></HelpPosts> : <GivePosts />}
+
+      <Footer />
+    </>
+  );
+};
+
+export default Community;

src/states/communityTapState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const communityTapState = atom({
+  key: 'communityTapState',
+  default: false,
+});

src/styles/theme.ts

@@ -39,7 +39,7 @@ const fonts = {
   head2: FONT({ family: 'Pretendard Variable', weight: 400, size: 1.4, letterSpacing: -0.03, lineHeight: 'normal' }),
   head3: FONT({ family: 'Pretendard Variable', weight: 600, size: 2, letterSpacing: -0.03, lineHeight: 'normal' }),
   head4: FONT({ family: 'Pretendard Variable', weight: 700, size: 2.8, letterSpacing: -0.03, lineHeight: 'normal' }),
-  head5: FONT({ family: 'Pretendard Variable', weight: 600, size: 2, letterSpacing: -0.03, lineHeight: 'normal' }),
+  head5: FONT({ family: 'Pretendard Variable', weight: 600, size: 1.6, letterSpacing: -0.03, lineHeight: 'normal' }),
 
   body2: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.6, letterSpacing: -0.03, lineHeight: 'normal' }),
   body3: FONT({ family: 'Pretendard Variable', weight: 400, size: 1.4, letterSpacing: -0.03, lineHeight: 'normal' }),