assignment: 한슬희 #1
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
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
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,113 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
| import { css } from "@emotion/react"; | ||
| import Card from "./components/Card"; | ||
| import Inform from "./components/Inform"; | ||
| import Nav from "./components/Nav"; | ||
| import profile from "./image/profile.jpg"; | ||
| import Comment from "./components/Comment"; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div> | ||
|
There was a problem hiding this comment. 시맨틱 태그에 대해서 공부해보고 적용해보시면 좋을 거 같아용 👍 |
||
| <Nav /> | ||
| <div css={contentWrapper}> | ||
| <div css={inWrapper}> | ||
| <h1 css={title}>한슬희 | dogvelopers</h1> | ||
| <div css={informWrapper}> | ||
| <div css={imgSize}> | ||
| <img src={profile} css={profileImg} alt="profile" /> | ||
| </div> | ||
| <div css={informWrapperSort}> | ||
| <Inform title="🎁 Date of birth" summary="2001.03.26" /> | ||
| <Inform title="✍🏻 Student ID" summary="202014135" /> | ||
| <Inform title="✉️ E-mail" summary="[email protected]" /> | ||
|
Comment on lines
+21
to
+23
There was a problem hiding this comment. 이모티콘 활용을 정말 잘 하시는 것 같아요! |
||
| </div> | ||
| </div> | ||
| <div css={introduceSort}> | ||
| <h2>🙋🏻♀️ Introduce</h2> | ||
| <span css={summary}> | ||
| • 소프트웨어 공학과에 재학중인 한슬희입니다. | ||
| </span> | ||
| <span css={summary}>• 🍔햄버거와 🎞️영화를 좋아합니다. 😊</span> | ||
| </div> | ||
| <h2>🎈 Experience</h2> | ||
| <div css={expreienceWrapper}> | ||
| <Card /> | ||
| <div css={commentWrapper}> | ||
| <Comment /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
|
|
||
| const title = css` | ||
| font-size: 2.7rem; | ||
| `; | ||
|
|
||
| const inWrapper = css` | ||
| max-width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| line-height: 1.5; | ||
| `; | ||
|
|
||
| const contentWrapper = css` | ||
| position: relative; | ||
| width: 100%; | ||
| margin: 4rem 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| const informWrapper = css` | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| margin-top: 2rem; | ||
| `; | ||
|
|
||
| const informWrapperSort = css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-left: 8rem; | ||
| height: auto; | ||
| `; | ||
|
|
||
| const imgSize = css` | ||
| width: 17rem; | ||
| height: 17rem; | ||
| border-radius: 70%; | ||
| overflow: hidden; | ||
| `; | ||
|
|
||
| const profileImg = css` | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| `; | ||
|
|
||
| const introduceSort = css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 3.7rem 7rem 3rem 0; | ||
| `; | ||
|
|
||
| const summary = css` | ||
| font-size: 1rem; | ||
| font-weight: 300; | ||
| `; | ||
|
|
||
| const expreienceWrapper = css` | ||
| display: flex; | ||
| flex-direction: row; | ||
| `; | ||
|
|
||
| const commentWrapper = css` | ||
| margin-left: 2rem; | ||
| `; | ||
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,69 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
|
|
||
| import { css } from "@emotion/react"; | ||
| import dogvelopers from "../image/dogvelopers.png"; | ||
|
|
||
| function Card() { | ||
| return ( | ||
| <div css={cardSizeWrapper}> | ||
| <div css={imgSizeWrapper}> | ||
| <img src={dogvelopers} css={cardImg} alt="img" /> | ||
| </div> | ||
| <div css={summaryWrapper}> | ||
| <span css={activityName}>🐶 개발자들</span> | ||
| <div css={category}>동아리</div> | ||
| <span css={organization}>성공회대학교</span> | ||
| <span>2022/03/02 ~ </span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Card; | ||
|
|
||
| const cardSizeWrapper = css` | ||
| display: flex; | ||
| justify-content: center; | ||
| height: 13.4rem; | ||
| padding-right: 4rem; | ||
| box-shadow: 0px 0px 3px 0px rgb(213, 213, 213); | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const imgSizeWrapper = css` | ||
| width: 200px; | ||
| height: 200px; | ||
| `; | ||
| const cardImg = css` | ||
| width: 100%; | ||
| height: 100%; | ||
| `; | ||
|
|
||
| const summaryWrapper = css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| font-weight: 300; | ||
| font-size: 1rem; | ||
| `; | ||
|
|
||
| const activityName = css` | ||
| font-size: 1.1rem; | ||
| margin: 0.6rem 0; | ||
| `; | ||
|
|
||
| const category = css` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 4px; | ||
| width: fit-content; | ||
|
There was a problem hiding this comment. fit-content로 width 속성값을 설정하는 것을 아직 한 번도 사용을 해보지 않았는데, |
||
| height: auto; | ||
| padding: 0.05rem; | ||
| font-size: 0.8rem; | ||
| background-color: #eee0da; | ||
| margin: 0.6rem 0; | ||
| `; | ||
|
|
||
| const organization = css` | ||
| margin-bottom: 0.2rem; | ||
| `; | ||
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,81 @@ | ||||||
| /** @jsxImportSource @emotion/react */ | ||||||
|
|
||||||
| import { css } from "@emotion/react"; | ||||||
| import { ChangeEvent, FormEvent, useState } from "react"; | ||||||
|
|
||||||
| interface IComment { | ||||||
| name: string; | ||||||
| summary: string; | ||||||
| } | ||||||
|
|
||||||
| function Comment() { | ||||||
| const [comment, setComment] = useState<IComment[]>([]); | ||||||
|
There was a problem hiding this comment.
|
||||||
| const [messageState, setMessageState] = useState("댓글이 아직 없어요"); | ||||||
| const [nameState, setNameState] = useState<string>(""); | ||||||
| const [summaryState, setSummaryState] = useState<string>(""); | ||||||
|
|
||||||
| function onSubmitForm(event: FormEvent<HTMLFormElement>) { | ||||||
| event.preventDefault(); | ||||||
| setComment((prev) => [...prev, { name: nameState, summary: summaryState }]) | ||||||
| setMessageState("댓글들") | ||||||
| setNameState("") | ||||||
| setSummaryState(""); | ||||||
| } | ||||||
|
|
||||||
| function onNameInput(event: ChangeEvent<HTMLInputElement>) { | ||||||
| setNameState(event.target.value) | ||||||
| } | ||||||
|
|
||||||
| function onSummaryInput(event: ChangeEvent<HTMLInputElement>) { | ||||||
| setSummaryState(event.target.value); | ||||||
| } | ||||||
|
|
||||||
| return ( | ||||||
| <div> | ||||||
| <span css={text}>{messageState}</span> | ||||||
| <form css={inputWrapper} onSubmit={onSubmitForm}> | ||||||
| <input placeholder="닉네임" css={eachInput} value={nameState} onChange={onNameInput} /> | ||||||
| <input placeholder="내용" css={eachInput} value={summaryState} onChange={onSummaryInput} /> | ||||||
| <button css={buttonWrapper}>확인</button> | ||||||
| </form> | ||||||
| <div css={commentSort}> | ||||||
| {comment.map((todo: IComment) => ( | ||||||
|
There was a problem hiding this comment.
Suggested change
여기서는 type을 따로 지정해주지 않으셔도 타입 추론이 되는데, 따로 지정해주신 이유가 있으실까요?? There was a problem hiding this comment. 그리고 댓글들이 리스트 렌더링되는 것인데, |
||||||
| <span><b>{todo.name}</b>: {todo.summary}</span> | ||||||
| ))}</div> | ||||||
| </div> | ||||||
| ); | ||||||
| } | ||||||
|
|
||||||
| export default Comment; | ||||||
|
|
||||||
| const text = css` | ||||||
| font-size: 1.1rem; | ||||||
| font-weight: 700; | ||||||
| `; | ||||||
|
Comment on lines
+51
to
+54
There was a problem hiding this comment. emotion 사용이 나중에 관리할 때 더 쉬울 것 같다는 생각이 들었어요. |
||||||
|
|
||||||
| const inputWrapper = css` | ||||||
| margin: 0.6rem 0; | ||||||
| ` | ||||||
|
|
||||||
| const eachInput = css` | ||||||
| all: unset; | ||||||
| border-bottom: 1px solid black; | ||||||
| font-size: 0.9rem; | ||||||
| font-weight: 300; | ||||||
| margin-right: 1rem; | ||||||
| `; | ||||||
|
|
||||||
| const buttonWrapper = css` | ||||||
| all: unset; | ||||||
| font-size: 0.8rem; | ||||||
| font-weight: 800; | ||||||
| cursor: pointer; | ||||||
| `; | ||||||
|
|
||||||
| const commentSort = css` | ||||||
| display: flex; | ||||||
| flex-direction: column; | ||||||
| height: 9rem; | ||||||
| overflow-y: auto; | ||||||
| margin: 0.7rem 0; | ||||||
| ` | ||||||
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,35 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
|
|
||
| import { css } from "@emotion/react"; | ||
|
|
||
| interface Props { | ||
| title: string; | ||
| summary: string; | ||
| } | ||
|
|
||
| function Inform({ title, summary }: Props) { | ||
| return ( | ||
| <div css={columnSort}> | ||
| <span css={informCategory}>{title}</span> | ||
| <span css={inform}>{summary}</span> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Inform; | ||
|
|
||
| const columnSort = css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 5rem; | ||
| `; | ||
| const informCategory = css` | ||
| font-size: 1.1rem; | ||
| font-weight: 600; | ||
| margin-bottom: 0.9rem; | ||
| `; | ||
|
|
||
| const inform = css` | ||
| font-size: 1rem; | ||
| font-weight: 300; | ||
| `; |
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,23 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
|
|
||
| import { css } from "@emotion/react"; | ||
|
|
||
| function Nav() { | ||
| return ( | ||
| <nav css={navbar}> | ||
| <div css={logoSize}> | ||
| <span>👩🏻💻 한슬희 | dogvelopers</span> | ||
| </div> | ||
| </nav> | ||
| ); | ||
| } | ||
|
|
||
| export default Nav; | ||
|
|
||
| const navbar = css` | ||
| padding: 0.8rem 1.1rem; | ||
| `; | ||
|
|
||
| const logoSize = css` | ||
| font-weight: 300; | ||
| `; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
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.
과제라서 이렇게 하셨겠지만, 이런 경우 emotion global style로 처리하시는게 좋을 거 가타용