diff --git a/app/admin-old/page.tsx b/app/admin-old/page.tsx deleted file mode 100644 index 302d0557..00000000 --- a/app/admin-old/page.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import Home from "@/home/Home"; -// import Login from "@/login/Login"; - -export default function adminLoginPage() { - return ; -} diff --git a/app/components/CustomModal/CustomModal.tsx b/app/components/CustomModal/CustomModal.tsx deleted file mode 100644 index 01880d97..00000000 --- a/app/components/CustomModal/CustomModal.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; - -import CustomModalView from "./CustomModalView"; -import { CustomTypeModalProps } from "./CustomModal.type"; - -function CustomModal(props: CustomTypeModalProps) { - const { - open = false, - handleClose = () => { - return; - }, - id = "", - content = {} as CustomTypeModalProps["content"], - } = props; - return ( - - ); -} - -export default CustomModal; diff --git a/app/components/CustomModal/CustomModal.type.ts b/app/components/CustomModal/CustomModal.type.ts deleted file mode 100644 index 16d09e24..00000000 --- a/app/components/CustomModal/CustomModal.type.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface CustomTypeModalProps { - id: string; - content: { - title: string; - describe: string; - btnName: string; - handleModal: () => void; - }; - open: boolean; - handleClose: () => void; -} diff --git a/app/components/CustomModal/CustomModalView.styled.ts b/app/components/CustomModal/CustomModalView.styled.ts deleted file mode 100644 index ed6b3d19..00000000 --- a/app/components/CustomModal/CustomModalView.styled.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { styled } from "styled-components"; -import { Grid } from "@mui/material"; - -export const Container = styled.div` - display: flex; - padding: 30px 0; - justify-content: center; - flex-direction: column; - background-color: #fff; -`; - -export const Title = styled.div` - font-size: 1.75rem; - font-weight: 400; - margin: 32px auto; -`; - -export const Description = styled.div` - font-size: 1rem; - font-weight: 400; - margin: 32px auto; -`; - -export const ContentsWrapper = styled.div` - display: flex; - justify-content: center; -`; - -export const GridItem = styled(Grid)<{ margin?: string }>` - margin-bottom: 30px; - ${({ margin }) => `margin: ${margin};`} -`; diff --git a/app/components/CustomModal/CustomModalView.tsx b/app/components/CustomModal/CustomModalView.tsx deleted file mode 100644 index ae4d5698..00000000 --- a/app/components/CustomModal/CustomModalView.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { Button, Modal } from "@mui/material"; - -import * as S from "./CustomModalView.styled"; -import { CustomTypeModalProps } from "./CustomModal.type"; - -function CustomModalView(props: CustomTypeModalProps) { - const { open, content, handleClose } = props; - - return ( - - - {content.title} - {content.describe} - - - - - - - - - ); -} - -export default CustomModalView; diff --git a/app/components/DeleteHintDialog/DeleteHintDialog.tsx b/app/components/DeleteHintDialog/DeleteHintDialog.tsx deleted file mode 100644 index 1527d240..00000000 --- a/app/components/DeleteHintDialog/DeleteHintDialog.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useDeleteHint } from "@/mutations/deleteHint"; - -import { useIsOpenDeleteDialogState } from "../atoms/hints.atom"; - -import DeleteHintDialogView from "./DeleteHintDialogView"; - -function DeleteHintDialog() { - const [isOpenDeleteDialogState, setIsOpenDeleteDialogState] = - useIsOpenDeleteDialogState(); - const { isOpen, id } = isOpenDeleteDialogState; - const { mutateAsync: deleteHint } = useDeleteHint(); - - const handleClose = () => { - setIsOpenDeleteDialogState({ isOpen: false, id: 0 }); - }; - - const handleDelete = () => { - deleteHint({ id }); - handleClose(); - }; - - const DeleteHintDialogProps = { - open: isOpen, - handleClose, - handleDelete, - }; - - return ; -} - -export default DeleteHintDialog; diff --git a/app/components/DeleteHintDialog/DeleteHintDialogView.tsx b/app/components/DeleteHintDialog/DeleteHintDialogView.tsx deleted file mode 100644 index e1f59c88..00000000 --- a/app/components/DeleteHintDialog/DeleteHintDialogView.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { - Button, - Dialog, - DialogActions, - DialogContent, - DialogContentText, - DialogTitle, -} from "@mui/material"; -import React from "react"; - -interface Props { - open: boolean; - handleClose: () => void; - handleDelete: () => void; -} - -const CANCEL = "취소"; -const DELETE = "삭제하기"; - -function DeleteHintDialogView(props: Props) { - const { open, handleClose, handleDelete } = props; - return ( - - 힌트를 삭제하시겠어요? - - - 지워진 내용은 되돌릴 수 없습니다. - - - - - - - - ); -} - -export default DeleteHintDialogView; diff --git a/app/components/DeleteHintDialog/index.ts b/app/components/DeleteHintDialog/index.ts deleted file mode 100644 index c4a8f0a2..00000000 --- a/app/components/DeleteHintDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as DeleteHintDialog } from "./DeleteHintDialog"; -export { default as DeleteHintDialogView } from "./DeleteHintDialogView"; diff --git a/app/components/DeleteThemeDialog/DeleteThemeDialog.tsx b/app/components/DeleteThemeDialog/DeleteThemeDialog.tsx deleted file mode 100644 index c41fe947..00000000 --- a/app/components/DeleteThemeDialog/DeleteThemeDialog.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useDeleteTheme } from "@/mutations/deleteTheme"; - -import DeleteThemeDialogView from "./DeleteThemeDialogView"; - -interface Props { - open: boolean; - handleSnackOpen: () => void; - handleClose: () => void; - id: number; -} - -function DeleteThemeDialog(props: Props) { - const { open, handleSnackOpen, handleClose, id } = props; - const { mutateAsync: deleteTheme } = useDeleteTheme(); - - const handleDelete = () => { - deleteTheme({ id }); - handleSnackOpen(); - handleClose(); - }; - - const DeleteThemeDialogProps = { - open, - handleClose, - handleDelete, - }; - - return ; -} - -export default DeleteThemeDialog; diff --git a/app/components/DeleteThemeDialog/DeleteThemeDialogView.tsx b/app/components/DeleteThemeDialog/DeleteThemeDialogView.tsx deleted file mode 100644 index cb418c6f..00000000 --- a/app/components/DeleteThemeDialog/DeleteThemeDialogView.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { - Button, - Dialog, - DialogActions, - DialogContent, - DialogContentText, - DialogTitle, -} from "@mui/material"; -import React from "react"; - -interface Props { - open: boolean; - handleClose: () => void; - handleDelete: () => void; -} - -const CANCEL = "취소"; -const DELETE = "삭제하기"; - -function DeleteThemeDialogView(props: Props) { - const { open, handleClose, handleDelete } = props; - return ( - - - 테마를 삭제하시겠어요? - - - - 지워진 내용은 되돌릴 수 없습니다. - - - - - - - - ); -} - -export default DeleteThemeDialogView; diff --git a/app/components/DeleteThemeDialog/index.ts b/app/components/DeleteThemeDialog/index.ts deleted file mode 100644 index ccc029e4..00000000 --- a/app/components/DeleteThemeDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as DeleteThemeDialog } from "./DeleteThemeDialog"; -export { default as DeleteThemeDialogView } from "./DeleteThemeDialogView"; diff --git a/app/components/HintItem/HintItem.tsx b/app/components/HintItem/HintItem.tsx deleted file mode 100644 index f58603be..00000000 --- a/app/components/HintItem/HintItem.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; - -import HintItemView from "./HintItemView"; - -type Props = { - id: number; - hintCode: string; - contents: string; - answer: string; - progress: number; - onClick: () => void; -}; - -export type HintData = { - progress: number; - hintCode: string; - contents: string; - answer: string; -}; - -function HintItem(props: Props) { - const { id, hintCode, contents, answer, progress, onClick } = props; - - const hintData = { - progress, - hintCode, - contents, - answer, - }; - - const HintManageListItemProps = { - id, - hintData, - onClick, - }; - - return ; -} - -export default HintItem; diff --git a/app/components/HintItem/HintItemView.styled.ts b/app/components/HintItem/HintItemView.styled.ts deleted file mode 100644 index 0bdeaaf3..00000000 --- a/app/components/HintItem/HintItemView.styled.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { Stack } from "@mui/material"; -import { styled } from "styled-components"; - -export const SummaryStack = styled(Stack)` - width: 100%; - align-items: center; -`; - -export const CodeProgressWrapper = styled.div` - display: flex; - align-items: center; - width: 360px; - height: 30px; -`; - -export const IconText = styled.div` - display: flex; - width: 168px; - justify-content: baseline; - align-items: center; - color: #6750a4; - - svg { - margin-right: 15px; - fill: #6750a4; - } -`; - -export const SummaryText = styled.div` - display: flex; - width: 100%; - max-width: 600px; - align-items: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -`; - -export const DetailIconText = styled.div` - display: flex; - flex: 30px auto; - width: 100%; - margin: 15px 0; - - font-size: 14px; - font-weight: 400; - line-height: 24px; - - svg { - display: block; - margin-right: 25px; - fill: #aea9b1; - } - - & + & { - margin-top: 30px; - } -`; - -export const ButtonsStack = styled(Stack)` - justify-content: end; - align-items: center; -`; - -export const ItemWrapper = styled.div` - display: flex; - - width: 100%; - min-height: 48px; - gap: 8px; - - font-size: ${({ theme }) => theme.fontSize.sm}; - font-weight: ${({ theme }) => theme.fontWeight.medium}; - color: ${({ theme }) => theme.color.white70}; - line-height: 16.71px; - - border-bottom: 1px solid ${({ theme }) => theme.color.white20}; - - &:hover { - cursor: pointer; - background-color: ${({ theme }) => theme.color.white10}; - } - - .numberBox { - display: flex; - align-items: center; - min-width: 96px; - color: ${({ theme }) => theme.color.white}; - } - - .textBox { - display: flex; - flex: 1; - align-items: center; - /* width: 448px; */ - padding: 12px 0; - white-space: nowrap; - overflow: hidden; - - span { - overflow: hidden; - text-overflow: ellipsis; - } - } -`; diff --git a/app/components/HintItem/HintItemView.tsx b/app/components/HintItem/HintItemView.tsx deleted file mode 100644 index 01dac6c0..00000000 --- a/app/components/HintItem/HintItemView.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; - -import * as S from "./HintItemView.styled"; -import { HintData } from "./HintItem"; - -type Props = { - id: number; - hintData: HintData; - onClick: () => void; -}; - -function HintItemView(props: Props) { - const { hintData, id, onClick } = props; - - return ( - -
{hintData.hintCode}
-
{hintData.progress}%
-
- {hintData.contents} -
-
- {hintData.answer} -
- - ); -} - -export default HintItemView; diff --git a/app/components/HintItem/index.ts b/app/components/HintItem/index.ts deleted file mode 100644 index 105e828e..00000000 --- a/app/components/HintItem/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as HintItem } from "./HintItem"; -export { default as HintItemView } from "./HintItemView"; diff --git a/app/components/HintList/HintList.styled.ts b/app/components/HintList/HintList.styled.ts deleted file mode 100644 index 129f5c65..00000000 --- a/app/components/HintList/HintList.styled.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Button } from "@mui/material"; -import { css, keyframes, styled } from "styled-components"; - -export const HintListWrapper = styled.div` - margin-top: 60px !important; -`; - -export const Header = styled.div` - display: flex; - font-size: ${(props) => props.theme.fontSize.xs}; - font-weight: ${(props) => props.theme.fontWeight.medium}; - color: #ffffff60; - height: 34px; - gap: 8px; - - .smallHeader { - min-width: 96px; - } - - .largeHeader { - /* width: calc(((100% - (96px * 2)) / 2) - 8px); */ - /* width: 448px; */ - flex: 1; - } -`; - -export const Empty = styled.button` - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 230px; - color: ${(props) => props.theme.color.white}; - font-size: ${(props) => props.theme.fontSize.sm}; - background-color: #ffffff10; - border: 0; - cursor: pointer; - - img { - margin-right: 8px; - } -`; - -const riseUpAnimation = keyframes` - from { - bottom: -100px; - } - to { - bottom: 40px; - } -`; - -const downAnimation = keyframes` - - from { - bottom: 40px; - } - to { - bottom: -100px; - } -`; - -export const FloatButton = styled(Button)<{ active?: boolean }>` - position: fixed !important; - color: #000 !important; - background-color: #fff !important; - font-weight: 600 !important; - width: 183px; - height: 40px; - bottom: -100px; - left: calc((100% - 360px) / 2 + 360px); - transform: translateX(-50%); - font-weight: 600; - width: 215px; - - ${(props) => - props.active - ? css` - animation: ${riseUpAnimation} 300ms forwards 300ms ease-out; - bottom: -100px; - ` - : css` - animation: ${downAnimation} 300ms forwards 300ms ease-out; - bottom: 0px; - `} -`; diff --git a/app/components/HintList/HintList.tsx b/app/components/HintList/HintList.tsx deleted file mode 100644 index 31f7e9ea..00000000 --- a/app/components/HintList/HintList.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useEffect, useMemo, useState, useCallback } from "react"; -import Image from "next/image"; -import { ListItemIcon, ListItemText } from "@mui/material"; -import AddIcon from "@mui/icons-material/Add"; - -import { useGetHintList } from "@/queries/getHintList"; - -import { HintItem } from "../HintItem"; -import HintManager from "../HintManager/HintManager"; -import { DeleteHintDialog } from "../DeleteHintDialog"; -import { useSelectedThemeValue } from "../atoms/selectedTheme.atom"; -import { useActiveHintState } from "../atoms/activeHint.atom"; -import Dialog from "../common/Dialog/Dialog"; -import Loader from "../Loader/Loader"; - -import * as S from "./HintList.styled"; - -function HintList() { - const [isMakeEnabled, setIsMakeEnabled] = useState(false); - const [isModifyEnableds, setIsModifyEnableds] = useState([]); - const { id: themeId } = useSelectedThemeValue(); - const { data: hints = [], isLoading = false } = useGetHintList({ themeId }); - const hintsLength = hints.length; - const [activeHint, setActiveHint] = useActiveHintState(); - const [dialogOpen, setDialogOpen] = useState(false); - - useEffect(() => { - setIsModifyEnableds([]); - setIsMakeEnabled(false); - }, [themeId]); - - const getOpenedModify = (id: number) => - !!isModifyEnableds.find((modifyEnables) => modifyEnables === id); - - const closeModify = (id: number) => { - const enableds = isModifyEnableds.filter((prevId) => prevId !== id); - setActiveHint({ isOpen: false, type: "put" }); - setIsModifyEnableds(enableds); - }; - - const handleCreateHint = useCallback(() => { - if (activeHint.isOpen) { - setDialogOpen(true); - } else { - setIsMakeEnabled(true); - } - }, [activeHint]); - - const handleModify = (id: number) => { - if (getOpenedModify(id)) { - setActiveHint({ isOpen: false, type: "put" }); - closeModify(id); - } else { - setIsModifyEnableds((prev) => [...prev, id]); - setActiveHint({ isOpen: true, type: "put" }); - } - }; - - const $AddHintButton = useMemo(() => { - if (hintsLength > 0 || isMakeEnabled) { - return null; - } - - return ( - setIsMakeEnabled(true)}> - 새로운 힌트 추가하기 - 새로운 힌트 추가하기 - - ); - }, [hintsLength, isMakeEnabled]); - - const $AddHintFloatingButton = useMemo( - () => ( - 0 && !isMakeEnabled} - > - - - - 새로운 힌트 추가하기 - - ), - [handleCreateHint, hintsLength, isMakeEnabled] - ); - - if (isLoading) { - return ; - } - - return ( - - -
힌트코드
-
진행률
-
힌트 내용
-
정답
- - {$AddHintButton} - {$AddHintFloatingButton} - setIsMakeEnabled(false)} - type="make" - /> - {[...hints] - .reverse() - .map(({ id, hintCode, contents, answer, progress }) => ( -
- handleModify(id)} - /> - closeModify(id)} - type="modify" - hintData={{ hintCode, contents, answer, progress }} - /> -
- ))} - - { - setIsMakeEnabled(true); - setIsModifyEnableds([]); - setActiveHint({ isOpen: false, type: "put" }); - }} - open={dialogOpen} - handleDialogClose={() => setDialogOpen(false)} - type={activeHint.type === "post" ? "hintPost" : "hintPut"} - /> - - ); -} - -export default HintList; diff --git a/app/components/HintManager/HintManager.tsx b/app/components/HintManager/HintManager.tsx deleted file mode 100644 index c78745f8..00000000 --- a/app/components/HintManager/HintManager.tsx +++ /dev/null @@ -1,325 +0,0 @@ -import _ from "lodash"; -import React, { useEffect, useRef, useState } from "react"; -import { SubmitHandler, useForm } from "react-hook-form"; - -import { usePutHint } from "@/mutations/putHint"; -import { usePostHint } from "@/mutations/postHint"; - -import { useSelectedThemeValue } from "../atoms/selectedTheme.atom"; -import { - useIsActiveHintItemState, - useIsOpenDeleteDialogStateWrite, -} from "../atoms/hints.atom"; -import Dialog from "../common/Dialog/Dialog"; - -import HintManagerView from "./HintManagerView"; - -const MAKE = "make"; - -type Props = { - active: boolean; - close: () => void; - type: "make" | "modify"; - id?: number; - hintData?: FormValues; - // dialogOpen: () => void; -}; - -interface FormValues { - progress: number; - hintCode: string; - contents: string; - answer: string; -} - -function HintManager(props: Props) { - const { id, active, close, type, hintData } = props; - const [open, setOpen] = useState(false); - - const [submitDisable, setSubmitDisable] = useState(false); - const { - register, - handleSubmit, - reset, - setValue, - watch, - formState: { errors }, - } = useForm(); - - const { mutateAsync: postHint } = usePostHint(); - const { mutateAsync: putHint } = usePutHint(); - const { id: themeId } = useSelectedThemeValue(); - const formRef = useRef(null); - - const setIsOpenDeleteDialogState = useIsOpenDeleteDialogStateWrite(); - - const [errorMsg, setErrorMsg] = useState(""); - const [isActiveHintItemState, setIsActiveHintItemState] = - useIsActiveHintItemState(); - - useEffect(() => { - if (!hintData) return; - const { progress, hintCode, contents, answer } = hintData; - - const previousValues: FormValues = { hintCode, contents, answer, progress }; - const names = Object.keys(previousValues) as (keyof FormValues)[]; - - names.forEach((name) => { - const value = previousValues[name]; - if (value) { - setValue(name, value); - } - }); - }, [hintData, setValue]); - - useEffect(() => { - if (!hintData) return; - const { progress, hintCode, contents, answer } = hintData; - - const subscription = watch((value) => { - const { - progress: inputProgress = "", - hintCode: inputHintCode = "", - contents: inputContents = "", - answer: inputAnswer = "", - } = value; - if ( - progress !== inputProgress || - hintCode !== inputHintCode || - contents !== inputContents || - answer !== inputAnswer - ) { - // setSubmitDisable(false); - } else { - // setSubmitDisable(true); - } - }); - - return () => subscription.unsubscribe(); - }, [hintData, watch]); - - useEffect(() => { - if (!open) { - setErrorMsg(""); - } - }, [open, reset]); - - const formValue = watch(); - useEffect(() => { - if ( - !formValue.progress || - !(formValue.hintCode.length === 4) || - !formValue.contents.trim() || - !formValue.answer.trim() - ) { - setSubmitDisable(true); - } else { - setSubmitDisable(false); - } - }, [formValue]); - - const openDeleteDialog = () => { - if (!id) return; - setIsOpenDeleteDialogState({ isOpen: true, id }); - }; - - const key = `${type}-${id}`; - - const onSubmit: SubmitHandler = _.debounce((data: any) => { - const { progress, hintCode, contents, answer } = data; - - if (!(progress && hintCode && contents && answer)) { - // TODO: add error message - - console.error("please check code"); - return; - } - - if (type === MAKE) { - postHint({ - progress: Number(progress), - hintCode, - contents, - answer, - themeId, - }); - } else { - putHint({ - progress: Number(progress), - hintCode, - contents, - answer, - id: Number(id), - }); - } - reset(); - close(); - }, 300); - - const isCurrentHintActive = isActiveHintItemState === id; - - const activateForm = (event: React.MouseEvent) => { - event.stopPropagation(); - if (!id) return; - - setIsActiveHintItemState(id); - }; - - const stopEvent = (event: React.MouseEvent) => { - event.stopPropagation(); - }; - - const cancelInput = (event: React.MouseEvent) => { - event.stopPropagation(); - - if ( - type !== MAKE && - hintData && - hintData.progress === formValue.progress && - hintData.hintCode === formValue.hintCode && - hintData.contents === formValue.contents && - hintData.answer === formValue.answer - ) { - close(); - } else { - setOpen(true); - } - }; - - const deactivateForm = (event: MouseEvent) => { - const isOutsideForm = - formRef.current && !formRef.current.contains(event.target as Node); - - if (isOutsideForm && isCurrentHintActive) { - setIsActiveHintItemState(0); - } - }; - - useEffect(() => { - document.addEventListener("click", deactivateForm); - - return () => { - document.removeEventListener("click", deactivateForm); - }; - }, []); - - const formProps = { - active, - key, - component: "form", - noValidate: true, - autoComplete: "off", - onSubmit: handleSubmit(onSubmit), - onClick: activateForm, - ref: formRef, - }; - - const progressInputProps = { - placeholder: hintData?.progress || "진행률", - type: "number", - helperText: errors?.progress && errors?.progress.message, - error: Boolean(errors?.progress), - onClick: activateForm, - ...register("progress", { - pattern: { - value: /^(100|[1-9][0-9]?|0)$/, - message: "1부터 100까지의 정수만 입력 가능합니다.", - }, - }), - onBlur: (e: React.FocusEvent) => { - if (!/^(100|[1-9][0-9]?|0)$/.test(e.target.value)) { - setErrorMsg("1부터 100까지의 정수만 입력 가능합니다."); - } else { - setErrorMsg(""); - } - }, - endAdornment: <>%, - }; - - const hintCodeInputProps = { - placeholder: hintData?.hintCode || "힌트코드", - helperText: errors?.hintCode && errors?.hintCode.message, - type: "number", - onClick: activateForm, - - ...register("hintCode", { - pattern: { - value: /^\d{4}$/, - message: "4자리 숫자만 입력 가능합니다.", - }, - onBlur: (e: React.FocusEvent) => { - if (!/^\d{4}$/.test(e.target.value)) { - setErrorMsg("힌트 코드는 4자리 숫자만 입력 가능합니다."); - } else { - setErrorMsg(""); - } - }, - }), - }; - - const contentsInputProps = { - placeholder: hintData?.contents || "힌트내용", - multiline: true, - onClick: activateForm, - rows: 5, - ...register("contents"), - }; - - const answerInputProps = { - placeholder: hintData?.answer || "정답", - multiline: true, - onClick: activateForm, - rows: 5, - ...register("answer"), - }; - - const deleteButtonProps = { - variant: "text", - onClick: (event: React.MouseEvent) => { - event.stopPropagation(); - if (type === MAKE) { - close(); - } else { - openDeleteDialog(); - } - }, - }; - - const makeHintButtonProps = { - type: "submit", - variant: "contained", - disabled: submitDisable, - onClick: stopEvent, - }; - - const wrapperProps = { - onClick: cancelInput, - }; - - const makeHintProps = { - answerInputProps, - contentsInputProps, - progressInputProps, - hintCodeInputProps, - formProps, - deleteButtonProps, - makeHintButtonProps, - isCurrentHintActive, - wrapperProps, - errorMsg, - }; - - return ( - <> - - setOpen(false)} - type={type === MAKE ? "hintPost" : "hintPut"} - handleBtn={close} - /> - - ); -} - -export default HintManager; diff --git a/app/components/HintManager/HintManagerView.styled.ts b/app/components/HintManager/HintManagerView.styled.ts deleted file mode 100644 index ddb23f98..00000000 --- a/app/components/HintManager/HintManagerView.styled.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { Box } from "@mui/material"; -import { styled } from "styled-components"; - -export const SummaryText = styled.div` - display: flex; - width: 100%; - max-width: 600px; - align-items: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 2px; -`; - -export const StyledBox = styled(Box)<{ active?: boolean }>` - width: 100%; - max-height: ${(props) => (props.active ? "230px" : "0")}; - overflow: hidden; - transition: max-height 0.3s ease-in-out; -`; - -export const Wrapper = styled.div<{ selected?: boolean }>` - width: 100%; - padding: 8px; - position: relative; - box-sizing: border-box; - background-color: ${({ theme }) => theme.color.white10}; - - ${({ selected }) => - selected && - ` - border: 1px solid #B5E6D2; - border-radius: 8px; - `} -`; - -export const InputsWrapper = styled.div` - display: flex; - - width: 100%; - height: 173px; - gap: 8px; - - .inputBox { - width: 96px; - height: 36px; - background-color: #ffffff14; - color: #fff; - & input[type="number"]::-webkit-inner-spin-button, - & input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - - & input[type="number"] { - -moz-appearance: textfield; /* Firefox에서 화살표를 숨기기 위한 설정 */ - } - } - - .TextareaBox { - width: 448px; - height: 128px; - background-color: #ffffff14; - color: #fff; - align-items: unset; - } -`; - -export const FunctionButtonsWrapper = styled.div` - display: flex; - padding-right: 10px; - justify-content: end; - align-items: end; - gap: 8px; -`; - -export const ErrorMsgWrapper = styled.div` - position: absolute; - color: red; - margin: 0; - padding: 0; - font-size: 12px; - text-align: right; - left: 15px; -`; diff --git a/app/components/HintManager/HintManagerView.tsx b/app/components/HintManager/HintManagerView.tsx deleted file mode 100644 index 8f333bf2..00000000 --- a/app/components/HintManager/HintManagerView.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react"; -import { Button, Input } from "@mui/material"; - -import * as S from "./HintManagerView.styled"; - -interface Props { - errorMsg: string; - progressInputProps: Record; - hintCodeInputProps: Record; - contentsInputProps: Record; - answerInputProps: Record; - deleteButtonProps: Record; - formProps: Record; - makeHintButtonProps: Record; - isCurrentHintActive: boolean; - wrapperProps: { onClick: (event: React.MouseEvent) => void }; -} - -const DELETE = "삭제하기"; -const MAKE_HINT = "저장하기"; - -function HintManagerView(props: Props) { - const { - progressInputProps, - hintCodeInputProps, - contentsInputProps, - answerInputProps, - deleteButtonProps, - makeHintButtonProps, - formProps, - isCurrentHintActive, - wrapperProps, - errorMsg, - } = props; - - return ( - - - - - - - - - {errorMsg} - - - - - - - ); -} - -export default HintManagerView; diff --git a/app/components/MakeThemePage/MakeThemePage.tsx b/app/components/MakeThemePage/MakeThemePage.tsx deleted file mode 100644 index f570d90f..00000000 --- a/app/components/MakeThemePage/MakeThemePage.tsx +++ /dev/null @@ -1,173 +0,0 @@ -"use client"; - -import React, { useState, useEffect } from "react"; -import { SubmitHandler, useForm } from "react-hook-form"; -import { useRouter } from "next/navigation"; - -import { usePostTheme } from "@/mutations/postTheme"; -import { usePutTheme } from "@/mutations/putTheme"; -import { useSelectedTheme } from "@/components/atoms/selectedTheme.atom"; -import { useModalState } from "@/components/atoms/modalState.atom"; -import { useGetThemeList } from "@/queries/getThemeList"; -import useChannelTalk from "@/hooks/useChannelTalk"; - -import Dialog from "../common/Dialog/Dialog"; - -import MakeThemeModalView from "./MakeThemePageView"; - -interface FormValues { - id: number | undefined; - title: string; - timeLimit: number; - hintLimit: number; -} - -function MakeThemePage() { - const [modalState, setModalState] = useModalState(); - const { data: categories = [] } = useGetThemeList(); - const [open, setOpen] = useState(false); - useChannelTalk(); - - const [selectedTheme, setSelectedTheme] = useSelectedTheme(); - const router = useRouter(); - - const { - register, - handleSubmit, - setValue, - watch, - reset, - formState: { errors }, - trigger, - } = useForm(); - - const formValue = watch(); - const handleClose = () => { - setSelectedTheme(categories[categories.length - 1]); - if ( - modalState.type === "post" && - !(formValue.title || formValue.timeLimit || formValue.hintLimit) - ) { - setModalState({ ...modalState, isOpen: false }); - } else { - setOpen(!open); - } - }; - useEffect(() => { - reset(); - if (modalState.type === "put") { - setValue("title", selectedTheme.title); - setValue("timeLimit", selectedTheme.timeLimit); - setValue("hintLimit", selectedTheme.hintLimit); - } - }, [selectedTheme, setValue, modalState.type, reset]); - - useEffect(() => { - if (formValue.title && formValue.timeLimit && formValue.hintLimit) { - trigger(); - } - }, [formValue.hintLimit, formValue.timeLimit, formValue.title, trigger]); - - const { mutateAsync: postTheme } = usePostTheme(); - const { mutateAsync: putTheme } = usePutTheme(); - - const onSubmit: SubmitHandler = (data) => { - const submitData = { - id: selectedTheme.id, - title: data.title, - timeLimit: data.timeLimit, - hintLimit: data.hintLimit, - }; - - if (modalState.type === "put") { - putTheme(submitData); - setModalState({ ...modalState, isOpen: false }); - router.push(`/admin?themeId=${encodeURIComponent(selectedTheme.id)}`); - } else { - postTheme(data); - setModalState({ ...modalState, isOpen: false }); - if (data.id) { - router.push(`/admin?themeId=${encodeURIComponent(data.id)}`); - } - } - }; - - const formProps = { - component: "form", - noValidate: true, - autoComplete: "off", - onSubmit: handleSubmit(onSubmit), - }; - - const themeNameProps = { - id: "title", - label: "테마 이름", - placeholder: "입력해 주세요.", - message: "손님에게는 보이지 않아요.", - ...register("title", { - required: "테마 이름은 필수값입니다", - pattern: { - value: /^.+$/, - message: "테마 이름은 필수값입니다", - }, - }), - }; - const timeLimitProps = { - id: "timeLimit", - label: "시간", - placeholder: "선택하기", - type: "number", - message: "손님이 사용할 타이머에 표시됩니다. (분 단위로 입력해 주세요.)", - ...register("timeLimit", { - required: "시간을 입력해주세요.", - pattern: { - value: /^[1-9]\d*$/, - message: "1분 이상으로 입력해 주세요.", - }, - }), - }; - - const hintLimitProps = { - id: "hintLimit", - label: "힌트 개수", - type: "number", - message: "이 테마에서 사용할 수 있는 힌트 수를 입력해 주세요.", - ...register("hintLimit", { - required: "힌트 수를 입력해 주세요.", - pattern: { - value: /^[1-9]\d*$/, - message: "1개 이상으로 입력해 주세요.", - }, - }), - }; - - const MakeThemeModalViewProps = { - handleClose, - formValue, - selectedTheme, - modalState, - formProps, - themeNameProps, - timeLimitProps, - hintLimitProps, - titleError: errors.title, - timeLimitError: errors.timeLimit, - hintLimitError: errors.hintLimit, - }; - - return ( - <> - - - router.push(`/admin?themeId=${encodeURIComponent(selectedTheme.id)}`) - } - open={open} - handleDialogClose={() => setOpen(false)} - type={modalState.type === "post" ? "themePost" : "themePut"} - /> - - ); -} - -export default MakeThemePage; diff --git a/app/components/MakeThemePage/MakeThemePageView.styled.ts b/app/components/MakeThemePage/MakeThemePageView.styled.ts deleted file mode 100644 index 5bd05324..00000000 --- a/app/components/MakeThemePage/MakeThemePageView.styled.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Button, Grid, Card, TextField } from "@mui/material"; -import { styled } from "styled-components"; - -export const CardWrap = styled(Card)` - width: 512px; - height: 390px; - display: flex; - flex-direction: column; - padding: 20px; - border-radius: 8px; - background-color: rgba(255, 255, 255, 0.2); -`; - -export const ErrorMention = styled.p` - font-size: ${(props) => props.theme.fontSize.sm}; - font-weight: ${(props) => props.theme.fontWeight.light}; - margin: 4px 16px 20px; - color: #f2b8b5; -`; - -export const Description = styled.p` - font-size: ${(props) => props.theme.fontSize.sm}; - font-weight: ${(props) => props.theme.fontWeight.light}; - margin: 4px 16px 20px; - line-height: 20px; - color: rgba(255, 255, 255, 1); -`; - -export const TextWrapper = styled.div` - display: flex; - flex-direction: column; - margin-bottom: 20px; -`; - -export const ButtonContainer = styled(Grid)` - display: flex; - justify-content: flex-end; -`; - -export const CancleButton = styled(Button)``; - -export const SubmitButton = styled(Button)` - width: 97px; -`; - -export const StyledNumberInput = styled(TextField)` - & input[type="number"]::-webkit-inner-spin-button, - & input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - - & input[type="number"] { - -moz-appearance: textfield; /* Firefox에서 화살표를 숨기기 위한 설정 */ - } -`; diff --git a/app/components/MakeThemePage/MakeThemePageView.tsx b/app/components/MakeThemePage/MakeThemePageView.tsx deleted file mode 100644 index ccdc91e4..00000000 --- a/app/components/MakeThemePage/MakeThemePageView.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Grid } from "@mui/material"; -import { FieldError } from "react-hook-form"; - -import * as S from "./MakeThemePageView.styled"; - -interface Modal { - isOpen: boolean; - type: "post" | "put"; -} -interface FormValues { - id: number | undefined; - title: string; - timeLimit: number; - hintLimit: number; -} - -type Props = { - handleClose: () => void; - formValue: FormValues; - modalState: Modal; - formProps: Record; - timeLimitProps: Record; - themeNameProps: Record; - hintLimitProps: Record; - titleError: FieldError | undefined; - timeLimitError: FieldError | undefined; - hintLimitError: FieldError | undefined; -}; - -function MakeThemePageView(props: Props) { - const ADD_BTN = "추가하기"; - const MODIFY_BTN = "수정하기"; - const { - handleClose, - formValue, - modalState, - formProps, - themeNameProps, - timeLimitProps, - hintLimitProps, - titleError, - timeLimitError, - hintLimitError, - } = props; - - return ( -
- - - - {titleError ? ( - - {titleError.message} - - ) : ( - {themeNameProps.message} - )} - - {timeLimitError ? ( - - {timeLimitError.message} - - ) : ( - {timeLimitProps.message} - )} - - {hintLimitError ? ( - - {hintLimitError.message} - - ) : ( - {hintLimitProps.message} - )} - - - - - 취소 - - - - - {modalState.type === "post" ? ADD_BTN : MODIFY_BTN} - - - - -
- ); -} - -export default MakeThemePageView; diff --git a/app/components/RequireAuth/RequireAuth.tsx b/app/components/RequireAuth/RequireAuth.tsx index aeec501b..05932e1a 100644 --- a/app/components/RequireAuth/RequireAuth.tsx +++ b/app/components/RequireAuth/RequireAuth.tsx @@ -12,18 +12,13 @@ import { import { useSelectedThemeReset } from "@/components/atoms/selectedTheme.atom"; import { useIsLoggedIn } from "@/components/atoms/account.atom"; import { getSelectedThemeId } from "@/utils/localStorage"; -import * as S from "@/home/HomeView.styled"; -import Header from "@/components/common/Header/Header"; -import MainDrawer from "@/components/common/Drawer/Drawer"; import Mobile from "../Mobile/Mobile"; interface RequireAuthProps { children: ReactNode; } -function RequireAuth({ - children, -}: RequireAuthProps): React.ReactElement | null { +function RequireAuth({ children }: RequireAuthProps) { const [isLoggedIn, setIsLoggedIn] = useIsLoggedIn(); const [currentTheme, setCurrentTheme] = useCurrentTheme(); const resetCurrentTheme = useCurrentThemeReset(); @@ -73,18 +68,7 @@ function RequireAuth({ if (isMobile && !allowUnauthPaths.includes(pathname)) return ; - if (!isLoggedIn) return <>{children}; - if (isLoggedIn && (pathname === "/" || "/admin")) return <>{children}; - - return ( - - - -
- {children} - - - ); + return <>{children}; } export default RequireAuth; diff --git a/app/components/ThemeDetail/ThemeDetail.styled.ts b/app/components/ThemeDetail/ThemeDetail.styled.ts deleted file mode 100644 index 9dd7a002..00000000 --- a/app/components/ThemeDetail/ThemeDetail.styled.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { styled } from "styled-components"; -import { Box, Button } from "@mui/material"; - -export const Wrapper = styled(Box)` - display: flex; - margin: 0 auto; - flex-direction: column; - - flex: 1; /* 남은 공간을 차지 */ -`; - -export const Title = styled.div` - width: 100%; - font-size: ${(props) => props.theme.fontSize.lg}; - font-weight: ${(props) => props.theme.fontWeight.bold}; - white-space: pre-wrap; - word-break: break-word; -`; - -export const MiddleTitle = styled.div` - font-size: ${(props) => props.theme.fontSize.sm}; - opacity: 0.7; -`; - -export const UpdateButton = styled(Button)` - width: 147px; - height: 40px; - font-size: ${(props) => props.theme.fontSize.sm}; -`; diff --git a/app/components/ThemeDetail/ThemeDetail.tsx b/app/components/ThemeDetail/ThemeDetail.tsx deleted file mode 100644 index da7a693b..00000000 --- a/app/components/ThemeDetail/ThemeDetail.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { useState } from "react"; - -import { useSelectedThemeValue } from "../atoms/selectedTheme.atom"; -import DeleteDialog from "../common/DeleteDialog/DeleteDialog"; -import Dialog from "../common/Dialog/Dialog"; -import { useActiveHintState } from "../atoms/activeHint.atom"; -import { useModalStateWrite } from "../atoms/modalState.atom"; - -import ThemeDetailView from "./ThemeDetailView"; - -function ThemeDetail() { - const selectedTheme = useSelectedThemeValue(); - const [open, setOpen] = useState(false); - const [activeHint, setActiveHint] = useActiveHintState(); - const [dialogOpen, setDialogOpen] = useState(false); - const setModalState = useModalStateWrite(); - - return ( - <> - setOpen(true)} - handleDialogOpen={() => setDialogOpen(true)} - /> - setOpen(false)} - id={selectedTheme.id} - type="themeDelete" - /> - { - setModalState({ isOpen: true, type: "put" }); - setActiveHint({ isOpen: false, type: "put" }); - }} - open={dialogOpen} - handleDialogClose={() => setDialogOpen(false)} - type={activeHint.type === "post" ? "hintPost" : "hintPut"} - /> - - ); -} - -export default ThemeDetail; diff --git a/app/components/ThemeDetail/ThemeDetailView.tsx b/app/components/ThemeDetail/ThemeDetailView.tsx deleted file mode 100644 index 68f3071f..00000000 --- a/app/components/ThemeDetail/ThemeDetailView.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React, { useState } from "react"; -import { Stack, Grid, IconButton, Menu, MenuItem } from "@mui/material"; -import MoreVertIcon from "@mui/icons-material/MoreVert"; -import EditIcon from "@mui/icons-material/Edit"; -import DeleteIcon from "@mui/icons-material/Delete"; -import { useRouter } from "next/navigation"; - -import { useActiveHintStateValue } from "@/components/atoms/activeHint.atom"; -import { useModalStateWrite } from "@/components/atoms/modalState.atom"; -import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom"; - -import HintList from "../HintList/HintList"; - -import * as S from "./ThemeDetail.styled"; - -type Props = { - handleOpen: () => void; - handleDialogOpen: () => void; -}; - -function ThemeDetailView(props: Props) { - const { handleOpen, handleDialogOpen } = props; - const selectedTheme = useSelectedThemeValue(); - const setModalState = useModalStateWrite(); - const activeHint = useActiveHintStateValue(); - const router = useRouter(); - const [menuState, setMenuState] = useState(false); - const toggleOnModalState = () => { - if (activeHint.isOpen) { - handleDialogOpen(); - } else { - router.push("/theme"); - setModalState({ isOpen: true, type: "put" }); - } - }; - - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - - const openMenu = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - const closeMenu = () => { - setAnchorEl(null); - setMenuState(!menuState); - }; - - const handleMenu = () => { - handleOpen(); - closeMenu(); - }; - - return ( - - - {selectedTheme.title} - - - 탈출 제한 시간 - {selectedTheme.timeLimit}분 - • - 사용 가능 힌트 - {selectedTheme.hintLimit}개 - - - - } - > - 테마 정보 수정 - - - - - - - - - - 테마 삭제 - - - - - - - - ); -} - -export default ThemeDetailView; diff --git a/app/home/Home.tsx b/app/home/Home.tsx deleted file mode 100644 index 5c0b0a69..00000000 --- a/app/home/Home.tsx +++ /dev/null @@ -1,55 +0,0 @@ -"use client"; - -import React, { useEffect, useState } from "react"; - -import { useGetThemeList } from "@/queries/getThemeList"; -import useCheckSignIn from "@/hooks/useCheckSignIn"; -import { useSnackBarInfo } from "@/components/atoms/snackBar.atom"; -import SnackBar from "@/components/SnackBar/SnackBar"; -import Loader from "@/components/Loader/Loader"; -import useChannelTalk from "@/hooks/useChannelTalk"; - -import HomeView from "./HomeView"; - -function Home() { - const { data: categories = [] } = useGetThemeList(); - const [open, setOpen] = useState(false); - const [snackInfo, setSnackBarInfo] = useSnackBarInfo(); - useChannelTalk(); - - const handleDialog = () => { - setOpen(!open); - }; - - const isSignIn = useCheckSignIn(); - - useEffect(() => { - if (snackInfo.isOpen) { - setTimeout(() => { - setSnackBarInfo({ ...snackInfo, isOpen: false }); - }, 3000); - } - }, [setSnackBarInfo, snackInfo]); - - const themeAllProps = { - categories, - handleDialog, - }; - - if (!isSignIn) return ; - - return ( - <> - - setSnackBarInfo({ ...snackInfo, isOpen: false })} - /> - - ); -} - -export default Home; diff --git a/app/home/HomeView.styled.ts b/app/home/HomeView.styled.ts deleted file mode 100644 index 3a29cc2a..00000000 --- a/app/home/HomeView.styled.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { styled } from "styled-components"; -import { Box } from "@mui/material"; - -import { MAIN_GRID_WIDTH } from "@/consts/styles/common"; - -export const Wrapper = styled(Box)` - display: flex; - min-width: 840px; - height: 100vh; - overflow-y: hidden; - overflow-x: scroll; -`; - -export const Cont = styled(Box)` - flex-grow: 1; - height: 100%; - /* min-width: calc(${MAIN_GRID_WIDTH} + 2px); */ - margin: 0; - padding: 0 16px 80px 80px; - overflow-y: auto; - min-width: 840px; - overflow-x: scroll; -`; -export const TopNav = styled.div` - display: flex; - justify-content: end; - height: 68px; - padding: 18px 48px; - div { - background-color: #fff; - border-radius: 50%; - width: 32px; - height: 32px; - } -`; - -export const Title = styled.div` - font-size: 4rem; -`; - -export const Body = styled.div` - width: ${MAIN_GRID_WIDTH}; - height: 100%; - margin: 0 auto; - overflow-y: auto; -`; diff --git a/app/home/HomeView.tsx b/app/home/HomeView.tsx deleted file mode 100644 index 44b74326..00000000 --- a/app/home/HomeView.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import EmptyHome from "@/components/common/EmptyHome/EmptyHome"; -import HintList from "@/components/ThemeDetail/ThemeDetail"; -import { Themes } from "@/queries/getThemeList"; - -type Props = { - categories: Themes; -}; - -function HomeView(props: Props) { - const { categories } = props; - - if (categories.length < 1) { - return ; - } - return ; -} -export default HomeView; diff --git a/app/home/layout.tsx b/app/home/layout.tsx deleted file mode 100644 index faedb675..00000000 --- a/app/home/layout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { ReactNode } from "react"; - -export default function RootLayout({ children }: { children: ReactNode }) { - return
{children}
; -} diff --git a/app/home/page.tsx b/app/home/page.tsx deleted file mode 100644 index c61134d8..00000000 --- a/app/home/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -import Home from "./Home"; - -function HomePage() { - return ; -} - -export default HomePage; diff --git a/app/theme/page.tsx b/app/theme/page.tsx deleted file mode 100644 index c759546a..00000000 --- a/app/theme/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import MakeThemePage from "@/components/MakeThemePage/MakeThemePage"; - -export default function ThemePage() { - return ; -} diff --git a/app/trial/Trial.tsx b/app/trial/Trial.tsx deleted file mode 100644 index 7a8db7e9..00000000 --- a/app/trial/Trial.tsx +++ /dev/null @@ -1,77 +0,0 @@ -"use client"; - -import React, { useState, useEffect } from "react"; -import { SubmitHandler, useForm } from "react-hook-form"; - -import { EMAIL } from "@/consts/components/trial"; -import "@/apis/firebase"; -import { usePostInfo } from "@/mutations/postInfo"; -import useAnalytics from "@/hooks/useAnalytics"; - -import TrialView from "./TrialView"; - -interface FormValues { - info: string; -} -function Trial() { - const { mutate: postMutate } = usePostInfo(); - const { logEvent } = useAnalytics(); - - useEffect(() => { - logEvent("screen_view", { - firebase_screen: "homepage_input_contact", - firebase_screen_class: "homepage_input_contact", - }); - }, [logEvent]); - const { - register, - handleSubmit, - formState: { errors }, - } = useForm(); - const [isComplete, setIsComplete] = useState(false); - - const onSubmit: SubmitHandler = (info) => { - setIsComplete(true); - postMutate(info); - }; - // const onSubmit: SubmitHandler = (data) => {}; - const formProps = { - component: "form", - noValidate: true, - autoComplete: "off", - onSubmit: handleSubmit(onSubmit), - flexDirection: "column", - }; - - const emailProps = { - id: "filled-email", - label: EMAIL, - type: "email", - variant: "filled", - placeholder: "", - ...register("info", { required: "이메일이나 연락처를 입력해 주세요." }), - helperText: errors?.info && errors.info.message, - // error: Boolean(errors?.email) || isError, - sx: { backgroundColor: "#ffffff10" }, - }; - - // const errorMessage = isError && error?.response?.data?.message; - - const buttonProps = { - type: "submit", - variant: "contained", - }; - - const TrialViewProps = { - formProps, - buttonProps, - emailProps, - // errorMessage, - // isLoading, - isComplete, - }; - - return ; -} - -export default Trial; diff --git a/app/trial/TrialView.styled.ts b/app/trial/TrialView.styled.ts deleted file mode 100644 index 9d4b3947..00000000 --- a/app/trial/TrialView.styled.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { styled } from "styled-components"; -import { Button } from "@mui/material"; - -// export const Wrapper = styled.div` -// margin: 18px 20px; -// display: flex; -// flex-direction: column; -// `; - -export const Wrapper = styled.form` - /* background: var(--nrdark-01, #151516); */ - height: 100vh; -`; -export const Cont = styled.div` - display: flex; - flex-direction: column; - max-width: 364px; - margin: 0 auto; -`; - -export const MobileWrapper = styled.div` - /* padding: 0 26px; */ -`; - -export const BackWrapper = styled.div` - height: 64px; - padding: 18px 20px; - margin-bottom: 26px; -`; - -export const Title = styled.h1` - font-size: 32px; - font-family: Pretendard; - font-weight: 700; - line-height: 140%; - margin: 0; -`; - -export const Contect = styled.p` - color: var(--nr-gray-01, #9898a0); - /* Pretendard/R/16 */ - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 140%; - margin-top: 12px; -`; - -export const Btn = styled(Button)` - font-size: 14px !important; - font-weight: 600 !important; - line-height: 20px !important; - height: 60px !important; - margin-top: 44px !important; -`; - -export const TextCont = styled.div` - display: flex; - flex-direction: column; - margin-top: 21px; -`; diff --git a/app/trial/TrialView.tsx b/app/trial/TrialView.tsx deleted file mode 100644 index 121fca5d..00000000 --- a/app/trial/TrialView.tsx +++ /dev/null @@ -1,76 +0,0 @@ -"use client"; - -import "@/style/reset.css"; -import React, { useEffect } from "react"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import { IconButton, TextField } from "@mui/material"; - -import { - TRIAL_TITLE, - CONTECT, - EMAIL, - SUBSCRIPTION, - COMPLETE, - CONTACT_CONFIRMATION, - RETURN_HOME, -} from "@/consts/components/trial"; -import "@/apis/firebase"; // Firebase 초기화 파일 임포트 -import useAnalytics from "@/hooks/useAnalytics"; - -import * as S from "./TrialView.styled"; - -type Props = Record; -function TrialView(props: Props) { - const { formProps, emailProps, buttonProps, isComplete } = props; - const { logEvent } = useAnalytics(); - useEffect(() => { - logEvent("btn_click", { - btn_name: "homepage_apply_free_trial", - }); - }, [logEvent]); - - const navigateToLanding = () => { - if (typeof window !== "undefined") { - window.close(); - // 여기에 클라이언트-사이드 로직 추가 - } - }; - - const titleText = isComplete ? COMPLETE : TRIAL_TITLE; - const contactText = isComplete ? CONTACT_CONFIRMATION : CONTECT; - const mainActionButton = isComplete ? ( - - {RETURN_HOME} - - ) : ( - - - {SUBSCRIPTION} - - ); - - return ( - - - - - - - - 
-          {titleText}
-
- {contactText} - {mainActionButton} - - - ); -} - -export default TrialView; diff --git a/app/trial/page.tsx b/app/trial/page.tsx deleted file mode 100644 index 8dff8157..00000000 --- a/app/trial/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -import Trial from "./Trial"; - -function TrialPage() { - return ; -} - -export default TrialPage;