dogVelopers · hanseulhee · May 28, 2022 · May 28, 2022 · May 28, 2022 · May 28, 2022
diff --git a/README.md b/README.md
@@ -3,3 +3,7 @@
 2022년도 개발자들 FE - 리액트 03
 
 > 6주차 과제 repo
+
+## Result
+
+![ezgif com-gif-maker (4)](https://user-images.githubusercontent.com/63100352/170821552-5fc38705-3830-4a3f-a53c-4e31a703bcbd.gif)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.tsx b/src/App.tsx
@@ -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>
-      <h1>Hello world 03</h1>
+      <Nav />
+      <section 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]" />
+            </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>
+      </section>
     </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;
+`;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -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;
+  height: auto;
+  padding: 0.05rem;
+  font-size: 0.8rem;
+  background-color: #eee0da;
+  margin: 0.6rem 0;
+`;
+
+const organization = css`
+  margin-bottom: 0.2rem;
+`;
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
@@ -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 [comments, setComments] = useState<IComment[]>([]);
+    const [messageState, setMessageState] = useState("댓글이 아직 없어요");
+    const [nameState, setNameState] = useState<string>("");
+    const [summaryState, setSummaryState] = useState<string>("");
+
+    function onSubmitForm(event: FormEvent<HTMLFormElement>) {
+        event.preventDefault();
+        setComments((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}>
+                {comments.map((comment) => (
+                    <span><b>{comment.name}</b>: {comment.summary}</span>
+                ))}</div>
+        </div>
+    );
+}
+
+export default Comment;
+
+const text = css`
+  font-size: 1.1rem;
+  font-weight: 700;
+`;
+
+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;
+`
diff --git a/src/components/Inform.tsx b/src/components/Inform.tsx
@@ -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;
+`;
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -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;
+`;
diff --git a/src/image/dogvelopers.png b/src/image/dogvelopers.png
diff --git a/src/image/profile.jpg b/src/image/profile.jpg