feat : 404 에러 페이지 개발 (#271)

* fix : 모달 닫힘 버튼 수정 * feat : 에러 페이지 설정 * style : 공유 컴포넌트 반응형 * env : 의존성 설치 * style : 차트 반응형 * style : 로그인 반응형 * style : 마이 페이지 반응형 * env : 배포 환경에서 콘솔 제거
prgrms-fe-devcourse · Nov 7, 2024 · 36cdcd7 · 36cdcd7
1 parent e4c003e
commit 36cdcd7
Show file tree

Hide file tree

Showing 26 changed files with 298 additions and 89 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
         "axios-mock-adapter": "^2.1.0",
         "date-fns": "^4.1.0",
         "favicons": "^7.2.0",
+        "framer-motion": "^11.11.11",
         "husky": "^9.1.6",
         "init": "^0.1.2",
         "jest": "^29.7.0",
@@ -16,6 +17,7 @@
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "react-intersection-observer": "^9.13.1",
+        "react-responsive": "^10.0.0",
         "react-router-dom": "^6.27.0",
         "react-spinners": "^0.14.1",
         "recharts": "^2.13.0",

diff --git a/src/app/router.tsx b/src/app/router.tsx
@@ -144,10 +144,14 @@ const router = createBrowserRouter([
             {
                 path: '/account',
                 element: (
-                    <ProtectedRoute>
+                    <PublicRoute>
                         <AccountPage />
-                    </ProtectedRoute>
+                    </PublicRoute>
                 )
+            },
+            {
+                path: '*',
+                element: <AccountPage />
             }
         ]
     }

diff --git a/src/entities/chart/ui/Chart.tsx b/src/entities/chart/ui/Chart.tsx
@@ -1,8 +1,4 @@
 import React from 'react';
-import {
-    DailyConditionType,
-    WeeklyConditionSummaryType
-} from '@/shared/model/conditionTypes';
 
 import {
     LineChart,
@@ -13,8 +9,13 @@ import {
     Tooltip,
     ResponsiveContainer
 } from 'recharts';
-import isDailyEmotion from '../lib/isDailyEmotion';
 import { ScaleLoader } from 'react-spinners';
+import {
+    DailyConditionType,
+    WeeklyConditionSummaryType
+} from '@/shared/model/conditionTypes';
+import isDailyEmotion from '../lib/isDailyEmotion';
+import { useMediaQuery } from 'react-responsive';
 
 const emotions = ['매우 나쁨', '나쁨', '보통', '좋음', '매우 좋음'];
 
@@ -24,6 +25,8 @@ interface ChartProps {
 }
 
 const Chart = ({ data, isLoading }: ChartProps) => {
+    const isMobile = useMediaQuery({ maxWidth: 640 }); // 화면 너비가 600px 이하인 경우
+
     return isLoading ? (
         <div
             style={{
@@ -36,7 +39,7 @@ const Chart = ({ data, isLoading }: ChartProps) => {
             <ScaleLoader color="#DBDBDB" />
         </div>
     ) : (
-        <ResponsiveContainer width="100%" height={400}>
+        <ResponsiveContainer width="100%" height={isMobile ? 300 : 400}>
             <LineChart
                 data={data}
                 margin={{ top: 20, right: 10, left: 10, bottom: 20 }}
@@ -50,6 +53,7 @@ const Chart = ({ data, isLoading }: ChartProps) => {
                             dy={10}
                             height={50}
                             axisLine={false}
+                            tick={{ fontSize: isMobile ? 10 : 12 }}
                         />
                         <YAxis
                             type="category"
@@ -59,6 +63,7 @@ const Chart = ({ data, isLoading }: ChartProps) => {
                             domain={emotions}
                             ticks={emotions}
                             allowDuplicatedCategory={false}
+                            tick={{ fontSize: isMobile ? 10 : 12 }}
                         />
                         <Line
                             type="monotone"
@@ -76,6 +81,7 @@ const Chart = ({ data, isLoading }: ChartProps) => {
                             dy={10}
                             height={50}
                             axisLine={false}
+                            tick={{ fontSize: isMobile ? 10 : 12 }}
                         />
                         <YAxis
                             type="category"
@@ -85,6 +91,7 @@ const Chart = ({ data, isLoading }: ChartProps) => {
                             domain={emotions}
                             ticks={emotions}
                             allowDuplicatedCategory={false}
+                            tick={{ fontSize: isMobile ? 10 : 12 }}
                         />
                         <Line
                             type="monotone"

diff --git a/src/entities/dataSldier/DateSlider.styled.ts b/src/entities/dataSldier/DateSlider.styled.ts
@@ -5,6 +5,12 @@ export const MonthWeekSelectorWrapper = styled.div`
     align-items: center;
     justify-content: center;
     font-size: 20px;
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
+    @media (max-width: 480px) {
+        font-size: 12px;
+    }
 `;
 
 export const ArrowButton = styled.button`
@@ -17,13 +23,34 @@ export const ArrowButton = styled.button`
     &:focus {
         outline: none;
     }
+
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
+    @media (max-width: 480px) {
+        font-size: 12px;
+    }
 `;
 
 export const Display = styled.span`
     margin: 0 140px;
     font-size: 20px;
+    @media (max-width: 768px) {
+        font-size: 16px;
+        margin: 0 100px;
+    }
+    @media (max-width: 480px) {
+        font-size: 12px;
+        margin: 0 60px;
+    }
 `;
 
 export const SliderInfoContainer = styled.div`
     margin-bottom: 100px;
+    @media (max-width: 768px) {
+        margin-bottom: 60px;
+    }
+    @media (max-width: 480px) {
+        margin-bottom: 20px;
+    }
 `;
diff --git a/src/features/chart/ui/EmotionChart.styled.ts b/src/features/chart/ui/EmotionChart.styled.ts
@@ -5,14 +5,25 @@ export const ChartInfoStyled = styled.h4`
     margin-top: 12px;
     font-size: 20px;
     color: #a4a4a4;
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
+    @media (max-width: 480px) {
+        font-size: 12px;
+    }
 `;
 
 export const ButtonContainer = styled.div<SkeletonProps>`
     display: flex;
     gap: 10px;
+    margin-top: 10px;
     margin-bottom: 20px;
     justify-content: flex-end;
     width: 100%;
+    @media (max-width: 760px) {
+        margin-top: 5px;
+        margin-bottom: 10px;
+    }
 `;
 
 export const ChartButtonStlyed = styled.button`
@@ -25,6 +36,11 @@ export const ChartButtonStlyed = styled.button`
         cursor: pointer;
         background-color: rgba(0, 0, 0, 0.04);
     }
+
+    @media (max-width: 768px) {
+        padding: 5px 5px;
+        font-size: 10px;
+    }
 `;
 
 export const ChartWrapper = styled.div<SkeletonProps>`
@@ -34,11 +50,18 @@ export const ChartWrapper = styled.div<SkeletonProps>`
     width: 100%;
     box-shadow: 0px 4px 20px 0px rgba(200, 200, 200, 0.3);
     padding: 50px 90px 90px 90px;
+    @media (max-width: 760px) {
+        padding: 30px 40px 50px 40px;
+    }
 `;
 
 export const EmotionChartStlyed = styled.div`
     max-width: 960px;
     margin: auto;
     padding-top: 150px;
-    min-height: 940px;
+    height: 940px;
+    @media (max-width: 760px) {
+        width: 90%;
+        height: 700px;
+    }
 `;
diff --git a/src/pages/ErrorPage/ui/ErrorPage.stories.tsx b/src/pages/ErrorPage/ui/ErrorPage.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ErrorPage from './ErrorPage';
+
+const meta: Meta<typeof ErrorPage> = {
+  component: ErrorPage,
+  title: 'ErrorPage',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof ErrorPage>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/pages/ErrorPage/ui/ErrorPage.styled.tsx b/src/pages/ErrorPage/ui/ErrorPage.styled.tsx
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const ErrorPageStyled = styled.div`
+    max-width: 960px;
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+
+    @media (max-width: 768px) {
+        max-width: 100%;
+        padding: 0 20px;
+    }
+`;
+
+export const ErrorImage = styled.img`
+    object-fit: cover;
+    margin: auto;
+    width: 100%;
+
+    @media (max-width: 768px) {
+        width: 80%;
+    }
+`;
+
+export const ErrorTilte = styled.h2`
+    text-align: center;
+    font-size: 50px;
+
+    a {
+        text-decoration: none;
+        color: black;
+    }
+    @media (max-width: 768px) {
+        font-size: 36px;
+    }
+
+    @media (max-width: 480px) {
+        font-size: 28px;
+    }
+`;
diff --git a/src/pages/ErrorPage/ui/ErrorPage.tsx b/src/pages/ErrorPage/ui/ErrorPage.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import cat from '@/shared/assets/cuteCat.gif';
+import { ErrorPageStyled, ErrorTilte, ErrorImage } from './ErrorPage.styled';
+import Margin from '@/shared/ui/Margin/Margin';
+import Title from '@/shared/ui/Title/Title';
+import { Link } from 'react-router-dom';
+
+const ErrorPage = () => {
+    return (
+        <ErrorPageStyled>
+            <Margin top={160} />
+            <ErrorImage src={`${cat}`} alt="logo" />
+            <ErrorTilte>
+                <Link to="/">404 Error Please Click Here </Link>
+            </ErrorTilte>
+        </ErrorPageStyled>
+    );
+};
+
+export default ErrorPage;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -2,7 +2,11 @@ import Login from '@/widgets/Login/Login';
 import React from 'react';
 
 const LoginPage = () => {
-    return <Login />;
+    return (
+        <div>
+            <Login />
+        </div>
+    );
 };
 
 export default LoginPage;
diff --git a/src/shared/assets/cuteCat.gif b/src/shared/assets/cuteCat.gif
diff --git a/src/shared/ui/Button/Button.styled.ts b/src/shared/ui/Button/Button.styled.ts
@@ -33,4 +33,7 @@ export const StyledButton = styled.button.withConfig({
             return props.hasBorder ? '#FFF4F1' : '#E13600'; // hasBorder에 따른 배경색
         }};
     }
+    @media (max-width: 760px) {
+        width: 100%;
+    }
 `;
diff --git a/src/shared/ui/Info/Info.styeld.ts b/src/shared/ui/Info/Info.styeld.ts
@@ -5,4 +5,10 @@ export const InfoStyled = styled.h4<SkeletonProps>`
     margin-top: 12px;
     font-size: 20px;
     color: #a4a4a4;
+    @media (max-width: 768px) {
+        font-size: 16px;
+    }
+    @media (max-width: 480px) {
+        font-size: 12px;
+    }
 `;
diff --git a/src/shared/ui/InputForm/InputForm.styled.tsx b/src/shared/ui/InputForm/InputForm.styled.tsx
@@ -5,7 +5,7 @@ export const InputContainer = styled.div<{
 }>`
     display: flex;
     flex-direction: column;
-    width: ${(props) => props.width};
+    max-width: ${(props) => props.width};
     font-family: 'Pretendard', sans-serif;
 `;