Merge pull request #27 from hinohie/devel/pichulia

약도 이미지 수정
hinohie · Jun 23, 2024 · b4246de · b4246de
2 parents 31ffc98 + 1ebb5df
commit b4246de
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 11 deletions.
diff --git a/debug.html b/debug.html
@@ -8,7 +8,7 @@
     <title>디버그 페이지</title>
     <link href="./styles/style_main.css" rel="stylesheet"/>
     <link href="./styles/style_sub.css" rel="stylesheet"/>
-    <link href="./styles/style_popup.css" rel="stylesheet"/>
+    <link href="./styles/style_comment.css" rel="stylesheet"/>
     <link rel="icon" href="./resources/image/favicon.ico">
     <script src="./scripts/click-script.js"></script>
 
@@ -126,15 +126,15 @@ <h1 class="titleText">방명록 <span id="comments-count"></span></h1>
 
           return `<li class="comment">
                       <div class="commenter">
-                          <img src="${user.avatar_url}" alt="" aria-hidden="true" class="meta avatar" />
+                          <img src="${user.avatar_url}" alt="" aria-hidden="true" class="meta_avatar" />
                           <a
                               href="https://github.com/${user.login}"
-                              class="meta username"
+                              class="meta_username"
                               >${user.login}</a
                           >
-                          <div class="meta date-posted">commented <time datetime="${comment.created_at}">${datePosted}</time></div>
-                          ${postedByAuthor ? '<span class="meta tag author-badge">Author</span>' : ''}
-                          ${edited ? `<span class="meta comment-edited">Edited</span>` : ''}
+                          <div class="meta_date-posted">commented <time datetime="${comment.created_at}">${datePosted}</time></div>
+                          ${postedByAuthor ? '<span class="meta_tag_author-badge">Author</span>' : ''}
+                          ${edited ? `<span class="meta_comment-edited">Edited</span>` : ''}
                       </div>
                       <div class="comment-body">${body}</div>
                   </li>`;
@@ -145,10 +145,6 @@ <h1 class="titleText">방명록 <span id="comments-count"></span></h1>
         commentsWrapper.appendChild(commentsList);
       }
 
-      const body = DOMPurify.sanitize(marked(comment.body));
-      const postedByAuthor = comment.author_association === 'OWNER';
-      const edited = comment.created_at !== comment.updated_at;
-
       </script>
 
     </div>

diff --git a/index.html b/index.html
@@ -130,7 +130,7 @@ <h1 class="titleText">오시는 길</h1>
 
             <div class="guideToMap">
               <div style="padding: 6px; display: inline-flex;">
-                <img style="flex: 1 1 0; max-width:350px; width: 100%; max-height:189px; background: white; border-radius: 17px" src="./resources/image/yackdo_blue.png" />
+                <img style="flex: 1 1 0; max-width:350px; width: 100%; background: white; border-radius: 17px" src="./resources/image/yackdo_official_resized.png" />
               </div>
 
               <div class="iconButtonContainer">
@@ -169,6 +169,11 @@ <h1 class="titleText">오시는 길</h1>
               </span>
             </p>
 
+            <div class="guideToMap">
+              <div style="padding: 6px; display: inline-flex;">
+                <img style="flex: 1 1 0; max-width:350px; width: 100%; background: white; border-radius: 17px" src="./resources/image/prhoyeon_official_resized.png" />
+              </div>
+            </div>
             <p>
               <span>피로연장 1 안내<br/>
                 <small>

diff --git a/resources/image/prhoyeon_official_resized.png b/resources/image/prhoyeon_official_resized.png
diff --git a/resources/image/yackdo_blue.png b/resources/image/yackdo_blue.png
diff --git a/resources/image/yackdo_official_resized.png b/resources/image/yackdo_official_resized.png
diff --git a/styles/style_comment.css b/styles/style_comment.css
@@ -0,0 +1,103 @@
+.comment-actions {
+	.titleText {
+		text-align: center;
+		color: black;
+		font-size: 2.0rem;
+		font-family: Noto Serif KR;
+		font-weight: 400;
+		word-wrap: break-word;
+		line-height: 1.55rlh;
+	};
+	.button {
+		color: black;
+		font-size: 1.25rem;
+		font-family: Noto Serif KR;
+		font-weight: 400;
+		line-height: 1.55rlh;
+		flex-direction: column;
+		justify-content: center;
+		word-wrap: break-word;
+		align-items: flex-start;
+	};
+	padding: 0.5vh 1.5vw;
+	position: relative;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.comments-list {
+	position: relative;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	display: flex;
+	padding-inline-start: 1rem;
+	padding-inline-end: 1rem;
+}
+
+.comment {
+	.commenter {
+		.meta_avatar {
+			width: 40px;
+			height: 40px;
+			box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
+			border-radius: 17px;
+
+			justify-content: center;
+			align-items: center;
+
+			overflow: hidden;
+		};
+		.meta_username {
+			/* TODO */
+			color: #0F0F3F;
+			font-size: 1.25rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+		};
+		.meta_date-posted{
+			/* TODO */
+			color: darkblue;
+			font-size: 1.0rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+			line-height: 1.55rlh;
+
+			display: inline;
+		};
+		.meta_tag_author-badge{
+			/* TODO */
+			color: darkblue;
+			font-size: 0.75rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+			line-height: 1.55rlh;
+
+			display: inline;
+		};
+		.meta_comment-edited{
+			/* TODO */
+			color: darkgray;
+			font-size: 0.75rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+			line-height: 1.55rlh;
+
+			display: inline;
+		};
+	};
+	.comment-body {
+		color: black;
+		font-size: 1.25rem;
+		font-family: Noto Serif KR;
+		font-weight: 400;
+		line-height: 1.55rlh;
+	};
+	border-bottom: 0.2rem double black;
+	width:100%;
+	position: relative;
+	flex-direction: column;
+	justify-content:left;
+	display: flex;
+}