Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

충남대 FE_강병현 5주차 과제 Step3 #95

Open
wants to merge 17 commits into
base: kang-kibong
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: add AuthField component
  • Loading branch information
kang-kibong committed Jul 28, 2024
commit ba337d48dcc9b81a54f3d7daaeaf3eb0ac622aa0
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
## 🔐 2단계 - 로그인, 관심 상품 등록 / 삭제, 관심 목록 구현
### ✅ 기능 목록
- [] 회원가입 구현
- [] 회원가입 기능이 동작되게 구현
- [x] 회원가입 기능이 동작되게 구현
- [] 회원가입을 하면 로그인 되도록 구현
- [] 상품 상세 페이지 관심 등록 버튼 구현
- [] 상품 상세 페이지에서 관심 버튼을 클릭 했을 때 관심 추가 동작
Expand Down
40 changes: 40 additions & 0 deletions src/components/features/Auth/AuthField/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import styled from '@emotion/styled';
import { Button } from '@components/common';
import { Link } from 'react-router-dom';
import AuthForm from '../AuthForm';
import useAuthForm from '../useAuthForm';

interface AuthFieldProps {
isSignUp: boolean;
}

export default function AuthField({ isSignUp }: AuthFieldProps) {
const { userInfo, handleChange, handleSubmit } = useAuthForm();

return (
<>
<AuthForm
userInfo={userInfo}
onChange={handleChange}
submitButton={
<Button theme="kakao" size="large" onClick={handleSubmit}>
{isSignUp ? '회원가입' : '로그인'}
</Button>
}
isSignUp={
!isSignUp && (
<SignUpContainer>
<Link to="/sign-up">회원가입</Link>
</SignUpContainer>
)
}
/>
</>
);
}

const SignUpContainer = styled.div`
padding-top: 20px;
text-align: center;
`;
66 changes: 66 additions & 0 deletions src/components/features/Auth/AuthForm/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React, { ChangeEvent, ReactNode } from 'react';
import styled from '@emotion/styled';
import { InputField } from '@components/common';

interface AuthFormProps {
userInfo: {
email: string;
password: string;
};
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
submitButton: ReactNode;
isSignUp?: ReactNode;
}

export default function AuthForm({ userInfo, onChange, submitButton, isSignUp }: AuthFormProps) {
return (
<FormContainer>
<InputContainer>
<InputField
label="이메일"
labelFor="email"
placeholder="이메일"
type="text"
name="email"
size="large"
onChange={onChange}
value={userInfo.email}
srOnly
/>
</InputContainer>
<InputContainer>
<InputField
label="비밀번호"
labelFor="password"
placeholder="비밀번호"
type="password"
name="password"
size="large"
onChange={onChange}
value={userInfo.password}
srOnly
/>
</InputContainer>
<ButtonContainer>{submitButton}</ButtonContainer>
{isSignUp}
</FormContainer>
);
}

const FormContainer = styled.form`
width: 580px;
padding: 60px 52px;
border: 1px solid rgba(0, 0, 0, 0.12);
`;

const InputContainer = styled.div`
margin-bottom: 28px;

&:last-of-type {
margin-bottom: 60px;
}
`;

const ButtonContainer = styled.div`
width: 475px;
`;
56 changes: 0 additions & 56 deletions src/components/features/Login/LoginForm/index.tsx

This file was deleted.

41 changes: 0 additions & 41 deletions src/components/features/Login/LoginForm/useLoginForm.ts

This file was deleted.

16 changes: 10 additions & 6 deletions src/pages/Login/index.tsx → src/pages/Auth/index.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import React from 'react';
import styled from '@emotion/styled';
import { Image } from '@components/common';
import LoginForm from '@components/features/Login/LoginForm';
import AuthField from '@components/features/Auth/AuthField';
import kakaoLogo from '@assets/images/kakao-logo.svg';
import { useLocation } from 'react-router-dom';

const IMAGE_ALT = '카카오 로고';
const IMAGE_SIZE = 88;

export default function Login() {
export default function Auth() {
const location = useLocation();
const isSignUp = location.pathname.includes('sign-up');

return (
<LoginContainer>
<AuthContainer>
<ImageContainer>
<Image src={kakaoLogo} alt={IMAGE_ALT} width={IMAGE_SIZE} height={IMAGE_SIZE} />
</ImageContainer>
<LoginForm />
</LoginContainer>
<AuthField isSignUp={isSignUp} />
</AuthContainer>
);
}

const LoginContainer = styled.section`
const AuthContainer = styled.section`
height: 100vh;
flex-direction: column;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export { default as App } from '../App';
export { default as Home } from './Home';
export { default as Theme } from './Theme';
export { default as Login } from './Login';
export { default as Auth } from './Auth';
export { default as MyAccount } from './MyAccount';
export { default as Product } from './Product';
export { default as Order } from './Order';
1 change: 1 addition & 0 deletions src/routes/path.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ export const ROUTE_PATH = {
MY_ACCOUNT: '/my-account',
PRODUCT: '/products/:productId',
ORDER: '/order',
SIGN_UP: '/sign-up'
};
8 changes: 6 additions & 2 deletions src/routes/router.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import { App, Home, Theme, Login, MyAccount, Product, Order } from '@pages/index';
import { App, Home, Theme, Auth, MyAccount, Product, Order } from '@pages/index';
import PrivateRoute from './components/PrivateRoute';
import { ROUTE_PATH } from './path';

Expand All @@ -15,7 +15,11 @@ export const router = createBrowserRouter([
},
{
path: ROUTE_PATH.LOGIN,
element: <Login />,
element: <Auth />,
},
{
path: ROUTE_PATH.SIGN_UP,
element: <Auth />,
},
{
path: ROUTE_PATH.PRODUCT,
Expand Down