Skip to content
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.

Sign up for GitHub

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

assignment: 한슬희 #1

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

assignment: 한슬희 #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3d8326e
feat: install npm, emotion
hanseulhee May 28, 2022
13fc08c
env: add img files
hanseulhee May 28, 2022
4799a1b
feat: apply nav
hanseulhee May 28, 2022
4a2f474
feat: apply comment component
hanseulhee May 28, 2022
1368179
feat: apply Card component
hanseulhee May 28, 2022
1d182fc
feat: apply Inform component
hanseulhee May 28, 2022
feeab8b
feat: apply components
hanseulhee May 28, 2022
bc162b2
docs: Update README
hanseulhee May 28, 2022
8801337
delete: optional chaining
hanseulhee May 30, 2022
ec9bac9
feat: 피드백 수정
hanseulhee Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
-->
<title>React App</title>
</head>
<body>
<body style="margin: 0">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

과제라서 이렇게 하셨겠지만, 이런 경우 emotion global style로 처리하시는게 좋을 거 가타용

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
Expand Down
106 changes: 105 additions & 1 deletion src/App.tsx
View file
Open in desktop
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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

시맨틱 태그에 대해서 공부해보고 적용해보시면 좋을 거 같아용 👍

<h1>Hello world 03</h1>
<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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이모티콘 활용을 정말 잘 하시는 것 같아요!
그리고 Inform 컴포넌트에서 가져와서 사용하시는 모습을 보고 깔끔하게 코딩을 잘 하시는 것 같아요..!

</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;
`;
Loading