240604 TIL

[ 뉴스피드 프로젝트 기간이므로 프로젝트에 관한 기록을 남겨두려고 함]

 

로그인 기능을 맡아서 하였고 회원가입 화면과 결이 비슷하여 회원가입 기능 맡아서 하신 분이 작업해서

깃허브에 올리면 나는 git pull을 받아 코드만 살짝 수정해서 만들었다.  로그인 화면과 회원가입 화면의

차이는 비밀번호를 다시 입력하는 칸이 없고 이메일과 비밀번호를 입력하는 input창만 있다.

 

오늘은 LoginLink.jsx ( You haven't  any account? Sign Up) 문구를 넣고 > 로그인 화면 밑에

회원가입으로 넘어가는 부분을 작업했다. 

 

import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const StyledLoginLink = styled.p`
	text-align: center;
	margin-top: 2.5rem;
	color: #2c2b2f;
	font-weight: bold;
	font-size: 23px;
`;

const StyledJoinLink = styled(Link)`
	color: #e7404a;
	text-decoration: none;
	margin-left: 20px;
`;

function LoginLinks() {
	return (
		<>
			<StyledLoginLink>
				You haven't any account? <StyledJoinLink to="/Join">Sign Up</StyledJoinLink>
			</StyledLoginLink>
			;
		</>
	);
}

export default LoginLinks;

 

 

1. Styled component를 사용할 땐 앞에 Styled를 붙이기로 해서 로그인 각각 컴포넌트마다 Styled를 붙여 수정 

2. Sign Up을 눌렀을 때 Join.jsx로 넘어가야 해서 Router를 연결하였다. 라우터 링크할 땐 <Link to="/컴포넌트명">

넣어주기 (router-dom 연결하고> 그다음에 )

3. You haven`t any acocout? 에서 백틱 말고 '를 사용하여 수정. 

 

--- 

 

이외에 , LoginInput 쪽 css 수정 완료했다 > (margin 간격 줄이기 , font-weight , font-size 수정) 

 

화면은 수정사항까지 다 해서 완료! :>  뿌듯.. 내가 맡은 건 다 끝나서 개인공부 하기로 했다! 😊