Skip to content

Commit 949c9dd

Browse files
cgoinglovecgoinglove
committed
feat: layout backdrop 추가
1 parent 504cc4b commit 949c9dd

File tree

7 files changed

+194
-11
lines changed

7 files changed

+194
-11
lines changed

‎src/app/backdrop-gradient.module.scss‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
@keyframes moveInCircle {
2+
0% {
3+
transform: rotate(0deg);
4+
}
5+
50% {
6+
transform: rotate(180deg);
7+
}
8+
100% {
9+
transform: rotate(360deg);
10+
}
11+
}
12+
13+
@keyframes moveVertical {
14+
0% {
15+
transform: translateY(-50%);
16+
}
17+
50% {
18+
transform: translateY(50%);
19+
}
20+
100% {
21+
transform: translateY(-50%);
22+
}
23+
}
24+
25+
@keyframes moveHorizontal {
26+
0% {
27+
transform: translateX(-50%) translateY(-10%);
28+
}
29+
50% {
30+
transform: translateX(50%) translateY(10%);
31+
}
32+
100% {
33+
transform: translateX(-50%) translateY(-10%);
34+
}
35+
}
36+
37+
.gradientBg {
38+
z-index: -100;
39+
position: fixed;
40+
width: 100%;
41+
/* height: 100%; */
42+
overflow: hidden;
43+
background: black;
44+
inset: calc(0.25rem * 0);
45+
46+
.gradientsContainer {
47+
filter: url(#goo) blur(40px);
48+
width: 100%;
49+
height: 100%;
50+
}
51+
52+
.g1 {
53+
position: absolute;
54+
background: radial-gradient(
55+
circle at center,
56+
rgba(18, 113, 255, 0.8) 0,
57+
rgba(18, 113, 255, 0) 50%
58+
)
59+
no-repeat;
60+
mix-blend-mode: hard-light;
61+
62+
width: 80%;
63+
height: 80%;
64+
top: calc(50% - 80% / 2);
65+
left: calc(50% - 80% / 2);
66+
67+
transform-origin: center center;
68+
animation: moveVertical 30s ease infinite;
69+
70+
opacity: 1;
71+
}
72+
73+
.g2 {
74+
position: absolute;
75+
background: radial-gradient(
76+
circle at center,
77+
rgba(107, 74, 255, 0.8) 0,
78+
rgba(107, 74, 255, 0) 50%
79+
)
80+
no-repeat;
81+
mix-blend-mode: hard-light;
82+
83+
width: 80%;
84+
height: 80%;
85+
top: calc(50% - 80% / 2);
86+
left: calc(50% - 80% / 2);
87+
88+
transform-origin: calc(50% - 400px);
89+
animation: moveInCircle 20s reverse infinite;
90+
91+
opacity: 1;
92+
}
93+
94+
.g3 {
95+
position: absolute;
96+
background: radial-gradient(
97+
circle at center,
98+
rgba(100, 100, 255, 0.8) 0,
99+
rgba(100, 100, 255, 0) 50%
100+
)
101+
no-repeat;
102+
mix-blend-mode: hard-light;
103+
104+
width: 80%;
105+
height: 80%;
106+
top: calc(50% - 80% / 2 + 200px);
107+
left: calc(50% - 80% / 2 - 500px);
108+
109+
transform-origin: calc(50% + 400px);
110+
animation: moveInCircle 40s linear infinite;
111+
112+
opacity: 1;
113+
}
114+
115+
.g4 {
116+
position: absolute;
117+
background: radial-gradient(
118+
circle at center,
119+
rgba(50, 160, 220, 0.8) 0,
120+
rgba(50, 160, 220, 0) 50%
121+
)
122+
no-repeat;
123+
mix-blend-mode: hard-light;
124+
125+
width: 80%;
126+
height: 80%;
127+
top: calc(50% - 80% / 2);
128+
left: calc(50% - 80% / 2);
129+
130+
transform-origin: calc(50% - 200px);
131+
animation: moveHorizontal 40s ease infinite;
132+
133+
opacity: 0.7;
134+
}
135+
136+
.g5 {
137+
position: absolute;
138+
background: radial-gradient(
139+
circle at center,
140+
rgba(80, 47, 122, 0.8) 0,
141+
rgba(80, 47, 122, 0) 50%
142+
)
143+
no-repeat;
144+
mix-blend-mode: hard-light;
145+
146+
width: calc(80% * 2);
147+
height: calc(80% * 2);
148+
top: calc(50% - 80%);
149+
left: calc(50% - 80%);
150+
151+
transform-origin: calc(50% - 800px) calc(50% + 200px);
152+
animation: moveInCircle 20s ease infinite;
153+
154+
opacity: 1;
155+
}
156+
}

‎src/app/backdrop-gradient.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client';
2+
import style from './backdrop-gradient.module.scss';
3+
4+
export default function BackdropGradient() {
5+
return (
6+
<div className={`${style.gradientBg}`}>
7+
<div className={style.gradientsContainer}>
8+
<div className={style.g1} />
9+
<div className={style.g2} />
10+
<div className={style.g3} />
11+
<div className={style.g4} />
12+
<div className={style.g5} />
13+
</div>
14+
<div className="fixed inset-0 bg-black/70 border-x w-full max-w-[1080px] mx-auto" />
15+
</div>
16+
);
17+
}

‎src/app/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Footer from '@components/footer';
66
import Script from 'next/script';
77
import GoogleAnalytics from './google-analytics';
88
import Head from 'next/head';
9+
import BackdropGradient from './backdrop-gradient';
910

1011
const roboto = Roboto({
1112
weight: ['400', '500', '700'],
@@ -35,12 +36,14 @@ export default function RootLayout({
3536
content="m2G9IHL8-nmIBJ5wEaGmT5YrwPXxaInoIP6-DU3zwp8"
3637
/>
3738
</Head>
39+
3840
<body
3941
className={`${roboto.className} text-default relative flex items-center h-full w-full flex-col bg-black`}
4042
>
43+
<BackdropGradient />
4144
<div className="max-w-full absolute">
4245
<main className="flex justify-center sm:px-8 min-h-screen ">
43-
<div className="relative w-full ">{children}</div>
46+
<div className="relative w-full">{children}</div>
4447
</main>
4548
<Footer />
4649
</div>

‎src/app/post/[slug]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default async function Page(props: { params: { slug: string } }) {
5353
const { metadata, content, slug } = PostManager.getBySlug(props.params.slug)!;
5454

5555
return (
56-
<>
56+
<div className="max-w-[1080px]">
5757
<Header />
5858
<div className="flex flex-col relative">
5959
<div
@@ -94,6 +94,6 @@ export default async function Page(props: { params: { slug: string } }) {
9494
</div>
9595
</div>
9696
</div>
97-
</>
97+
</div>
9898
);
9999
}

‎src/components/footer/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
export default function Footer() {
2+
const year = new Date().getFullYear();
23
return (
3-
<footer className="my-12 sm:px-8 w-full mx-auto absolute left-0 bottom-0">
4-
<p className="text-sm text-right">© 024 Cgoing. All rights reserved.</p>
4+
<footer className="my-12 px-8 sm:px-20 w-full mx-auto absolute left-0 bottom-0">
5+
<p className="text-sm text-right">
6+
© {year} Cgoing. All rights reserved.
7+
</p>
58
</footer>
69
);
710
}

‎src/components/markdown/style.module.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
.cgoing-markdown {
22
width: 100%;
33
position: relative;
4+
color: white;
45
font-size: 0.8rem;
56
transition: color 0.125s ease-in 0s;
67
line-height: 1.7;
78
letter-spacing: -0.004em;
89
word-break: keep-all;
910
overflow-wrap: break-word;
1011

11-
strong {
12+
/* strong {
1213
color: #ededed;
13-
}
14+
} */
1415
h1 {
1516
font-size: 1.8rem;
1617
}
@@ -25,7 +26,6 @@
2526
h3,
2627
h4 {
2728
font-weight: bold;
28-
color: #ededed;
2929
margin-top: 4rem;
3030
}
3131
ol {
@@ -81,7 +81,11 @@
8181
ol code,
8282
p code {
8383
font-weight: 600;
84-
color: rgb(244 244 245);
84+
border: 1px solid;
85+
border-color: #363636;
86+
border-radius: 4px;
87+
background: black;
88+
padding: 2px 5px;
8589
}
8690
blockquote {
8791
margin: 2rem 0px;

‎src/posts/crdt-rga-직접-구현기:-충돌-없는-동시문서-편집,-이렇게-만든다.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,15 +126,15 @@ interface Operation {
126126

127127
전송 방식의 변화만으로 수정된 전체 문서를 보낼 필요가 없어 `⚠️데이터 전송 크기의 문제`를 해결 할 수 있고,
128128

129-
A,B가 동시에 보내졌던 내용들도 각각의 operation(작업) 이기 때문에 두개의 작업을 같이 수렴(merge)할 수 있게 되어 `⚠️동시 수정 충돌 문제` 또한 해결 할 수 있게돼요.
129+
A,B가 동시에 보내졌던 내용들도 각각의 operation(작업) 이기 때문에 두개의 작업을 같이 수렴 할 수 있게 되어 `⚠️동시 수정 충돌 문제` 또한 해결 할 수 있게돼요.
130130

131131
### 두 번째 특징: 분산된 레플리카(Replica) 기반 구조
132132

133133
동시문서 편집에서 가장 중요한 점은, 여러 Peer들이 동일한 문서를 보고 있어야 한다는 것이죠.
134134

135135
![ot](../../public/images/crdt-rga-직접-구현기:-충돌-없는-동시문서-편집,-이렇게-만든다/9.png)
136136

137-
기존 방식에서는 각 Peer가 Server로 문서 수정 내용(Operation)을 전송하면 Server가 모든 수정을 수렴(merge)하고 관리한 뒤 다시 피어들에게 전파했어요.
137+
기존 방식에서는 각 Peer가 Server로 문서 수정 내용(Operation)을 전송하면 Server가 모든 수정을 수렴하고 관리한 뒤 다시 피어들에게 전파했어요.
138138

139139
이 방식은 Peer 들이 잘못된 Operation 을 보내거나 Operation 이 충돌이 되더라도
140140
(예: 동시에 같은 부모 뒤에 insert 를 한 경우)

0 commit comments

Comments
 (0)