Skip to content
Snippets Groups Projects
Commit dc80f8d2 authored by 화균 김's avatar 화균 김
Browse files

feat: fix ui bug & style ssr

parent 1c66d8b3
No related branches found
No related tags found
No related merge requests found
.swcrc 0 → 100644
{
"jsc": {
"experimental": {
"plugins": [
[
"@swc/plugin-styled-components",
{
"ssr": true
}
]
]
}
}
}
\ No newline at end of file
import type { NextConfig } from "next"; import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
/* config options here */ reactStrictMode: true,
compiler: {
styledComponents: true,
}
}; };
export default nextConfig; export default nextConfig;
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@swc/plugin-styled-components": "^7.1.1",
"@types/styled-components": "^5.1.34", "@types/styled-components": "^5.1.34",
"axios": "^1.8.4", "axios": "^1.8.4",
"next": "15.2.4", "next": "15.2.4",
......
...@@ -4,7 +4,6 @@ import { getSentence } from "../../../api/request"; ...@@ -4,7 +4,6 @@ import { getSentence } from "../../../api/request";
export async function TextArea() { export async function TextArea() {
console.log("sejfio");
const sentence = await getSentence(); const sentence = await getSentence();
return ( return (
......
'use client'; 'use client';
import { useServerInsertedHTML } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
...@@ -9,6 +10,12 @@ export default function StyledComponentsRegistry({ ...@@ -9,6 +10,12 @@ export default function StyledComponentsRegistry({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>; if (typeof window !== 'undefined') return <>{children}</>;
......
...@@ -35,7 +35,6 @@ export const ContentWrap = () => { ...@@ -35,7 +35,6 @@ export const ContentWrap = () => {
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => { const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
const percent = (e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight)) * 100; const percent = (e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight)) * 100;
console.log(percent);
setScroll(percent); setScroll(percent);
} }
......
...@@ -16,6 +16,8 @@ export const IntroAreaWrap = styled.section` ...@@ -16,6 +16,8 @@ export const IntroAreaWrap = styled.section`
`; `;
export const BookTitleLoc = styled.section` export const BookTitleLoc = styled.section`
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
...@@ -25,11 +27,20 @@ export const BookTitleLoc = styled.section` ...@@ -25,11 +27,20 @@ export const BookTitleLoc = styled.section`
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
color: #1361A7; color: #1361A7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
& h3 { & h3 {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 300; font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
`; `;
......
...@@ -5,7 +5,7 @@ import * as S from "./style"; ...@@ -5,7 +5,7 @@ import * as S from "./style";
export default function TextArea({ topRate, sentence }: { topRate: number, sentence: string }) { export default function TextArea({ topRate, sentence }: { topRate: number, sentence: string }) {
return ( return (
<S.TextContainer style={{ <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.OpenQuota src="/quota_open.png" alt="Open Quota" />
<S.Content>{sentence}</S.Content> <S.Content>{sentence}</S.Content>
......
...@@ -22,7 +22,12 @@ export const Content = styled.span` ...@@ -22,7 +22,12 @@ export const Content = styled.span`
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.5; line-height: 1.5;
color: #333; color: #333;
`;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
`;
export const OpenQuota = styled.img` export const OpenQuota = styled.img`
position: absolute; position: absolute;
...@@ -30,8 +35,8 @@ export const OpenQuota = styled.img` ...@@ -30,8 +35,8 @@ export const OpenQuota = styled.img`
left: 0; left: 0;
width: 0.75rem; width: 0.75rem;
`; `;
export const CloseQuota = styled.img` export const CloseQuota = styled.img`
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -39,5 +44,4 @@ export const CloseQuota = styled.img` ...@@ -39,5 +44,4 @@ export const CloseQuota = styled.img`
transform: translate(-100%, -100%); transform: translate(-100%, -100%);
width: 0.75rem; width: 0.75rem;
`; `;
\ No newline at end of file
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment