Skip to content
This repository was archived by the owner on Jul 2, 2024. It is now read-only.

Commit baec5cb

Browse files
junah201junah201
committed
feat : 최초 설치 시 뜨는 신규 가이드 창 (#37)
- 최초 설치 시 사용법을 알려주는 신규 가이드 팝업창을 만들었습니다. - 크롬 확장프로그램 내에 설치 시 FastAPI 백엔드에서 호스팅되는 가이드 창을 새로운 탭으로 띄우도록 설정하였습니다.
1 parent 970e13f commit baec5cb

File tree

7 files changed

+127
-2
lines changed

7 files changed

+127
-2
lines changed

‎backend/app/main.py

+12-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
from fastapi_utils.session import FastAPISessionMaker
55
from fastapi_utils.tasks import repeat_every
66
from fastapi.responses import HTMLResponse
7+
from fastapi.staticfiles import StaticFiles
78

89
from sqlalchemy.orm import Session
910

@@ -25,6 +26,8 @@
2526
sessionmaker = FastAPISessionMaker(SQLALCHEMY_DATABASE_URL)
2627
app = FastAPI()
2728

29+
30+
app.mount("/static", StaticFiles(directory="./app/static"), name="static")
2831
app.add_middleware(
2932
CORSMiddleware,
3033
allow_origins=["*"],
@@ -38,10 +41,11 @@
3841
autoescape=select_autoescape(['html']),
3942
)
4043

41-
# Dependency
42-
4344

4445
def get_db():
46+
"""
47+
Dependency to get a database session.
48+
"""
4549
db = SessionLocal()
4650
try:
4751
yield db
@@ -115,6 +119,12 @@ async def edit_email(user_id: str, email: str, db: Session = Depends(get_db)):
115119
return {"status": crud.edit_email(db, user_id=user_id, email=email)}
116120

117121

122+
@app.get("/guide", response_class=HTMLResponse)
123+
async def get_guide():
124+
guide_template = env.get_template("guide.html")
125+
return HTMLResponse(content=guide_template.render(), status_code=200)
126+
127+
118128
@app.get("/subscription/{user_id}", response_class=HTMLResponse)
119129
async def set_subscription(user_id: str, is_subscribe: bool, db: Session = Depends(get_db)):
120130
crud.set_subscription(db, user_id=user_id, is_subscription=is_subscribe)

‎backend/app/static/css/guide.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Noto Sans KR", sans-serif;
8+
word-break: keep-all;
9+
}
10+
11+
html,
12+
body {
13+
width: 100%;
14+
}
15+
16+
header {
17+
background-color: #20c997;
18+
height: 48px;
19+
width: 100%;
20+
display: flex;
21+
margin-bottom: 1rem;
22+
}
23+
24+
header > h1 {
25+
display: flex;
26+
margin-left: auto;
27+
margin-right: auto;
28+
color: white;
29+
}
30+
31+
.header:nth-child(1) {
32+
padding-top: 32px;
33+
}
34+
35+
.container {
36+
width: 600px;
37+
margin-left: auto;
38+
margin-right: auto;
39+
padding-right: auto;
40+
padding-left: auto;
41+
margin-bottom: 3rem;
42+
border-color: #20c997;
43+
border-width: 1px;
44+
}
45+
46+
.container > hr {
47+
margin-bottom: 5px;
48+
}
49+
50+
.container > h2 {
51+
display: inline;
52+
}
53+
54+
footer {
55+
font-size: 0.875rem;
56+
color: #adb5bd;
57+
font-style: italic;
58+
text-align: center;
59+
margin: 1rem;
60+
}

‎backend/app/static/guide/add_bookmark.png

110 KB
Loading

‎backend/app/static/guide/check_new_post.png

115 KB
Loading

‎backend/app/static/guide/set_email.gif

3.22 MB
Loading

‎backend/app/templates/guide.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="/static/css/guide.css" />
8+
<title>Velog Helper 신규 가이드</title>
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Velog Helper 신규 가이드</h1>
13+
</header>
14+
<main>
15+
<div class="container">
16+
<h2>블로그 즐겨찾기 방법</h2>
17+
<hr />
18+
<img width="600px" src="/static/guide/add_bookmark.png" />
19+
<p>
20+
각 블로그 내부에서 블로그명 바로 옆에 있는 별표시를 눌러서 즐겨찾기
21+
해주세요.
22+
</p>
23+
</div>
24+
<div class="container">
25+
<h2>새 글 알림 확인 방법</h2>
26+
<hr />
27+
<img width="600px" src="/static/guide/check_new_post.png" />
28+
<p>
29+
종 모양의 알림 버튼을 눌러 새 글 알림을 확인해주세요. 만약 북마크한
30+
블로그가 Velog Helper에 처음 등록된 블로그라면 알림이 표시되는데
31+
시간이 걸릴 수 있습니다.
32+
</p>
33+
</div>
34+
<div class="container">
35+
<h2>이메일로 알림 받기</h2>
36+
<hr />
37+
<img width="600px" src="/static/guide/set_email.gif" />
38+
<p>
39+
만약 크롬을 사용 중이고, 구글 동기화가 되어있다면 자동으로 이메일을
40+
수집하여 알림을 보냅니다. 하지만 자동으로 수집이 불가능한 경우
41+
수동으로 등록해주셔야합니다.
42+
</p>
43+
</div>
44+
</main>
45+
<footer>
46+
버그 제보 및 PR는 Github로 부탁드립니다.<br />
47+
Velog Helper | junah.dev@gmail.com | 개인정보 처리 방침
48+
</footer>
49+
</body>
50+
</html>

‎frontend/src/background.js

+5
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ browser.runtime.onInstalled.addListener(() => {
7979
})
8080
.then(registUser);
8181
}
82+
83+
// 사용 설명서 페이지를 새 탭으로 열기
84+
browser.tabs.create({
85+
url: `${Constants.BACKEND_URL}/guide`,
86+
});
8287
});
8388

8489
async function onUpdated(tabId) {

0 commit comments

Comments
 (0)