Design(Problem): 문제 세트 생성 디자인

- 반응형으로 문제수 설정 디자인 수정 - 공통 Footer 생성 - Appbar 수정 - Appbar 모바일 화면 사이드 UI 수정 필요
Jabiseo · Jun 25, 2024 · 641493a · 641493a
1 parent afcd6e2
commit 641493a
Show file tree

Hide file tree

Showing 9 changed files with 606 additions and 165 deletions.
diff --git a/public/headerImage.png b/public/headerImage.png
diff --git a/src/app/learning/components/MakeProblemSet.tsx b/src/app/learning/components/MakeProblemSet.tsx
diff --git a/src/app/learning/components/learningHeader.tsx b/src/app/learning/components/learningHeader.tsx
@@ -0,0 +1,61 @@
+import { ThemeProvider } from "@emotion/react";
+import { globalTheme } from "../../../components/globalStyle";
+import { Box, Typography } from "@mui/material";
+
+const LearningHeader = () => {
+  return (
+    <>
+      <ThemeProvider theme={globalTheme}>
+        <Box
+          sx={{
+            mt: {
+              xs: "56px",
+              sm: "64px",
+            },
+            padding: "0",
+            backgroundImage: "url('/headerImage.png')",
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            minHeight: "180px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexDirection: "column",
+              gap: "8px",
+            }}
+          >
+            <Typography
+              variant="h1"
+              sx={{ color: "white" }}
+              fontSize={{
+                xs: "28px",
+                sm: "32px",
+              }}
+            >
+              쉽고 편리하게
+            </Typography>
+            <Typography
+              variant="h1"
+              sx={{ color: "white" }}
+              fontSize={{
+                xs: "28px",
+                sm: "32px",
+              }}
+            >
+              공부할 수 있는 자비서
+            </Typography>
+          </Box>
+        </Box>
+      </ThemeProvider>
+    </>
+  );
+};
+
+export default LearningHeader;
diff --git a/src/app/learning/components/selectCertificate.tsx b/src/app/learning/components/selectCertificate.tsx
@@ -19,13 +19,29 @@ const SelectCertificateUI: React.FC<CertificateProps> = ({ handleIsCertificate }
   return (
     <>
       <ThemeProvider theme={globalTheme}>
-        <Container>
-          <Box textAlign="center" my={5}>
-            <Typography variant="h3">자격증을 먼저 선택해주세요!</Typography>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+          }}
+        >
+          <Box>
+            <Typography
+              variant="h1"
+              fontSize={{
+                xs: "26px",
+                sm: "32px",
+              }}
+            >
+              자격증을 먼저 선택해주세요!
+            </Typography>
           </Box>
           <Grid container spacing={2}>
             {certificates.map(certificate => (
-              <Grid item xs={12} sm={6} md={4} lg={3} key={certificate.certificateId}>
+              <Grid item xs={6} md={4} lg={3} key={certificate.certificateId}>
                 <Box
                   onClick={() => selectCertificate(certificate)}
                   sx={{
@@ -41,14 +57,23 @@ const SelectCertificateUI: React.FC<CertificateProps> = ({ handleIsCertificate }
                     "&:hover": {
                       borderColor: "var(--c-sub3)",
                     },
+                    backgroundColor: "white",
                   }}
                 >
-                  <Typography variant="body2">{certificate.name}</Typography>
+                  <Typography
+                    variant="body2"
+                    fontSize={{
+                      xs: "16px",
+                      sm: "20px",
+                    }}
+                  >
+                    {certificate.name}
+                  </Typography>
                 </Box>
               </Grid>
             ))}
           </Grid>
-        </Container>
+        </Box>
       </ThemeProvider>
     </>
   );

diff --git a/src/app/learning/components/statusBox.tsx b/src/app/learning/components/statusBox.tsx
@@ -71,7 +71,13 @@ const StatusBox = () => {
   return (
     <>
       <ThemeProvider theme={globalTheme}>
-        <Box sx={{ mt: "64px", padding: "0" }}>
+        <Box
+          sx={{
+            padding: "0",
+            backgroundColor: "white",
+            marginBottom: "40px",
+          }}
+        >
           <Box
             sx={{
               display: "flex",

diff --git a/src/app/learning/page.tsx b/src/app/learning/page.tsx
@@ -1,7 +1,10 @@
 "use client";
-import GridBase from "@/src/components/gridBase";
-import MakeProblemSetUI from "./components/MakeProblemSet";
+import Appbar from "@/src/components/Appbar";
+import { useMediaQuery, useTheme } from "@mui/material";
 import { useEffect, useState } from "react";
+import LearningFooter from "../../components/Footer";
+import MakeProblemSetUI from "./components/MakeProblemSet";
+import LearningHeader from "./components/learningHeader";
 import SelectCertificate from "./components/selectCertificate";
 import StatusBox from "./components/statusBox";
 
@@ -18,19 +21,21 @@ const makeProblemSetBase = () => {
   const handleIsCertificate = () => {
     setisCertificate(true);
   };
+  const theme = useTheme();
+  const isSm = useMediaQuery(theme.breakpoints.down("sm"));
   return (
     <>
-      <StatusBox />
-      <GridBase
-        main={
-          isCertificate == true ? (
-            <MakeProblemSetUI />
-          ) : (
-            <SelectCertificate handleIsCertificate={handleIsCertificate} />
-          )
-        }
-      />
-      ;
+      <Appbar />
+      <LearningHeader />
+      {isCertificate == true ? (
+        <>
+          <StatusBox />
+          <MakeProblemSetUI />
+        </>
+      ) : (
+        <SelectCertificate handleIsCertificate={handleIsCertificate} />
+      )}
+      {!isSm && <LearningFooter />}
     </>
   );
 };

diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
@@ -1,16 +1,17 @@
 "use client";
-import React from "react";
+import MenuIcon from "@mui/icons-material/Menu";
+import { Divider, Drawer, MenuItem, ThemeProvider } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
-import { Divider, Drawer, MenuItem } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { globalTheme } from "./globalStyle";
 const logoStyle = {
-  width: "140px",
+  width: "23px",
   height: "auto",
   cursor: "pointer",
 };
@@ -31,61 +32,103 @@ const Appbar = () => {
     }
   }, []);
   return (
-    <div>
+    <ThemeProvider theme={globalTheme}>
       <AppBar
         position="fixed"
         sx={{
-          backgroundColor: "white",
-          boxShadow: "0px 2px 3px 0px rgba(0,0,0,0.14)",
+          backgroundImage: "url('/headerImage.png')",
+          backgroundSize: "cover",
+          backgroundRepeat: "no-repeat",
+          paddingX: {
+            xs: 1,
+            sm: 6,
+          },
+          boxShadow: "none",
         }}
       >
         <Toolbar>
           <Box sx={{ flexGrow: 1 }}>
             <Typography variant="h6" component="div" sx={{ display: "flex", alignItems: "center" }}>
-              <img
-                src="https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg"
-                alt="Sitemark"
-                style={logoStyle}
-              />
+              <Button href="/">
+                <img
+                  src="https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg"
+                  alt="Sitemark"
+                  style={logoStyle}
+                />
+                <Typography variant="h1" sx={{ color: "white", ml: 2 }} fontSize={"24px"}>
+                  자비서
+                </Typography>
+              </Button>
+              <Button sx={{ color: "black", display: { xs: "none", sm: "flex" } }} href="/learning">
+                <Typography variant="subtitle1" sx={{ color: "white", ml: 2 }} fontSize={"16px"}>
+                  문제풀이
+                </Typography>
+              </Button>
+              <Button sx={{ color: "black", display: { xs: "none", sm: "flex" } }} href="/bookmark">
+                <Typography variant="subtitle1" sx={{ color: "white", ml: 2 }} fontSize={"16px"}>
+                  북마크
+                </Typography>
+              </Button>
             </Typography>
           </Box>
-          <Button sx={{ color: "black", display: { xs: "none", sm: "flex" } }} href="/">
-            홈
-          </Button>
-          <Button sx={{ color: "black", display: { xs: "none", sm: "flex" } }} href="/learning">
-            문제풀이
-          </Button>
-          <Button sx={{ color: "black", display: { xs: "none", sm: "flex" } }} href="/bookmark">
-            북마크
-          </Button>
           {!isLogin ? (
             <Button
               variant="contained"
               sx={{
                 marginLeft: 2,
-                backgroundColor: "var(--c-green)",
+                backgroundColor: "white",
                 display: { xs: "none", sm: "flex" },
+                borderRadius: "10px",
+                border: "1px solid var(--c-main)",
+                boxShadow: "none",
+                "&:hover": {
+                  backgroundColor: "white",
+                  boxShadow: "none",
+                },
               }}
+              href="/login"
             >
-              로그인
+              <Typography variant="h4" fontSize={"16px"} color="var(--c-main)">
+                로그인
+              </Typography>
             </Button>
           ) : (
+            <>
+              <Button
+                variant="contained"
+                sx={{
+                  marginLeft: 2,
+                  backgroundColor: "white",
+                  display: { xs: "none", sm: "flex" },
+                }}
+              >
+                로그아웃
+              </Button>
+              <IconButton sx={{ marginLeft: 2 }}>
+                <Avatar alt="User" src="user-avatar.jpg" />
+              </IconButton>
+            </>
+          )}
+
+          <Box sx={{ display: { xs: "", sm: "none" } }}>
             <Button
-              variant="contained"
               sx={{
-                marginLeft: 2,
-                backgroundColor: "var(--c-green)",
-                display: { xs: "none", sm: "flex" },
+                marginRight: 1,
+                backgroundColor: "white",
+                borderRadius: "30px",
+                border: "1px solid var(--c-main)",
+                boxShadow: "none",
+                "&:hover": {
+                  backgroundColor: "white",
+                  boxShadow: "none",
+                },
               }}
+              href="/login"
             >
-              로그아웃
+              <Typography variant="h4" fontSize={"14px"} color="var(--c-main)">
+                로그인
+              </Typography>
             </Button>
-          )}
-
-          <IconButton sx={{ marginLeft: 2 }}>
-            <Avatar alt="User" src="user-avatar.jpg" />
-          </IconButton>
-          <Box sx={{ display: { xs: "", sm: "none" } }}>
             <Button
               variant="text"
               color="primary"
@@ -95,6 +138,7 @@ const Appbar = () => {
             >
               <MenuIcon />
             </Button>
+
             <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
               <Box
                 sx={{
@@ -164,7 +208,7 @@ const Appbar = () => {
           </Box>
         </Toolbar>
       </AppBar>
-    </div>
+    </ThemeProvider>
   );
 };