From be6d4aa025a4e6b1838a4fa227eb80e44d25e576 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Tue, 31 Mar 2020 22:22:15 +0900 Subject: [PATCH 01/18] =?UTF-8?q?Zeit=EC=9D=84=20=ED=86=B5=ED=95=B4=20?= =?UTF-8?q?=EB=B0=B0=ED=8F=AC=20=EC=84=B1=EA=B3=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 ++ pages/index.js | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 20fccdd..fd07293 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,5 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local + +.now \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 9b98e19..846fabe 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,7 @@ -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 ( From b38b6c84434730414ad981af70df2e9b94251678 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Tue, 31 Mar 2020 22:24:52 +0900 Subject: [PATCH 02/18] =?UTF-8?q?README=20=EC=88=98=EC=A0=95,=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=201=20=EB=AC=B8=EC=A0=9C=EC=A0=90,=20=ED=98=84?= =?UTF-8?q?=EC=9E=AC=20=EB=B0=B0=ED=8F=AC=EB=90=9C=20=EC=A3=BC=EC=86=8C=20?= =?UTF-8?q?https://react-profile-11th.puba5.now.sh?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 563f1bf..ca64bc6 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,14 @@ 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를 입력합니다. @@ -26,3 +28,7 @@ npm run start ## 미션 제출 방법 [미션 제출 방법](./docs/how-to-submit/README.md) + +## 문제들 + +1. 의도한 것인지는 모르겠으나 index.js에서 파일 경로가 제대로 되어 있지 않아서 초반에 좀 헤맸습니다. https://react-profile-11th.puba5.now.sh From 1a0ed6c4392da6d76e6d4e55615534e0f0fa6db5 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Tue, 31 Mar 2020 23:18:14 +0900 Subject: [PATCH 03/18] =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EA=B3=BC=20BOX?= =?UTF-8?q?=EB=93=A4=20=EC=98=88=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20CSS=20=EB=A7=9E=EC=B6=A4=20=EC=98=88?= =?UTF-8?q?=EC=8B=9C=EB=A1=9C=20=EC=A4=80=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20CSS=20=EC=98=B5=EC=85=98=20=EC=B0=BE?= =?UTF-8?q?=EC=95=84=EC=84=9C=20=EB=A7=9E=EC=B6=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 +++++++++-- pages/index.js | 9 ++++++--- src/components/profile-card.js | 17 ++++++++++++++--- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ca64bc6..b0ccc54 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -# react-profile-11th +# react-profile-11th 유현우 + +> 배포된 주소 : +> https://react-profile-11th.puba5.now.sh ## 실행 방법 @@ -31,4 +34,8 @@ npm run start ## 문제들 -1. 의도한 것인지는 모르겠으나 index.js에서 파일 경로가 제대로 되어 있지 않아서 초반에 좀 헤맸습니다. https://react-profile-11th.puba5.now.sh +1. 의도한 것인지는 모르겠으나 index.js에서 파일 경로가 제대로 되어 있지 않아서 초반에 좀 헤맸습니다. + +## 의문점 + +1. 왜 NEXT.JS를 사용하여 배포를 했을까?? 현재는 백앤드와 연동이 없어서 정적 배포를 하기 위해 그런 것일까?? diff --git a/pages/index.js b/pages/index.js index 846fabe..4e89227 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,13 +6,16 @@ import styled from "styled-components"; export default function Home() { return ( - 나는 홈이야 + CEOS 프론트엔드 운영진 ); } 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; `; diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 6243f67..de39cff 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -57,10 +57,21 @@ export default function ProfileCard() { } ]; - return 안녕 나는 프로필 카드; + return ( + + {profiles[0].name} ({profiles[0].age}){" "} + + ); } const Wrapper = styled.div` - background-color: red; - font-size: 18px; + width: 45%; + background-color: rgb(255, 255, 255); + margin-bottom: 2rem; + padding: 1.5rem; + border-width: 1px; + border-style: solid; + border-color: rgb(204, 204, 204); + border-image: initial; + border-radius: 1.5rem; `; From b46ffabf13bb2cb7d9bd74de6632d03e5008e7d3 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Thu, 2 Apr 2020 01:28:17 +0900 Subject: [PATCH 04/18] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=98=EB=B3=B5=EC=9D=84=20=ED=86=B5=ED=95=B4=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=EB=93=A4=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20CSS=20?= =?UTF-8?q?=EC=96=91=EC=8B=9D=20=EB=A7=9E=EC=B6=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile-card.js | 56 ++++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/src/components/profile-card.js b/src/components/profile-card.js index de39cff..323b5ff 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { render } from "react-dom"; export default function ProfileCard() { const profiles = [ @@ -57,14 +58,50 @@ export default function ProfileCard() { } ]; + return {mapToComponent(profiles)}; +} + +const mapToComponent = data => { + return data.map((person, i) => { + return ; + }); +}; + +function CardTemplate(props) { return ( - - {profiles[0].name} ({profiles[0].age}){" "} - +
+ + + + + + + +
); } +function ProfileDesc(props) { + return
{props.profile.name}
; +} + +function ProfileImg(props) { + return ; +} + +function ProfileContact(props) { + return
{props.profile.email}
; +} + const Wrapper = styled.div` + display: flex; + flex-direction: row; + -webkit-box-pack: justify; + justify-content: space-between; + flex-wrap: wrap; +`; + +const InnerWrapper = styled.div` width: 45%; background-color: rgb(255, 255, 255); margin-bottom: 2rem; @@ -75,3 +112,16 @@ const Wrapper = styled.div` border-image: initial; border-radius: 1.5rem; `; + +const ProfileImage = styled.img` + width: 45%; + height: 45%; +`; + +const ProfileDescImg = styled.div` + display: flex; + flex-direction: row; + -webkit-box-pack: justify; + justify-content: space-between; + margin-bottom: 1.5rem; +`; From 782808861cb967c18aa86a493f4f3ed952efb81c Mon Sep 17 00:00:00 2001 From: WooYoo Date: Thu, 2 Apr 2020 11:01:44 +0900 Subject: [PATCH 05/18] =?UTF-8?q?CSS=20=EC=96=91=EC=8B=9D=20=EB=A7=9E?= =?UTF-8?q?=EC=B6=94=EA=B8=B0,=20=ED=98=84=EC=9E=AC=20page=20optimize=20?= =?UTF-8?q?=EC=95=88=EB=90=98=EC=84=9C=20=EC=9E=84=EC=8B=9C=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 7 ++++++- src/components/profile-card.js | 15 +++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/pages/index.js b/pages/index.js index 4e89227..202f544 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,7 +6,7 @@ import styled from "styled-components"; export default function Home() { return ( - CEOS 프론트엔드 운영진 + CEOS 프론트엔드 운영진 ); @@ -19,3 +19,8 @@ const Wrapper = styled.div` background-color: rgb(230, 255, 255); padding: 5rem 10rem; `; + +const Title = styled.div` + font-size: 2.8rem; + margin-bottom: 2rem; +`; diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 323b5ff..0ae186d 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -75,24 +75,24 @@ function CardTemplate(props) { - ); } function ProfileDesc(props) { - return
{props.profile.name}
; + return ( + + + + + ); } function ProfileImg(props) { return ; } -function ProfileContact(props) { - return
{props.profile.email}
; -} - const Wrapper = styled.div` display: flex; flex-direction: row; @@ -125,3 +125,6 @@ const ProfileDescImg = styled.div` justify-content: space-between; margin-bottom: 1.5rem; `; + +const NamePartUniv = styled.div``; +const ProfileContact = styled.div``; From 46bd280c586f13f499d4c26e8ee1cdde9633e20e Mon Sep 17 00:00:00 2001 From: WooYoo Date: Thu, 2 Apr 2020 15:22:34 +0900 Subject: [PATCH 06/18] =?UTF-8?q?Div=20=EB=AC=B8=EC=A0=9C=EB=A1=9C=20CSS?= =?UTF-8?q?=20=EC=96=91=EC=8B=9D=20=EC=95=88=20=EB=A7=9E=EC=B6=94=EC=96=B4?= =?UTF-8?q?=EC=A7=80=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile-card.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 0ae186d..6063e8d 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -69,23 +69,21 @@ const mapToComponent = data => { function CardTemplate(props) { return ( -
- - - - - - -
+ + + + + + ); } function ProfileDesc(props) { return ( - - - - +
+ 안녕 + 하세요 +
); } @@ -126,5 +124,9 @@ const ProfileDescImg = styled.div` margin-bottom: 1.5rem; `; -const NamePartUniv = styled.div``; -const ProfileContact = styled.div``; +const NamePartUniv = styled.div` + font-size: 2.8rem; +`; +const ProfileContact = styled.div` + font-size: 2.8rem; +`; From 7aeec908fda417380c705776f3d632f1b3a3d01a Mon Sep 17 00:00:00 2001 From: WooYoo Date: Thu, 2 Apr 2020 15:37:38 +0900 Subject: [PATCH 07/18] Add few
for make required design --- src/components/profile-card.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 6063e8d..4d9b9d4 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -81,8 +81,16 @@ function CardTemplate(props) { function ProfileDesc(props) { return (
- 안녕 - 하세요 + +
{props.profile.name}
+
{props.profile.role}
+
{props.profile.univ}
+ + +
{props.profile.phoneNum}
+
{props.profile.email}
+ {props.profile.githubLink} +
); } @@ -125,8 +133,8 @@ const ProfileDescImg = styled.div` `; const NamePartUniv = styled.div` - font-size: 2.8rem; + font-size: 1.5rem; `; const ProfileContact = styled.div` - font-size: 2.8rem; + font-size: 1.5rem; `; From c87cff8341f6a8d7c335569f1e25bf99f1035938 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Fri, 3 Apr 2020 01:24:56 +0900 Subject: [PATCH 08/18] Finished Mission And Add PR in Readme --- README.md | 42 +++++----------- src/components/profile-card.js | 87 ++++++++++++++++++++++++++-------- 2 files changed, 81 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index b0ccc54..da18963 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,6 @@ -# react-profile-11th 유현우 +# react-profile-11th 개발 프론트앤드 유현우 -> 배포된 주소 : -> https://react-profile-11th.puba5.now.sh - -## 실행 방법 - -``` -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 ## 미션 설명 @@ -32,10 +10,16 @@ npm run start [미션 제출 방법](./docs/how-to-submit/README.md) -## 문제들 - -1. 의도한 것인지는 모르겠으나 index.js에서 파일 경로가 제대로 되어 있지 않아서 초반에 좀 헤맸습니다. +## PR -## 의문점 +> 제목 : [1주차] 유현우 미션 제출합니다.
-1. 왜 NEXT.JS를 사용하여 배포를 했을까?? 현재는 백앤드와 연동이 없어서 정적 배포를 하기 위해 그런 것일까?? +> 내용 :
+> 안녕하세요. +> 과제 진행하면서 중간중간에 모르는게 많아 그것들을 공부하느라 생각보다 시간이 많이 걸렸습니다.
+> 가장 처음에 에러난 것은 profile-card.js의 경로 문제였는데, React에서는 오류가 코드 어느 부분에서 오류가 났다!라고 뜨는 것도 있지만, 그냥 글로만 표시된다는 것을 알게 되었고, 이후 빌드할 때 오류를 좀 더 쉽게 해결할 수 있었던 것 같습니다.
+> 두 번째로 모르는 것이 나왔을 때는 zeit 배포할 때였는데, Next.js를 사용할 것인지 물어봐서 "나는 React를 하는데 왜 Next 사용하라고 하지?" 라는 의문을 품고 검색해보니 Nextjs는 React를 SSR으로 렌더링 해주는 프레임워크고, 그 렌더링된 것을 zeit으로 배포해준다는 것을 알게되었습니다.
+> 세번째 고비는 컴포넌트 하나만 만들고 컴포넌트 재활용을 어떻게 할지였습니다. 정확히 말하면 프로필 카드들은 4개가 반복되므로 이걸 어떻게 만들 수 있을까 고민했었습니다. 물론 4개를 직접 4번 적어줄 수 있었지만, Vue를 공부하면서 "컴포넌트에 for과 if를 사용할 수 있고, 이는 React와 비슷하다"라는 말이 기억나서 컴포넌트를 반복적으로 표현하는 방법을 찾아봤습니다. 다행히 component iteration이라 검색하니 바로 나왔지만, 정확한 개념적인 설명 없이 코드만 있는 설명만 많아서, map 함수를 사용하는 코드를 하나하나 이해하고 고쳐보면서 미션에 알맞게 수정하는게 약간의 고비였습니다.
+> 네번째 가장 오래 걸렸던 과정은 CSS...대충 큰 틀로 추상적으로 코드가 돌아가서, 데이터를 잘 띄우는 위의 단계까지는 그래도 얼마 걸리지 않고 금방했지만, 디자인을 그대로 맞추는 과정이 상대적으로 힘들었습니다. 사실 CSS는 기본 개념만 공부하고, 활용하는 것은 따로 배우지 않고 필요할 때마다 그때 그때 찾아봤었는데, 이번에 느낀 것은 이것도 좀 공부해야겠다고 느꼈습니다. 디자인 시안이 주어지면 그것을 자유자재로 만들어주어야하는데 CSS 모르면 삽질 좀 많이 할 것 같아서 시간이 나면 체계적?으로 배워야하는 필요성을 느꼈습니다.
+> 다섯 번째로는 선택 미션을 할 때 나이 순 배열이었는데, Javascript에서 배열을 선언할 때, const로 선언했음에도 불구하고 sort가 되는게 신기했습니다. 직관적으로는 const니까 순서도 안 바뀔 줄 알았는데 sort가 너무 잘 되서 문제 없이 선택 미션을 할 수 있었습니다.
+> 그리고 React 외적인 부분에서는 커밋이나 변수명 정하기 같은 부분이 좀 어려워서 이 부분도 학습해야한다는 것을 느꼈습니다. diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 4d9b9d4..922a332 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -61,9 +61,12 @@ export default function ProfileCard() { return {mapToComponent(profiles)}; } -const mapToComponent = data => { - return data.map((person, i) => { - return ; +const mapToComponent = profiles => { + // 나이 순으로 정렬 + profiles.sort((a, b) => a.age - b.age); + return profiles.map((profileData, i) => { + if (profileData.role !== "부회장") + return ; }); }; @@ -74,24 +77,31 @@ function CardTemplate(props) { + 신촌 연합 IT 창업 동아리 CEOS ); } function ProfileDesc(props) { return ( -
- -
{props.profile.name}
-
{props.profile.role}
-
{props.profile.univ}
- - -
{props.profile.phoneNum}
-
{props.profile.email}
- {props.profile.githubLink} - -
+ +
+ + {props.profile.name}({props.profile.age}) + + {props.profile.role} + + {props.profile.univ}대학교 {props.profile.major}과 + +
+
+ {props.profile.phoneNum} + {props.profile.email} + + {props.profile.githubLink} + +
+ ); } @@ -120,8 +130,8 @@ const InnerWrapper = styled.div` `; const ProfileImage = styled.img` - width: 45%; - height: 45%; + width: 40%; + height: 40s%; `; const ProfileDescImg = styled.div` @@ -133,8 +143,47 @@ const ProfileDescImg = styled.div` `; const NamePartUniv = styled.div` - font-size: 1.5rem; + box-sizing: border-box; `; const ProfileContact = styled.div` - font-size: 1.5rem; + box-sizing: border-box; +`; + +const ClubName = styled.div` + display: flex; + flex-direction: column; + -webkit-box-align: center; + align-items: center; + font-size: 1.6rem; +`; +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; `; From ab2c384dd7cd6f921d9b80b8a7bd494b4adfc9a5 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Fri, 3 Apr 2020 01:26:04 +0900 Subject: [PATCH 09/18] =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=AF=B8=EC=85=98?= =?UTF-8?q?=20=EB=B6=80=EB=B6=84=EC=9D=84=20=EC=95=8C=EB=A0=A4=EC=A3=BC?= =?UTF-8?q?=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile-card.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 922a332..7a90815 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -65,6 +65,7 @@ const mapToComponent = profiles => { // 나이 순으로 정렬 profiles.sort((a, b) => a.age - b.age); return profiles.map((profileData, i) => { + // 부회장을 제외하기 위한 조건문 if (profileData.role !== "부회장") return ; }); From d63dbe8c9cefac3cb88d4c9ee7b4046e66061c4c Mon Sep 17 00:00:00 2001 From: WooYoo Date: Fri, 3 Apr 2020 20:24:31 +0900 Subject: [PATCH 10/18] =?UTF-8?q?profile=20=EB=B3=80=EC=88=98=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=ED=95=9C=20=ED=9B=84,=20=EA=B7=B8=EC=97=90=20?= =?UTF-8?q?=EB=A7=9E=EC=B6=94=EC=96=B4=20=EC=BD=94=EB=93=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 75 +++++++++++++++++++++++++++++- src/components/profile-card.js | 85 ++-------------------------------- 2 files changed, 78 insertions(+), 82 deletions(-) diff --git a/pages/index.js b/pages/index.js index 202f544..11eee97 100644 --- a/pages/index.js +++ b/pages/index.js @@ -7,11 +7,76 @@ export default function Home() { return ( CEOS 프론트엔드 운영진 - + {mapToComponent(profiles)}; ); } +const mapToComponent = profiles => { + // 나이 순으로 정렬 + profiles.sort((a, b) => a.age - b.age); + return profiles.map((profileData, i) => { + // 부회장을 제외하기 위한 조건문 + if (profileData.role !== "부회장") + return ; + }); +}; + +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` display: flex; flex-direction: column; @@ -20,6 +85,14 @@ const Wrapper = styled.div` padding: 5rem 10rem; `; +const ProfileCards = 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; diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 7a90815..4a3d80d 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -2,84 +2,15 @@ import React from "react"; import styled from "styled-components"; import { render } from "react-dom"; -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 {mapToComponent(profiles)}; -} - -const mapToComponent = profiles => { - // 나이 순으로 정렬 - profiles.sort((a, b) => a.age - b.age); - return profiles.map((profileData, i) => { - // 부회장을 제외하기 위한 조건문 - if (profileData.role !== "부회장") - return ; - }); -}; - -function CardTemplate(props) { +export default function ProfileCard(props) { return ( - + 신촌 연합 IT 창업 동아리 CEOS - + ); } @@ -110,15 +41,7 @@ function ProfileImg(props) { return ; } -const Wrapper = styled.div` - display: flex; - flex-direction: row; - -webkit-box-pack: justify; - justify-content: space-between; - flex-wrap: wrap; -`; - -const InnerWrapper = styled.div` +const CardWrapper = styled.div` width: 45%; background-color: rgb(255, 255, 255); margin-bottom: 2rem; From d080c2ffe2c9f7a988e3784c2e69c7268bb5a2fe Mon Sep 17 00:00:00 2001 From: WooYoo Date: Fri, 3 Apr 2020 20:57:01 +0900 Subject: [PATCH 11/18] =?UTF-8?q?Readme=20PR=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index da18963..c0bc6ad 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,28 @@ ## PR -> 제목 : [1주차] 유현우 미션 제출합니다.
- -> 내용 :
+> ### 제목 : [1주차] 유현우 미션 제출합니다.
+> +> ### 내용 :
+> > 안녕하세요. > 과제 진행하면서 중간중간에 모르는게 많아 그것들을 공부하느라 생각보다 시간이 많이 걸렸습니다.
+> > 가장 처음에 에러난 것은 profile-card.js의 경로 문제였는데, React에서는 오류가 코드 어느 부분에서 오류가 났다!라고 뜨는 것도 있지만, 그냥 글로만 표시된다는 것을 알게 되었고, 이후 빌드할 때 오류를 좀 더 쉽게 해결할 수 있었던 것 같습니다.
+> > 두 번째로 모르는 것이 나왔을 때는 zeit 배포할 때였는데, Next.js를 사용할 것인지 물어봐서 "나는 React를 하는데 왜 Next 사용하라고 하지?" 라는 의문을 품고 검색해보니 Nextjs는 React를 SSR으로 렌더링 해주는 프레임워크고, 그 렌더링된 것을 zeit으로 배포해준다는 것을 알게되었습니다.
+> > 세번째 고비는 컴포넌트 하나만 만들고 컴포넌트 재활용을 어떻게 할지였습니다. 정확히 말하면 프로필 카드들은 4개가 반복되므로 이걸 어떻게 만들 수 있을까 고민했었습니다. 물론 4개를 직접 4번 적어줄 수 있었지만, Vue를 공부하면서 "컴포넌트에 for과 if를 사용할 수 있고, 이는 React와 비슷하다"라는 말이 기억나서 컴포넌트를 반복적으로 표현하는 방법을 찾아봤습니다. 다행히 component iteration이라 검색하니 바로 나왔지만, 정확한 개념적인 설명 없이 코드만 있는 설명만 많아서, map 함수를 사용하는 코드를 하나하나 이해하고 고쳐보면서 미션에 알맞게 수정하는게 약간의 고비였습니다.
+> 이때 React스러운 코드란 무엇인가 고민했었는데, 아직도 정확히 React스러운 코드가 무엇인지 확실하게 말하긴 어렵고 더욱 더 공부해봐야겠지만, React스러운 코드란 +> +> 1. 컴포넌트를 만들어서 재활용할 수 있게 하는 것 +> 2. 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달하는 것 +> 3. 함수를 사용하여 컴포넌트들을 만드는 것 +> +> 이라고 생각하여 최대한 이런 방식으로 짜도록 노력했습니다. +> > 네번째 가장 오래 걸렸던 과정은 CSS...대충 큰 틀로 추상적으로 코드가 돌아가서, 데이터를 잘 띄우는 위의 단계까지는 그래도 얼마 걸리지 않고 금방했지만, 디자인을 그대로 맞추는 과정이 상대적으로 힘들었습니다. 사실 CSS는 기본 개념만 공부하고, 활용하는 것은 따로 배우지 않고 필요할 때마다 그때 그때 찾아봤었는데, 이번에 느낀 것은 이것도 좀 공부해야겠다고 느꼈습니다. 디자인 시안이 주어지면 그것을 자유자재로 만들어주어야하는데 CSS 모르면 삽질 좀 많이 할 것 같아서 시간이 나면 체계적?으로 배워야하는 필요성을 느꼈습니다.
+> > 다섯 번째로는 선택 미션을 할 때 나이 순 배열이었는데, Javascript에서 배열을 선언할 때, const로 선언했음에도 불구하고 sort가 되는게 신기했습니다. 직관적으로는 const니까 순서도 안 바뀔 줄 알았는데 sort가 너무 잘 되서 문제 없이 선택 미션을 할 수 있었습니다.
-> 그리고 React 외적인 부분에서는 커밋이나 변수명 정하기 같은 부분이 좀 어려워서 이 부분도 학습해야한다는 것을 느꼈습니다. +> +> 그리고 React 외적인 부분에서는 커밋이나 변수명 정하기 같은 부분을 정하기가 너무 어려워서 이 부분도 여러 경험을 쌓으면서 학습을 다짐하게 되었던 과제였습니다. From a20db818fb6b27a21672e902fc73a937bd2e29e2 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Fri, 3 Apr 2020 21:23:12 +0900 Subject: [PATCH 12/18] =?UTF-8?q?=EC=9E=90=EA=B8=B0=20PR=20=EC=88=98?= =?UTF-8?q?=EC=A0=95-=20=ED=95=84=EC=88=98,=EC=84=A0=ED=83=9D=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=ED=99=94=EB=A9=B4=20=EC=82=AC=EC=A7=84=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EB=8B=A4=EB=A5=B8=EC=A0=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c0bc6ad..c18d300 100644 --- a/README.md +++ b/README.md @@ -37,3 +37,7 @@ > 다섯 번째로는 선택 미션을 할 때 나이 순 배열이었는데, Javascript에서 배열을 선언할 때, const로 선언했음에도 불구하고 sort가 되는게 신기했습니다. 직관적으로는 const니까 순서도 안 바뀔 줄 알았는데 sort가 너무 잘 되서 문제 없이 선택 미션을 할 수 있었습니다.
> > 그리고 React 외적인 부분에서는 커밋이나 변수명 정하기 같은 부분을 정하기가 너무 어려워서 이 부분도 여러 경험을 쌓으면서 학습을 다짐하게 되었던 과제였습니다. + +##추가사항 + +> 필수 결과 화면과 선택 결과 화면에서 "사진 크기" 같은 일부 디자인이 다른데, 이런 부분은 필수 결과 화면에 맞추어 올렸습니다. From 5af07534be55ddea2fb28b7a43dad63e17eff33a Mon Sep 17 00:00:00 2001 From: WooYoo Date: Sat, 4 Apr 2020 14:10:14 +0900 Subject: [PATCH 13/18] =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 16 ++++++++-------- src/components/profile-card.js | 15 ++------------- 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/pages/index.js b/pages/index.js index 11eee97..e0f2d00 100644 --- a/pages/index.js +++ b/pages/index.js @@ -7,12 +7,12 @@ export default function Home() { return ( CEOS 프론트엔드 운영진 - {mapToComponent(profiles)}; + {mapToComponent(profiles)}; ); } -const mapToComponent = profiles => { +const mapToComponent = (profiles) => { // 나이 순으로 정렬 profiles.sort((a, b) => a.age - b.age); return profiles.map((profileData, i) => { @@ -34,7 +34,7 @@ const profiles = [ 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" + "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, @@ -47,7 +47,7 @@ const profiles = [ 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" + "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, @@ -60,7 +60,7 @@ const profiles = [ 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" + "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, @@ -73,8 +73,8 @@ const profiles = [ 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" - } + "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` @@ -85,7 +85,7 @@ const Wrapper = styled.div` padding: 5rem 10rem; `; -const ProfileCards = styled.div` +const ProfileCardsWrapper = styled.div` display: flex; flex-direction: row; -webkit-box-pack: justify; diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 4a3d80d..9a07692 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -1,6 +1,5 @@ import React from "react"; import styled from "styled-components"; -import { render } from "react-dom"; export default function ProfileCard(props) { return ( @@ -46,16 +45,13 @@ const CardWrapper = styled.div` background-color: rgb(255, 255, 255); margin-bottom: 2rem; padding: 1.5rem; - border-width: 1px; - border-style: solid; - border-color: rgb(204, 204, 204); - border-image: initial; + border: 1px solid rgb(204, 204, 204); border-radius: 1.5rem; `; const ProfileImage = styled.img` width: 40%; - height: 40s%; + height: 40%; `; const ProfileDescImg = styled.div` @@ -66,13 +62,6 @@ const ProfileDescImg = styled.div` margin-bottom: 1.5rem; `; -const NamePartUniv = styled.div` - box-sizing: border-box; -`; -const ProfileContact = styled.div` - box-sizing: border-box; -`; - const ClubName = styled.div` display: flex; flex-direction: column; From 09590f07815285eef2084341ed811e1054203934 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Sun, 5 Apr 2020 12:30:17 +0900 Subject: [PATCH 14/18] =?UTF-8?q?mapToComponent=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20props=20=ED=98=95=ED=83=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 22 +++++++++++----------- src/components/profile-card.js | 16 ++++++++++++++-- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/pages/index.js b/pages/index.js index e0f2d00..615dc0c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -7,21 +7,21 @@ export default function Home() { return ( CEOS 프론트엔드 운영진 - {mapToComponent(profiles)}; + + {profiles + .filter((profile) => profile.role !== "부회장") + .sort((a, b) => { + return a.age - b.age; + }) + .map((profile) => ( + + ))} + + ; ); } -const mapToComponent = (profiles) => { - // 나이 순으로 정렬 - profiles.sort((a, b) => a.age - b.age); - return profiles.map((profileData, i) => { - // 부회장을 제외하기 위한 조건문 - if (profileData.role !== "부회장") - return ; - }); -}; - const profiles = [ { id: 1, diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 9a07692..f8e919a 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -2,11 +2,23 @@ import React from "react"; import styled from "styled-components"; export default function ProfileCard(props) { + const { + id, + name, + age, + role, + univ, + major, + phoneNum, + email, + githubLink, + imageUrl, + } = props; return ( - - + + 신촌 연합 IT 창업 동아리 CEOS From 431c7a9366fdeb4438e083a1fd55ec683b44b526 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Sun, 5 Apr 2020 13:46:42 +0900 Subject: [PATCH 15/18] =?UTF-8?q?JS=20=EA=B5=AC=EC=A1=B0=20=EB=B6=84?= =?UTF-8?q?=ED=95=B4=20=ED=95=A0=EB=8B=B9=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=9D=B4=EB=A6=84=20=EA=B0=84=EB=9E=B5=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile-card.js | 42 +++++++++++++++++----------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/profile-card.js b/src/components/profile-card.js index f8e919a..ba60057 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -2,6 +2,19 @@ import React from "react"; import styled from "styled-components"; export default function ProfileCard(props) { + return ( + + + + + + 신촌 연합 IT 창업 동아리 CEOS + + ); +} + +function ProfileDesc(props) { + console.log(props); const { id, name, @@ -14,42 +27,29 @@ export default function ProfileCard(props) { githubLink, imageUrl, } = props; - return ( - - - - - - 신촌 연합 IT 창업 동아리 CEOS - - ); -} - -function ProfileDesc(props) { return (
- {props.profile.name}({props.profile.age}) + {name}({age}) - {props.profile.role} + {role} - {props.profile.univ}대학교 {props.profile.major}과 + {univ}대학교 {major}과
- {props.profile.phoneNum} - {props.profile.email} - - {props.profile.githubLink} - + {phoneNum} + {email} + {githubLink}
); } function ProfileImg(props) { - return ; + const { imageUrl } = props; + return ; } const CardWrapper = styled.div` From 4febe17517dcf45f7bb5094bf984cfc2c1755f4f Mon Sep 17 00:00:00 2001 From: WooYoo Date: Sun, 5 Apr 2020 14:01:02 +0900 Subject: [PATCH 16/18] =?UTF-8?q?=EA=B0=81=EA=B0=81=EC=9D=98=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EB=8B=A4=EB=A5=B8=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile-card.js | 78 ++-------------------------------- src/components/profile-desc.js | 56 ++++++++++++++++++++++++ src/components/profile-img.js | 11 +++++ 3 files changed, 70 insertions(+), 75 deletions(-) create mode 100644 src/components/profile-desc.js create mode 100644 src/components/profile-img.js diff --git a/src/components/profile-card.js b/src/components/profile-card.js index ba60057..80b09c7 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -1,6 +1,9 @@ import React from "react"; import styled from "styled-components"; +import ProfileDesc from "./profile-desc"; +import ProfileImg from "./profile-img"; + export default function ProfileCard(props) { return ( @@ -13,45 +16,6 @@ export default function ProfileCard(props) { ); } -function ProfileDesc(props) { - console.log(props); - const { - id, - name, - age, - role, - univ, - major, - phoneNum, - email, - githubLink, - imageUrl, - } = props; - return ( - -
- - {name}({age}) - - {role} - - {univ}대학교 {major}과 - -
-
- {phoneNum} - {email} - {githubLink} -
- - ); -} - -function ProfileImg(props) { - const { imageUrl } = props; - return ; -} - const CardWrapper = styled.div` width: 45%; background-color: rgb(255, 255, 255); @@ -61,11 +25,6 @@ const CardWrapper = styled.div` border-radius: 1.5rem; `; -const ProfileImage = styled.img` - width: 40%; - height: 40%; -`; - const ProfileDescImg = styled.div` display: flex; flex-direction: row; @@ -81,34 +40,3 @@ const ClubName = styled.div` align-items: center; font-size: 1.6rem; `; -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; -`; diff --git a/src/components/profile-desc.js b/src/components/profile-desc.js new file mode 100644 index 0000000..fcd1cca --- /dev/null +++ b/src/components/profile-desc.js @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; + +export default function ProfileDesc(props) { + const { name, age, role, univ, major, phoneNum, email, githubLink } = props; + return ( + +
+ + {name}({age}) + + {role} + + {univ}대학교 {major}과 + +
+
+ {phoneNum} + {email} + {githubLink} +
+ + ); +} + +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; +`; diff --git a/src/components/profile-img.js b/src/components/profile-img.js new file mode 100644 index 0000000..11e887b --- /dev/null +++ b/src/components/profile-img.js @@ -0,0 +1,11 @@ +import React from "react"; +import styled from "styled-components"; + +export default function ProfileImg({ imageUrl }) { + return ; +} + +const ProfileImage = styled.img` + width: 40%; + height: 40%; +`; From 47076623c5fa63568bed535b0e0349c15cf1eda0 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Sun, 5 Apr 2020 14:10:58 +0900 Subject: [PATCH 17/18] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=ED=95=98=EB=82=98=EB=A1=9C=20=ED=86=B5?= =?UTF-8?q?=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile-card.js | 71 +++++++++++++++++++++++++++++++--- src/components/profile-desc.js | 56 --------------------------- src/components/profile-img.js | 11 ------ 3 files changed, 66 insertions(+), 72 deletions(-) delete mode 100644 src/components/profile-desc.js delete mode 100644 src/components/profile-img.js diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 80b09c7..7f9e39d 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -1,15 +1,39 @@ import React from "react"; import styled from "styled-components"; -import ProfileDesc from "./profile-desc"; -import ProfileImg from "./profile-img"; - export default function ProfileCard(props) { + const { + id, + name, + age, + role, + univ, + major, + phoneNum, + email, + githubLink, + imageUrl, + } = props; return ( - - + +
+ + {name}({age}) + + {role} + + {univ}대학교 {major}과 + +
+
+ {phoneNum} + {email} + {githubLink} +
+ + 신촌 연합 IT 창업 동아리 CEOS @@ -40,3 +64,40 @@ const ClubName = styled.div` 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; +`; diff --git a/src/components/profile-desc.js b/src/components/profile-desc.js deleted file mode 100644 index fcd1cca..0000000 --- a/src/components/profile-desc.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -export default function ProfileDesc(props) { - const { name, age, role, univ, major, phoneNum, email, githubLink } = props; - return ( - -
- - {name}({age}) - - {role} - - {univ}대학교 {major}과 - -
-
- {phoneNum} - {email} - {githubLink} -
- - ); -} - -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; -`; diff --git a/src/components/profile-img.js b/src/components/profile-img.js deleted file mode 100644 index 11e887b..0000000 --- a/src/components/profile-img.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -export default function ProfileImg({ imageUrl }) { - return ; -} - -const ProfileImage = styled.img` - width: 40%; - height: 40%; -`; From 71073627f9f6efeab000c5ddacf49c59eba29684 Mon Sep 17 00:00:00 2001 From: WooYoo Date: Sun, 5 Apr 2020 14:17:53 +0900 Subject: [PATCH 18/18] Rename "ProfileDescImg" to "Profile" and remove box-pack --- src/components/profile-card.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 7f9e39d..25be562 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -16,7 +16,7 @@ export default function ProfileCard(props) { } = props; return ( - +
@@ -34,7 +34,7 @@ export default function ProfileCard(props) {
- + 신촌 연합 IT 창업 동아리 CEOS ); @@ -49,10 +49,9 @@ const CardWrapper = styled.div` border-radius: 1.5rem; `; -const ProfileDescImg = styled.div` +const Profile = styled.div` display: flex; flex-direction: row; - -webkit-box-pack: justify; justify-content: space-between; margin-bottom: 1.5rem; `;