[1주차] 고은 미션 제출합니다.

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+.now

README.md

@@ -1,28 +1,12 @@
-# react-profile-11th
+1st mission
 
-## 실행 방법
+README파일도 수정해야되었던걸 이제야 알았네요.
+커밋도 컴포넌트단위로 했어야 하는데 ,,처음으로 해본게 많아서 많이 서툴렀던 것 같습니다
 
-```
-npm install
-npm run start
-```
-- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다.
-- npm run dev : react 어플리케이션을 브라우저에서 실행합니다.
+따로 css파일을 생성하지 않고 파일 내부에서 컴포넌트형태로 이용할 수 있다는 점이 흥미로웠습니다.
+profiles 객체 변수를 어떻게 하나씩 뽑아야되는지도 어려워서 처음에는 하드코딩을 했었는데,
+map이라는 함수를 이용해서 spread 연산자로 분해해서 개별요소로 만들 수 있다는 것도 알게되었습니다.
+객체나 배열은 재할당하는 경우가 적어서 const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하게 작성할 수 있다는 점도 유의하겠습니다!
+flex를 적용하는부분이 아직 많이 미숙한 것 같아서 더 공부가 필요할 것 같습니다.
+다음에는 코드의 가독성을 더 높일 수 있고 운영진분들의 손이 덜 가게 노력해보겠습니다.
 
-## 배포 방법
-
-- now에 회원가입하고 now를 설치합니다.
-1. https://zeit.co 에서 회원가입합니다.
-2. 터미널에서 npm i -g now를 입력해 now를 글로벌로 설치합니다.
-3. 명령 프롬프트에서 프로젝트 폴더에 들어간 후 now를 입력합니다.
-4. ID/PW를 입력합니다.
-5. zeit 가입시 입력한 이메일에서 인증 링크를 클릭합니다. <인증완료>
-6. 다시 프로젝트 폴더에서 now를 입력하면 자동으로 생성된 url에 배포됩니다!
-
-## 미션 설명
-
-[미션 설명](./docs/mission-description/README.md)
-
-## 미션 제출 방법
-
-[미션 제출 방법](./docs/how-to-submit/README.md)

pages/index.js

@@ -1,18 +1,89 @@
 import React from 'react';
-
-import ProfileCard from '../components/profile-card';
+import { render } from 'react-dom';
 import styled from 'styled-components';
 
+import ProfileCard from '../src/components/profile-card';
+
+const profiles = [
+	{
+		id: 1,
+		name: '박효진',
+		age: 23,
+		role: '개발 파트장',
+		univ: '이화여자',
+		major: '컴퓨터공학',
+		phoneNum: '010-5106-6785',
+		email: 'gywls517@gmail.com',
+		githubLink: 'https://github.com/gywlsp',
+		imageUrl:
+			'https://static.wixstatic.com/media/69e8c2_982cbc3d638e49889d8ba64b3c70a6e3~mv2.jpeg/v1/crop/x_199,y_0,w_543,h_560/fill/w_350,h_347,al_c,q_80,usm_0.66_1.00_0.01/%E1%84%8E%E1%85%AC%E1%84%92%E1%85%AD%E1%84%8C%E1%85%B5%E1%86%AB.webp'
+	},
+	{
+		id: 2,
+		name: '양병훈',
+		age: 25,
+		univ: '서강',
+		role: '운영 팀원',
+		major: '컴퓨터공학',
+		phoneNum: '010-8200-1760',
+		email: 'ybh1760@gmail.com',
+		githubLink: 'https://github.com/ybh1760',
+		imageUrl:
+			'https://static.wixstatic.com/media/69e8c2_3de533d9d5ee4bbaa5fe0c360e8f6a23~mv2.jpeg/v1/crop/x_0,y_456,w_3024,h_3119/fill/w_351,h_347,al_c,q_80,usm_0.66_1.00_0.01/%E1%84%8B%E1%85%A3%E1%86%BC%E1%84%87%E1%85%A7%E1%86%BC%E1%84%92%E1%85%AE%E1%86%AB.webp'
+	},
+	{
+		id: 3,
+		name: '이수완',
+		age: 22,
+		univ: '이화여자',
+		role: '홍보 파트장',
+		major: '컴퓨터공학',
+		phoneNum: '010-5503-7994',
+		email: '2swan965@gmail.com',
+		githubLink: 'https://github.com/lee-soowan65',
+		imageUrl:
+			'https://static.wixstatic.com/media/982853_a188a89325cb4a20b6a487f7e3de5d14~mv2.jpg/v1/crop/x_13,y_1126,w_2998,h_2829/fill/w_351,h_335,al_c,q_80,usm_0.66_1.00_0.01/4A2633DE-3322-4CDC-8F8C-35288D83C43B-500.webp'
+	},
+	{
+		id: 4,
+		name: '최수민',
+		age: 26,
+		univ: '서강',
+		role: '부회장',
+		major: '컴퓨터공학',
+		phoneNum: '010-4413-1261',
+		email: 'react@kakao.com',
+		githubLink: 'https://github.com/greatSumini',
+		imageUrl:
+			'https://static.wixstatic.com/media/69e8c2_43446e9ac65e4f129083516175259a2b~mv2.jpeg/v1/crop/x_0,y_910,w_3024,h_3122/fill/w_347,h_351,al_c,q_80,usm_0.66_1.00_0.01/%E1%84%8E%E1%85%AC%E1%84%89%E1%85%AE%E1%84%86%E1%85%B5%E1%86%AB.webp'
+	}
+];
+
 export default function Home() {
-  return (
-    <Wrapper>
-      나는 홈이야
-      <ProfileCard />
-    </Wrapper>
-  );
+	const List = profiles.map((prop) => <ProfileCard key={prop.id} {...prop} />);
+
+	return (
+		<Bg>
+			<Subject>CEOS 프론트엔드 운영진</Subject>
+			<CardSection>{List}</CardSection>
+		</Bg>
+	);
 }
+const CardSection = styled.div`
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+`;
+
+const Bg = styled.div`
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background-color: rgb(230, 255, 255);
+	padding: 50px 100px;
+`;
 
-const Wrapper = styled.div`
-  background-color: blue;
-  height: 100vh;
+const Subject = styled.div`
+	font-size: 28px;
+	margin-bottom: 20px;
 `;