로그인 페이지/회원가입 페이지 #14

henny-oh · 2020-12-29T14:41:18Z

요약

-dodam/pages/login.js 생성
-dodam/pages/register.js 생성

설명

요약 dodam-components/pages/login.js 생성 dodam-components/pages/register.js 생성

로그인 /회원가입

jaykay-p

prettier와 eslint가 설치여부와 에디터에서 실행중인지 확인해주세요! prettier로 포맷팅이 되지 않아 코드 읽기가 어렵고 eslint 오류가 몇개 보이는데 무시하시면 안돼요ㅠㅠ
다음부터는 fork한 리파지토리에서도 새로운 branch를 파셔서 작업 부탁드립니다!

UI는 전체적으로 괜찮아보여요🙂
다만 다른 요구사항이었던 비밀번호가 일치하는지 확인하는 로직이 빠져있고, 카카오 로그인 부분도 빠져있네요. 댓글 확인해주시고 다른 요구사항도 진행해주세요~!

jaykay-p · 2020-12-30T06:11:32Z

packages/dodam/pages/login.js

@@ -0,0 +1,75 @@
+import { Input,Typography, Button, DatePicker } from '@dodam/components';


login 페이지에서는 DatePicker를 사용하고 있지 않습니다!

jaykay-p · 2020-12-30T06:12:08Z

packages/dodam/pages/login.js

+  return (
+    <div>
+      <div className="section">
+      <div class="title"><Typography class="title" variant="Heading">로그인</Typography></div>


className을 class로 실수하신것같아요

Typography varaint는 아래 종류만 가능합니다..!

const variant?: 'p' | 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1' | 'span';

jaykay-p · 2020-12-30T06:22:45Z

packages/dodam/pages/login.js

+      <Input type="text" placeholder="아이디를 입력하세요" />
+      <Input type="text" placeholder="비밀번호를 입력하세요" />
+      <Button fullWidth >로그인</Button>
+      <div className="sub"><Typography><p><span>아이디/비밀번호 찾기 </span><span>|</span><span> 회원가입</span></p></Typography></div>


span태그를 사용해야 될 경우에는 variant 에 span을 아래와 같이 전달할 수 있어요.

<Typography variant="span" />

아래 디자인과 같이 아이디/비밀번호 찾기와 회원가입을 구분할 수 있게 css 수정해주세요

jaykay-p · 2020-12-30T06:25:36Z

packages/dodam/pages/login.js

+      <style jsx global>
+      {`
+      p{
+        text-align: center;
+        font-size:12px;
+        color:#505050;
+        margin-bottom:70px;
+      }


global 한 스타일을 모든 p 태그에 적용하게 되면 다른 웹 페이지에서 사용되는 p 태그에도 영향을 줍니다...😭 scoped한 스타일을 적용할 수 있게 global을 삭제 해주시거나 class selector을 사용해주세요

jaykay-p · 2020-12-30T06:26:50Z

packages/dodam/pages/login.js

+      p{
+        text-align: center;
+        font-size:12px;
+        color:#505050;
+        margin-bottom:70px;
+      }
+      .sub{
+        text-align:center;
+        justify-content:center;
+      }
+      .section{
+        margin:34px;
+      }
+      .title{
+        font-size:24px;
+        font-weight: bold;
+        justify-content:center;
+        text-align:center;
+        margin-top:60px ;
+        margin-bottom: 35px; 
+
+      }
+      .label1{
+        font-size:12px;
+        color:#CDCDCD;
+      }
+      Button{
+        margin-top:36px;
+        margin-bottom:10px;
+      }
+      .kakao{
+        margin-top:19px;
+        color:#505050;
+      }
+      .hr-sect {
+        display: flex;
+        flex-basis: 100%;
+        align-items: center;
+        color: #BBBBBB;
+        font-size: 12px;
+
+      }
+      .hr-sect::before,
+      .hr-sect::after {
+        content: "";
+        flex-grow: 1;
+        background: #BBBBBB;
+        height: 1px;
+        font-size: 0px;
+        line-height: 0px;
+        margin: 0px 8px;
+      }
+      `}


모든 margin과 padding은 8px배수로 해주세요. 이유는 링크를 참고해주세요!!

jaykay-p · 2020-12-30T06:29:28Z

packages/dodam/pages/register.js

+      <Input label="비밀번호" type="text"/>
+      <Input label="이름" type="text"/>
+      <Typography className="label1">생년월일</Typography>
+      <DatePicker selected={new Date()} onChange={(date) => console.log(date)} />


선택된 Date은 useState을 사용해서 컴포넌트 데이터로 가지고 있는게 좋아보여요

jaykay-p · 2020-12-30T06:30:40Z

packages/dodam/pages/register.js

+      <style jsx global>
+      {`
+
+      .section{
+        margin:34px;
+      }
+      .title{
+        font-size:24px;
+        font-weight: bold;
+        justify-content:center;
+        text-align:center;
+        margin-top:60px ;
+        margin-bottom: 35px; 
+
+      }
+      .label1{
+        font-size:12px;
+        color:#CDCDCD;
+      }
+      `}
+  </style>


여기서도 global한 스타일을 적용하면 모든 .title, .label1 클래스가 모든 웹페이지에 반영돼요. section 클래스 안에서만 적용될 수 있게 .section .title, .section .label1이런식으로 클래스 selector를 수정하는것도 하나의 방법일것같아요

jaykay-p · 2020-12-30T06:31:10Z

packages/dodam/pages/register.js

+      <Button fullWidth variant="secondary">가입하기</Button>
+
+
+      </div>s


s 지우시는걸 깜빡하신것 같아요ㅋㅋㅋ

jaykay-p · 2020-12-30T06:43:04Z

packages/dodam/pages/login.js

+    <div>
+      <div className="section">
+      <div class="title"><Typography class="title" variant="Heading">로그인</Typography></div>
+      <Input type="text" placeholder="아이디를 입력하세요" />
+      <Input type="text" placeholder="비밀번호를 입력하세요" />
+      <Button fullWidth >로그인</Button>
+      <div className="sub"><Typography><p><span>아이디/비밀번호 찾기 </span><span>|</span><span> 회원가입</span></p></Typography></div>
+      <div class="hr-sect">또는</div>
+
+      <Button fullWidth className="kakao">Kakao로 계속</Button>
+      </div>


form을 제출하는 페이지기 때문에 <form>태그로 감싸주고 submit 이벤트를 핸들해주어야 합니다. 아래 예시와 같이 작성을 해주셔야 엔터나 버튼을 클릭하면 submit 이벤트가 실행돼요!

<form onSubmit={ handleSubmit }> ... </form>

form 예제
class 컴포넌트로 되어있는 예제입니다. 이 예제를 참고하면서 함수형 컴포넌트로 옮겨주세요

jaykay-p · 2020-12-30T06:48:13Z

packages/dodam/pages/register.js

+      <div className="section">
+      <div class="title"><Typography class="title" variant="Heading">회원가입</Typography></div>
+      <Input label="아이디" type="text"/>
+      <Input label="비밀번호" type="text"/>
+      <Input label="비밀번호" type="text"/>
+      <Input label="이름" type="text"/>
+      <Typography className="label1">생년월일</Typography>
+      <DatePicker selected={new Date()} onChange={(date) => console.log(date)} />
+      <Input label="휴대폰 번호(-없이 입력하세요)" type="text"/>
+
+      <Button fullWidth variant="secondary">가입하기</Button>


이 페이지에서도 form을 제출하기 때문에 form태그로 감싸주세요!

henny-oh added 2 commits December 29, 2020 23:34

로그인 /회원가입

2e517e6

요약 dodam-components/pages/login.js 생성 dodam-components/pages/register.js 생성

Merge pull request #1 from henny-oh/henny-oh-patch-1

68be9d6

로그인 /회원가입

jaykay-p self-requested a review December 30, 2020 06:02

jaykay-p assigned henny-oh Dec 30, 2020

jaykay-p requested changes Dec 30, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

로그인 페이지/회원가입 페이지 #14

로그인 페이지/회원가입 페이지 #14

henny-oh commented Dec 29, 2020

jaykay-p left a comment

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

jaykay-p Dec 30, 2020

		@@ -0,0 +1,75 @@
		import { Input,Typography, Button, DatePicker } from '@dodam/components';

		<Button fullWidth variant="secondary">가입하기</Button>


		</div>s

로그인 페이지/회원가입 페이지 #14

Are you sure you want to change the base?

로그인 페이지/회원가입 페이지 #14

Conversation

henny-oh commented Dec 29, 2020

요약

설명

jaykay-p left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment