Merge with 'develop' branch and correct conflict

@@ -121,3 +121,4 @@ package-lock.json
 /uploads
 /assets
 build
+.vscode
\ No newline at end of file

@@ -21,6 +21,19 @@ KHU-Hub repo: [khuhub.khu.ac.kr/2018102216/dev-profile](https://khuhub.khu.ac.kr
 
 ## <br>
 
+### Home Page
+    1. you can join or login with github.
+    2. you can search.
+![image](/uploads/f33744dd78985b881bfeff6162af0919/image.png)
+
+### Myprofile Page
+    1. You can see your profile information, github contributions, repositories, status at a glance.
+![image](/uploads/63eae503a0eb49b22bbe545c3c0c859a/image.png)
+
+### Editprofile Page
+    1. You can input or change your informations.
+![image](/uploads/55988a03a91f0dcd33656afe0ec04ff6/image.png)
+
 ### test installation
 
 This is the usage just for the being.
@@ -41,33 +54,34 @@ npm run dev:assets
 ```
 
 <br>
+
 ### Installation MongoDB
     1. Access to the MongoDB homepage.
-    ![image](/uploads/3d5d283732343d4c5ff4b5c7bd16c78f/image.png)
+![homepage](https://oss-2020105657.s3.amazonaws.com/MongoDB+homepage.png)
     
     2. Select options and download MongoDB.
-    ![image](/uploads/46038b5c881bb18074dd8e732804f5d7/image.png)
+![image](/uploads/46038b5c881bb18074dd8e732804f5d7/image.png)
     
     3. If this screen appears when installing MongoDB, please select 'complete' and proceed.
-    ![image](/uploads/510d184825d6eaf04dcb2d254f03b918/image.png)
+![image](/uploads/510d184825d6eaf04dcb2d254f03b918/image.png)
     
     4. When you enter 'mongo' command in vsc terminal, it is installed well when the screen appears as below.
-    ![image](/uploads/202bf8555f6842938d15c6e3b0e789c1/image.png)
+![image](/uploads/202bf8555f6842938d15c6e3b0e789c1/image.png)
     
 ### To setting environment variable.
     ps. When entering 'mongo' command in vsc terminal, skip this part if it runs well.
     
     1. Find folder where mongoDB is installed, and make a copy of the folder's route.
-    ![image](/uploads/93b13c8df931ef11781d21ad574ee441/image.png)
+![image](/uploads/93b13c8df931ef11781d21ad574ee441/image.png)
     
     2. And you open the 'environment variable' page. If using window environment, you can use command (window + R) and input 'sysdm.cpl ,3'. And click 'environment variable'.
-    ![image](/uploads/64278904603d6b3cdb78a0689695344a/image.png)
+![image](/uploads/64278904603d6b3cdb78a0689695344a/image.png)
     
     3. You must find 'path' in 'system variable' categroy, not 'users variable'. If you find 'path' in 'system variable', then check 'path' and click 'Editing'.
-    ![image](/uploads/9077ec8854585640dfb526e45cbcb3fb/image.png)
+![image](/uploads/9077ec8854585640dfb526e45cbcb3fb/image.png)
     
     4. Create a new environmental variable path using the Mongo db address you copied earlier.
-    ![image](/uploads/0018e1de51ae1c10cc9a5d5bc01fcf9d/image.png)
+![image](/uploads/0018e1de51ae1c10cc9a5d5bc01fcf9d/image.png)
     
     5. Please check if Mongo Db is working well in fourth method of "Installation MongoDB".
 
@@ -79,7 +93,7 @@ npm run dev:assets
 ### How to fill .env file.
     1. If you clone our repository and downloads required modules, make new '.env' file.
     2. Fill in the required values as shown below.
-    ![image](/uploads/cbdf2726a8b5c6326378cd5fa8295726/image.png)
+![image](/uploads/cbdf2726a8b5c6326378cd5fa8295726/image.png)
     
 ### API reference
 
@@ -90,7 +104,9 @@ npm run dev:assets
 [GitHub Contributuions API](https://api.github.com/graphql/)
 
 <br>
-\\<!--[GitHub Repositories API](https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2")-->
+\\<!--[GitHub Repositories API]
+
+### Libraries
 
 ### License
 

@@ -9,7 +9,7 @@ const handleRepo = (list) =>{
     list.forEach(element => {
         const anchor = document.createElement("a");
         anchor.href = element.url;
-        anchor.target = "_blank"
+        anchor.target = "_blank";
         anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>`
         trendRepoBox.appendChild(anchor);
     });

-const userContributionsBox = document.querySelector(".user-status__contributions");
-const totalContributionIndicator = document.getElementById("jsTotalContributions");
+const userContributionsBox = document.querySelector(
+  ".user-status__contributions"
+);
+const totalContributionIndicator = document.getElementById(
+  "jsTotalContributions"
+);
 const userCharacterBox = document.querySelector(".user-status__character");
 const userRepoBox = document.querySelector(".user-repo");
-const githubName = document.getElementById("jsGithubname").innerText;
+const githubNickname = document.getElementById("jsGithubNickname");
 const URL = `https://api.github.com/users/${githubName}/repos?sort=updated&per_page=2`;
 
-
-const handleImage = () =>{
+const handleImage = () => {
   const total = totalContributionIndicator.innerText;
   const img = new Image();
-    if (total>=0 && total<200){
-        img.src ="https://oss-2020105657.s3.amazonaws.com/first.png";
+  if (total >= 0 && total < 200) {
+    img.src = "https://oss-2020105657.s3.amazonaws.com/first.png";
     img.alt = "1단계";
-    }else if (total>=200 && total<600){
-        img.src ="https://oss-2020105657.s3.amazonaws.com/second.png";
+  } else if (total >= 200 && total < 600) {
+    img.src = "https://oss-2020105657.s3.amazonaws.com/second.png";
     img.alt = "2단계";
-    }else if (total>=600 && total<1200){
+  } else if (total >= 600 && total < 1200) {
     img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
     img.alt = "3단계";
-    }else if (total>=1200 && total<2000){
+  } else if (total >= 1200 && total < 2000) {
     img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
     img.alt = "4단계";
-    }else{
+  } else {
     img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
     img.alt = "5단계";
   }
   userCharacterBox.appendChild(img);
 };
 
-const handleRepo = (list) =>{
-    list.forEach(element => {
+const handleRepo = (list) => {
+  list.forEach((element) => {
     const anchor = document.createElement("a");
     anchor.href = element.html_url;
-        anchor.target = "_blank"
-        anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>`
+    anchor.target = "_blank";
+    anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span>:<span class="repoUrl">${element.html_url} </span></div>`;
     userRepoBox.appendChild(anchor);
   });
-    
 };
 
 const getGithubRepo = () =>{
-    const response = fetch(URL).then(function(response){
-        return response.json();
+  const nickname = githubNickname.innerText;
+  const userId = window.location.href.split("/users/")[1];
+  const response = fetch(`/users/${userId}/repo`,{headers:{nickname}}).then(function(reponse){
+    const data = reponse.json();
+    return data
   }).then(function(data){
-        const trendRepoList = data.slice(0,2);
-        handleRepo(trendRepoList);
-    });
-};
+    handleRepo(data);
+  })
+}
 
-const init=()=>{
+const init = () => {
   handleImage();
   getGithubRepo();
 };
 
-if(userContributionsBox){
+if (userContributionsBox) {
   init();
-};
\ No newline at end of file
+}

@@ -12,7 +12,7 @@ header {
     .header__column {
       ul {
         display: flex;
-        color: $blue;
+        color: $lilac;
         font-weight: 700;
         font-size: 20px;
         text-transform: uppercase;

-$blue: #0063b2;
-$skyblue: #9cc3d5;
+$lilac: #8495ed;
+$navy: #00008b;
+$blue: #483d8b;
 $star: #ffb700;
 $space: 40px;

@@ -4,26 +4,29 @@
   flex-direction: column;
   padding: 30px;
   img {
-    width: 100px;
-    height: 100px;
-    object-fit: cover;
+    width: 176px;
+    height: 220px;
+    object-fit: contain;
   }
   .fileUpload {
     display: flex;
     flex-direction: column;
+    input {
+      font-size: 13px;
+    }
   }
   input {
-    padding: 10px;
     display: block;
     border: none;
     border-bottom: 1px solid #ccc;
     width: 40%;
-    opacity: 0.6;
+    padding: 10px;
     margin-top: 19px;
     font-family: "Roboto", sans-serif;
     font-size: 18px;
   }
   label {
+    color: #6456bb;
     font-family: "Raleway", sans-serif;
     font-size: 13px;
     font-weight: bold;
@@ -38,15 +41,29 @@
     margin-top: 20px;
     padding: 9px;
   }
+
   .box {
+    margin-top: 50px;
     input {
-      background-color: rgb(209, 219, 231);
+      border-radius: 10px;
+      background-color: #94a3ec;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
         0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
         0 8px 16px rgba(0, 0, 0, 0.11);
       font-family: "Raleway", sans-serif;
+      text-transform: uppercase;
+      font-weight: bold;
       opacity: 1;
       font-size: 20px;
+      color: white;
+    }
+    input:hover {
+      border-radius: 10px;
+      background-color: #6456bb;
+      -webkit-transform: scale(0.8);
+      -ms-transform: scale(0.95);
+      transform: scale(0.95);
+      transition: 0.2s ease-in;
     }
   }
 }

@@ -5,24 +5,124 @@
   align-items: center;
   .home-title {
     margin: 40px 0px;
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     h2 {
-      font-size: 20px;
+      font-size: 25px;
       font-family: "Roboto", sans-serif;
-      font-weight: 400;
+      font-weight: 700;
       text-transform: uppercase;
+      color: rgb(30, 30, 150);
       margin-bottom: 30px;
     }
-    h1 {
+    span {
       font-size: 50px;
       font-family: "Roboto", sans-serif;
       font-weight: 800;
+      width: 60%;
+      text-align: center;
+      text-transform: uppercase;
+      background-image: linear-gradient(120deg, #acedff 0%, #ffaddd 100%);
+      background-repeat: no-repeat;
+      background-size: 100% 0.3em;
+      background-position: 0 88%;
+      transition: background-size 200ms ease-in;
+      &:hover {
+        background-size: 100% 88%;
+      }
+    }
+  }
+
+  .home-link {
+    margin: 20px;
+    font-family: "Roboto", sans-serif;
+    font-size: 30px;
+    font-weight: 700;
+    display: flex;
+    align-items: flex-end;
+    align-content: flex-end;
+    justify-items: flex-end;
+    justify-content: center;
+    align-items: center;
     text-transform: uppercase;
+    a {
+      color: $lilac;
+      &:not(:last-child) {
+        margin-right: 50px;
+      }
+      &:hover {
+        color: rgb(106, 89, 233);
+      }
+    }
+  }
+
+  .home-search {
+    margin-top: 30px;
+    margin-bottom: 60px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background: #fff;
+    border-radius: 500px;
+    padding: 10px 25px 10px 25px;
+
+    .home-search__form {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      background: #fff;
+      border-radius: 500px;
+      padding: 10px 25px 10px 25px;
+      border: 1px solid #ccc;
+
+      img {
+        height: 30px;
+        width: 30px;
+      }
+
+      input {
+        padding: 5px;
+        margin-left: 15px;
+        margin-right: 15px;
+        width: 300px;
+        border-radius: 5px;
+        background: transparent;
+        border: 1px solid transparent;
+        outline: none;
+        font-size: 1.2rem;
+        overflow-x: scroll;
+      }
+      button {
+        border: none;
+        background: none;
+        padding: 0;
+        i {
+          background: transparent;
+          border: none;
+          i {
+            font-size: 1.5rem;
+            margin: 3px;
+          }
+        }
+        i:hover {
+          cursor: pointer;
+        }
+      }
     }
+    .home-search__form:hover {
+      box-shadow: 0px 1px 4px -1px rgba(79, 78, 79, 1);
     }
+  }
+
+  .boxShadow {
+    box-shadow: 0 13px 10px -5px rgba(50, 50, 93, 0.25),
+      0 8px 10px -8px rgba(0, 0, 0, 0.3), 0 -6px 10px -6px rgba(0, 0, 0, 0.025);
+  }
+
   .home-quote {
     width: 100%;
     display: flex;
@@ -30,9 +130,11 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 20px;
-    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
-      0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+    background-color: #f8f9ff;
+    padding: 30px;
+    @extend .boxShadow;
+
+    border-top: 3pt double #7f8bd0;
     h2 {
       font-size: 40px;
       font-family: "Vollkorn", serif;
@@ -40,57 +142,49 @@
     }
     h3 {
       font-size: 25px;
-      opacity: 0.5;
+      color: rgb(112, 114, 120);
       font-family: "Vollkorn", serif;
-    }
-  }
-  .home-search {
-    display: flex;
-    padding: 40px;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .home-link {
-    margin-top: 50px;
-    font-family: "Roboto", sans-serif;
-    font-size: 30px;
-    font-weight: 700;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    a {
-      color: $blue;
-      &:not(:last-child) {
-        margin-right: 50px;
-      }
+      font-weight: lighter;
+      margin-bottom: 10px;
     }
   }
   .gotoTrend {
-    margin-top: 50px;
     display: flex;
-    width: 120%;
+    margin-top: 50px;
+    width: 100%;
+    padding: 40px;
     text-align: center;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 20px;
-    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
-      0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+    background-color: #fffdf1;
+    border-top: 3pt double #ffce72;
+
+    @extend .boxShadow;
     h2 {
       color: #fb8500;
-      font-size: 25px;
+      font-family: "Raleway", cursive;
+      font-size: 30px;
       font-weight: 700;
-      margin-bottom: 20px;
+      margin-bottom: 30px;
+      text-transform: uppercase;
+      border-bottom: 3pt double $star;
+      padding-bottom: 10px;
+      width: 60%;
+      i {
+        color: $star;
+      }
     }
     .gotoTrend-repos {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+
       a {
-        font-size: 18px;
+        font-size: 20px;
         margin: 10px 0px;
+        font-family: "Raleway", cursive;
       }
       .repoName {
         font-weight: 600;

@@ -9,32 +9,63 @@
 
 h3 {
   display: flex;
-  justify-content: center;
+  justify-content: left;
   align-items: center;
-  margin-top: 50px;
+  margin: 50px 0px;
   font-weight: 700;
   font-family: "Roboto", sans-serif;
-  font-size: 30px;
+  font-size: 27px;
+  color: rgb(15, 100, 142);
   opacity: 0.8;
 }
 
 a {
+  .login-github::before {
+    transform: scaleX(0);
+    transform-origin: bottom right;
+  }
+
+  .login-github:hover::before {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
+
+  .login-github::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    inset: 0 0 0 0;
+    background: hsl(200 100% 80%);
+    z-index: -1;
+    transition: transform 0.3s ease;
+  }
+
   .login-github {
-    display: flex;
-    justify-content: center;
-    border-radius: 25px;
-    align-items: center;
-    margin-top: 30px;
-    height: 80px;
-    background-color: rgb(93, 32, 167);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
-      0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
-      0 8px 16px rgba(0, 0, 0, 0.11);
-    font-family: "Raleway", sans-serif;
-    color: white;
-    font-size: 50px;
-    font-weight: 500;
-    font-family: "Roboto", sans-serif;
-    font-size: 25px;
+    position: relative;
+    font-size: 5rem;
+  }
+
+  html {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  body {
+    min-block-size: 100%;
+    min-inline-size: 100%;
+    margin: 0;
+    box-sizing: border-box;
+    display: grid;
+    place-content: center;
+  }
+
+  @media (orientation: landscape) {
+    body {
+      grid-auto-flow: column;
+    }
   }
 }

 .user-quote {
-  margin-top: 20px;
   h2 {
     font-size: 30px;
     font-family: "Vollkorn", serif;
-    margin: 15px 0px;
+    margin-top: 40px;
   }
   h3 {
     display: flex;
-    margin-right: 100px;
     flex-direction: row-reverse;
+    margin-top: 20px;
+    margin-right: 80px;
     font-size: 20px;
-    opacity: 0.5;
     font-family: "Vollkorn", serif;
+    color: #74828e;
+    font-weight: lighter;
   }
 }
-label {
+
+.labelSetting {
+  width: 100px;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-end;
   font-family: "Raleway", sans-serif;
   font-size: 13px;
   font-weight: bold;
-  padding: 10px;
+  margin: 2px;
+  color: $blue;
 }
+.infoSetting {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  font-family: "Roboto", sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 2px;
+  color: #1e1e1ed9;
+  margin: 10px;
+}
+.mainText {
+  display: inline-flex;
+  font-family: "Raleway", sans-serif;
+  font-size: 25px;
+  font-weight: bolder;
+  margin: 5px;
+  color: #392f76;
+}
+
+.boxEffect {
+  content: "";
+  bottom: 15px;
+  right: 10px;
+  left: auto;
+  background: #777;
+  -webkit-box-shadow: 0 15px 10px #777;
+  -moz-box-shadow: 0 15px 10px #777;
+  box-shadow: 0 15px 10px #777;
+  -webkit-transform: rotate(-1deg);
+  -moz-transform: rotate(-1deg);
+  -o-transform: rotate(-1deg);
+  -ms-transform: rotate(-1deg);
+  transform: rotate(-1deg);
+}
+
+//#fff5f6
+//#f8f8ff
+//#f2f3f8;
+//lavender
+//#ecedfc
+//#e3edf7
+//#ddeeff
+//#fff6c3
+
 .user-profile {
+  margin-bottom: 50px;
+  margin-top: 30px;
+  margin-right: 23px;
+  width: 600px;
+  padding: 10px;
+  padding-bottom: 50px;
+  background-color: #fff6c3;
+  @extend .boxEffect;
+
   .user-profile__column {
     img {
-      width: 100px;
-      height: 100px;
-      object-fit: cover;
+      width: 176px;
+      height: 220px;
+      object-fit: contain;
+      margin: 5px;
     }
     .user-profile__link {
       display: flex;
       font-family: "Raleway", sans-serif;
-      flex-wrap: wrap;
       font-weight: bold;
-      width: 5px;
-      color: rgb(92, 92, 221);
+      font-size: 15px;
+      color: rgb(70, 70, 216);
+      margin: 5px;
+      padding: 2px;
+      a {
+        margin: 5px;
+        margin-right: 15px;
+      }
     }
+    .user-profile__info {
+      h3 {
+        flex: 0 0 100px;
+        @extend .labelSetting;
       }
+      h4 {
+        @extend .infoSetting;
+      }
+      .user-profile__career {
+        display: flex;
+      }
+      .user-profile__tech {
+        display: flex;
+      }
+      .user-profile__introduction {
+        width: 100%;
+        overflow: hidden;
+        word-wrap: break-word;
+        word-break: break-all;
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        font-size: 20px;
+        font-weight: bold;
+        padding: 2px;
+        color: rgba(0, 0, 0, 0.85);
+        margin: 10px;
+      }
+    }
+  }
+}
+
+.user-git {
+  margin-left: 20px;
+  .user-status {
+    .user-status__contributions {
+      margin-top: 40px;
+      h3 {
+        @extend .mainText;
+      }
+      span {
+        color: orange;
+        display: inline-flex;
+        font-family: "Raleway", sans-serif;
+        font-size: 40px;
+        font-weight: bolder;
+        margin: 5px;
+      }
+      img {
+        width: 600px;
+        height: auto;
+        object-fit: cover;
+        margin: 5px;
+      }
+    }
+
+    .user-repositories {
+      margin-top: 30px;
+
+      h3 {
+        margin-top: 15px;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        @extend .mainText;
+      }
+      .user-repo {
+        margin-top: 50px;
+        .repoName {
+          display: inline-flex;
+          flex-direction: row;
+          justify-content: flex-end;
+          font-family: "Raleway", cursive;
+          font-size: 18px;
+          font-weight: bold;
+          padding: 2px;
+          text-transform: uppercase;
+          color: #1e1e1ed9;
+          margin: 5px;
+          width: 150px;
+        }
+        .repoUrl {
+          display: inline-flex;
+          flex-direction: row;
+          font-family: "Roboto", sans-serif;
+          font-size: 20px;
+          font-weight: 400;
+          color: #6f6f6f;
+          margin: 10px;
+        }
+        .repoUrl:hover {
+          display: inline-flex;
+          flex-direction: row;
+          font-family: "Roboto", sans-serif;
+          font-size: 20px;
+          font-weight: 400;
+          text-decoration: underline;
+          color: #6868af;
+          margin: 10px;
+        }
+      }
+    }
+
+    .user-status__character {
+      margin-top: 60px;
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      h3 {
+        @extend .mainText;
+      }
+      img {
+        max-width: 200px;
+        height: auto;
+        object-fit: cover;
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+.pageLayout {
+  display: flex;
+  flex-direction: row;
 }

@@ -13,18 +13,17 @@ const getQuote = async (req, res) => {
   return { quote, author };
 };
 
-
 export const handleHome = async (req, res) => {
   const quote = await getQuote();
   res.render("home", {
     pageTitle: "Home",
     quote: quote.quote,
-    author: quote.author
+    author: quote.author,
   });
 };
 
 export const getUserDetail = async (req, res) => {
-  try{
+  try {
     const id = req.params.id;
     const quote = await getQuote();
     const user = await User.findById(id);
@@ -34,15 +33,14 @@ export const getUserDetail = async (req, res) => {
       quote: quote.quote,
       author: quote.author,
       user,
-      totalContributions: totalCon,
+      totalContributions: totalCon
     });
-  } catch(error){
+  } catch (error) {
     console.log(error);
     res.redirect("/");
   }
 };
 
-
 export const getEditProfile = async (req, res) => {
   const {
     user: { _id: id },
@@ -84,7 +82,7 @@ export const postEditProfile = async (req, res) => {
     );
     req.session.passport.user = updatedUser;
     //console.log(updatedUser);
-    res.redirect("/users/edit-profile");
+    res.redirect(`/users/${id}`);
   } catch (error) {
     console.log(error);
     res.redirect("/");
@@ -132,7 +130,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
         avatarUrl,
         githubUrl,
         name,
-        email,
+        email
       });
       return done(null, newUser);
     }
@@ -151,16 +149,40 @@ export const logout = (req, res) => {
   res.redirect("/");
 };
 
-const getContributions = async(username) =>{
+const getContributions = async (username) => {
   const token = process.env.GH_SECRET_SH;
   const headers = {
-      'Authorization': `bearer ${token}`,
+    Authorization: `bearer ${token}`,
   };
   const body = {
-    "query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`
+    query: `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`,
   };
-  const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers });
+  const response = await fetch("https://api.github.com/graphql", {
+    method: "POST",
+    body: JSON.stringify(body),
+    headers: headers,
+  });
   const totalContributions = await response.json();
-  const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions;
+  const total =
+    totalContributions.data.user.contributionsCollection.contributionCalendar
+      .totalContributions;
   return total;
 };
+
+export const getRepos = async(req,res) =>{
+  try{
+  const githubNickname = req.headers.nickname
+  const URL = `https://api.github.com/users/${githubNickname}/repos?sort=updated&per_page=2`;
+  const response = await fetch(URL,{
+    headers: {
+      authorization: `token ${process.env.GH_SECRET_SH}`
+    }
+  }).then(function (response) {
+      return response.json();
+    }).then(function (data) {
+      return res.send(data);
+    });
+  }catch(error){
+    console.log(error);
+  }
+}
\ No newline at end of file

 import express from "express";
 import {
   getEditProfile,
+  getRepos,
   getUserDetail,
   handleUsers,
   postEditProfile,
@@ -20,5 +21,6 @@ userRouter.post(
 );
 
 userRouter.get("/:id", getUserDetail);
+userRouter.get("/:id/repo", getRepos);
 
 export default userRouter;

@@ -4,13 +4,8 @@ block content
     .home
         .home-title 
             h2 "Develop your value" 
-            h1 Developer Profile
-        .home-quote
-            h2=quote 
-            h3=author
-        .home-search 
-            form.home-search__form
-                input(type="text" id="jsInput" placeholder="Google 검색")
+            span Developer Profile
+
         .home-link
             if !loggedUser
                 a(href="/join") Join
@@ -18,8 +13,22 @@ block content
             else 
                 a(href=`/users/${loggedUser._id}`) My profile
 
+        .home-search 
+            form.home-search__form
+                a(href="https://google.com" target="_blank")
+                    img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon")
+                input(type="text" id="jsInput" placeholder="Google 검색")
+                button 
+                    i.fa.fa-search(aria-hidden="true")
+
+        .home-quote
+            h2=quote 
+            h3=author
+            
+            
         .gotoTrend#jsGotoTrend
-            h2 Today's Trending Repositories:
+            h2 Today's Trending Repositories  
+                i.fas.fa-link 
             .gotoTrend-repos#jsGotoTrendRepos
                 span#jsIndicator Waiting....
 block scripts 

 extends layouts/main
 
 block content
-    i.fas.fa-location-arrow
-    h3 Join Us!
+    h3 Click Below to Join Us!
     a(href="/auth/github")
         .login-github
             i.fab.fa-github 
             span Join with GitHub
             
 
+
+    
\ No newline at end of file

 extends layouts/main
 
 block content
-    i.fas.fa-location-arrow
-    h3 Login with GitHub!
+    h3 Click Below to Login with GitHub!
     a(href="/auth/github")
         .login-github
             i.fab.fa-github 

@@ -6,48 +6,69 @@ block content
         h3=author
 
     hr
+    .pageLayout
         .user-profile 
             .user-profile__column 
                 img(src=`/${user.avatarUrl}`)
                 .user-profile__link 
-                a(href=user.githubUrl target="_blank") Github 
+                    a(href=user.githubUrl target="_blank") GitHub 
+                        i.fab.fa-github                  
                     a(href=`//${user.blogUrl}` target="_blank") Blog 
+                        i.fas.fa-link 
             .user-profile__column
                 .user-profile__info
                     .user-profile__name
-                    h3 NAME:  
+                        h3 NAME
                         h4=user.name  
                     .user-profile__github              
-                    h3 GITHUB NICKNAME: 
-                    h4#jsGithubname=user.githubName  
+                        h3       GITHUB 
+                            br
+                            |NICKNAME 
+                        h4#jsGithubNickname=user.githubName  
                     .user-profile__email
-                    h3 EMAIL: 
+                        h3 EMAIL
                         h4=user.email 
                     .user-profile__school      
-                    h3 SCHOOL:   
+                        h3 SCHOOL   
                         h4=user.school
                     .user-profile__tech
-                    h3 TECH:
+                        h3 TECH
                         ul
                             each tech in user.tech 
                                 li=tech
                     .user-profile__career
-                    h3 CAREER:
+                        h3 CAREER
                         ul
                             each career in user.career
-                            li=career
+                                li.career_list=career
                     .user-profile__introduction            
-                    h3 SELF-INTRODUCTION:        
+                        h3                     SELF
+                            br
+                            |INTRODUCTION    
                         h4=user.introduction
-    hr
+
+        .user-git 
             .user-status
                 .user-status__contributions
+                    h3 YOU'VE MADE 
                     span#jsTotalContributions=totalContributions
+                    h3 CONTRIBUTIONS!
                     img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
-        .user-status__character
-            h3 Your step
+
+
                 .user-repositories
                     .user-repo
-            h3 Repositories
+                        h3 Your recent updated repositories:
+
+
+                .user-status__character
+                    h3 YOUR STATUS
+            
+            
+    
+
+
+    
+
 block scripts 
     script(src="/static/js/githubInfo.js") 

-scss -> screens/assets둘다
-사진 크기 설정하기
-
-youtube와 구글에 scss나 sass 검색마니하기
-
-pug 파일 안에 이미 있는 css 다 지워버리기
-css하다보면 pug파일 많이 수정해야할거임
-
-아직 세진님께 불러와지네요..? 최근 repos
\ No newline at end of file