Skip to content

[25.08.13 / TASK-244] Refactor - 일부 뉴스레터 레이아웃 오류 해결 #42

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

Merged
merged 7 commits into from
Aug 18, 2025
+51 −56
Merged

[25.08.13 / TASK-244] Refactor - 일부 뉴스레터 레이아웃 오류 해결 #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8b931d5
refactor: 일부 스타일링 관련 문제 해결
six-standard Aug 13, 2025
21b5eed
fix: 리마인더 카드 정렬 오류 해결
six-standard Aug 13, 2025
a85e73b
refactor: 이미지 정적 배포
six-standard Aug 14, 2025
a99da46
refactor: 이미지 파일은 main 브랜치에 따로 추가하도록 변경
six-standard Aug 14, 2025
6afe2d5
refactor: 이미지 표시 방식 변경
six-standard Aug 14, 2025
98d0321
refactor: 모든 경우에 태그 이모지 추가
six-standard Aug 14, 2025
e6b2abf
refactor: Word 엔진 대응
six-standard Aug 14, 2025
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
46 changes: 18 additions & 28 deletions templates/insights/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,16 @@ <h1 style="font-size: 32px; font-weight: 900; color: #000000; margin: 0; letter-
</h1>
</div>
<p style="font-size: 12px; font-weight: 500; color: #acacac; margin: 0; letter-spacing: 0; box-sizing: border-box;">
<span style="font-weight: 700; text-decoration: underline">{{s_date}} ~ {{e_date}}</span> 사이의 트렌드를 전달해드려요
<span style="font-weight: 700; text-decoration: underline;">{{s_date}} ~ {{e_date}}</span> 사이의 트렌드를 전달해드려요
</p>
</div>

<!-- CTA Button -->
<div style="text-align: center; margin: 30px 0; box-sizing: border-box;">
<a
href="https://velog-dashboard.kro.kr/?utm_source=email&utm_medium=weekly_analysis&utm_campaign=dashboard_cta"
target="_blank"
rel="noopener noreferrer"
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;"
>
Velog Dashboard에서 전체 통계 체크하기!
Expand Down Expand Up @@ -84,6 +86,8 @@ <h2 style="font-size: 24px; font-weight: 900; color: #000000; margin-bottom: 20p
토큰을 재발급받으시려면
<a
href="https://velog-dashboard.kro.kr/?utm_source=email&utm_medium=weekly_analysis&utm_campaign=token_expire"
target="_blank"
rel="noopener noreferrer"
style="color: #999999; font-weight: bold; text-decoration: underline; box-sizing: border-box;"
>
여기
Expand All @@ -100,58 +104,44 @@ <h2 style="font-size: 24px; font-weight: 900; color: #000000; margin-bottom: 20p
</table>

<!-- Footer - Outside content box -->
<div
class="footer"
style="margin-top: 20px; text-align: center; width: 100%; max-width: 600px;"
>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px; gap: 10px;">
<svg
width="20"
height="20"
style="border-radius: 2px"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="20"
height="20"
rx="0.46875"
fill="#1EC996"
/>
<path
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"
fill="white"
/>
</svg>

<span style="font-size: 15px; font-weight: 700; color: #4d4d4d; letter-spacing: 0; line-height: 18px;">
<div style="margin: auto; margin-top: 20px; margin-bottom: 10px; display: table;">
<img
style="display: table-cell; width: 20px; margin-right: 10px; height: 20px; flex-shrink: 0; border-radius: 2px;"
src="https://github.com/Check-Data-Out/velog-dashboard-v2-back-office/blob/main/Logo.png?raw=true"
/>
<span style="vertical-align: middle; display: table-cell; font-size: 15px; font-weight: 700; color: #4d4d4d; letter-spacing: 0; line-height: 18px;">
Velog Dashboard
</span>
</div>

<p style="font-size: 12px; font-weight: 500; color: #4d4d4d; margin: 0; letter-spacing: 0; line-height: 14.4px;">
<a
href="https://velog-dashboard.kro.kr/main?utm_source=email&utm_medium=weekly_analysis&utm_campaign=dashboard_cta"
target="_blank"
rel="noopener noreferrer"
style="color: #4d4d4d; text-decoration: underline; box-sizing: border-box;"
>
대시보드 보러가기
</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a
href="https://nuung.notion.site/terms-of-service"
target="_blank"
rel="noopener noreferrer"
style="color: #4d4d4d; text-decoration: underline; box-sizing: border-box;"
>
서비스 이용약관
</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a
href="https://nuung.notion.site/privacy-policy"
target="_blank"
rel="noopener noreferrer"
style="color: #4d4d4d; text-decoration: underline; box-sizing: border-box;"
>
개인정보처리방침
</a>
</p>
</div>
</td>
</tr>
</table>
Expand Down
46 changes: 26 additions & 20 deletions templates/insights/user_weekly_trend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
class="user-weekly-trend"
style="box-sizing: border-box; margin-top: 40px; color: #000000"
>

{% if insight.trending_summary or insight.user_weekly_stats or insight.user_weekly_reminder %}
<h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-size: 24px; font-weight: 900; letter-spacing: 0;">
{% if user.username %}
Expand All @@ -15,13 +14,15 @@ <h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-siz

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

Expand Down Expand Up @@ -79,7 +79,9 @@ <h2 style="box-sizing: border-box; margin-bottom: 24px; color: #000000; font-siz
<a
href="https://velog-dashboard.kro.kr/leaderboards?based=post&sort=viewCount&limit=10&dateRange=30&utm_source=email&utm_medium=weekly_analysis"
style="box-sizing: border-box; color: #999999; font-weight: bold; text-decoration: underline"
>
target="_blank"
rel="noopener noreferrer"
>
리더보드
</a>
에서 인기 글을 참고해 작성해보시는 건 어떨까요?
Expand All @@ -94,29 +96,32 @@ <h3 style="box-sizing: border-box; margin: 30px 0 20px 0; color: #000000; font-s
</h3>
{% for item in insight.trending_summary %}
<div style="box-sizing: border-box; margin: 20px 0; padding: 20px; border-radius: 8px; background-color: #f7f7f7;">
<div style="box-sizing: border-box; display: flex; gap: 20px; align-items: center">
{% if item.thumbnail %}
<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;">
<table style="box-sizing: border-box; width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">
<tr style="box-sizing: border-box;">
{% if item.thumbnail %}
<td style="box-sizing: border-box; width: 100px; vertical-align: top; padding: 0; margin: 0;">
<img
src="{{item.thumbnail}}"
alt="{{item.title}}"
style="box-sizing: border-box; width: 100%; height: 100%; object-fit: cover"
style="box-sizing: border-box; width: 100px; height: 100px; border-radius: 6.4px; object-fit: cover; display: block; margin: 0;"
/>
</div>
{% endif %}
<div style="box-sizing: border-box; flex: 1; min-width: 0">
</td>
<td style="box-sizing: border-box; width: 20px; padding: 0; margin: 0;"></td>
{% endif %}
<td style="box-sizing: border-box; vertical-align: top; padding: 0; margin: 0;">
<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;">
<a
href="https://velog.io/@{{item.username}}/{{item.slug}}?utm_source=velog_dashboard_email&utm_medium=weekly_analysis"
href="https://velog.io/@{{item.username}}/{{item.slug}}?utm_source=velog_dashboard_email&utm_medium=weekly_analysis"
target="_blank"
rel="noopener noreferrer"
style="box-sizing: border-box; color: #000000; text-decoration: none"
>
{{ item.title }}
</a>
</h4>
{% if item.username and item.key_points %}
<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;">
@{{item.username}} | {{ item.key_points|join:", " }}
@{{item.username}} | 📌 {{ item.key_points|join:", " }}
</p>
{% elif item.username %}
<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;">
Expand All @@ -130,8 +135,9 @@ <h4 style="box-sizing: border-box; margin: 0 0 6px 0; font-size: 16px; font-weig
<p style="box-sizing: border-box; margin: 0; font-size: 13px; font-weight: 500; color: #999999; line-height: 15.6px; letter-spacing: 0;">
{{ item.summary }}
</p>
</div>
</div>
</td>
</tr>
</table>
</div>
{% endfor %}
{% endif %}
Expand Down
15 changes: 7 additions & 8 deletions templates/insights/weekly_trend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,20 @@ <h3 style="box-sizing: border-box; margin: 0 0 20px 0; color: #000000; font-size
</h3>
{% for item in insight.trending_summary %}
<div style="box-sizing: border-box; margin: 20px 0; padding: 20px; border-radius: 8px; background-color: #f7f7f7;">
<div style="box-sizing: border-box; display: flex; gap: 20px; align-items: center">
<div style="box-sizing: border-box; display: flex;">
{% if item.thumbnail %}
<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;">
<img
src="{{item.thumbnail}}"
alt="{{item.title}}"
style="box-sizing: border-box; width: 100%; height: 100%; object-fit: cover"
/>
</div>
<img
src="{{item.thumbnail}}"
alt="{{item.title}}"
style="box-sizing: border-box; width: 100px; height: 100px; border-radius: 6.4px; object-fit: cover; flex-shrink: 0; margin-right: 20px;"
/>
{% endif %}
<div style="box-sizing: border-box; flex: 1; min-width: 0">
<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;">
<a
href="https://velog.io/@{{item.username}}/{{item.slug}}?utm_source=velog_dashboard_email&utm_medium=weekly_analysis"
target="_blank"
rel="noopener noreferrer"
style="box-sizing: border-box; color: #000000; text-decoration: none"
>
{{ item.title }}
Expand Down