[2주차] 이규호 미션 제출합니다. #9
There are no files selected for viewing
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 +1 @@ | ||
| node_modules |
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
Binary file not shown.
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,90 @@ | ||
| @font-face { | ||
| font-family: 'GmarketSansMedium'; | ||
| src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
| .header{ | ||
| display: flex; | ||
| height: 150px; | ||
| width: 500px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .logo{ | ||
| font-size: 2em; | ||
| font-weight: 700; | ||
| width: 300px; | ||
| } | ||
| .detail{ | ||
| font-size: 1em; | ||
| width: 180px; | ||
| } | ||
| #clock-js{ | ||
| padding-top: 5px; | ||
| } | ||
| .todoList{ | ||
| display:flex; | ||
| flex-direction: column; | ||
| width: 28em; | ||
| } | ||
| .todoInput{/*input container*/ | ||
| display:flex; | ||
| height:35px; | ||
| padding-bottom: 5px; | ||
| } | ||
| input{/*input 태그 따로 설정*/ | ||
| background-color: black; | ||
| color: #ECECEC; | ||
| border: solid 2px #ECECEC; | ||
| border-radius: 6px; | ||
| width: 400px; | ||
| } | ||
| #plusButton{ | ||
| background-color: black; | ||
| color: #ECECEC; | ||
| border: solid 2px #ECECEC; | ||
| border-radius: 6px; | ||
| width: 35px; | ||
| margin-left: 5px; | ||
| transition : border 0.3s, color 0.3s; | ||
| } | ||
| #plusButton:hover{ | ||
| border : solid 2px #5f5f5f; | ||
| color : #5f5f5f; | ||
| } | ||
| .todoCard{ | ||
| background-color: #ECECEC; | ||
| color : black; | ||
| display:flex; /*todoElem 세로축 가운데 정렬*/ | ||
| align-items:center; | ||
| justify-content:space-between;/* item 사이 간격 균일하게 */ | ||
| height: 100px; | ||
| margin : 7px 0; | ||
| border-radius: 8px; | ||
| } | ||
| .todoCard.checked{ | ||
| transition : opacity 0.3s; | ||
|
|
||
| opacity: 0.5; | ||
| } | ||
| .todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/ | ||
| opacity: 0.6; | ||
| } | ||
| .todoElem{ | ||
| flex:1; /*여백 다 채우게끔*/ | ||
| margin-left:30px; | ||
| } | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. 코드 변경하면서 예외처리를 신경쓰지 못했네요 ㅠㅠ 감사합니다1! |
||
| input[type=checkbox]{ | ||
| margin-left: 20px; | ||
| } | ||
| .todoDelete{ | ||
| border: none; | ||
| margin-bottom: 80px; | ||
| margin-right: 5px; | ||
| font-size: 7px; | ||
| border-radius: 2px; | ||
| transition : background-color 0.3s; | ||
| } | ||
| .todoDelete:hover{ | ||
| background-color: #b1b1b1; | ||
| } | ||
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,9 +1,51 @@ | ||
| import "./App.css"; | ||
| import { useState, useEffect } from "react"; | ||
| import Cards from "./components/Cards.js"; | ||
| function App() { | ||
| const [todo, setTodo] = useState(["운동하기", "밥먹기"]); | ||
| const [currentTime, setCurrentTime] = useState(new Date()); | ||
|
|
||
| // 시간 업데이트 | ||
| const updateClock = () => { | ||
| setCurrentTime(new Date()); | ||
| }; | ||
|
There was a problem hiding this comment. 카드 넘어갈 때마다 다른 색으로 바뀌는 거 신박하네요! 색 지정해주는 방식도 나머지 연산자 활용해서 하신 거 정말 좋은 아이디어인 것 같습니다👍 |
||
|
|
||
| useEffect(() => { | ||
| const timer = setInterval(updateClock, 1000); | ||
|
|
||
| return () => { | ||
| clearInterval(timer); | ||
| }; | ||
| }, []); | ||
|
|
||
| const options = { | ||
| weekday: "long", | ||
| month: "numeric", | ||
| day: "numeric", | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| second: "2-digit", | ||
| hour12: false, //오전 오후 나누는거 false 처리 | ||
| }; | ||
| //string으로 만들어 변수로 변환한다. | ||
| const stringTime = currentTime.toLocaleDateString("ko-KR", options); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="header"> | ||
| <div className="logo">TODO-list</div> | ||
| <div className="detail"> | ||
| <div>투두리스트를 작성하고 오늘 하루를 기록해요</div> | ||
|
There was a problem hiding this comment. 오 / 늘 떨어지는거 약간 킹받습니다... br 해서 띄우면 좋을 것 같습니다... |
||
| <div id="clock-js">{stringTime}</div> | ||
| </div> | ||
| </div> | ||
| <div className="todoInput"> | ||
| <input placeholder=" ADD TODO"></input> | ||
| <button id="plusButton">+</button> | ||
| </div> | ||
| <Cards todo={todo}></Cards> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
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,16 @@ | ||
| import { createGlobalStyle } from "styled-components"; | ||
| import reset from "styled-reset"; | ||
|
|
||
| const GlobalStyle = createGlobalStyle` | ||
| ${reset}; | ||
|
There was a problem hiding this comment. 저는 css reset한거 좋은 것 같아요! 저도 다음과제부터 해야겠어요 |
||
| body{ | ||
| background-color: black; | ||
| color : #ECECEC; | ||
| font-family: 'GmarketSansMedium'; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
| `; | ||
|
|
||
| export default GlobalStyle; | ||
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,60 @@ | ||
| import "../App"; | ||
| function Cards(props) { | ||
| return ( | ||
| <> | ||
| {props.todo.map((element, i) => { | ||
| return ( | ||
| <div className="todoList"> | ||
| <div className="todoCard"> | ||
| <div className="todoElem">{element}</div> | ||
| <div className="todoDelete">X</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default Cards; | ||
|
|
||
| // .todoList{ | ||
| // display:flex; | ||
| // flex-direction: column; | ||
| // width: 450px; | ||
| // } | ||
| // .todoCard{ | ||
| // background-color: #ECECEC; | ||
| // color : black; | ||
| // display:flex; /*todoElem 세로축 가운데 정렬*/ | ||
| // align-items:center; | ||
| // justify-content:space-between;/* item 사이 간격 균일하게 */ | ||
| // height: 100px; | ||
| // margin : 7px 0; | ||
| // border-radius: 8px; | ||
| // } | ||
| // .todoCard.checked{ | ||
| // transition : opacity 0.3s; | ||
| // opacity: 0.5; | ||
| // } | ||
| // .todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/ | ||
| // opacity: 0.6; | ||
| // } | ||
| // .todoElem{ | ||
| // flex:1; /*여백 다 채우게끔*/ | ||
| // margin-left:30px; | ||
| // } | ||
| // input[type=checkbox]{ | ||
| // margin-left: 20px; | ||
| // } | ||
| // .todoDelete{ | ||
| // border: none; | ||
| // margin-bottom: 80px; | ||
| // margin-right: 5px; | ||
| // font-size: 7px; | ||
| // border-radius: 2px; | ||
| // transition : background-color 0.3s; | ||
| // } | ||
| // .todoDelete:hover{ | ||
| // background-color: #b1b1b1; | ||
| // } |
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,10 +1,11 @@ | ||
| import React from "react"; | ||
| import ReactDOM from "react-dom"; | ||
| import App from "./App"; | ||
| import GlobalStyle from "./GlobalStyle"; | ||
| ReactDOM.render( | ||
| <React.StrictMode> | ||
| <GlobalStyle /> | ||
| <App /> | ||
| </React.StrictMode>, | ||
| document.getElementById("root") | ||
| ); |
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.
GlobalStyle 따로 정의하신 만큼 전체 컴포넌트에 중복되는 속성의 경우 GlobalStyle 사용해도 좋을 것 같아요!