fix: 블로그 본문이 텍스트 에디터와 비슷하게 보이도록 수정

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.idea

Dockerfile

@@ -0,0 +1,35 @@
+FROM node:23-alpine AS build
+
+# 컨테이너 내부 작업 디렉토리 설정
+WORKDIR /app
+
+# app dependencies
+# 컨테이너 내부로 package.json 파일들을 복사
+COPY package.json ./
+
+# package.json 및 package-lock.json 파일에 명시된 의존성 패키지들을 설치
+RUN npm install
+
+# 호스트 머신의 현재 디렉토리 파일들을 컨테이너 내부로 전부 복사
+COPY . .
+
+# npm build
+RUN npm run build
+
+# prod environment
+FROM nginx:stable-alpine
+
+# 이전 빌드 단계에서 빌드한 결과물을 /usr/share/nginx/html 으로 복사한다.
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# 기본 nginx 설정 파일을 삭제한다. (custom 설정과 충돌 방지)
+RUN rm /etc/nginx/conf.d/default.conf
+
+# custom 설정파일을 컨테이너 내부로 복사한다.
+COPY dockers/nginx.conf /etc/nginx/conf.d
+
+# 컨테이너의 80번 포트를 열어준다.
+EXPOSE 80
+
+# nginx 서버를 실행하고 백그라운드로 동작하도록 한다.
+CMD ["nginx", "-g", "daemon off;"]

dockers/nginx.conf

@@ -0,0 +1,10 @@
+server {
+    listen 80;
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+}

src/index.css

@@ -1,5 +1,37 @@
 @import "tailwindcss";
 
+@layer base {
+    h1 {
+        font-size: 2em;
+        font-weight: bold;
+        margin-top: 0.67em;
+        margin-bottom: 0.67em;
+    }
+    h2 {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin-top: 0.83em;
+        margin-bottom: 0.83em;
+    }
+    h3 {
+        font-size: 1.17em;
+        font-weight: bold;
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+    h4 {
+        font-size: 1em;
+        font-weight: bold;
+        margin-top: 1.33em;
+        margin-bottom: 1.33em;
+    }
+    blockquote {
+        margin: 0 32px;
+        padding-left: 1rem;
+        border-left: 2px solid #e5e7eb;
+    }
+}
+
 @theme {
     --font-*: initial;
     --default-font-family: 'SCDream';

src/pages/post/PostPage.tsx

@@ -209,7 +209,7 @@ function PostPage() {
                             }}/>)}
                     </div>
                 </div>
-                <div className="w-full max-w-3xl mx-auto py-8 break-words"
+                <div className="w-full max-w-3xl mx-auto py-8 space-y-4 break-words"
                      dangerouslySetInnerHTML={{__html: safeContent}}/>
                 <div>
                 </div>