Skip to content

Commit

Permalink
[ISSUE-45] feat: 아이디, 비밀번호 Input 컴포넌트 생성 (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CosmicSandBox
CosmicSandBox committed Oct 23, 2024
1 parent 31a9be1 commit fab2e56
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 70 deletions.
140 changes: 70 additions & 70 deletions src/app/(auth)/login/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
'use client';

import Image from 'next/image'; // next/image import
import Image from 'next/image';
import React, { useState } from 'react';
import { FaLock, FaUserAlt } from 'react-icons/fa';
import styled from 'styled-components';

import logoImg from '../../../assets/images/logo.png';
import symbolImg from '../../../assets/images/symbol.png'; // 경로는 이미지 확장자 포함
import symbolImg from '../../../assets/images/symbol.png';
import AuthInput from '../../../components/common/AuthInput';
import CustomButton from '../../../components/common/CustomButton';
import CustomInput from '../../../components/common/CustomInput';
import { BUTTON_COLORS } from '../../../constants/colors';
import { BACKGROUND_COLORS, BUTTON_COLORS, TEXT_COLORS } from '../../../constants/colors';
import { PADDING_HORIZONTAL, PADDING_VERTICAL } from '../../../constants/space';

const Login = () => {
const [id, setId] = useState('');
Expand All @@ -19,97 +19,92 @@ const Login = () => {
const handleIdChange = (e) => setId(e.target.value);
const handlePwChange = (e) => setPassword(e.target.value);

const togglePasswordVisibility = () => {
setPasswordVisible(!passwordVisible);
};
const togglePasswordVisibility = () => setPasswordVisible(!passwordVisible);

return (
<>
<Container>
<LogoContainerColumn>
<Image src={symbolImg} alt="Symbol" width={50} height={50} /> {/* Symbol */}
<Image src={logoImg} alt="Logo" width={100} height={100} /> {/* Logo */}
<SymbolWrapper>
<Image src={symbolImg} alt="Symbol" layout="fill" objectFit="contain" />
</SymbolWrapper>
<LogoWrapper>
<Image src={logoImg} alt="Logo" layout="fill" objectFit="contain" />
</LogoWrapper>

<Letter>함께하는 따뜻한 동행 🐾</Letter>
</LogoContainerColumn>

<LoginInputContainer>
<InputWrapper>
<IconWrapper>
<FaUserAlt />
</IconWrapper>
<CustomInput name="id" value={id} placeholder="아이디 입력" onChange={handleIdChange} />
</InputWrapper>

<InputWrapper>
<IconWrapper>
<FaLock />
</IconWrapper>
<CustomInput
<ContentContainer>
<LoginInputContainer>
<AuthInput name="id" type="id" value={id} placeholder="아이디" onChange={handleIdChange} />

<AuthInput
name="password"
type={passwordVisible ? 'text' : 'password'}
type="password"
value={password}
placeholder="비밀번호"
passwordVisible={passwordVisible}
togglePasswordVisibility={togglePasswordVisibility}
onChange={handlePwChange}
/>
<ShowButton onClick={togglePasswordVisibility}>{passwordVisible ? 'Hide' : 'Show'}</ShowButton>
</InputWrapper>

<AutoLoginContainerRow>
<AutoLoginRadioButton type="checkbox" /> {/* Checkbox 추가 */}
<AutoLoginMessage>자동 로그인</AutoLoginMessage>
</AutoLoginContainerRow>
</LoginInputContainer>

<SignInUpButtonContainerColumn>
<CustomButton color={BUTTON_COLORS.accent} text="정보 기반 매칭" route="/home/info" />
<CustomButton color={BUTTON_COLORS.secondary} text="MBTI 매칭" route="/home/mbti" />
</SignInUpButtonContainerColumn>
</>

<AutoLoginContainerRow>
<AutoLoginRadioButton type="checkbox" />
<AutoLoginMessage>자동 로그인</AutoLoginMessage>
</AutoLoginContainerRow>
</LoginInputContainer>

<SignInUpButtonContainerColumn>
<CustomButton color={BUTTON_COLORS.primary} text="로그인" route="/onboarding" />
<CustomButton color={BUTTON_COLORS.secondary} text="회원가입" route="/sign-up" />
</SignInUpButtonContainerColumn>
</ContentContainer>
</Container>
);
};

export default Login;

const LogoContainerColumn = styled.div`
text-align: center;
margin-bottom: 2rem;
`;

const Letter = styled.div`
font-size: 1.2rem;
color: #555;
const Container = styled.div`
background-color: ${BACKGROUND_COLORS.default};
`;

const LoginInputContainer = styled.div`
const LogoContainerColumn = styled.div`
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
`;

const InputWrapper = styled.div`
const SymbolWrapper = styled.div`
width: 9.375rem;
height: 8.27344rem;
position: relative;
`;

const LogoWrapper = styled.div`
width: 11.25rem;
height: 2.67938rem;
position: relative;
display: flex;
align-items: center;
background-color: #e0f2f1;
border-radius: 0.5rem;
padding: 0.75rem;
`;

const IconWrapper = styled.div`
padding-right: 1rem;
color: #80cbc4;
const Letter = styled.div`
font-size: 1rem;
color: ${TEXT_COLORS.default};
font-family: Pretendard, sans-serif;
`;

const ShowButton = styled.button`
position: absolute;
right: 10px;
background: none;
border: none;
color: #80cbc4;
cursor: pointer;
const ContentContainer = styled.div`
${PADDING_HORIZONTAL}
${PADDING_VERTICAL}
display: flex;
flex-direction: column;
gap: 1rem;
`;

&:focus {
outline: none;
}
const LoginInputContainer = styled.div`
display: flex;
flex-direction: column;
gap: 1rem;
`;

const AutoLoginContainerRow = styled.div`
Expand All @@ -118,10 +113,15 @@ const AutoLoginContainerRow = styled.div`
gap: 0.5rem;
`;

const AutoLoginRadioButton = styled.input``;
const AutoLoginRadioButton = styled.input`
width: 1rem;
height: 1rem;
border-radius: 50%;
cursor: pointer;
`;

const AutoLoginMessage = styled.span`
color: #546e7a;
color: ${TEXT_COLORS.default};
`;

const SignInUpButtonContainerColumn = styled.div`
Expand Down
84 changes: 84 additions & 0 deletions src/components/common/AuthInput.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
'use client';

import { FaLock, FaUserAlt } from 'react-icons/fa';
import styled from 'styled-components';

import { COLORS, TEXT_COLORS } from '../../constants/colors';
import { FONTS } from '../../constants/font';

const CustomInput = ({
name,
value,
type = 'text',
placeholder = '',
onChange,
passwordVisible,
togglePasswordVisibility,
}) => {
return (
<InputWrapper>
<IconWrapper>{type === 'id' ? <FaUserAlt /> : <FaLock />}</IconWrapper>
<StyledInput
type={type === 'password' && !passwordVisible ? 'password' : 'text'}
name={name}
value={value}
placeholder={placeholder}
onChange={onChange}
/>
{type === 'password' && (
<ShowButton onClick={togglePasswordVisibility}>{passwordVisible ? 'Hide' : 'Show'}</ShowButton>
)}
</InputWrapper>
);
};

export default CustomInput;

const InputWrapper = styled.div`
width: 100%;
height: 3rem;
display: flex;
align-items: center;
background-color: ${COLORS.softMint};
border-radius: 0.5rem;
padding: 0.75rem;
position: relative;
`;

const StyledInput = styled.input`
flex-grow: 1;
background-color: ${COLORS.softMint};
border: none;
font-family: ${FONTS.PRETENDARD[400]};
font-size: 1rem;
color: ${TEXT_COLORS.default};
&::placeholder {
color: ${TEXT_COLORS.placeholder};
}
&:focus {
outline: none;
border: none;
}
`;

const IconWrapper = styled.div`
padding-right: 0.5rem;
color: ${COLORS.primary};
`;

const ShowButton = styled.button`
background: none;
border: none;
color: ${COLORS.primary};
cursor: pointer;
padding: 0 0.5rem;
font-size: 0.875rem;
position: absolute;
right: 10px;
&:focus {
outline: none;
}
`;

0 comments on commit fab2e56

Please sign in to comment.