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/README.md b/README.md index 563f1bf..81bd635 100644 --- a/README.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index 026b06f..72df9f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@ampproject/toolbox-core": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@ampproject/toolbox-core/-/toolbox-core-2.0.0.tgz", - "integrity": "sha512-xAJOmh6MPS2mdHNsK8mj1t8TLh6mlehirh0fOBsRhKCNCJXgg4Gfd2u5igy8VFq9sYnuWP/npFyjGX36qpXW5Q==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/toolbox-core/-/toolbox-core-2.2.0.tgz", + "integrity": "sha512-g0NnZZqPJttIcdplIpiMDmOLewwvCWPSnFKvNdyYXN7vknRvR4krpV2qveuVgjnA+dSlDmtzuFapFCaWh4V7FQ==", "requires": { "cross-fetch": "3.0.4" } @@ -42,22 +42,22 @@ } }, "@ampproject/toolbox-runtime-version": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.0.0.tgz", - "integrity": "sha512-7XDlo7l4Ozpc/XWmJeYNF0ZfXCy7Vdh07spN+xEOst8gF99yaavZRNVkdgyTxLR3BpY9RIqqhSs6OxfkOKlRZQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.2.0.tgz", + "integrity": "sha512-kQRLMreDp1Wp9DotQzJ4k/ZKK6ZxtI6ce2JIvyH8Xfi6H4BQNu0Ht0agMgm51/OsMKyHD+dDIGEHKaKWIOiPLQ==", "requires": { - "@ampproject/toolbox-core": "^2.0.0" + "@ampproject/toolbox-core": "^2.2.0" } }, "@ampproject/toolbox-script-csp": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@ampproject/toolbox-script-csp/-/toolbox-script-csp-2.0.0.tgz", - "integrity": "sha512-9mW3yiKwjORi0ViuayphVZii9MwiPhneZGZWy+kN44xr3SpN7iQC52/WWWTBOZX9z1zaUh8DqGc//VFY5ILSAw==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/toolbox-script-csp/-/toolbox-script-csp-2.2.0.tgz", + "integrity": "sha512-Z5AzbWFTlTMJg0z1/frMDmW6Gj+EbOw0dVdFYfdma4AJq4rNoxCQMVgVOjl4ryWNouJvK1RUA8o7sY1WmMx6eg==" }, "@ampproject/toolbox-validator-rules": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.0.0.tgz", - "integrity": "sha512-5f2IvT1m/zNtqfNXFE9V4ZtKofIttST65QL1wf4lKjBhJsbZgAAeR/u4DgOvftRVRmgn6IpUiWY1pt9xWaI5yA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.2.0.tgz", + "integrity": "sha512-R5VkDmhmNatq9SuuHaeA2Uno4O5K4YSh11o6A/5jJZ2EjilAcpuAKvZlRp9tjucPWHi+/z/n5PCJ8YUxzCzWaQ==", "requires": { "cross-fetch": "3.0.4" } @@ -1745,14 +1745,30 @@ }, "dependencies": { "browserslist": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.11.0.tgz", - "integrity": "sha512-WqEC7Yr5wUH5sg6ruR++v2SGOQYpyUdYYd4tZoAq1F7y+QXoLoYGXVbxhtaIqWmAJjtNTRjVD3HuJc1OXTel2A==", + "version": "4.11.1", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.11.1.tgz", + "integrity": "sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==", "requires": { - "caniuse-lite": "^1.0.30001035", - "electron-to-chromium": "^1.3.380", - "node-releases": "^1.1.52", - "pkg-up": "^3.1.0" + "caniuse-lite": "^1.0.30001038", + "electron-to-chromium": "^1.3.390", + "node-releases": "^1.1.53", + "pkg-up": "^2.0.0" + } + }, + "find-up": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", + "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "requires": { + "locate-path": "^2.0.0" + } + }, + "pkg-up": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz", + "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=", + "requires": { + "find-up": "^2.1.0" } } } @@ -2023,15 +2039,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==" }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -3043,9 +3050,9 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { - "version": "1.3.390", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.390.tgz", - "integrity": "sha512-4RvbM5x+002gKI8sltkqWEk5pptn0UnzekUx8RTThAMPDSb8jjpm6SwGiSnEve7f85biyZl8DMXaipaCxDjXag==" + "version": "1.3.395", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.395.tgz", + "integrity": "sha512-kdn2cX6hZXDdz/O2Q8tZscITlsSv1a/7bOq/fQs7QAJ9iaRlnhZPccarNhxZv1tXgmgwCnKp/1lJNYLOG8Dxiw==" }, "elliptic": { "version": "6.5.2", @@ -3403,12 +3410,6 @@ } } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -3486,9 +3487,9 @@ } }, "follow-redirects": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.10.0.tgz", - "integrity": "sha512-4eyLK6s6lH32nOvLLwlIOnr9zrL8Sm+OvW4pVTJNoXeGzYIkHVf+pADQi+OJ0E67hiuSLezPVPyBcIZO50TmmQ==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz", + "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==", "requires": { "debug": "^3.0.0" }, @@ -4642,12 +4643,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, - "nan": { - "version": "2.14.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", - "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==", - "optional": true - }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -7404,8 +7399,6 @@ "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==", "optional": true, "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1", "node-pre-gyp": "*" }, "dependencies": { diff --git a/pages/index.js b/pages/index.js index 9b98e19..1a164ec 100644 --- a/pages/index.js +++ b/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 ( - - 나는 홈이야 - - - ); + const List = profiles.map((prop) => ); + + return ( + + CEOS 프론트엔드 운영진 + {List} + + ); } +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; `; diff --git a/src/components/profile-card.js b/src/components/profile-card.js index 6243f67..c041af0 100644 --- a/src/components/profile-card.js +++ b/src/components/profile-card.js @@ -1,66 +1,93 @@ -import React from "react"; -import styled from "styled-components"; +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" - } - ]; +export default function ProfileCard({ + id, + name, + age, + role, + univ, + major, + phoneNum, + email, + githubLink, + imageUrl +}) { + return ( + + + + + + {name}({age}) + + {role} +
+ {univ}대학교 {major}과 +
+ +
  • +
    {phoneNum}
    +
    {email}
    + +
    • +     - return 안녕 나는 프로필 카드; + +     + + 신촌 연합 IT 창업 동아리 CEOS +     + ); } const Wrapper = styled.div` - background-color: red; - font-size: 18px; + width: 45%; + background-color: rgb(255, 255, 255); + margin-bottom: 20px; + border-image: initial; + padding: 15px; + border-width: 1px; + border-style: solid; + border-color: rgb(204, 204, 204); + border-radius: 15px; +`; + +const Char = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + width: 50%; +`; +const Info = styled.div` + font-size: 14px; +`; +const Name = styled.div` + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +`; +const Li = styled.div` + font-size: 14px; + color: rgb(0, 0, 153); +`; + +const Ceos = styled.div` + display: flex; + flex-direction: column; + align-items: center; + font-size: 1.6rem; +`; + +const Img = styled.img` + width: 40%; + height: 40%; +`; +const Row = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 1.5rem; `;