feat: 둘러보기 페이지 개발 #45
Conversation
-관련 api생성 -페이지 레이아웃 개발 -추후 갯수 많아지면 무한스크롤 구현 예정
✅ Deploy Preview for hollang ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
-config 간결하게 수정 -불필요한 여는 태그 수정
-반응형 실험 작업 -styledComponent로 전역상태 관리
package.json
Outdated
| "styled-component": "^2.8.0", | ||
| "styled-components": "^5.3.6", |
There was a problem hiding this comment.
중복입니다. 근데 global style때문에 styled-component도입하신건가요 ,, ?
그렇다면 저희 이미 src>global.css 파일 있어서 거기서 손 보면 될 거 같아요
There was a problem hiding this comment.
아 뀨 이게 제가 height에 따라 동적으로 fontsize도입해야되는데 tailiwind에 방법이 없어서 styledcomponents썼어요!
src/styles/globalStyle.tsx
Outdated
| export const GlobalStyle = createGlobalStyle<GlobalStyleProps>` | ||
| html{ | ||
| font-size:${(props) => `${((props.height * 0.01) / 84.4) * 100}px`}}; |
There was a problem hiding this comment.
이 부분은 globals.css에서 font-size:x%로도 바꿀 수 있습니다.
There was a problem hiding this comment.
https://canoe726.tistory.com/67 링크 참고해주세용
There was a problem hiding this comment.
저 부분 너무 좋은데 이게 innerHeight에 따라 진행해야돼서 이렇게 진행했습니다 .ㅠㅠ
일단 머지할게요
There was a problem hiding this comment.
아뇨 근데 이미 저희가 16px = 1rem으로 하기로 결정을 해서 다 작업을 진행했는데, 저와 상의 전혀 없이 10px = 1rem으로 바꾸고, styled component를 도입하는 건 좀 아닌 거 같아요
저도 단위 변환 관련해서 몽과 이야기를 나눠 결정을 해야 하는데 이야기를 못나눠 작업 진행을 못하고 있는 상태입니다.
There was a problem hiding this comment.
반응형 웹 -> globalcss에서 font-size: x vh로 지정
1. Vh : 높이값의 100분의 1 단위. 즉, 높이값이 900px일 때 9px
2. 우리의 경우 높이가 900px. 900:16 = 100:x
font-size:calc(16/9)로 지정하면 저희가 해오던 방식으로 진행할 수 있을 것 같습니다.
-반응형 실험 작업 -styledComponent로 전역상태 관리
-관련 라이브러리 삭제 -단위1/10> 1/16으로 수정
src/pages/_app.tsx
Outdated
| @@ -22,6 +21,7 @@ export default function App({ Component, pageProps }: AppProps) { | |||
| <Head> | |||
| <link rel="shortcut icon" href="/static/favicon.ico" /> | |||
| <title>Hollang</title> | |||
| <style></style> | |||
src/styles/globals.css
Outdated
| html { | ||
| font-size: calc(); | ||
| } | ||
|
|
| </div> | ||
| ))} | ||
| </section> | ||
| <div className={`sticky left-[50%] top-[85%]`}> |
src/pages/question.tsx
Outdated
| const [innerHeight, setInnerHeight] = useState<number>(0); | ||
|
|
||
| useEffect(() => { | ||
| setInnerHeight((window.innerHeight / 84.4) * 100); | ||
| }, []); |
작업 내용
-관련 api생성
-페이지 레이아웃 개발
-추후 갯수 많아지면 무한스크롤 구현 예정
참고 이미지(선택)
어떤 점을 리뷰 받고 싶으신가요?