[FE] design: 전체 스타일 개선 및 스타일드 컴포넌트 버그 수정 (#194)

* design: 사이드바 레이아웃 수정

* refactor: 글 뷰어 로딩 스타일 개선

* fix: styled components 에러 해결

* design: 로딩 스타일 수정

frontend/src/components/@common/Spinner/Spinner.tsx

@@ -19,31 +19,37 @@ const Spinner = ({
 }: Partial<Props>) => {
   return (
     <S.Spinner
-      size={size}
-      thickness={thickness}
-      duration={duration}
-      backgroundColor={backgroundColor}
-      barColor={barColor}
+      $size={size}
+      $thickness={thickness}
+      $duration={duration}
+      $backgroundColor={backgroundColor}
+      $barColor={barColor}
     />
   );
 };
 
 export default Spinner;
 
 const S = {
-  Spinner: styled.div<Props>`
-    ${({ size, thickness, backgroundColor, barColor, duration }) => {
+  Spinner: styled.div<{
+    $size: number;
+    $thickness: number;
+    $duration: number;
+    $backgroundColor: string;
+    $barColor: string;
+  }>`
+    ${({ $size, $thickness, $backgroundColor, $barColor, $duration }) => {
       return css`
         display: inline-block;
 
-        width: ${size}px;
-        height: ${size}px;
+        width: ${$size}px;
+        height: ${$size}px;
 
-        border: ${thickness}px solid ${backgroundColor};
-        border-bottom-color: ${barColor};
+        border: ${$thickness}px solid ${$backgroundColor};
+        border-bottom-color: ${$barColor};
         border-radius: 50%;
 
-        animation: ${rotation} ${duration}s linear infinite;
+        animation: ${rotation} ${$duration}s linear infinite;
       `;
     }}
   `,

frontend/src/components/WritingViewer/WritingViewer.tsx

@@ -6,6 +6,7 @@ import { getWriting } from 'apis/writings';
 import Divider from 'components/@common/Divider/Divider';
 import { useGetQuery } from 'hooks/@common/useGetQuery';
 import { GetWritingResponse } from 'types/apis/writings';
+import Spinner from 'components/@common/Spinner/Spinner';
 
 type Props = { writingId: number };
 
@@ -26,7 +27,14 @@ const WritingViewer = ({ writingId }: Props) => {
     hljs.highlightAll();
   }, [data]);
 
-  if (isLoading) return <div>로딩 중...</div>;
+  if (isLoading) {
+    return (
+      <S.LoadingContainer>
+        <Spinner size={60} thickness={4} />
+        <h1>글을 불러오는 중입니다 ...</h1>
+      </S.LoadingContainer>
+    );
+  }
 
   return (
     <S.WritingViewerContainer>
@@ -51,12 +59,25 @@ const S = {
     max-width: 100%;
     overflow-wrap: break-word;
   `,
+
+  LoadingContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    max-width: 100%;
+    height: 100%;
+  `,
+
   TitleWrapper: styled.div`
     padding-bottom: 2rem;
   `,
+
   Title: styled.h1`
     font-size: 4rem;
   `,
+
   ContentWrapper: styled.section`
     padding: 1.6rem 0;
     font-size: 1.6rem;

frontend/src/pages/Layout/Layout.tsx

@@ -1,11 +1,10 @@
-import { Dispatch, MutableRefObject, RefObject, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import { Outlet, useOutletContext } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { PlusCircleIcon } from 'assets/icons';
 import Button from 'components/@common/Button/Button';
 import { HEADER_STYLE, LAYOUT_STYLE, sidebarStyle } from 'styles/layoutStyle';
 import Header from 'components/Header/Header';
-import { usePageNavigate } from 'hooks/usePageNavigate';
 import WritingSideBar from 'components/WritingSideBar/WritingSideBar';
 import CategorySection from 'components/Category/CategorySection/CategorySection';
 import { useModal } from 'hooks/@common/useModal';
@@ -32,7 +31,6 @@ const Layout = () => {
     setIsRightSidebarOpen(!isRightSidebarOpen);
   };
 
-  const { goWritingTablePage } = usePageNavigate();
   return (
     <S.Container>
       <Header

frontend/src/styles/layoutStyle.ts

@@ -1,4 +1,4 @@
-import { RuleSet, css } from 'styled-components';
+import { css } from 'styled-components';
 import { theme } from './theme';
 
 export const HEADER_STYLE = {
@@ -16,6 +16,9 @@ export const SIDEBAR_STYLE = {
 } as const;
 
 export const sidebarStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
   width: ${SIDEBAR_STYLE.width};
   border: ${LAYOUT_STYLE.border};
   border-radius: 8px;