[#8] 회원가입, 로그인 페이지 레이아웃 #27

dabin-Hailey · 2024-01-12T11:51:35Z

close #8

Description

완료 작업

푸터 레이아웃 (기능이 없는 공용 컴포넌트)
회원가입 페이지 레이아웃
로그인 페이지 레이아웃
login & signup 타입 파일 생성 및 분리

수정 예정

모바일 환경을 고려하여 작업하지 않았습니다. 모바일 시안 나오면 적용할 예정입니다. (px만 적용, % 미적용 상태)
스타일테마(컬러 팔레트) 사용하지 않고 hex값으로 작업했습니다. 추후 스타일테마 결정되면 수정 예정입니다.

예정 작업

데이터 유효성에 따라 변화하는 input과 button
- 유효성 체크 아이콘이 있는 input 제작
- 비밀번호 미리 보기/숨기기 아이콘이 있는 input 제작

유의할 점 및 ETC (Optional)

To. @JitHoon
로그인/회원가입 제외한 전체 페이지 Layout > outlet에 푸터 추가 부탁드립니다.

스크린샷 (Optional)

로그인 페이지

유효성 메세지가 포함된 로그인 페이지

회원가입 페이지

유효성 메세지가 포함된 회원가입 페이지

…nto feature/#8

vercel · 2024-01-12T11:51:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cool-peace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2024 8:00am
cool-peace-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2024 8:00am

JitHoon

고생하셨습니다!

JitHoon · 2024-01-12T12:23:49Z

src/routes/MainRouter/index.tsx

+import Login from '@pages/Login';
+import SignUp from '@pages/SignUp';


제가 이 부분 import 컨벤션을 적용하지 못했네요 😅

혹시 아래와 같이 수정 부탁드려도 될까요?

import { Route, Routes } from 'react-router-dom'; import { Layout } from '@components/common'; import Login from '@pages/Login'; import SignUp from '@pages/SignUp'; import Dashboard from '@pages/Dashboard.tsx'; import Report from '@pages/Report.tsx';

감사합니다~ 반영하였습니다! 0c678d9

JitHoon · 2024-01-12T12:30:44Z

src/pages/SignUp/index.tsx

+
+const Container = styled.div`
+  max-width: 524px;
+  height: calc(100% - 36px - 100px);


오 저도 전체 너비에서 기존 컨텐츠 값을 지우고 싶었는데 이렇게 쓰면 되군요,,

36px, 100px 의 경우 변동될 수 있으니 const로 빼고 emotion props로 받아서 사용하면 편할 것 같습니다!

지금은 레이아웃이 자주 바뀌니 나중에 리팩토링할 때 하면 좋을 것 같네욥

36px은 회원가입 페이지의 로고의 높이고, 100px은 푸터의 높이입니다!

변동되는 값에 대비해 변수로 만드는 것도 좋지만, 생각해보니 저 값들이 어떤 걸 의미하는지는 저만 알게 작업했던 것같기도 하네요 😅

가독성을 높이기 위해서라도 변수로 만들어 사용하도록 수정하였습니다! 5b8e095

JitHoon · 2024-01-12T12:33:10Z

src/components/SignUp/SignUpForm/index.tsx

+import styled from '@emotion/styled';
+import { SignUpDisabledButton, SignUpInputValidation } from '@/types/signUp';


외부 라이브러리, 내부 폴더 import 사이 개행이 필요한 것 같습니다!

감사합니다~ 수정했습니다!! 0c678d9

JitHoon · 2024-01-12T12:35:10Z

src/components/SignUp/SignUpForm/index.tsx

+  const isEmailValidationButtonDisabled = true;
+  const isSubmitButtonDisabled = true;


이름에서 Button을 빼도 button 이름이 있는 컴포넌트에서 사용되기 때문에, 의미 전달은 잘 될 것 같습니다!

감사합니다~ Button이라는 텍스트를 제거하여 수정했습니다! 772c1b3

JitHoon · 2024-01-12T12:38:42Z

src/components/SignUp/SignUpForm/index.tsx

+      <InputLabelWrapper>
+        <Label htmlFor="user_name">이름</Label>
+        <Input
+          type="text"
+          id="user_name"
+          placeholder="이름 입력"
+          required
+        />
+        {isInvalid && (
+          <ValidationText $isInvalid={isInvalid}>
+            이름을 입력해 주세요.
+          </ValidationText>
+        )}
+      </InputLabelWrapper>


향후 react-hook-form을 사용하게 되면 input 상태를 한번에 관리할 수 있을 것 같은데, 입력 받는 주제 단위로 컴포넌트를 Name, Email, Password로 분리해도 좋을 것 같다는 생각이 듭니다!

react-hook-form 사용하실 때 분리하여 작업하는게 불편하다면 무시하셔도 상관없습니다!

우선 이번 PR 이후 로그인/회원가입 화면에서 사용할 공통 input 컴포넌트를 만들 예정이긴 했습니다!

제안주신 Name, Email, Password로 컴포넌트를 분리해서 만드는 것은 react-hook-form 사용하기 전에 다시 한번 고려해보겠습니다..!

JitHoon · 2024-01-12T12:39:25Z

src/components/SignUp/SignUpForm/index.tsx

+
+const EmailInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;


default 값이 row라서 따로 명시하지 않아도 되는걸로 알고 있습니다!

감사합니다~ 수정했습니다! e1a46e3

JitHoon · 2024-01-12T12:50:42Z

src/components/Login/LoginForm/index.tsx

+        <ValidationText>
+          <ValidationBoldText>아이디</ValidationBoldText>를 입력해 주세요
+        </ValidationText>


ValidationText 에 font-weight: 700;를 바로 주지 않고 따로 스타일 컴포넌트로 뺀 이유가 궁금합니다!

피그마에서 자세히 살펴보니 유효성 메세지 중 아이디에 대해서만 bold 처리를 해두셨더라구요...! (착한 사람눈엔 보입니다..👀)

JitHoon · 2024-01-12T12:50:59Z

src/components/Login/LoginForm/index.tsx

+  font-weight: 500;
+  line-height: 32px;
+
+  ::placeholder {


&::placeholder {}

와의 차이점이 궁금합니다!

제가 &를 넣어서 썼던 이유는 스타일드 컴포넌트 공식 홈페이지에서 예시를 보고 따라서 쓰고있습니다!

아래는 공홈 예시입니다.

const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all 200ms ease-in-out; width: 11rem; &:hover { filter: brightness(0.85); } &:active { filter: brightness(1); } /* The GitHub button is a primary button * edit this to target it specifically! */ ${props => props.$primary && css` background: var(--accent-color); color: black; `} ` ` ``

둘다 코드의 동작은 같지만, &키워드는 현재 선택된 요소 자체를 나타낸다고 하네요!
저도 보통 &사용하고 있습니다 ㅎ

결론부터 말씀드리자면 지훈님이 말씀해주신 방법으로 작성하는 것이 더 좋습니다.
&가 css 연산자로서 동작하기 때문에 특정 요소에 대해서만 스타일을 지정할 수 있어 명확하게 스타일을 지정할 수 있습니다.

::placeholder를 쓴 이유는 제가 깊게 생각하지 않고 습관적으로 작성했기 때문입니다…🥲

1a9d264 수정했습니다!

JitHoon · 2024-01-12T12:54:31Z

src/components/Login/LoginForm/index.tsx

+  }
+`;
+
+const SignUpButton = styled(LoginButton)<ButtonText>``;


향후 스타일이 들어가는 부분인지 궁금합니다!

스타일이 없다면, 그대로 사용해도 괜찮지 않을까 싶습니다!

지난번 지훈님 레이아웃 코드에서 제가 질문했던 것과 비슷한 상황이어서 저도 어떻게 해야될까 고민이 많았었는데요 😅

styled로 만든 컴포넌트의 이름이 LoginButton이라 로그인/회원가입 버튼을 모두 해당 컴포넌트로 작성하면
컴포넌트 이름만 보았을 때 각 버튼이 어떤 역할을 하는지 명확하게 파악할 수 없다고 생각하여 따로 만들었습니다.

컴포넌트명을 Button으로 변경하면 로그인/회원가입에 모두 적용할 수 있을 것같은데 이 방법이 더 나을까요?
�항상 이름짓는게 가장 어렵더라구요...🥲 좋은 아이디어 있으면 부탁드립니다! 항상 환영해요..!!

그때 이야기 되었던 컨벤션은 스타일이 없을 때 태그 그대로 사용하기로 한걸로 기억합니다!

넵! Button으로 이름 통일하면서 수정하였습니다~ a74ad1e

turkey-kim

깔끔하게 정갈된 코드 잘봤습니다 ㅎ

jiohjung98

수고하셨습니다 태그도 줄바꿈 다 잘 맞추셔서 구현하셨네요 고생많으셨어요 !

jinjoo-jung

컨벤션도 잘 지켜주시고 타입도 잘 분리해주신 것 같습니다. 수고하셨어요 ! 👍🏻🤗

ovoxiix

수고하셨습니다!
근데 막상 화면에서 보니까 UI가 생각보다 큼지막하네요..? ㅋ ㅋ ㅋ ㅋ

ovoxiix · 2024-01-15T06:05:28Z

src/components/Login/LoginTitle/index.tsx

+const Title = styled.h1`
+  color: #1a2849;
+  font-size: 44.374px;
+  font-weight: 900;


폰트 굵기 500이랑 700만 있는줄알았는데..! 300이랑 900도 추가해두겠습니다.

ovoxiix · 2024-01-15T06:20:02Z

src/components/Login/LoginForm/index.tsx

+      ? '#1A2849'
+      : 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};


요기만 왜 hex 코드가 소문자로 포맷팅이 안됐을까요? 그냥 궁금증..

ovoxiix · 2024-01-15T06:33:13Z

src/components/common/Footer/index.tsx

+        <BoldText>개인정보 처리방침</BoldText>
+      </Policy>
+      <Copyright>
+        (주) 야놀자 Copyright © 2005-2023 Yanolja Co., Ltd. All rights


2023은 getFullYear()로 올해 년도를 받아오는 방식으로 작성해도 좋을 것 같아요.
아니면 2023으로 고정인가요?!

피그마에 있는대로 복붙해오다 보니까 그렇게 작업된 것같습니다!
getFullYear()사용하는 걸로 수정했습니다! 36fa8a5

ovoxiix · 2024-01-15T06:34:35Z

src/components/common/Footer/index.tsx

+const Text = styled.p`
+  color: #404446;
+  font-size: 12px;
+  font-weight: 400;


400도 있나요... 그냥 폰트 굵기 싹 다 추가하겠습니다😅

dabin-Hailey · 2024-01-15T07:37:12Z

수고하셨습니다! 근데 막상 화면에서 보니까 UI가 생각보다 큼지막하네요..? ㅋ ㅋ ㅋ ㅋ

그쳐 ㅋㅋㅋㅋㅋㅋ 저도 만들면서 이게 맞나 싶었습니다...
일단 저는 피그마 그대로 작업하긴 했고, 모바일 하면서 좀 더 조정해보려고 합니당

dabin-Hailey added 22 commits January 10, 2024 00:02

feat: 로그인 페이지 마크업

fd5734a

feat: 메인 라우터에 로그인 컴포넌트 추가

bf3c2dc

feat: 회원가입 페이지 마크업

7a67ba2

feat: 메인 라우터에 회원가입 컴포넌트 추가

b944c23

design: 로그인 페이지 디자인 적용

b08c3cc

move: Footer 폴더 위치 pages -> components 폴더 하위로 이동

4ad8ba6

design: Footer 디자인 적용

d0c3805

design: 회원가입 페이지 디자인 적용

3ddef8e

modify: 로그인 페이지 모든 px에 toRem 함수 적용

7c978dd

modify: 로그인 페이지 로고 텍스트 -> 이미지로 변경

f3a8476

design: 로그인&회원가입 페이지 배경색을 흰색으로 설정

6689bbd

design: Footer 높이 지정

85b762b

design: 로그인&회원가입 페이지에 푸터 추가

7d39e88

modify: toRem함수 제거 및 px로 변경

10dfe5c

design: 회원가입 폼 내부 구분선 삭제 및 input간 간격 통일

40684ae

design: input focus 상태에서 outline과 border 두께 변경 및 색상 통일

2d44de5

move: 로그인 타이틀과 입력폼 개별 컴포넌트로 분리

431a905

move: 회원가입 타이틀과 입력폼 개별 컴포넌트로 분리

a502347

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

3b877c2

…nto feature/#8

modify: 로그인에서 사용하는 타입 분리

7f44fd0

modify: 회원가입에서 사용하는 타입 분리

dc8caf3

Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

7e2c85c

…nto feature/#8

dabin-Hailey added the design 스타일 label Jan 12, 2024

dabin-Hailey requested review from turkey-kim, jinjoo-jung, JitHoon, jiohjung98 and ovoxiix January 12, 2024 11:51

dabin-Hailey self-assigned this Jan 12, 2024

dabin-Hailey added 2 commits January 12, 2024 21:05

remove: 사용하지 않는 useState 삭제

eb00d46

remove: import React 삭제

cc54b8c

vercel bot deployed to Preview – cool-peace January 12, 2024 12:09 View deployment

vercel bot deployed to Preview – cool-peace-dev January 12, 2024 12:09 View deployment

JitHoon approved these changes Jan 12, 2024

View reviewed changes

turkey-kim approved these changes Jan 12, 2024

View reviewed changes

dabin-Hailey added 4 commits January 13, 2024 01:43

modify: 가상 요소에 스타일 지정할 때 & 추가

1a9d264

modify: 컨벤션에 맞게 import 개행 추가 및 정렬

0c678d9

modify: 회원가입 버튼의 disable 상태를 관리하는 변수명 수정

772c1b3

modify: 불필요한 flex-direction: row 삭제

e1a46e3

vercel bot deployed to Preview – cool-peace January 12, 2024 18:03 View deployment

vercel bot deployed to Preview – cool-peace-dev January 12, 2024 18:03 View deployment

modify: 회원가입 입력폼 height 계산에 필요한 값을 변수로 분리

5b8e095

vercel bot deployed to Preview – cool-peace January 12, 2024 18:17 View deployment

vercel bot deployed to Preview – cool-peace-dev January 12, 2024 18:18 View deployment

modify: LoginButton,SignUpButton -> Button으로 이름 통일

a74ad1e

vercel bot deployed to Preview – cool-peace-dev January 14, 2024 08:44 View deployment

vercel bot deployed to Preview – cool-peace January 14, 2024 08:45 View deployment

jiohjung98 approved these changes Jan 15, 2024

View reviewed changes

jinjoo-jung approved these changes Jan 15, 2024

View reviewed changes

ovoxiix approved these changes Jan 15, 2024

View reviewed changes

modify: 푸터에 표시할 연도를 하드코딩에서 getFullYear() 메소드 사용으로 변경

36fa8a5

vercel bot deployed to Preview – cool-peace-dev January 15, 2024 07:59 View deployment

vercel bot deployed to Preview – cool-peace January 15, 2024 08:00 View deployment

dabin-Hailey merged commit 57bf7cd into dev Jan 15, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#8] 회원가입, 로그인 페이지 레이아웃 #27

[#8] 회원가입, 로그인 페이지 레이아웃 #27

dabin-Hailey commented Jan 12, 2024

vercel bot commented Jan 12, 2024 •

edited

Loading

JitHoon left a comment

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 12, 2024

turkey-kim Jan 12, 2024

dabin-Hailey Jan 12, 2024 •

edited

Loading

JitHoon Jan 12, 2024

dabin-Hailey Jan 12, 2024

JitHoon Jan 13, 2024

dabin-Hailey Jan 14, 2024

turkey-kim left a comment

jiohjung98 left a comment

jinjoo-jung left a comment

ovoxiix left a comment

ovoxiix Jan 15, 2024

ovoxiix Jan 15, 2024

ovoxiix Jan 15, 2024

dabin-Hailey Jan 15, 2024 •

edited

Loading

ovoxiix Jan 15, 2024

dabin-Hailey commented Jan 15, 2024

		import Login from '@pages/Login';
		import SignUp from '@pages/SignUp';

		import styled from '@emotion/styled';
		import { SignUpDisabledButton, SignUpInputValidation } from '@/types/signUp';

		const isEmailValidationButtonDisabled = true;
		const isSubmitButtonDisabled = true;

		? '#1A2849'
		: 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};

[#8] 회원가입, 로그인 페이지 레이아웃 #27

[#8] 회원가입, 로그인 페이지 레이아웃 #27

Conversation

dabin-Hailey commented Jan 12, 2024

Description

완료 작업

수정 예정

예정 작업

유의할 점 및 ETC (Optional)

스크린샷 (Optional)

로그인 페이지

유효성 메세지가 포함된 로그인 페이지

회원가입 페이지

유효성 메세지가 포함된 회원가입 페이지

vercel bot commented Jan 12, 2024 • edited Loading

JitHoon 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dabin-Hailey Jan 12, 2024 • edited Loading

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

turkey-kim left a comment

Choose a reason for hiding this comment

jiohjung98 left a comment

Choose a reason for hiding this comment

jinjoo-jung left a comment

Choose a reason for hiding this comment

ovoxiix 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

dabin-Hailey Jan 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dabin-Hailey commented Jan 15, 2024

vercel bot commented Jan 12, 2024 •

edited

Loading

dabin-Hailey Jan 12, 2024 •

edited

Loading

dabin-Hailey Jan 15, 2024 •

edited

Loading