Merge pull request #11 from ConnecTo-FrontEnd/refactor-younha

로그인, 회원가입 폼 수정 및 닉네임 추가 구현
ConnecTo-FrontEnd · Oct 19, 2022 · 45f313a · 45f313a
2 parents 046f5ab + 314e40e
commit 45f313a
Show file tree

Hide file tree

Showing 11 changed files with 342 additions and 30 deletions.
diff --git a/db/auth/db.json b/db/auth/db.json
@@ -1 +1 @@
-[{"id":"aaa","password":"111"},{"id":"bbb","password":"222"},{"id":"ccc","password":"333"},{"id":"ddd","password":"444"},{"id":"asasas@gmail.com","password":"123123"},{"id":"asasas@gmail.com","password":"123123"},{"id":"[email protected]","password":"123123"},{"id":"[email protected]","password":"123123"},{"id":"[email protected]","password":"123123"},{"id":"[email protected]","password":"123123"}]
+[{"id":"aaa","password":"111"},{"id":"qkrdbsgk00@gmail.com","password":"aaaaaa"},{"id":"dunkin@dunkin.com","password":"donuts"}]
diff --git a/db/user/crud.js b/db/user/crud.js
@@ -14,13 +14,14 @@ const setData = newData => {
 };
 
 module.exports = {
-  create(id) {
+  create(id, nickname) {
     const date = new Date();
     setData([
       ...data,
       {
         lastVisit: date,
         id,
+        nickname,
         setting: {
           day: DEFAULT_DAY,
           number: DEFAULT_NUMBER,

diff --git a/db/user/db.json b/db/user/db.json
@@ -1 +1,240 @@
-[{"lastVisit":"2022-10-10T05:25:19.506Z","id":"aaa","setting":{"day":3,"number":2,"platform":["boj","programmers","leetcode"],"nickname":"undefined"},"removedIds":["boj17140","boj2750","boj1092","boj3184","boj1707","boj2747","boj1202","boj1167","boj16954","boj2210","boj11400","boj10825","boj2108","boj1939","boj10808","boj1374","boj16435","boj10872","boj2523","boj1449","boj2693","boj10989","boj20924","boj3187","boj1012","boj1251","boj16953","boj2557","boj22864","boj10816","boj2636","boj2812","boj11651","boj11654","boj11501","boj1052","boj13459"],"problemList":[{"link":"https://www.acmicpc.net/problem/2490","title":"윷놀이","id":"boj2490","platform":"boj","category":"구현","solved":false,"givenDate":"2022-10-17T13:33:48.370Z"},{"link":"https://www.acmicpc.net/problem/2438","title":"별 찍기 - 1","id":"boj2438","platform":"boj","category":"구현","solved":false,"givenDate":"2022-10-17T13:33:48.370Z"},{"link":"https://www.acmicpc.net/problem/9237","title":"이장님 초대","id":"boj9237","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T13:33:48.370Z"},{"link":"https://www.acmicpc.net/problem/17471","title":"게리맨더링","id":"boj17471","platform":"boj","category":"너비 우선 탐색","solved":false,"givenDate":"2022-10-17T13:33:51.754Z"}]},{"lastVisit":"2022-10-19T05:36:19.717Z","id":"[email protected]","setting":{"day":3,"number":3,"platform":["boj"],"lastUpdate":"2022-10-17T05:36:19.717Z"},"problemList":[{"link":"https://www.acmicpc.net/problem/22864","title":"피로도","id":"boj22864","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T05:36:45.921Z"},{"link":"https://www.acmicpc.net/problem/9237","title":"이장님 초대","id":"boj9237","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T13:33:48.370Z"},{"link":"https://www.acmicpc.net/problem/17471","title":"게리맨더링","id":"boj17471","platform":"boj","category":"너비 우선 탐색","solved":false,"givenDate":"2022-10-17T13:33:51.754Z"}],"removedIds":["boj4677","boj1931"]},{"lastVisit":"2022-10-17T05:36:19.717Z","id":"[email protected]","setting":{"day":1,"number":3,"platform":["boj"],"lastUpdate":"2022-10-17T05:36:19.717Z"},"problemList":[{"link":"https://www.acmicpc.net/problem/22864","title":"피로도","id":"boj22864","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T05:36:45.921Z"}],"removedIds":["boj4677","boj1931"]},{"lastVisit":"2022-10-17T05:36:19.719Z","id":"[email protected]","setting":{"day":1,"number":3,"platform":["boj"],"lastUpdate":"2022-10-17T05:36:19.719Z"},"problemList":[{"link":"https://www.acmicpc.net/problem/22864","title":"피로도","id":"boj22864","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T05:36:45.921Z"}],"removedIds":[]},{"lastVisit":"2022-10-17T13:07:58.950Z","id":"[email protected]","setting":{"day":1,"number":3,"platform":["boj"],"lastUpdate":"2022-10-17T13:07:58.950Z"},"problemList":[],"removedIds":[]},{"lastVisit":"2022-10-17T13:13:23.137Z","id":"[email protected]","setting":{"day":1,"number":3,"platform":["boj"],"lastUpdate":"2022-10-17T13:13:23.137Z"},"problemList":[],"removedIds":[]},{"lastVisit":"2022-10-17T13:13:40.016Z","id":"[email protected]","setting":{"day":4,"number":6,"platform":["boj","programmers"],"lastUpdate":"2022-10-17T13:13:40.016Z","nickname":"한조"},"problemList":[{"link":"https://www.acmicpc.net/problem/2583","title":"영역 구하기","id":"boj2583","platform":"boj","category":"깊이 우선 탐색","solved":false,"givenDate":"2022-10-17T13:26:53.808Z"},{"link":"https://www.acmicpc.net/problem/1246","title":"온라인 판매","id":"boj1246","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T13:26:55.459Z"},{"link":"https://www.acmicpc.net/problem/1052","title":"물병","id":"boj1052","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-17T13:26:56.975Z"}],"removedIds":["boj1920","boj14659","boj1059","boj5214"]},{"lastVisit":"2022-10-18T05:36:23.868Z","id":"[email protected]","setting":{"day":2,"number":6,"platform":["boj"],"lastUpdate":"2022-10-18T05:36:23.868Z"},"problemList":[{"link":"https://www.acmicpc.net/problem/1707","title":"이분 그래프","id":"boj1707","platform":"boj","category":"깊이 우선 탐색","solved":false,"givenDate":"2022-10-18T13:37:40.143Z"},{"link":"https://www.acmicpc.net/problem/2573","title":"빙산","id":"boj2573","platform":"boj","category":"깊이 우선 탐색","solved":false,"givenDate":"2022-10-18T13:37:40.143Z"},{"link":"https://www.acmicpc.net/problem/5430","title":"AC","id":"boj5430","platform":"boj","category":"구현","solved":false,"givenDate":"2022-10-18T13:37:40.143Z"},{"link":"https://www.acmicpc.net/problem/24445","title":"알고리즘 수업 - 너비 우선 탐색 2","id":"boj24445","platform":"boj","category":"너비 우선 탐색","solved":false,"givenDate":"2022-10-18T13:38:20.691Z"},{"link":"https://www.acmicpc.net/problem/3135","title":"라디오","id":"boj3135","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-18T13:38:49.169Z"},{"link":"https://www.acmicpc.net/problem/1213","title":"팰린드롬 만들기","id":"boj1213","platform":"boj","category":"그리디 알고리즘","solved":false,"givenDate":"2022-10-18T13:38:49.169Z"}],"removedIds":["boj2617","boj2617","boj13565","boj13565","boj2908","boj20044","boj1431","boj2638","boj2490","boj2490","boj2250"]}]
+[
+  {
+    "lastVisit": "2022-10-10T05:25:19.506Z",
+    "id": "aaa",
+    "nickname": "트리플A",
+    "setting": { "day": 1, "number": 3, "platform": ["boj", "programmers", "leetcode"], "nickname": "undefined" },
+    "removedIds": [
+      "boj17140",
+      "boj2750",
+      "boj1092",
+      "boj3184",
+      "boj1707",
+      "boj2747",
+      "boj1202",
+      "boj1167",
+      "boj16954",
+      "boj2210",
+      "boj11400",
+      "boj10825",
+      "boj2108",
+      "boj1939",
+      "boj10808",
+      "boj1374",
+      "boj16435",
+      "boj10872",
+      "boj2523",
+      "boj1449",
+      "boj2693",
+      "boj10989",
+      "boj20924",
+      "boj3187",
+      "boj1012",
+      "boj1251",
+      "boj16953",
+      "boj2557",
+      "boj22864",
+      "boj10816",
+      "boj2636",
+      "boj2812",
+      "boj11651",
+      "boj11654",
+      "boj11501",
+      "boj1052",
+      "boj13459",
+      "boj11724",
+      "boj14466",
+      "boj21609",
+      "boj11399",
+      "boj13913",
+      "boj10026",
+      "boj8872",
+      "boj1448",
+      "boj2665",
+      "boj14469",
+      "boj1260"
+    ],
+    "problemList": [
+      {
+        "link": "https://www.acmicpc.net/problem/13023",
+        "title": "ABCDE",
+        "id": "boj13023",
+        "platform": "boj",
+        "category": "깊이 우선 탐색",
+        "solved": false,
+        "givenDate": "2022-10-18T19:38:39.390Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/1755",
+        "title": "숫자놀이",
+        "id": "boj1755",
+        "platform": "boj",
+        "category": "정렬",
+        "solved": false,
+        "givenDate": "2022-10-18T19:38:45.708Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/16724",
+        "title": "피리 부는 사나이",
+        "id": "boj16724",
+        "platform": "boj",
+        "category": "깊이 우선 탐색",
+        "solved": false,
+        "givenDate": "2022-10-18T19:38:39.390Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/11022",
+        "title": "A+B - 8",
+        "id": "boj11022",
+        "platform": "boj",
+        "category": "구현",
+        "solved": false,
+        "givenDate": "2022-10-18T19:38:39.390Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/12851",
+        "title": "숨바꼭질 2",
+        "id": "boj12851",
+        "platform": "boj",
+        "category": "너비 우선 탐색",
+        "solved": false,
+        "givenDate": "2022-10-18T19:38:39.390Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/1931",
+        "title": "회의실 배정",
+        "id": "boj1931",
+        "platform": "boj",
+        "category": "정렬",
+        "solved": false,
+        "givenDate": "2022-10-19T01:23:06.850Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/9328",
+        "title": "열쇠",
+        "id": "boj9328",
+        "platform": "boj",
+        "category": "너비 우선 탐색",
+        "solved": false,
+        "givenDate": "2022-10-19T01:23:06.850Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/1924",
+        "title": "2007년",
+        "id": "boj1924",
+        "platform": "boj",
+        "category": "구현",
+        "solved": false,
+        "givenDate": "2022-10-19T01:23:06.850Z"
+      }
+    ]
+  },
+  {
+    "lastVisit": "2022-10-19T05:36:19.717Z",
+    "id": "[email protected]",
+    "nickname": "게스트",
+    "setting": { "day": 3, "number": 3, "platform": ["boj"], "lastUpdate": "2022-10-17T05:36:19.717Z" },
+    "problemList": [
+      {
+        "link": "https://www.acmicpc.net/problem/22864",
+        "title": "피로도",
+        "id": "boj22864",
+        "platform": "boj",
+        "category": "그리디 알고리즘",
+        "solved": false,
+        "givenDate": "2022-10-17T05:36:45.921Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/9237",
+        "title": "이장님 초대",
+        "id": "boj9237",
+        "platform": "boj",
+        "category": "그리디 알고리즘",
+        "solved": false,
+        "givenDate": "2022-10-17T13:33:48.370Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/17471",
+        "title": "게리맨더링",
+        "id": "boj17471",
+        "platform": "boj",
+        "category": "너비 우선 탐색",
+        "solved": false,
+        "givenDate": "2022-10-17T13:33:51.754Z"
+      }
+    ],
+    "removedIds": ["boj4677", "boj1931"]
+  },
+  {
+    "lastVisit": "2022-10-18T18:36:13.715Z",
+    "id": "[email protected]",
+    "nickname": "방구나",
+    "setting": { "day": 1, "number": 3, "platform": ["boj"], "lastUpdate": "2022-10-18T18:36:13.715Z" },
+    "problemList": [
+      {
+        "link": "https://www.acmicpc.net/problem/5052",
+        "title": "전화번호 목록",
+        "id": "boj5052",
+        "platform": "boj",
+        "category": "정렬",
+        "solved": false,
+        "givenDate": "2022-10-18T18:41:43.892Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/10825",
+        "title": "국영수",
+        "id": "boj10825",
+        "platform": "boj",
+        "category": "정렬",
+        "solved": false,
+        "givenDate": "2022-10-18T18:41:43.892Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/1758",
+        "title": "알바생 강호",
+        "id": "boj1758",
+        "platform": "boj",
+        "category": "그리디 알고리즘",
+        "solved": false,
+        "givenDate": "2022-10-18T18:41:43.892Z"
+      }
+    ],
+    "removedIds": []
+  },
+  {
+    "lastVisit": "2022-10-19T01:24:24.347Z",
+    "id": "[email protected]",
+    "nickname": "던킨먹는날",
+    "setting": { "day": 1, "number": 3, "platform": ["boj"], "lastUpdate": "2022-10-19T01:24:24.347Z" },
+    "problemList": [
+      {
+        "link": "https://www.acmicpc.net/problem/13305",
+        "title": "주유소",
+        "id": "boj13305",
+        "platform": "boj",
+        "category": "그리디 알고리즘",
+        "solved": false,
+        "givenDate": "2022-10-19T01:24:37.864Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/3135",
+        "title": "라디오",
+        "id": "boj3135",
+        "platform": "boj",
+        "category": "그리디 알고리즘",
+        "solved": false,
+        "givenDate": "2022-10-19T01:24:37.864Z"
+      },
+      {
+        "link": "https://www.acmicpc.net/problem/1009",
+        "title": "분산처리",
+        "id": "boj1009",
+        "platform": "boj",
+        "category": "구현",
+        "solved": false,
+        "givenDate": "2022-10-19T01:24:37.864Z"
+      }
+    ],
+    "removedIds": []
+  }
+]
diff --git a/server.js b/server.js
@@ -69,10 +69,10 @@ app.post('/signin', (req, res) => {
 });
 
 app.post('/signup', (req, res) => {
-  const { id, password } = req.body;
+  const { id, password, nickname } = req.body;
   if (!auth.exist(id)) {
     auth.create(id, password);
-    user.create(id);
+    user.create(id, nickname);
   }
 
   res.json(user.getInfo(id));

diff --git a/src/pages/SignIn/components/SigninForm.js b/src/pages/SignIn/components/SigninForm.js
@@ -4,6 +4,7 @@ import { SigninScheme } from '../../../shared/scheme/scheme.js';
 import styled from '../../../library/styled.js';
 import { requestSignIn } from '../../../shared/store/userInfo.js';
 import { router } from '../../../shared/router/index.js';
+import theme from '../../../shared/styles/theme.js';
 
 const styles = {
   submitBtn: {
@@ -17,6 +18,12 @@ const styles = {
       color: 'grey',
     }),
   },
+  errorMsg: styled({
+    height: '20px',
+    font: theme['font-kr-regular'],
+    color: theme['orange-color'],
+    'font-size': '14px',
+  }),
 };
 
 class SigninForm extends Component {
@@ -28,25 +35,23 @@ class SigninForm extends Component {
 
   domStr() {
     const { userid, password, errorMsg } = this.state;
-    const { isValid } = this.signinScheme;
-
     this.signinScheme.userid.value = userid;
     this.signinScheme.password.value = password;
+    const { isValid } = this.signinScheme;
 
     return `
       <form class="signin-form">
         ${Object.values(this.signinScheme)
           .map(scheme => new SchemeInput({ scheme, onInput: this.onInput.bind(this) }).render())
           .join('')}
-        <div>${errorMsg ?? ''}</div>  
+        <div ${styles.errorMsg}>${errorMsg ?? ''}</div>  
         <button ${styles.submitBtn[isValid ? 'active' : 'disabled']}  ${isValid ? '' : 'disabled'}>Sign in</button>
       </form>`;
   }
 
   onInput(e) {
     const newState = {};
     newState[e.target.name] = e.target.value;
-    newState.idChanged = e.target.name === 'userid' ? true : null;
     this.setState.call(this, newState);
   }
 

diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
@@ -2,17 +2,30 @@ import Component from '../../library/Component.js';
 import { Header } from '../../shared/components/index.js';
 import { router } from '../../shared/router/index.js';
 import { SigninForm } from './components/index.js';
+import styled from '../../library/styled.js';
+import theme from '../../shared/styles/theme.js';
 
+const styles = {
+  title: styled({
+    'text-align': 'center',
+    width: '100%',
+    font: theme['font-en-bold'],
+    'font-size': '47px',
+  }),
+  link: styled({
+    color: theme['orange-color'],
+  }),
+};
 class SignIn extends Component {
   domStr() {
     return `
       <div>
         ${new Header().render()}
-        <h1>AllSol</h1>
+        <h1 ${styles.title}>AllSol</h1>
         ${new SigninForm().render()}
         <div>
           Don't have an account?
-          <button class="signup-link">Sign up</button>
+          <button ${styles.link} class="signup-link">Sign up</button>
         </div>
       </div>
     `;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"id":"aaa","password":"111"},{"id":"bbb","password":"222"},{"id":"ccc","password":"333"},{"id":"ddd","password":"444"},{"id":"asasas@gmail.com","password":"123123"},{"id":"asasas@gmail.com","password":"123123"},{"id":"[email protected]","password":"123123"},{"id":"[email protected]","password":"123123"},{"id":"[email protected]","password":"123123"},{"id":"[email protected]","password":"123123"}]
		[{"id":"aaa","password":"111"},{"id":"qkrdbsgk00@gmail.com","password":"aaaaaa"},{"id":"dunkin@dunkin.com","password":"donuts"}]