feat: #59-틀 완성

Alpha-e-Um · Jun 4, 2024 · 4facc9b · 4facc9b
1 parent 5bdec47
commit 4facc9b
Show file tree

Hide file tree

Showing 5 changed files with 278 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -15,6 +15,7 @@ import ContestDetail from "./pages/ContestDetailPage/contestDetailPage";
 import TeamMemberRecruitmentNotice from "./components/TeamMemberRecruitmentNotice/teamMemberRecruitmentNotice";
 import RegisterMember from "./pages/RegisterMember/registerMember";
 import MyTeamDetail from "./components/MyPage/MyTeamDetail/myTeamDetail";
+import ResumeDetail from "./pages/ResumeDetail/resumeDetail";
 
 const App = () => {
   const [userInfo, setUserInfo] = useRecoilState(userInfoState);
@@ -49,6 +50,7 @@ const App = () => {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Main />} />
+          <Route path="/resumeDetail" element={<ResumeDetail />} />
           <Route path="/mypage/*" element={<MyPage />} />
           <Route path="/mypage/team/:id" element={<MyTeamDetail />} />
           <Route path="/team" element={<TeamSearch />} />

diff --git a/src/components/Resume/resume.js b/src/components/Resume/resume.js
@@ -0,0 +1,108 @@
+import { Explain } from "../../pages/ResumeDetail/styles";
+import { ColumnList, Gray } from "./styles";
+import { Container, Title, Tag, Data } from "./styles";
+
+const Resume = () => {
+  return (
+    <Container style={{ width: "1000px" }}>
+      <Title>이력서 정보</Title>
+
+      <div
+        style={{
+          width: "100%",
+          margin: "30px 20px",
+          padding: "30px 0px 0px 0px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "40px",
+          border: "solid",
+          borderWidth: "2px 0 0 0",
+          borderColor: "#C9C9C9",
+        }}
+      >
+        <Title>기본 정보</Title>
+        <Container style={{ width: "825px", alignItems: "center" }}>
+          <div style={{ display: "flex", gap: "28px" }}>
+            <ColumnList style={{ marginTop: "10px", gap: "42px" }}>
+              <Tag>이름</Tag>
+              <Tag>전화번호</Tag>
+              <Tag>생년월일</Tag>
+              <Tag>소속/학교</Tag>
+              <Tag>거주 지역</Tag>
+            </ColumnList>
+            <ColumnList style={{ marginRight: "100px", gap: "25px" }}>
+              <Data>이름</Data>
+              <Data style={{ width: "162px" }}>010-1234-1234</Data>
+              <Data style={{ width: "162px" }}>2000.01.01</Data>
+              <Data style={{ width: "162px" }}>국민대학교</Data>
+              <Data style={{ width: "162px" }}>거주지역</Data>
+            </ColumnList>
+            <ColumnList style={{ marginTop: "10px", gap: "42px" }}>
+              <Tag>성</Tag>
+              <Tag>MBTI</Tag>
+            </ColumnList>
+            <ColumnList style={{ gap: "25px" }}>
+              <Data>성</Data>
+              <Data>ENFT</Data>
+            </ColumnList>
+          </div>
+        </Container>
+        <Title>이력서 정보</Title>
+        <Container style={{ width: "825px" }}>
+          <div style={{ marginTop: "30px", display: "flex", gap: "40px" }}>
+            <ColumnList style={{ gap: "10px" }}>
+              <Tag>직군</Tag>
+              <Data style={{ width: "332px", marginBottom: "30px" }}>
+                대분류
+              </Data>
+              <Tag>학점</Tag>
+              <Data style={{ width: "332px", marginBottom: "30px" }}>
+                학점 추가
+              </Data>
+            </ColumnList>
+
+            <ColumnList style={{ gap: "10px" }}>
+              <Tag>소분류</Tag>
+              <Data style={{ width: "332px", marginBottom: "30px" }}>
+                소분류
+              </Data>
+              <Tag>스킬</Tag>
+              <Data style={{ width: "332px", marginBottom: "30px" }}>
+                스킬 추가
+              </Data>
+            </ColumnList>
+          </div>
+        </Container>
+
+        <Container style={{ width: "825px", gap: "20px" }}>
+          <Tag>수상/자격증</Tag>
+          <div
+            style={{
+              width: "100%",
+              paddingTop: "20px",
+              border: "solid",
+              borderWidth: "2px 0 0 0",
+              borderColor: "#C9C9C9",
+              display: "flex",
+              gap: "20px",
+            }}
+          >
+            <Tag>수상자격증 이름</Tag>
+            <Gray>2000.01.01 - 2000.01.01</Gray>
+          </div>
+          <Explain>수상 자격증 내용 </Explain>
+        </Container>
+
+        <Container style={{ width: "825px", gap: "20px" }}>
+          <Tag>자기소개서</Tag>
+          <Explain>자기소개서 내용</Explain>
+          <Tag>첨부 파일</Tag>
+          <Explain>첨부파일들 이름</Explain>
+        </Container>
+      </div>
+    </Container>
+  );
+};
+
+export default Resume;
diff --git a/src/components/Resume/styles.js b/src/components/Resume/styles.js
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  padding: 20px 40px;
+  border: solid;
+  border-radius: 9px;
+  border-color: #c9c9c9;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const ColumnList = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const Title = styled.label`
+  font-size: 24px;
+  font-weight: 700;
+`;
+
+export const Tag = styled.label`
+  font-size: 18px;
+  font-weight: 600;
+`;
+
+export const Data = styled.label`
+  padding: 8px 16px;
+
+  border: 2px solid;
+  border-radius: 8px;
+  border-color: #c9c9c9;
+
+  font-size: 16px;
+  font-weight: 400;
+`;
+
+export const Gray = styled.label`
+  font-size: 18px;
+  font-weight: 500;
+  color: #6d758f;
+`;
diff --git a/src/pages/ResumeDetail/resumeDetail.js b/src/pages/ResumeDetail/resumeDetail.js
@@ -0,0 +1,76 @@
+import Navigation from "../../components/Navigation/navigation";
+import Resume from "../../components/Resume/resume";
+import { BlueButton, ColumnGroup, Container, Gray, Tag, Title } from "./styles";
+
+const ResumeDetail = () => {
+  return (
+    <>
+      <Navigation></Navigation>
+
+      <div
+        style={{
+          marginTop: "30px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 50,
+        }}
+      >
+        <div
+          style={{ width: "1000px", display: "flex", alignItems: "flex-start" }}
+        >
+          <Title>팀원 구하기</Title>
+        </div>
+        <Container style={{ width: "1000px" }}>
+          <Title>팀원정보</Title>
+
+          <div
+            style={{
+              width: "100%",
+              margin: "30px 0px",
+              padding: "30px 0px 0px 0px",
+              display: "flex",
+              gap: "40px",
+              border: "solid",
+              borderWidth: "2px 0 0 0",
+              borderColor: "#C9C9C9",
+            }}
+          >
+            <div
+              style={{
+                width: "236px",
+                height: "236px",
+                backgroundColor: "#C9C9C9",
+                borderRadius: "9px",
+              }}
+            />
+            <ColumnGroup style={{ gap: "45px" }}>
+              <Tag>이름</Tag>
+              <Tag>구인 분야</Tag>
+              <Tag>구인 유형</Tag>
+              <Tag>한줄 소개</Tag>
+            </ColumnGroup>
+            <ColumnGroup style={{ gap: "45px" }}>
+              <Gray>이름</Gray>
+              <Gray>구인 분야</Gray>
+              <Gray>구인 유형</Gray>
+              <Gray>한줄 소개</Gray>
+            </ColumnGroup>
+          </div>
+          <div
+            style={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "flex-end",
+            }}
+          >
+            <BlueButton>1:1 채팅걸기</BlueButton>
+          </div>
+        </Container>
+        <Resume />
+      </div>
+    </>
+  );
+};
+
+export default ResumeDetail;
diff --git a/src/pages/ResumeDetail/styles.js b/src/pages/ResumeDetail/styles.js
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  padding: 20px 40px;
+  border: solid;
+  border-radius: 9px;
+  border-color: #c9c9c9;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const ColumnGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const Title = styled.label`
+  font-size: 32px;
+  font-weight: 700;
+`;
+
+export const Tag = styled.label`
+  font-size: 18px;
+  font-weight: 600;
+`;
+
+export const Gray = styled.label`
+  font-size: 18px;
+  font-weight: 500;
+  color: #6d758f;
+`;
+
+export const Explain = styled.label`
+  font-size: 18px;
+  font-weight: 300;
+`;
+
+export const BlueButton = styled.button`
+  padding: 7px 15px;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #377bff;
+`;