[1주차] 유현우 미션 제출합니다.

.gitignore

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

README.md

@@ -1,23 +1,6 @@
-# react-profile-11th
+# react-profile-11th 개발 프론트앤드 유현우
 
-## 실행 방법
-
-```
-npm install
-npm run start
-```
-- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다.
-- npm run dev : react 어플리케이션을 브라우저에서 실행합니다.
-
-## 배포 방법
-
-- now에 회원가입하고 now를 설치합니다.
-1. https://zeit.co 에서 회원가입합니다.
-2. 터미널에서 npm i -g now를 입력해 now를 글로벌로 설치합니다.
-3. 명령 프롬프트에서 프로젝트 폴더에 들어간 후 now를 입력합니다.
-4. ID/PW를 입력합니다.
-5. zeit 가입시 입력한 이메일에서 인증 링크를 클릭합니다. <인증완료>
-6. 다시 프로젝트 폴더에서 now를 입력하면 자동으로 생성된 url에 배포됩니다!
+> 배포된 주소 : https://react-profile-11th.puba5.now.sh
 
 ## 미션 설명
 
@@ -26,3 +9,35 @@ npm run start
 ## 미션 제출 방법
 
 [미션 제출 방법](./docs/how-to-submit/README.md)
+
+## PR
+
+> ### 제목 : [1주차] 유현우 미션 제출합니다. <br>
+>
+> ### 내용 : <br>
+>
+> 안녕하세요.
+> 과제 진행하면서 중간중간에 모르는게 많아 그것들을 공부하느라 생각보다 시간이 많이 걸렸습니다. <br>
+>
+> 가장 처음에 에러난 것은 profile-card.js의 경로 문제였는데, React에서는 오류가 코드 어느 부분에서 오류가 났다!라고 뜨는 것도 있지만, 그냥 글로만 표시된다는 것을 알게 되었고, 이후 빌드할 때 오류를 좀 더 쉽게 해결할 수 있었던 것 같습니다. <br>
+>
+> 두 번째로 모르는 것이 나왔을 때는 zeit 배포할 때였는데, Next.js를 사용할 것인지 물어봐서 "나는 React를 하는데 왜 Next 사용하라고 하지?" 라는 의문을 품고 검색해보니 Nextjs는 React를 SSR으로 렌더링 해주는 프레임워크고, 그 렌더링된 것을 zeit으로 배포해준다는 것을 알게되었습니다. <br>
+>
+> 세번째 고비는 컴포넌트 하나만 만들고 컴포넌트 재활용을 어떻게 할지였습니다. 정확히 말하면 프로필 카드들은 4개가 반복되므로 이걸 어떻게 만들 수 있을까 고민했었습니다. 물론 4개를 직접 4번 적어줄 수 있었지만, Vue를 공부하면서 "컴포넌트에 for과 if를 사용할 수 있고, 이는 React와 비슷하다"라는 말이 기억나서 컴포넌트를 반복적으로 표현하는 방법을 찾아봤습니다. 다행히 component iteration이라 검색하니 바로 나왔지만, 정확한 개념적인 설명 없이 코드만 있는 설명만 많아서, map 함수를 사용하는 코드를 하나하나 이해하고 고쳐보면서 미션에 알맞게 수정하는게 약간의 고비였습니다. <br>
+> 이때 React스러운 코드란 무엇인가 고민했었는데, 아직도 정확히 React스러운 코드가 무엇인지 확실하게 말하긴 어렵고 더욱 더 공부해봐야겠지만, React스러운 코드란
+>
+> 1. 컴포넌트를 만들어서 재활용할 수 있게 하는 것
+> 2. 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달하는 것
+> 3. 함수를 사용하여 컴포넌트들을 만드는 것
+>
+> 이라고 생각하여 최대한 이런 방식으로 짜도록 노력했습니다.
+>
+> 네번째 가장 오래 걸렸던 과정은 CSS...대충 큰 틀로 추상적으로 코드가 돌아가서, 데이터를 잘 띄우는 위의 단계까지는 그래도 얼마 걸리지 않고 금방했지만, 디자인을 그대로 맞추는 과정이 상대적으로 힘들었습니다. 사실 CSS는 기본 개념만 공부하고, 활용하는 것은 따로 배우지 않고 필요할 때마다 그때 그때 찾아봤었는데, 이번에 느낀 것은 이것도 좀 공부해야겠다고 느꼈습니다. 디자인 시안이 주어지면 그것을 자유자재로 만들어주어야하는데 CSS 모르면 삽질 좀 많이 할 것 같아서 시간이 나면 체계적?으로 배워야하는 필요성을 느꼈습니다. <br>
+>
+> 다섯 번째로는 선택 미션을 할 때 나이 순 배열이었는데, Javascript에서 배열을 선언할 때, const로 선언했음에도 불구하고 sort가 되는게 신기했습니다. 직관적으로는 const니까 순서도 안 바뀔 줄 알았는데 sort가 너무 잘 되서 문제 없이 선택 미션을 할 수 있었습니다. <br>
+>
+> 그리고 React 외적인 부분에서는 커밋이나 변수명 정하기 같은 부분을 정하기가 너무 어려워서 이 부분도 여러 경험을 쌓으면서 학습을 다짐하게 되었던 과제였습니다.
+
+##추가사항
+
+> 필수 결과 화면과 선택 결과 화면에서 "사진 크기" 같은 일부 디자인이 다른데, 이런 부분은 필수 결과 화면에 맞추어 올렸습니다.

pages/index.js

@@ -1,18 +1,99 @@
-import React from 'react';
+import React from "react";
 
-import ProfileCard from '../components/profile-card';
-import styled from 'styled-components';
+import ProfileCard from "../src/components/profile-card";
+import styled from "styled-components";
 
 export default function Home() {
   return (
     <Wrapper>
-      나는 홈이야
-      <ProfileCard />
+      <Title>CEOS 프론트엔드 운영진</Title>
+      <ProfileCardsWrapper>
+        {profiles
+          .filter((profile) => profile.role !== "부회장")
+          .sort((a, b) => {
+            return a.age - b.age;
+          })
+          .map((profile) => (
+            <ProfileCard key={profile.id} {...profile} />
+          ))}
+      </ProfileCardsWrapper>
+      ;
     </Wrapper>
   );
 }
 
+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",
+  },
+];
+
 const Wrapper = styled.div`
-  background-color: blue;
-  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: rgb(230, 255, 255);
+  padding: 5rem 10rem;
+`;
+
+const ProfileCardsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const Title = styled.div`
+  font-size: 2.8rem;
+  margin-bottom: 2rem;
 `;

src/components/profile-card.js

@@ -1,66 +1,102 @@
 import React from "react";
 import styled from "styled-components";
 
-export default function ProfileCard() {
-  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"
-    }
-  ];
-
-  return <Wrapper>안녕 나는 프로필 카드</Wrapper>;
+export default function ProfileCard(props) {
+  const {
+    id,
+    name,
+    age,
+    role,
+    univ,
+    major,
+    phoneNum,
+    email,
+    githubLink,
+    imageUrl,
+  } = props;
+  return (
+    <CardWrapper>
+      <Profile>
+        <DescWrapper>
+          <div>
+            <Name>
+              {name}({age})
+            </Name>
+            <Part>{role}</Part>
+            <Univ>
+              {univ}대학교 {major}과
+            </Univ>
+          </div>
+          <div>
+            <PhoneNum>{phoneNum}</PhoneNum>
+            <Email>{email}</Email>
+            <GithubLink href={githubLink}>{githubLink}</GithubLink>
+          </div>
+        </DescWrapper>
+        <ProfileImage src={imageUrl} />
+      </Profile>
+      <ClubName>신촌 연합 IT 창업 동아리 CEOS</ClubName>
+    </CardWrapper>
+  );
 }
 
-const Wrapper = styled.div`
-  background-color: red;
-  font-size: 18px;
+const CardWrapper = styled.div`
+  width: 45%;
+  background-color: rgb(255, 255, 255);
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border: 1px solid rgb(204, 204, 204);
+  border-radius: 1.5rem;
+`;
+
+const Profile = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+`;
+
+const ClubName = styled.div`
+  display: flex;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  font-size: 1.6rem;
+`;
+
+const ProfileImage = styled.img`
+  width: 40%;
+  height: 40%;
+`;
+
+const DescWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  width: 50%;
+`;
+
+const Name = styled.div`
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+`;
+const Univ = styled.div`
+  font-size: 1.4rem;
+`;
+const Part = styled.div`
+  font-size: 1.4rem;
+  font-weight: bold;
+`;
+const PhoneNum = styled.div`
+  font-size: 1.4rem;
+  color: rgb(0, 0, 153);
+`;
+const Email = styled.div`
+  font-size: 1.4rem;
+  color: rgb(0, 0, 153);
+`;
+const GithubLink = styled.a`
+  font-size: 1.4rem;
 `;