Component/skeleton

client/package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.1",
     "styled-components": "^5.3.6",
     "styled-reset": "^4.4.2",
     "typescript": "^4.8.4",

client/src/api/responseApi.ts

@@ -20,6 +20,10 @@ const responseApi = {
     const { data } = await axios.get(`${API.RESPONSE}/${formId}/${responseId}`, { withCredentials: true });
     return data.answerList;
   },
+  checkDuplicateResponse: async (formId: string | undefined) => {
+    const { data } = await axios.get(`${API.RESPONSE}/isSubmitted/${formId}`, { withCredentials: true });
+    return data;
+  },
 };
 
 export default responseApi;

client/src/components/Modal/LoginModal/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "components/common/Button";
+import theme from "styles/theme";
+import * as S from "./style";
+
+function LoginModal({ closeModal }: { closeModal: () => void }) {
+  const navigate = useNavigate();
+
+  const onClickLogin = () => {
+    closeModal();
+    navigate("/login");
+  };
+
+  return (
+    <S.Container>
+      <S.Title>계속 하려면 로그인</S.Title>
+      <S.Text>이 설문지를 작성하려면 로그인해야 합니다. 신원은 익명으로 유지됩니다.</S.Text>
+      <S.ButtonContainer>
+        <Button
+          type="button"
+          onClick={onClickLogin}
+          backgroundColor={theme.colors.white}
+          border={theme.colors.blue2}
+          color={theme.colors.blue2}
+          fontSize={theme.fontSize.sz12}
+          hover={theme.colors.blue0}
+          active
+        >
+          로그인
+        </Button>
+      </S.ButtonContainer>
+    </S.Container>
+  );
+}
+
+export default LoginModal;

client/src/components/Modal/LoginModal/style.ts

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 400px;
+  border-radius: 3px;
+  padding: 24px;
+
+  z-index: 2;
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+const Title = styled.h2`
+  margin-bottom: 20px;
+  font-size: ${({ theme }) => theme.fontSize.sz20};
+  font-weight: 400;
+`;
+
+const Text = styled.p`
+  margin-bottom: 16px;
+  font-size: 14px;
+`;
+
+const Input = styled.input`
+  width: 100%;
+  padding: 5px 10px;
+  border: 1px solid ${({ theme }) => theme.colors.grey3};
+  border-radius: 3px;
+  margin-bottom: 24px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: right;
+`;
+
+export { Container, ButtonContainer, Input, Title, Text };

client/src/components/common/Button/index.tsx

@@ -2,17 +2,15 @@ import React from "react";
 import theme from "styles/theme";
 import ButtonComponent from "./style";
 
-interface ButtonProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  type: "button" | "submit" | "reset";
   color?: string;
   backgroundColor?: string;
   hover?: string;
   fontSize?: string;
   active?: boolean;
   border?: string;
   custom?: string;
-  onClick: () => void;
 }
 
 function Button({

client/src/components/common/Pagination/index.tsx

@@ -6,11 +6,11 @@ import * as S from "./style";
 function Pagination({
   currentPage,
   lastPage,
-  setPage,
+  callback,
 }: {
   currentPage: number;
   lastPage: number;
-  setPage: React.Dispatch<React.SetStateAction<number>>;
+  callback: (pageNumber: number) => void;
 }) {
   const [pageNumbers, setPageNumbers] = useState<number[]>([]);
 
@@ -30,23 +30,23 @@ function Pagination({
       <IconButton
         size="24px"
         type="button"
-        onClick={() => setPage((prev) => prev - 1)}
+        onClick={() => callback(currentPage - 1)}
         disabled={currentPage === 1}
         icon="left"
         fill={theme.colors.grey5}
         custom="height: 24px;"
       />
       <S.PageNumberWrapper>
         {pageNumbers.map((number) => (
-          <S.PageText key={number} current={currentPage === number} onClick={() => setPage(number)}>
+          <S.PageText key={number} current={currentPage === number} onClick={() => callback(number)}>
             {number}
           </S.PageText>
         ))}
       </S.PageNumberWrapper>
       <IconButton
         size="24px"
         type="button"
-        onClick={() => setPage((prev) => prev + 1)}
+        onClick={() => callback(currentPage + 1)}
         disabled={currentPage === lastPage}
         icon="right"
         fill={theme.colors.grey5}

client/src/components/common/Skeleton/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import * as S from "./style";
+import SkeletonType from "./type";
 
 function SkeletonContainer({ children, custom = "" }: { children: React.ReactNode; custom?: string }) {
   return <S.Container custom={custom}>{children}</S.Container>;
@@ -8,7 +9,7 @@ SkeletonContainer.defaultProps = {
   custom: "",
 };
 
-function Element({ type }: { type: string }) {
+function Element({ type }: { type: SkeletonType }) {
   return <S.Element type={type} />;
 }
 

client/src/components/common/Skeleton/style.ts

@@ -1,18 +1,55 @@
 import styled, { css } from "styled-components";
+import SkeletonType from "./type";
 
-const getSkeletonTypeCss = (type: string) => {
+const getSkeletonTypeCss = (type: SkeletonType) => {
   switch (type) {
     case "text":
       return css`
         width: 100%;
         height: 12px;
+        margin: 10px 0;
       `;
 
     case "title":
       return css`
         width: 50%;
         height: 20px;
         margin-bottom: 15px;
+        margin-top: 10px;
+      `;
+
+    case "formTitle":
+      return css`
+        width: 33%;
+        height: 27px;
+        padding: 5px 0;
+        margin: 10px 0 20px;
+      `;
+
+    case "formCategoryBox":
+      return css`
+        width: 150px;
+        height: 38px;
+      `;
+
+    case "formQuestionTitleEdit":
+      return css`
+        width: 33%;
+        height: 16px;
+        margin: 30px 0 20px;
+      `;
+
+    case "formQuestionTitle":
+      return css`
+        width: 33%;
+        height: 16px;
+        margin-bottom: 20px;
+      `;
+
+    case "button":
+      return css`
+        width: 55px;
+        height: 30px;
       `;
 
     default:
@@ -31,9 +68,8 @@ const Container = styled.div<{ custom: string }>`
   ${({ custom }) => custom}
 `;
 
-const Element = styled.div<{ type: string }>`
+const Element = styled.div<{ type: SkeletonType }>`
   background-color: #ddd;
-  margin: 10px 0;
   border-radius: 3px;
 
   ${({ type }) => getSkeletonTypeCss(type)}

client/src/components/common/Skeleton/type.ts

@@ -0,0 +1,10 @@
+type SkeletonType =
+  | "text"
+  | "title"
+  | "formTitle"
+  | "formCategoryBox"
+  | "formQuestionTitle"
+  | "button"
+  | "formQuestionTitleEdit";
+
+export default SkeletonType;

client/src/hooks/useModal/index.tsx

@@ -3,7 +3,7 @@ import { createPortal } from "react-dom";
 import * as S from "./style";
 import ModalPortalProps from "./type";
 
-const useModal = () => {
+const useModal = (option?: { setBackgroundClickClose: boolean }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const modalRoot = document.getElementById("modal-root") as HTMLElement;
   const [windowOffsetY, setWindowOffsetY] = useState(0);
@@ -25,12 +25,17 @@ const useModal = () => {
     setModalOpen(false);
   };
 
+  const onClickBackgroundCloseModal = () => {
+    if (option && !option.setBackgroundClickClose) setModalOpen(false);
+    if (!option) setModalOpen(false);
+  };
+
   function ModalPortal({ children }: ModalPortalProps) {
     if (modalOpen)
       return createPortal(
         <S.ModalContainer>
           {children}
-          <S.ModalBackground onClick={closeModal} />
+          <S.ModalBackground onClick={onClickBackgroundCloseModal} />
         </S.ModalContainer>,
         modalRoot
       );