feat: fix ui bug & style ssr

.swcrc

+{
+  "jsc": {
+    "experimental": {
+      "plugins": [
+        [
+          "@swc/plugin-styled-components",
+          {
+            "ssr": true
+          }
+        ]
+      ]
+    }
+  }
+}
\ No newline at end of file

next.config.ts

 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  }
 };
 
 export default nextConfig;

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@swc/plugin-styled-components": "^7.1.1",
     "@types/styled-components": "^5.1.34",
     "axios": "^1.8.4",
     "next": "15.2.4",

reference/src/components/server/TextArea/index.tsx

@@ -4,7 +4,6 @@ import { getSentence } from "../../../api/request";
 
 
 export async function TextArea() {
-  console.log("sejfio");
   const sentence = await getSentence();
 
   return (

src/app/registry.tsx

 'use client';
 
+import { useServerInsertedHTML } from 'next/navigation';
 import React, { useState } from 'react';
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 
@@ -9,6 +10,12 @@ export default function StyledComponentsRegistry({
   children: React.ReactNode;
 }) {
   const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+  
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
 
   if (typeof window !== 'undefined') return <>{children}</>;
 

src/components/ContentWrap/index.tsx

@@ -35,7 +35,6 @@ export const ContentWrap = () => {
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const percent = (e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight)) * 100;
-    console.log(percent);
     setScroll(percent);
   }
 

src/components/IntroArea/style.ts

@@ -16,6 +16,8 @@ export const IntroAreaWrap = styled.section`
 `;
 
 export const BookTitleLoc = styled.section`
+  width: 100%;
+  
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -25,11 +27,20 @@ export const BookTitleLoc = styled.section`
     font-size: 2rem;
     font-weight: 700;
     color: #1361A7;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
   }
 
   & h3 {
     font-size: 1.25rem;
     font-weight: 300;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
   }
 `;
 

src/components/TextArea/index.tsx

@@ -5,7 +5,7 @@ import * as S from "./style";
 export default function TextArea({ topRate, sentence }: { topRate: number, sentence: string }) {
   return (
     <S.TextContainer style={{
-      transform: `translateY(calc(-50% + ${topRate*6/10}%))`
+      transform: `translateY(calc(-50% + ${topRate*6/10}%))` || undefined
     }}>
       <S.OpenQuota src="/quota_open.png" alt="Open Quota" />
       <S.Content>{sentence}</S.Content>

src/components/TextArea/style.ts

@@ -22,7 +22,12 @@ export const Content = styled.span`
   font-size: 1.5rem;
   line-height: 1.5;
   color: #333;
-`; 
+
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
 
 export const OpenQuota = styled.img`
   position: absolute;
@@ -30,8 +35,8 @@ export const OpenQuota = styled.img`
   left: 0;
 
   width: 0.75rem;
-
 `;
+
 export const CloseQuota = styled.img`
   position: absolute;
   bottom: 0;
@@ -39,5 +44,4 @@ export const CloseQuota = styled.img`
   transform: translate(-100%, -100%);
 
   width: 0.75rem;
-
 `;
\ No newline at end of file