-
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
Merged
+3,087
−2,452
Merged
Changes from all commits
Commits
Show all changes
42 commits
Select commit
Hold shift + click to select a range
250d861
feat: #11 Add AppBar Component
sean2337 9fee9fa
fix: React Icon size bug fix
sean2337 2ad7b5e
chore: React-icon Dependency 생성
sean2337 be6cf7b
feat: list item card 컴포넌트
leeminhee119 d78da3c
feat: #2 라디오 버튼 컴포넌트
leeminhee119 d51e007
chore: #11 로그 제거
leeminhee119 7a1cd15
chore: #11 공백 추가
leeminhee119 51e2f1f
fix: 외부에서 선택 값 읽을 수 있도록 수정
leeminhee119 2d2c7d5
Update src/component/common/Card/ListItemCard.tsx
leeminhee119 86e5a84
fix: #11 ListItemCard children 타입 필수로 변경
leeminhee119 f9cbe1b
chore: #11 variant props 옵셔널로 변경
leeminhee119 4d00683
feat: #2 useModal hook 정의
donghunee 338b4c0
feat: Modal Componet 추가
donghunee 276743f
chore: #11 modal-root 추가
donghunee 85b791a
fix: #11 document로 수정, 필요없는 기능 삭제
donghunee 5f53ff5
fix: #11 width, height 단위 변경, memo 제거
donghunee 9084960
refactor: #11 px에서 rem으로 수정
donghunee f4afe03
refactor: #11 interface에서 type으로 수정
donghunee 2cce83a
refactor: #11 PropsWithChildren type 적용
donghunee 79560ac
feat: #11 modal atom, type 추가
donghunee f22dad8
refactor: #11 modal component 로직 변경
donghunee a9d1698
refactor: callback type 수정
donghunee 4764797
refactor: #11 useEffect 의존성 배열 수정
donghunee e7bb49f
fix: fix prettier format
sean2337 956fbc8
feat: #11 Add Button Component
klmhyeonwoo 257cf77
feat: #12 Redefine Layout Style
klmhyeonwoo 194fb4f
chore: React-icon Dependency 생성
sean2337 987f681
feat: #11 Default Layout에 AppBar 적용
sean2337 b78e4d2
refactor: Refactor Login Logic
sean2337 c643cba
feat #11: Add Router to Login Page
sean2337 3cbbb57
Merge branch 'develop' into feat/#11/AppBar
sean2337 37750a9
fix:#11 Rename import URL
sean2337 2b36a4d
chore: Modify AppBar title type
sean2337 3c4f7d2
feat: Add Login Page Default Layout
sean2337 9dfe35f
Merge remote-tracking branch 'origin/develop' into feat/#11/AppBar
sean2337 4208cc3
remove: #11 Remove React-icon dependency
sean2337 240e123
chore: Modify SocialLoginButton URL
sean2337 e600b88
design: Modify Icon Default Size
sean2337 81f7ca1
chore: Apply Icon Component to AppBar
sean2337 cdae553
chore #11: Social Login Import URL 변경
sean2337 79e63eb
chore: #11 PropsWithChildren Generic 추가를 통한 타입 명시
sean2337 5228362
chore: #11 Props 구조 변경 및 AppBar 컨벤션 정리
sean2337 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export function googleLogin() { | ||
console.log("구글 로그인 시도"); | ||
} |
File renamed without changes.
18 changes: 3 additions & 15 deletions
18
src/app/login/KakaoLogin.tsx → src/app/login/kakao/kakaoLogin.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { css } from "@emotion/react"; | ||
import { useNavigate } from "react-router-dom"; | ||
import Icon from "../Icon/Icon"; | ||
|
||
export type AppBarProps = { | ||
title?: string; | ||
LeftComp?: React.ReactNode; | ||
RightComp?: React.ReactNode; | ||
}; | ||
|
||
//FIXME: 색깔 디자인 토큰에 따라 변경 | ||
const Back = () => { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<Icon | ||
icon="ic_back" | ||
onClick={() => { | ||
navigate(-1); | ||
}} | ||
/> | ||
); | ||
}; | ||
|
||
//FIXME : 디자인 토큰에 따라 색깔 변경, 폰트 수정 | ||
const AppBar = ({ title, LeftComp = <Back />, RightComp = <div></div> }: AppBarProps) => { | ||
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
저두 너무 많아서 브랜치 새로 파서 수정하려구요.. ㅎㅎ 좋습니다