Skip to content

Commit 6bda3e0

Browse files
six-standardsix-standard
authored
[25.08.13 / TASK-244] Refactor - 일부 뉴스레터 레이아웃 오류 해결 (#42)
* refactor: 일부 스타일링 관련 문제 해결 * fix: 리마인더 카드 정렬 오류 해결 * refactor: 이미지 정적 배포 * refactor: 이미지 파일은 main 브랜치에 따로 추가하도록 변경 * refactor: 이미지 표시 방식 변경 * refactor: 모든 경우에 태그 이모지 추가 * refactor: Word 엔진 대응
1 parent ce483c6 commit 6bda3e0

File tree

3 files changed

+51
-56
lines changed

3 files changed

+51
-56
lines changed

‎templates/insights/index.html‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,16 @@ <h1 style="font-size: 32px; font-weight: 900; color: #000000; margin: 0; letter-
3939
</h1>
4040
</div>
4141
<p style="font-size: 12px; font-weight: 500; color: #acacac; margin: 0; letter-spacing: 0; box-sizing: border-box;">
42-
<span style="font-weight: 700; text-decoration: underline">{{s_date}} ~ {{e_date}}</span> 사이의 트렌드를 전달해드려요
42+
<span style="font-weight: 700; text-decoration: underline;">{{s_date}} ~ {{e_date}}</span> 사이의 트렌드를 전달해드려요
4343
</p>
4444
</div>
4545

4646
<!-- CTA Button -->
4747
<div style="text-align: center; margin: 30px 0; box-sizing: border-box;">
4848
<a
4949
href="https://velog-dashboard.kro.kr/?utm_source=email&utm_medium=weekly_analysis&utm_campaign=dashboard_cta"
50+
target="_blank"
51+
rel="noopener noreferrer"
5052
style="display: inline-block; background: linear-gradient(90deg, #63e6be 0%, #7abbec 100%); color: #ffffff; text-decoration: none; padding: 16px 32px; border-radius: 100px; font-weight: 900; font-size: 12px; letter-spacing: 0; line-height: 14.4px; box-sizing: border-box;"
5153
>
5254
Velog Dashboard에서 전체 통계 체크하기!
@@ -84,6 +86,8 @@ <h2 style="font-size: 24px; font-weight: 900; color: #000000; margin-bottom: 20p
8486
토큰을 재발급받으시려면
8587
<a
8688
href="https://velog-dashboard.kro.kr/?utm_source=email&utm_medium=weekly_analysis&utm_campaign=token_expire"
89+
target="_blank"
90+
rel="noopener noreferrer"
8791
style="color: #999999; font-weight: bold; text-decoration: underline; box-sizing: border-box;"
8892
>
8993
여기
@@ -100,58 +104,44 @@ <h2 style="font-size: 24px; font-weight: 900; color: #000000; margin-bottom: 20p
100104
</table>
101105

102106
<!-- Footer - Outside content box -->
103-
<div
104-
class="footer"
105-
style="margin-top: 20px; text-align: center; width: 100%; max-width: 600px;"
106-
>
107-
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px; gap: 10px;">
108-
<svg
109-
width="20"
110-
height="20"
111-
style="border-radius: 2px"
112-
viewBox="0 0 20 20"
113-
fill="none"
114-
xmlns="http://www.w3.org/2000/svg"
115-
>
116-
<rect
117-
width="20"
118-
height="20"
119-
rx="0.46875"
120-
fill="#1EC996"
121-
/>
122-
<path
123-
d="M4.52499 5.81977L5.63155 12.4487H5.70632L9.36355 5.81977H10.1646L5.89451 13.4137H5.07206L3.7239 5.81977H4.52499ZM12.2818 13.4137H9.55815L11.0191 5.81977H13.7749C16.1034 5.81977 17.2495 7.24625 16.7955 9.60623C16.3374 11.9872 14.6424 13.4137 12.2818 13.4137ZM11.4206 12.0606H12.4781C13.9521 12.0606 14.8664 11.3054 15.1933 9.60623C15.5182 7.91753 14.8924 7.17283 13.4291 7.17283H12.361L11.4206 12.0606Z"
124-
fill="white"
125-
/>
126-
</svg>
127-
128-
<span style="font-size: 15px; font-weight: 700; color: #4d4d4d; letter-spacing: 0; line-height: 18px;">
107+
<div style="margin: auto; margin-top: 20px; margin-bottom: 10px; display: table;">
108+
<img
109+
style="display: table-cell; width: 20px; margin-right: 10px; height: 20px; flex-shrink: 0; border-radius: 2px;"
110+
src="https://github.com/Check-Data-Out/velog-dashboard-v2-back-office/blob/main/Logo.png?raw=true"
111+
/>
112+
<span style="vertical-align: middle; display: table-cell; font-size: 15px; font-weight: 700; color: #4d4d4d; letter-spacing: 0; line-height: 18px;">
129113
Velog Dashboard
130114
</span>
131115
</div>
116+
132117
<p style="font-size: 12px; font-weight: 500; color: #4d4d4d; margin: 0; letter-spacing: 0; line-height: 14.4px;">
133118
<a
134119
href="https://velog-dashboard.kro.kr/main?utm_source=email&utm_medium=weekly_analysis&utm_campaign=dashboard_cta"
120+
target="_blank"
121+
rel="noopener noreferrer"
135122
style="color: #4d4d4d; text-decoration: underline; box-sizing: border-box;"
136123
>
137124
대시보드 보러가기
138125
</a>
139126
&nbsp;&nbsp;|&nbsp;&nbsp;
140127
<a
141128
href="https://nuung.notion.site/terms-of-service"
129+
target="_blank"
130+
rel="noopener noreferrer"
142131
style="color: #4d4d4d; text-decoration: underline; box-sizing: border-box;"
143132
>
144133
서비스 이용약관
145134
</a>
146135
&nbsp;&nbsp;|&nbsp;&nbsp;
147136
<a
148137
href="https://nuung.notion.site/privacy-policy"
138+
target="_blank"
139+
rel="noopener noreferrer"
149140
style="color: #4d4d4d; text-decoration: underline; box-sizing: border-box;"
150141
>
151142
개인정보처리방침
152143
</a>
153144
</p>
154-
</div>
155145
</td>
156146
</tr>
157147
</table>

‎templates/insights/user_weekly_trend.html‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
class="user-weekly-trend"
33
style="box-sizing: border-box; margin-top: 40px; color: #000000"
44
>
5-
65
{% if insight.trending_summary or insight.user_weekly_stats or insight.user_weekly_reminder %}
76
<h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-size: 24px; font-weight: 900; letter-spacing: 0;">
87
{% if user.username %}
@@ -15,13 +14,15 @@ <h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-siz
1514

1615
{% if insight.user_weekly_stats %}
1716
<div style="box-sizing: border-box; background-color: #f7f7f7; border-radius: 8px; padding: 20px; margin: 20px 0;">
18-
{% if insight.user_weekly_stats.new_posts > 0 %}
1917
<p style="box-sizing: border-box; color: #000000; margin: 0; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: 0;">
20-
저번 주에는
21-
<span style="box-sizing: border-box; text-decoration: underline; font-weight: 700">
22-
{{insight.user_weekly_stats.new_posts}}개의 글
23-
</span>
24-
을 작성하셨네요!<br />
18+
<!-- 새 글이 없을 경우 해당 내용만 제거하고 표시 -->
19+
{% if insight.user_weekly_stats.new_posts > 0 %}
20+
저번 주에는
21+
<span style="box-sizing: border-box; text-decoration: underline; font-weight: 700">
22+
{{insight.user_weekly_stats.new_posts}}개의 글
23+
</span>
24+
을 작성하셨네요!<br />
25+
{% endif %}
2526
👏 지난 한 주간
2627
<span style="box-sizing: border-box; text-decoration: underline; font-weight: 700">
2728
{{insight.user_weekly_stats.views}}명
@@ -40,7 +41,6 @@ <h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-siz
4041
* 이번 주에 신규 가입을 하셨다면 총 누적 조회수로 계산됩니다.
4142
</span>
4243
</p>
43-
{% endif %}
4444
</div>
4545
{% endif %}
4646

@@ -79,7 +79,9 @@ <h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-siz
7979
<a
8080
href="https://velog-dashboard.kro.kr/leaderboards?based=post&sort=viewCount&limit=10&dateRange=30&utm_source=email&utm_medium=weekly_analysis"
8181
style="box-sizing: border-box; color: #999999; font-weight: bold; text-decoration: underline"
82-
>
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
>
8385
리더보드
8486
</a>
8587
에서 인기 글을 참고해 작성해보시는 건 어떨까요?
@@ -94,29 +96,32 @@ <h3 style="box-sizing: border-box; margin: 30px 0 20px 0; color: #000000; font-s
9496
</h3>
9597
{% for item in insight.trending_summary %}
9698
<div style="box-sizing: border-box; margin: 20px 0; padding: 20px; border-radius: 8px; background-color: #f7f7f7;">
97-
<div style="box-sizing: border-box; display: flex; gap: 20px; align-items: center">
98-
{% if item.thumbnail %}
99-
<div style="box-sizing: border-box; flex-shrink: 0; width: 100px; height: 100px; overflow: hidden; border-radius: 6.4px; display: flex; align-items: center; justify-content: center;">
99+
<table style="box-sizing: border-box; width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">
100+
<tr style="box-sizing: border-box;">
101+
{% if item.thumbnail %}
102+
<td style="box-sizing: border-box; width: 100px; vertical-align: top; padding: 0; margin: 0;">
100103
<img
101104
src="{{item.thumbnail}}"
102105
alt="{{item.title}}"
103-
style="box-sizing: border-box; width: 100%; height: 100%; object-fit: cover"
106+
style="box-sizing: border-box; width: 100px; height: 100px; border-radius: 6.4px; object-fit: cover; display: block; margin: 0;"
104107
/>
105-
</div>
106-
{% endif %}
107-
<div style="box-sizing: border-box; flex: 1; min-width: 0">
108+
</td>
109+
<td style="box-sizing: border-box; width: 20px; padding: 0; margin: 0;"></td>
110+
{% endif %}
111+
<td style="box-sizing: border-box; vertical-align: top; padding: 0; margin: 0;">
108112
<h4 style="box-sizing: border-box; margin: 0 0 6px 0; font-size: 16px; font-weight: 700; line-height: 19.2px; color: #000000; letter-spacing: 0;">
109113
<a
110-
href="https://velog.io/@{{item.username}}/{{item.slug}}?utm_source=velog_dashboard_email&utm_medium=weekly_analysis"
114+
href="https://velog.io/@{{item.username}}/{{item.slug}}?utm_source=velog_dashboard_email&utm_medium=weekly_analysis"
111115
target="_blank"
116+
rel="noopener noreferrer"
112117
style="box-sizing: border-box; color: #000000; text-decoration: none"
113118
>
114119
{{ item.title }}
115120
</a>
116121
</h4>
117122
{% if item.username and item.key_points %}
118123
<p style="box-sizing: border-box; margin: 0 0 6px 0; font-size: 13px; font-weight: 700; color: #acacac; letter-spacing: 0; line-height: 14.4px;">
119-
@{{item.username}} | {{ item.key_points|join:", " }}
124+
@{{item.username}} | 📌 {{ item.key_points|join:", " }}
120125
</p>
121126
{% elif item.username %}
122127
<p style="box-sizing: border-box; margin: 0 0 6px 0; font-size: 13px; font-weight: 700; color: #acacac; letter-spacing: 0; line-height: 14.4px;">
@@ -130,8 +135,9 @@ <h4 style="box-sizing: border-box; margin: 0 0 6px 0; font-size: 16px; font-weig
130135
<p style="box-sizing: border-box; margin: 0; font-size: 13px; font-weight: 500; color: #999999; line-height: 15.6px; letter-spacing: 0;">
131136
{{ item.summary }}
132137
</p>
133-
</div>
134-
</div>
138+
</td>
139+
</tr>
140+
</table>
135141
</div>
136142
{% endfor %}
137143
{% endif %}

‎templates/insights/weekly_trend.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,20 @@ <h3 style="box-sizing: border-box; margin: 0 0 20px 0; color: #000000; font-size
99
</h3>
1010
{% for item in insight.trending_summary %}
1111
<div style="box-sizing: border-box; margin: 20px 0; padding: 20px; border-radius: 8px; background-color: #f7f7f7;">
12-
<div style="box-sizing: border-box; display: flex; gap: 20px; align-items: center">
12+
<div style="box-sizing: border-box; display: flex;">
1313
{% if item.thumbnail %}
14-
<div style="box-sizing: border-box; flex-shrink: 0; width: 100px; height: 100px; overflow: hidden; border-radius: 6.4px; display: flex; align-items: center; justify-content: center;">
15-
<img
16-
src="{{item.thumbnail}}"
17-
alt="{{item.title}}"
18-
style="box-sizing: border-box; width: 100%; height: 100%; object-fit: cover"
19-
/>
20-
</div>
14+
<img
15+
src="{{item.thumbnail}}"
16+
alt="{{item.title}}"
17+
style="box-sizing: border-box; width: 100px; height: 100px; border-radius: 6.4px; object-fit: cover; flex-shrink: 0; margin-right: 20px;"
18+
/>
2119
{% endif %}
2220
<div style="box-sizing: border-box; flex: 1; min-width: 0">
2321
<h4 style="box-sizing: border-box; margin: 0 0 6px 0; font-size: 16px; font-weight: 700; line-height: 19.2px; color: #000000; letter-spacing: 0;">
2422
<a
2523
href="https://velog.io/@{{item.username}}/{{item.slug}}?utm_source=velog_dashboard_email&utm_medium=weekly_analysis"
2624
target="_blank"
25+
rel="noopener noreferrer"
2726
style="box-sizing: border-box; color: #000000; text-decoration: none"
2827
>
2928
{{ item.title }}

0 commit comments

Comments
 (0)