From ae45e86e8cd8ee50174d8323e8a087def9a3b976 Mon Sep 17 00:00:00 2001
From: HamInGyu <hfire1207@gmail.com>
Date: Sun, 20 Jun 2021 21:12:26 +0900
Subject: [PATCH] =?UTF-8?q?[=EC=B6=94=EA=B0=80]=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84,=20=ED=99=88(Feed)=ED=8E=98=EC=9D=B4=EC=A7=80=20CSS?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/css/home.css}                      |  9 +++
 .../instagram/static/css/profile.css          | 18 ++---
 .../instagram/templates/home.html             | 71 ++++++++++++++-----
 .../instagram/templates/profile.html          | 51 ++++++++++---
 .../css/feed.css => static/css/home.css}      |  0
 instagramAssignment/static/css/login.css      |  5 ++
 instagramAssignment/static/css/signUp.css     | 17 +++++
 7 files changed, 134 insertions(+), 37 deletions(-)
 rename instagramAssignment/{static/css/feed.css => instagram/static/css/home.css} (82%)
 rename instagramAssignment/{instagram/static/css/feed.css => static/css/home.css} (100%)

diff --git a/instagramAssignment/static/css/feed.css b/instagramAssignment/instagram/static/css/home.css
similarity index 82%
rename from instagramAssignment/static/css/feed.css
rename to instagramAssignment/instagram/static/css/home.css
index 381b4cd..aef5626 100644
--- a/instagramAssignment/static/css/feed.css
+++ b/instagramAssignment/instagram/static/css/home.css
@@ -12,6 +12,11 @@
   font-weight: 500;
 }
 
+.userNickName a {
+  text-decoration: none;
+  color: black;
+}
+
 .cardImage img {
   width: 100%;
 }
@@ -39,3 +44,7 @@
   border: 0;
   border-top: rgb(228, 227, 227) 1px solid;
 }
+
+.infoRight a {
+  text-decoration: none;
+}
diff --git a/instagramAssignment/instagram/static/css/profile.css b/instagramAssignment/instagram/static/css/profile.css
index 0dd821a..d3ef63f 100644
--- a/instagramAssignment/instagram/static/css/profile.css
+++ b/instagramAssignment/instagram/static/css/profile.css
@@ -1,4 +1,4 @@
-body {
+.container {
   margin: 0;
   width: 100vw;
   min-height: 100vh;
@@ -8,18 +8,20 @@ body {
   font-size: 15px;
 }
 
-body * {
+.container * {
   box-sizing: border-box;
 }
 
-header,
-main {
+.profileHeader,
+.container main {
+  position: relative;
+  border: 0;
   width: 900px;
   display: flex;
 }
 
-header {
-  margin-top: 100px;
+.container .profileHeader {
+  padding-top: 100px;
   align-items: center;
 }
 
@@ -29,7 +31,7 @@ header {
   border-radius: 50%;
 }
 
-.profileImgBox img {
+.profileHeader .profileImgBox img {
   border-radius: 50%;
 }
 
@@ -62,7 +64,7 @@ header {
   margin: 0 30px;
 }
 
-main {
+.container main {
   margin-top: 50px;
   flex-wrap: wrap;
 }
diff --git a/instagramAssignment/instagram/templates/home.html b/instagramAssignment/instagram/templates/home.html
index 4311e3a..03585d4 100644
--- a/instagramAssignment/instagram/templates/home.html
+++ b/instagramAssignment/instagram/templates/home.html
@@ -1,20 +1,53 @@
-{% extends 'base.html' %} {% block content %}
-<!--
-static 넣으려면 이렇게 합시다.
-{% load static %}
-<img src="{% static 'img/ssu_likelion_logo.png'%}" />
--->
-<a href="{% url 'new' %}">create post</a>
-<br />
-<br />
-{% for post in posts %}
-<div>
-  <a href="{%url 'profile' post.writer.id%}"><p>{{post.writer.nickName}}</p></a>
-  <p>{{post.pub_date}}</p>
-  <a href="{%url 'detail' post.id%}"
-    ><p><img src="{{post.image.url}}" /></p
-  ></a>
+{% extends 'base.html' %} {% load static %} {% block moreHead %}
+<link href="{% static 'css/home.css'%}" rel="stylesheet" type="text/css" />
+{% endblock %}{% block content %}
+<div class="main">
+  {% for post in posts %}
+  <section class="cardViewSection">
+    <div class="cardView">
+      <div class="cardHeader">
+        <div class="userNickName">
+          <a href="{%url 'profile' post.writer.id%}"
+            >{{post.writer.nickName}}</a
+          >
+        </div>
+      </div>
+      <div class="cardImage">
+        <img src="{{post.image.url}}" />
+      </div>
+    </div>
+
+    <div class="cardInfo">
+      <div class="infoLeft">
+        <img src="{% static '/img/liked.png'%}" alt="좋아용" class="feedImg" />
+        <img
+          src="{% static '/img/comment.png'%}"
+          alt="코멘트"
+          class="feedImg"
+        />
+        <img src="{% static '/img/upload.png'%}" alt="업로드" class="feedImg" />
+      </div>
+      <div class="infoRight">
+        <a href="{% url 'edit' post.id%}">
+          <img src="{% static '/img/edit.png'%}" alt="수정" class="feedImg" />
+        </a>
+        <a href="{% url 'delete' post.id%}">
+          <img src="{% static '/img/delete.png'%}" alt="삭제" class="feedImg" />
+        </a>
+      </div>
+    </div>
+    <div class="comment">
+      comment1<br />
+      comment2<br />
+    </div>
+    <div class="comment_form">
+      <form action="">
+        <input type="text" placeholder="댓글 입력.." />
+      </form>
+    </div>
+  </section>
+  <br />
+  <br />
+  {% endfor %}
 </div>
-<br />
-<br />
-{% endfor %} {% endblock %}
+{% endblock %}
diff --git a/instagramAssignment/instagram/templates/profile.html b/instagramAssignment/instagram/templates/profile.html
index 3f1547c..766ef16 100644
--- a/instagramAssignment/instagram/templates/profile.html
+++ b/instagramAssignment/instagram/templates/profile.html
@@ -1,11 +1,42 @@
-{{writer.nickName}}님이 쓰신 글 목록 {% for post in writer_posts %}
-<div>
-  <p>{{post.writer.nickName}}</p>
-  <p>{{post.pub_date}}</p>
-  <a href="{%url 'detail' post.id%}"
-    ><p><img src="{{post.image.url}}" /></p
-  ></a>
+{% extends 'base.html' %} {% load static %} {% block moreHead %}
+<link href="{% static 'css/profile.css'%}" rel="stylesheet" type="text/css" />
+{% endblock %} {% block content %}
+<!--프로필 헤더-->
+<div class="profileHeader">
+  <div class="profileImgBox">
+    <button>
+      <img
+        src="{% static '/img/ssu_likelion_logo_150x150.png'%}"
+        alt="profileImg"
+      />
+    </button>
+  </div>
+  <div class="profileInfoBox">
+    <div class="UserNickNameBox">
+      <h1>{{writer.nickName}}</h1>
+      <button>프로필 편집</button>
+    </div>
+    <div class="UserFeedInfo">
+      <ul>
+        <li>000 게시물</li>
+        <li>000 팔로워</li>
+        <li>000 팔로잉</li>
+      </ul>
+    </div>
+    <div>hello world✈</div>
+  </div>
 </div>
-<br />
-<br />
-{% endfor %}
+
+<!--유저 피드-->
+<main>
+  {% for post in writer_posts %}
+  <div class="postCard">
+    <img src="{{post.image.url}}" />
+    <ul aria-hidden="true">
+      <li>Likes: 0</li>
+      <li>Comments: 0</li>
+    </ul>
+  </div>
+  {% endfor %}
+</main>
+{% endblock %}
diff --git a/instagramAssignment/instagram/static/css/feed.css b/instagramAssignment/static/css/home.css
similarity index 100%
rename from instagramAssignment/instagram/static/css/feed.css
rename to instagramAssignment/static/css/home.css
diff --git a/instagramAssignment/static/css/login.css b/instagramAssignment/static/css/login.css
index bea69cf..03e8f08 100644
--- a/instagramAssignment/static/css/login.css
+++ b/instagramAssignment/static/css/login.css
@@ -9,6 +9,11 @@
   padding: 80px 40px;
 }
 
+.login_container .imgWrapper {
+  display: flex;
+  justify-content: center;
+}
+
 .login_container img {
   height: 51px;
   object-fit: contain;
diff --git a/instagramAssignment/static/css/signUp.css b/instagramAssignment/static/css/signUp.css
index 4a1ad34..0043d63 100644
--- a/instagramAssignment/static/css/signUp.css
+++ b/instagramAssignment/static/css/signUp.css
@@ -8,6 +8,11 @@
   padding: 80px 40px;
 }
 
+.signUp_container .imgWrapper {
+  display: flex;
+  justify-content: center;
+}
+
 .signUp_container img {
   height: 51px;
   object-fit: contain;
@@ -43,6 +48,17 @@
   background-color: lightskyblue;
 }
 
+.signUp_container button:hover {
+  margin-top: 20px;
+  font-size: 15px;
+  font-weight: bold;
+  height: 36px;
+  border: 0;
+  border-radius: 5px;
+  color: white;
+  background-color: rgb(135, 170, 235);
+}
+
 .joinInsta {
   display: flex;
   flex-direction: row;
@@ -57,6 +73,7 @@
 .joinBtn {
   font-size: 15px;
   color: blue;
+  text-decoration: none;
   font-weight: bold;
   border: 0;
   background-color: inherit;