Merge pull request #12 from 2023WISCOM/feature/#11-project

refactor: project 페이지 수정

WISCOM/src/components/Project/Developer.jsx

@@ -1,19 +1,30 @@
-import './Developer.css';
+import * as D from './ProjectStyle';
 import DeveloperProfile from './DeveloperProfile.jsx';
 
+import BackBlue from '../../img/Project/BackgroundBlue.svg';
+import BackGreen from '../../img/Project/BackgroundGreen.svg';
+import BackYellow from '../../img/Project/BackgroundYellow.svg';
+
+const backgroundImages = [BackGreen, BackBlue, BackGreen, BackYellow];
+
+// 재사용 쉽도록 수정
 const Developer = () => {
   return (
-    <div className="developer-container">
-      <h1>DEVELOPER</h1>
-      <div className="developer-up-box">
-        <DeveloperProfile />
-        <DeveloperProfile />
-      </div>
-      <div className="developer-down-box">
-        <DeveloperProfile />
-        <DeveloperProfile />
-      </div>
-    </div>
+    <D.DeveloperContainer>
+      <D.DeTitle>DEVELOPER</D.DeTitle>
+      <D.UpBox>
+        {backgroundImages.slice(0, 2).map((bg, index) => (
+          <DeveloperProfile key={index} bg={bg} />
+        ))}
+      </D.UpBox>
+
+      <D.DownBox>
+        {backgroundImages.slice(2).map((bg, index) => (
+          <DeveloperProfile key={index} bg={bg} />
+        ))}
+      </D.DownBox>
+    </D.DeveloperContainer>
   );
 };
-export default DeveloperProfile;
+
+export default Developer;

WISCOM/src/components/Project/DeveloperProfile.jsx

@@ -1,15 +1,12 @@
-import './DeveloperProfile.css';
-const DeveloperProfile = ({ developerName, backgroundSrc, developerImgSrc }) => {
+import * as DP from './ProjectStyle';
+import Ddoy from '../../img/Project/DDOY.svg';
+
+const DeveloperProfile = (props) => {
   return (
-    <div className="developer-profile">
-      <div className="developer-background">
-        <img src={backgroundSrc} alt="배경 이미지" />
-      </div>
-      <div className="developer-image">
-        <img src={developerImgSrc} alt="개발자 이미지" />
-      </div>
-      <p>{developerName}</p>
-    </div>
+    <DP.DeveloperProfileContainer>
+      <DP.DeveloperImg src={Ddoy} url={props.bg} alt="개발자 이미지" />
+      <DP.Name>김채현</DP.Name>
+    </DP.DeveloperProfileContainer>
   );
 };
 

WISCOM/src/components/Project/IntroWork.jsx

@@ -1,11 +1,13 @@
-import './IntroWork.css';
+import * as I from './ProjectStyle';
 
-const IntroWork = ({ workDescription }) => {
+const IntroWork = () => {
   return (
-    <div className="intro-Work">
-      <h1>"{workDescription}"</h1>
-    </div>
-    //티스토리 코드 참고 & 수정
+    <I.IntroContainer>
+      <I.PrjDetail>workDescription</I.PrjDetail>
+
+      {/* 티스토리 코드 참고 & 수정 */}
+      <>여기다가 이미지들 넣어주세요옹~~!</>
+    </I.IntroContainer>
   );
 };
 export default IntroWork;

WISCOM/src/components/Project/ProjectStyle.jsx

@@ -1 +1,106 @@
 import styled from 'styled-components';
+
+/*WorkInof 부분*/
+
+export const WorkContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  font-size: 4rem;
+  color: #20217d;
+  margin-bottom: 11.6rem;
+  margin-top: 5.7rem;
+`;
+
+export const WorkLogo = styled.img`
+  border-radius: 320px;
+  width: 20rem;
+  height: 20rem;
+`;
+
+export const WorkInfoContent = styled.div`
+  margin-left: 8.2rem;
+`;
+
+export const Text = styled.div`
+  color: #20217d;
+  text-align: center;
+  font-size: ${(props) => props.fs};
+  font-weight: 600;
+  line-height: normal;
+`;
+
+/*IntroWork 부분*/
+
+export const IntroContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  margin-bottom: 40rem;
+`;
+
+export const PrjDetail = styled.div`
+  font-size: 4rem;
+  color: #20217d;
+  font-weight: 700;
+  margin-bottom: 9rem;
+`;
+
+/*Developer 부분*/
+export const DeveloperContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 5rem;
+  padding-right: 5rem;
+`;
+
+export const DeTitle = styled.div`
+  color: #20217d;
+  font-size: 60px;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 90px;
+`;
+
+export const UpBox = styled.div`
+  display: flex;
+  margin-bottom: 100px;
+`;
+export const DownBox = styled.div`
+  display: flex;
+  flex-direction: row-reverse;
+`;
+
+/*DeveloperProfile 부분*/
+export const DeveloperProfileContainer = styled.div`
+  width: 20rem;
+  height: 20rem;
+  font-size: 3rem;
+  color: #20217d;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 15rem;
+  margin-right: 15rem;
+`;
+
+export const Background = styled.div`
+  width: 300px;
+  height: 300px;
+
+  background-image: url(${(props) => props.url});
+`;
+
+export const DeveloperImg = styled.img`
+  width: 170px;
+  height: 170px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url(${(props) => props.url});
+
+  margin-bottom: 2.5rem;
+`;
+
+export const Name = styled.div``;

WISCOM/src/components/Project/WorkInfo.jsx

@@ -1,18 +1,20 @@
+import * as W from './ProjectStyle';
+import Circle from '../../img/Project/Circle.svg';
+
 const HashTag = ({ hashtags }) => {};
 
-const WorkInfo = ({ workLogoSrc, WorkTitle, teamName, text }) => {
+const WorkInfo = () => {
   return (
-    <div className="Work-container">
-      <div className="work-logo">
-        <img src={workLogoSrc} alt="작품 로고" />
-      </div>
-      <div className="work-info">
-        <h1>{WorkTitle}</h1>
-        <p>{teamName}</p>
-      </div>
-      <div className="hash-tag-up-line">{text}</div>
-      <div className="hash-tag-down-line">{text}</div>
-    </div>
+    <W.WorkContainer>
+      <W.WorkLogo src={Circle} alt="작품 로고" />
+
+      <W.WorkInfoContent>
+        <W.Text fs="60px">WorkTitle</W.Text>
+        <W.Text fs="48px">teamName</W.Text>
+        {/* <div className="hash-tag-up-line">해시태그</div>
+        <div className="hash-tag-down-line">해시태그</div> */}
+      </W.WorkInfoContent>
+    </W.WorkContainer>
   );
 };
 export default WorkInfo;

WISCOM/src/page/Project.jsx

@@ -1,3 +1,21 @@
+import styled from 'styled-components';
+
+import WorkInfo from '../components/Project/WorkInfo';
+import IntroWork from '../components/Project/IntroWork';
+import Developer from '../components/Project/Developer';
+
 export default function Project() {
-  return <>프로젝트페이지</>;
+  return (
+    <ProjectWrapper>
+      <WorkInfo />
+      <IntroWork />
+      <Developer />
+    </ProjectWrapper>
+  );
 }
+
+const ProjectWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`;