-
Notifications
You must be signed in to change notification settings - Fork 5
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
AppBar Component 개발 #24
Changes from 40 commits
250d861
9fee9fa
2ad7b5e
be6cf7b
d78da3c
d51e007
7a1cd15
51e2f1f
2d2c7d5
86e5a84
f9cbe1b
4d00683
338b4c0
276743f
85b791a
5f53ff5
9084960
f4afe03
2cce83a
79560ac
f22dad8
a9d1698
4764797
e7bb49f
956fbc8
257cf77
194fb4f
987f681
b78e4d2
c643cba
3cbbb57
37750a9
2b36a4d
3c4f7d2
9dfe35f
4208cc3
240e123
e600b88
81f7ca1
cdae553
79e63eb
5228362
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { DefaultLayout } from "@/layout/DefaultLayout"; | ||
import SocialLoginButton from "@/component/button/SocialLoginButton"; | ||
import { kakaoLogin } from "./kakao/kakaoLogin"; | ||
import { googleLogin } from "./google/googleLogin"; | ||
|
||
const Login = () => { | ||
return ( | ||
<DefaultLayout appBarVisible={false}> | ||
<SocialLoginButton type="kakao" handler={kakaoLogin} /> | ||
<SocialLoginButton type="google" handler={googleLogin} /> | ||
</DefaultLayout> | ||
); | ||
}; | ||
export default Login; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export function googleLogin() { | ||
console.log("구글 로그인 시도"); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,6 @@ | ||
const Login = () => { | ||
export function kakaoLogin() { | ||
const REST_API_KEY: string = import.meta.env.VITE_REST_API_KEY; | ||
const REDIRECT_URI: string = import.meta.env.VITE_REDIRECT_URI; | ||
const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`; | ||
|
||
const loginHandler = () => { | ||
window.location.href = link; | ||
}; | ||
|
||
return ( | ||
<div> | ||
<button type="button" onClick={loginHandler}> | ||
Hello Kakao Login | ||
</button> | ||
</div> | ||
); | ||
}; | ||
export default Login; | ||
window.location.href = link; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import { css } from "@emotion/react"; | ||
import { useNavigate } from "react-router-dom"; | ||
import Icon from "../common/Icon/Icon"; | ||
|
||
export type AppBarProps = { | ||
title?: string; | ||
appBarVisible?: boolean; | ||
LeftComp?: React.ReactNode; | ||
RightComp?: React.ReactNode; | ||
}; | ||
|
||
//FIXME: 색깔 디자인 토큰에 따라 변경 | ||
const Back = () => { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<Icon | ||
icon="ic_back" | ||
onClick={() => { | ||
navigate(-1); | ||
}} | ||
/> | ||
); | ||
}; | ||
|
||
//FIXME : 디자인 토큰에 따라 색깔 변경, 폰트 수정 | ||
const AppBar = ({ title, appBarVisible = true, LeftComp = <Back />, RightComp = <div></div> }: AppBarProps) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 잘 몰라서 여쭤봅니다! RightComp에는 기본값이 아무것도 없는 형태라 div 태그를 작성하신 거라면, div 대신 null 또는 빈 태그를 부여하면 어떻게 되나요 ?? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 제가 의도한 형태는 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아하 ~ 그렇군요 이해했습니다!! |
||
if (!appBarVisible) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<> | ||
<div | ||
css={css` | ||
width: 100%; | ||
max-width: 48rem; | ||
height: 4.8rem; | ||
padding: 0 2rem; | ||
background-color: transparent; | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
position: fixed; | ||
left: 50%; | ||
transform: translateX(-50%); | ||
box-sizing: border-box; | ||
`} | ||
> | ||
{LeftComp} | ||
<div | ||
css={css` | ||
position: absolute; | ||
left: 50%; | ||
transform: translateX(-50%); | ||
font-size: 1.8rem; | ||
`} | ||
> | ||
{title} | ||
</div> | ||
{RightComp} | ||
</div> | ||
<div | ||
css={css` | ||
width: 100%; | ||
height: 4.8rem; | ||
`} | ||
/> | ||
</> | ||
); | ||
}; | ||
|
||
export default AppBar; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,14 @@ | ||
import { css } from "@emotion/react"; | ||
import { Fragment, PropsWithChildren } from "react"; | ||
import AppBar from "@/component/AppBar/AppBar"; | ||
import { AppBarProps } from "@/component/AppBar/AppBar"; | ||
|
||
export function DefaultLayout({ children }: PropsWithChildren) { | ||
type DefaultLayoutProps = PropsWithChildren & AppBarProps; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 앗 혹시 PropsWithChildren에 제네릭 타입을 지정하지 않아도 되나요 ?? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 제가 알기론, PropsWithChildren타입은 props로 children을 받을때 선언해주는걸로 알고 있는데 따로 제네릭 타입을 선정하는 이유가 있을까요? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 결론 부터 말하면 둘 다 똑같은 타입을 반환합니다~!! type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
type A = AppBarProps & PropsWidhChildren // AppBarProps & { children?: ReactNode | undefined };
type B = PropsWithChildren<AppBarProps> // AppBarProps & { children?: ReactNode | undefined }; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 옵셔널한 children 외의 props 타입들을 제네릭 타입에 지정해주는 걸로 이해하고 있습니다! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아래와 같이 말씀하시는건가요?? 제가 정확히 이해한지 헷갈려서 여쭈어봐요!! type DefaultLayoutProps = PropsWithChildren<AppBarProps>; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 앗 네네 맞아요 !! |
||
|
||
export function DefaultLayout({ children, title, appBarVisible, LeftComp, RightComp }: DefaultLayoutProps) { | ||
return ( | ||
<Fragment> | ||
{/* FIXME: 헤더 컴포넌트 작업 시, 해당 헤더 엘리먼트 제거 */} | ||
<header | ||
css={css` | ||
height: 4.6rem; | ||
`} | ||
/> | ||
<AppBar title={title} appBarVisible={appBarVisible} LeftComp={LeftComp} RightComp={RightComp} /> | ||
sean2337 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<main | ||
css={css` | ||
flex: 1 1 0; | ||
|
@@ -21,4 +20,4 @@ export function DefaultLayout({ children }: PropsWithChildren) { | |
</main> | ||
</Fragment> | ||
); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
어랏 카멜로 작성돼있어요 (파일명도) ! 확인 부탁드려용
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요거는 페이지는 아니구, 카카오 로그인에 필요한 로직 함수인데 이는 카멜이 맞지 않나요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아앗 컴포넌트가 아니군요! app 폴더 안에 있어서 컴포넌트라고 제가 착각했네요 하핫 😂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
그렇다면 app폴더가 아닌 util 폴더로 빼는 게 좋아보입니다~!!
그리고 로직함수라면 arrow function으로 작성해야할 것 같습니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네넵 맞습니다. 기존에 만든것 또한 현재 컨벤션이랑 다른게 너무 많아 따로 이슈로 파두고 수정할 예정입니다!!☺️ ☺️
언급해주셔서 감사합니다
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저두 너무 많아서 브랜치 새로 파서 수정하려구요.. ㅎㅎ 좋습니다