-
Notifications
You must be signed in to change notification settings - Fork 4
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
시작페이지 뷰 생성 (이미지 이슈) #29
Merged
Merged
Changes from all commits
Commits
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,24 @@ | ||
| import React from "react"; | ||
| import { LoginModalContainer } from "./styled"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| const LoginModal = ({ closeModal, openSignInModal }) => { | ||
| return ( | ||
| <LoginModalContainer> | ||
| <button onClick={closeModal} className="Modal__Button--Cancel"> | ||
| x | ||
| </button> | ||
| <h2>Collusic</h2> | ||
| <input type="text" placeholder="이메일" /> | ||
| <input type="password" placeholder="비밀번호" /> | ||
| <Link to="/"> | ||
| <button id="LoginModal__LoginButton">LOG IN</button> | ||
| </Link> | ||
| <button id="LoginModal__SignInButton" onClick={openSignInModal}> | ||
| 회원가입 | ||
| </button> | ||
| </LoginModalContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default LoginModal; |
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,20 @@ | ||
| import React from "react"; | ||
| import { SignInModalContainer } from "./styled"; | ||
|
|
||
| const signInModal = ({ closeModal }) => { | ||
| return ( | ||
| <SignInModalContainer> | ||
| <button onClick={closeModal} className="Modal__Button--Cancel"> | ||
| x | ||
| </button> | ||
| <h2>Collusic</h2> | ||
|
|
||
| <input type="text" placeholder="Email" /> | ||
| <input type="password" placeholder="비밀번호" /> | ||
| <input type="password" placeholder="비밀번호 확인" /> | ||
| <button className="SingInModal__SignUpButton">SIGN UP</button> | ||
| </SignInModalContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default signInModal; |
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,63 @@ | ||
| import React from "react"; | ||
| import Modal from "react-modal"; | ||
| import Login from "./LoginModal"; | ||
| import BG from "../../../assets/bg.png"; | ||
| import SignIn from "./SignInModal"; | ||
| import { | ||
| StyledContainer, | ||
| HomeImageContainer, | ||
| HomeNav, | ||
| HomeImage, | ||
| customStyles, | ||
| } from "./styled"; | ||
|
|
||
| const Home = () => { | ||
| const [modalIsOpen, setIsOpen] = React.useState(false); | ||
| const [LoginModalIsOpen, setLoginModalIsOpen] = React.useState(true); | ||
| const [signInModalIsOpen, setSigninModalIsOpen] = React.useState(false); | ||
|
|
||
| function openModal() { | ||
| setIsOpen(true); | ||
| } | ||
|
|
||
| function afterOpenModal() { | ||
| // references are now sync'd and can be accessed. | ||
| } | ||
| function closeModal() { | ||
| setIsOpen(false); | ||
| setSigninModalIsOpen(false); | ||
| setLoginModalIsOpen(true); | ||
| } | ||
| function openSignInModal() { | ||
| setSigninModalIsOpen(true); | ||
| setLoginModalIsOpen(false); | ||
| } | ||
| return ( | ||
| <StyledContainer id="HomeContainer"> | ||
| <HomeNav> | ||
| <button>Collusic</button> | ||
| <button onClick={openModal}>Log in</button> | ||
| </HomeNav> | ||
| <Modal | ||
| isOpen={modalIsOpen} | ||
| onAfterOpen={afterOpenModal} | ||
| onRequestClose={closeModal} | ||
| style={customStyles} | ||
| ariaHideApp={false} | ||
| contentLabel="LogIn Modal" | ||
| > | ||
| {LoginModalIsOpen && ( | ||
| <Login | ||
| closeModal={closeModal} | ||
| openSignInModal={openSignInModal} | ||
| ></Login> | ||
| )} | ||
| {signInModalIsOpen && <SignIn closeModal={closeModal}></SignIn>} | ||
| </Modal> | ||
| <HomeImageContainer> | ||
| <HomeImage src={BG}></HomeImage> | ||
| </HomeImageContainer> | ||
| </StyledContainer> | ||
| ); | ||
| }; | ||
| export default Home; |
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,202 @@ | ||
| import styled from "styled-components"; | ||
| import { css } from "styled-components"; | ||
| import Color from "utils/style/color"; | ||
|
|
||
| const customStyles = { | ||
| content: { | ||
| top: "50%", | ||
| left: "50%", | ||
| right: "auto", | ||
| bottom: "auto", | ||
| backgroundColor: "white", | ||
| marginRight: "-50%", | ||
| transform: "translate(-50%, -50%)", | ||
| border: "0.5px solid white", | ||
| borderRadius: "20px", | ||
| boxShadow: "3px 3px 3px 3px gray", | ||
| }, | ||
| }; | ||
|
|
||
| ////////////////////////////////////////////////////////////////////////////////// | ||
|
|
||
| const StyledContainer = styled.div` | ||
| display: flex; | ||
| width: 100%; | ||
| position: relative; | ||
| `; | ||
| const HomeNav = styled.div` | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| position: absolute; | ||
| color: ${Color.MAIN_COLOR}; | ||
| top: 2em; | ||
| button { | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
| & button:first-child { | ||
| margin-left: 1em; | ||
| font-size: 30px; | ||
| font-weight: 700; | ||
| background-color: inherit; | ||
| font-family: "Krona One"; | ||
| color: ${Color.MAIN_COLOR}; | ||
| } | ||
| & button:last-child { | ||
| width: 7em; | ||
| height: 2.2em; | ||
| margin-right: 2em; | ||
| background-color: #ed8c1b; | ||
| color: white; | ||
| border: 1px solid inherit; | ||
| font-family: "Krona One"; | ||
| border-radius: 20px; | ||
| font-size: 19px; | ||
| font-weight: 300; | ||
| } | ||
| `; | ||
|
|
||
| const HomeImageContainer = styled.div` | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| height: 100vh; | ||
| `; | ||
|
|
||
| const HomeImage = styled.img` | ||
| width: 100%; | ||
| height: auto; | ||
| object-fit: cover; | ||
| `; | ||
| HomeImage.defaultProps = { | ||
| src: "https://images.unsplash.com/photo-1624541199114-d86774a7caa6?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", | ||
| }; | ||
|
|
||
| ///////////////////////////////////// | ||
|
|
||
| const ModalButton = css` | ||
| border-radius: 30px; | ||
| margin: 0.5em 0.5em; | ||
| width: 25rem; | ||
| height: 3.7rem; | ||
| font-family: "Noto Sans KR", sans-serif; | ||
| `; | ||
| const ModalInput = css` | ||
| ${ModalButton} | ||
| border: solid 2px #c1c1c1; | ||
| padding-left: 2rem; | ||
| `; | ||
|
|
||
| const LoginModalContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
|
|
||
| background-color: white; | ||
| position: relative; | ||
| & > h2 { | ||
| color: ${Color.MAIN_COLOR}; | ||
| font-family: "Krona One"; | ||
| font-size: 2.7em; | ||
| cursor: default; | ||
| } | ||
| & .Modal__Button--Cancel { | ||
| background-color: inherit; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 2em; | ||
| opacity: 0.5; | ||
| } | ||
| & > input { | ||
| ${ModalInput}; | ||
| font-size: 1.3em; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } | ||
| & > input::placeholder { | ||
| color: #c1c1c1; | ||
| } | ||
| & #LoginModal__LoginButton { | ||
| ${ModalButton} | ||
| width:27rem; | ||
| border: 1px solid ${Color.MAIN_COLOR}; | ||
| background-color: ${Color.MAIN_COLOR}; | ||
| color: white; | ||
| font-family: "Krona One"; | ||
| cursor: pointer; | ||
| font-size: 1.5rem; | ||
| margin-top: 2rem; | ||
| } | ||
| & #LoginModal__SignInButton { | ||
| background-color: inherit; | ||
| border: none; | ||
| cursor: pointer; | ||
| text-decoration: underline; | ||
| font-family: "Noto Sans KR"; | ||
| color: #909090; | ||
| margin-top: 2rem; | ||
| } | ||
| `; | ||
| ///////////////////////////////////////// | ||
|
|
||
| const SignInModalContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
|
|
||
| background-color: white; | ||
| position: relative; | ||
| & > h2 { | ||
| color: ${Color.MAIN_COLOR}; | ||
| font-family: "Krona One"; | ||
| font-size: 2.7em; | ||
| cursor: default; | ||
| } | ||
| & .Modal__Button--Cancel { | ||
| background-color: inherit; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 2em; | ||
| opacity: 0.5; | ||
| } | ||
| & > input { | ||
| ${ModalInput}; | ||
| font-size: 1.3em; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } | ||
| & > input::placeholder { | ||
| color: #c1c1c1; | ||
| } | ||
| & > .SingInModal__SignUpButton { | ||
| ${ModalButton} | ||
| width:27rem; | ||
| border: 1px solid ${Color.MAIN_COLOR}; | ||
| background-color: ${Color.MAIN_COLOR}; | ||
| color: white; | ||
| font-family: "Krona One"; | ||
| cursor: pointer; | ||
| font-size: 1.5rem; | ||
| margin-top: 2rem; | ||
| } | ||
| `; | ||
| export { | ||
| StyledContainer, | ||
| HomeImageContainer, | ||
| HomeNav, | ||
| HomeImage, | ||
| customStyles, | ||
| LoginModalContainer, | ||
| SignInModalContainer, | ||
| }; |
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.
혹시 switch를 2개를 따로 두는 이유가 있을까요??
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.
NavBar는 한 개로 통일해서 Router 하단에 두되 각 페이지 라우팅 될 때마다 뷰 컴포넌트에 조건을 거는건 어떨까요?? 예를 들어 home에서는 Login 버튼을 띄워주고 로그인이 되고 메인페이지를 가면 Login버튼 컴포넌트를 비활성화하고 프로필 사진이랑 알람 버튼을 활성화 시키는 방식으로 하면 가능하지 않을까 싶습니다!
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.
첫 페이지를 home으로 routing네이밍을 하는 것도 좋지만 시작페이지이기도 하니 root로 설정해놓는게 어떨까요??
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.
NavBar의 경우 그렇게 해도 되지만 css가 차이가 있어서 맞추는데 협의나 시간이 걸릴 것 같아서 일단 그렇게 해놓았구요 switch를 두번 쓴거는 NavBar를 다르게 하기 위해서 했습니다. home에 걸려서 기존 NavBar가 무시되니까요 엔드포인트 네이밍은 제생각에는 제가 한 시작페이지를 /로 지정해놓고 재현님이 하신 메인페이지를 /projects와 같이 하는게 더 좋을것 같다는 생각입니다 후에 /projects에서 뻗어 나갈 때 /projects/create나 projects/:id 와 같이 하면 의미가 명확해질 것 같아서요
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.
안그래도 이번 commit 에서 routing name project로 수정했는데 생각이 같았네요ㅎㅎ 일단은 navbar 같은 경우는 다른거 다하고 리팩토링 하는걸로 해요~