Merge pull request #12 from Kusitms-28th-Kukerton-E/feature/#5/main-v…

…olunteer Feature/#5/main volunteer
Kusitms-28th-Kukerton-E · Oct 7, 2023 · 5de20fc · 5de20fc
2 parents b86fd3e + 780508a
commit 5de20fc
Show file tree

Hide file tree

Showing 8 changed files with 440 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "4.11.0",
     "react-router-dom": "6.16.0",
     "recoil": "^0.7.7",
     "styled-components": "^6.0.8",

diff --git a/src/layout/header.tsx b/src/layout/header.tsx
@@ -1,22 +1,106 @@
-import { MainButton } from '@/components/button';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { AiOutlineSearch } from 'react-icons/ai';
+import { BiSolidUser } from 'react-icons/bi';
 
 const Header = () => {
   return (
-    <HeaderContainer>
-      <MainButton>ddididi</MainButton>
-    </HeaderContainer>
+    <HeaderBox>
+      <TextContent>
+        <StyledLink to="/">로고</StyledLink>
+        <InputBox>
+          <StyledInput placeholder="키워드를 입력하세요" type="text" />
+          <AiOutlineSearch />
+        </InputBox>
+        <StyledLink to="/">
+          <BiSolidUser />
+        </StyledLink>
+      </TextContent>
+    </HeaderBox>
   );
 };
 
-const HeaderContainer = styled.div`
-  /* background-color: skyblue; */
+const HeaderBox = styled.div`
+  /* border: 1px solid gray; */
+  /* width: 100%;
+  height: 113px; */
+  width: 1920px;
+  height: 120px;
+  margin: 0 auto;
+  /* margin-top: 10px;
+  margin-bottom: 10px; */
   display: flex;
 
-  /* padding: 39px 91px 38px 156px; */
-  /* justify-content: flex-end; */
-  /* align-items: flex-start; */
-  /* gap: 1487px; */
+  justify-content: space-between;
+`;
+
+const TextContent = styled.li`
+  color: var(--gray-900, #15191d);
+  align-items: center;
+  text-align: center;
+  /* border: 1px solid red; */
+  /* H3_B */
+  font-family: Pretendard;
+  font-size: 1rem;
+  font-style: bolder;
+  font-weight: 900;
+  line-height: 160%; /* 32px */
+
+  margin: 10px 50px;
+  width: 100%;
+  list-style: none;
+  padding: 5px;
+  display: flex;
+  justify-content: space-around;
+
+  position: relative;
+
+  color: #000;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 34px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+const StyledLink = styled(Link)``;
+
+// const SubStyledLink = styled(Link)`
+//   text-decoration: none;
+//   color: black;
+//   display: flex;
+//   white-space: nowrap;
+
+//   &:hover {
+//     color: #18afdd;
+//   }
+// `;
+
+const InputBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+const StyledInput = styled.input`
+  width: 700px;
+  height: 72px;
+  flex-shrink: 0;
+  border-radius: 25px;
+  background: var(--Silver, #f5f7fa);
+  outline: none;
+  border: none;
+
+  color: var(--D_Grey, #4d4d4d);
+  text-align: left;
+  padding-left: 63px;
+  /* Headline 4 */
+  font-family: Pretendard;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%; /* 33.6px */
 `;
 
 export default Header;
diff --git a/src/page/Home/VolunteerPage.tsx b/src/page/Home/VolunteerPage.tsx
@@ -0,0 +1,155 @@
+import styled from 'styled-components';
+import Category from './category';
+
+const VolunteerPage = () => {
+  return (
+    <VolContainer>
+      <Category title="모집 중인 자원봉사" />
+      <DataContainer>
+        <DataBox>
+          <DataTag>진로</DataTag>
+          <DataTitle>청소년 기초학습지도 자원봉사</DataTitle>
+          <DescriptBox>
+            <p>[모집기관] 동대문구 청소년 상담복지센터</p>
+            <p>[봉사기간] 2023-10-11 ~ 2023-11-11</p>
+          </DescriptBox>
+          <JoinButton>참여하기</JoinButton>
+        </DataBox>
+        <DataBox>
+          <DataTag>진로</DataTag>
+          <DataTitle>청소년 기초학습지도 자원봉사</DataTitle>
+          <DescriptBox>
+            <p>[모집기관] 동대문구 청소년 상담복지센터</p>
+            <p>[봉사기간] 2023-10-11 ~ 2023-11-11</p>
+          </DescriptBox>
+          <JoinButton>참여하기</JoinButton>
+        </DataBox>{' '}
+        <DataBox>
+          <DataTag>진로</DataTag>
+          <DataTitle>청소년 기초학습지도 자원봉사</DataTitle>
+          <DescriptBox>
+            <p>[모집기관] 동대문구 청소년 상담복지센터</p>
+            <p>[봉사기간] 2023-10-11 ~ 2023-11-11</p>
+          </DescriptBox>
+          <JoinButton>참여하기</JoinButton>
+        </DataBox>{' '}
+        <DataBox>
+          <DataTag>진로</DataTag>
+          <DataTitle>청소년 기초학습지도 자원봉사</DataTitle>
+          <DescriptBox>
+            <p>[모집기관] 동대문구 청소년 상담복지센터</p>
+            <p>[봉사기간] 2023-10-11 ~ 2023-11-11</p>
+          </DescriptBox>
+          <JoinButton>참여하기</JoinButton>
+        </DataBox>
+      </DataContainer>
+    </VolContainer>
+  );
+};
+
+const VolContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+  width: 100%;
+`;
+
+const DataContainer = styled.div`
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(3, 3fr);
+  width: 1696px;
+  gap: 43px 32px;
+  padding: 100px 120px;
+`;
+
+const DataBox = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 544px;
+  padding: 32px 10px;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  border-radius: 40px;
+  border: 2px solid var(--Grey-blue, #abbed1);
+  background: var(--White, #fff);
+`;
+
+const DataTag = styled.div`
+  display: flex;
+  align-items: flex-start;
+  border-radius: 40px;
+  border: 1px solid var(--Sub-color, #e0eaf3);
+  //
+  color: var(--Main-color2, #498dfd);
+
+  /* 본문2 */
+  font-family: Pretendard;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%; /* 36px */
+  padding: 5px 20px;
+
+  margin: 4px 0px;
+`;
+
+const DataTitle = styled.div`
+  color: var(--wireframe-80, #333);
+  font-family: Pretendard;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%; /* 48px */
+
+  margin: 4px 0px;
+`;
+
+const DescriptBox = styled.div`
+  display: flex;
+  width: 562px;
+  padding: 10px 0px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  p {
+    color: var(--wireframe-80, #333);
+    font-feature-settings:
+      'clig' off,
+      'liga' off;
+    font-family: Pretendard;
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 39px */
+  }
+`;
+
+const JoinButton = styled.div`
+  display: flex;
+  width: 400px;
+  padding: 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  border-radius: 60px;
+  background: var(--Main-color2, #498dfd);
+
+  color: var(--White, #fff);
+  text-align: center;
+
+  /* Headline 2 */
+  font-family: Pretendard;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%; /* 48px */
+
+  margin: 20px 0px;
+`;
+
+export default VolunteerPage;