UI 디테일 수정

pages/post.js

@@ -10,14 +10,26 @@ import styled from 'styled-components';
 
 import 'react-notion/src/styles.css';
 import 'prismjs/themes/prism-tomorrow.css';
+import HitsBadge from '../src/components/blog/HitsBadge';
 
 const Container = styled.div`
   width: 100%;
-  background-color: #fffcfa;
-  min-height: 100vh;
   padding: 3rem 0;
 `;
 
+const cssOverrides = `
+  body {
+    background-color: #051614;
+  }
+  .notion-page-header {
+    display: none;
+  }
+  .notion {
+    color: #eee;
+    caret-color: #eee;
+  }
+`;
+
 const Post = () => {
   const setMenu = useSetRecoilState(menuAtom);
 
@@ -40,14 +52,14 @@ const Post = () => {
   }, [id]);
 
   return (
-    <AnimatedPage blackHeader={true}>
+    <AnimatedPage>
+      <style>{cssOverrides}</style>
       <Container>
         {setMenu(1)}
         {Object.keys(notionData).length && <NotionRenderer blockMap={notionData} fullPage={true} />}
         <ScrollToTopButton />
+        <HitsBadge url={`https://fridayproject.co.kr/post?id=${id}`} />
       </Container>
-      <style>{'body { background-color: #fffcfa; }'}</style>
-      <style>{'.notion-page-header { display: none; }'}</style>
     </AnimatedPage>
   );
 };

src/components/ScrollToTopButton.js

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 const TopButton = styled.button`
   position: fixed;
   cursor: pointer;
-  right: 5%;
-  bottom: 5%;
+  right: 5vw;
+  bottom: 5vw;
   z-index: 1;
   background-color: rgba(255, 255, 255, 0.8);
   -webkit-backdrop-filter: blur(1rem);
@@ -35,7 +35,6 @@ export default function ScrollToTopButton() {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth',
     });
   };
 

src/components/blog/HitsBadge.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const HitsBadgeContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 3rem;
+`;
+
+export default function HitsBadge({ url }) {
+  const imageUrl = getUrl(url);
+
+  return (
+    <HitsBadgeContainer>
+      <img src={imageUrl} />
+    </HitsBadgeContainer>
+  );
+}
+
+function getUrl(targetUrl) {
+  const encodedUrl = encodeURIComponent(targetUrl);
+  return `https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=${encodedUrl}&count_bg=%2301B9AD&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98&edge_flat=false`;
+}

src/components/recruit/FAQ.js

@@ -17,7 +17,8 @@ const FaqLogo = styled.span`
   font-size: 23px;
   font-weight: bold;
   text-align: center;
-  padding-top: 7px;
+  padding: 10px;
+  margin: 10px 0;
 `;
 
 const FaqTitleContainer = styled.div`
@@ -38,6 +39,7 @@ const QuestionTitle = styled.div`
   width: 100%;
   text-align: left;
   gap: 10px;
+  line-height: 1.3;
 
   @media only screen and (max-width: 800px) {
     font-size: 17px;

src/components/recruit/FAQCard.js

@@ -30,7 +30,7 @@ function FAQCard() {
         Friday는 열정과 새로운 지식을 습득하고자 하는 의지와 열정이 있는 분들을 환영합니다!
         <br />
         <br />
-        다만 추가 모집 전형인 .5기의 경우 프로젝트 진행 도중에 참여하므로 어느 정도 지식이 요구됩니다.
+        다만 추가 모집 기수인 .5기의 경우 프로젝트 진행 도중에 참여하므로 어느 정도 지식이 요구됩니다.
       </FAQ>
 
       <FAQ title="정해진 활동 기간이 있나요?">

src/styles/GlobalStyle.js

@@ -44,10 +44,6 @@ body {
   background-color: #000;
   text-decoration: none;
   color: #fff;
-  -webkit-user-select:none;
-  -moz-user-select:none;
-  -ms-user-select:none;
-  user-select:none;
 }
 
 a:link { 
@@ -76,6 +72,10 @@ a:hover {
   top: 0;
   padding: 25px;
 }
+
+::selection {
+  background-color: rgba(1, 185, 173, 0.5);
+}
 `;
 
 export default GlobalStyle;