+ + + + + + 수련회 신청 + + + + + + 언제 참여하시나요? + + + + 참여 가능한 일정을 선택해주세요. + + + + setIsHalf(false)} + startIcon={isHalf === false ? : undefined} + sx={{ + flex: 1, + height: "72px", + borderRadius: "11px", + borderColor: isHalf === false ? "#EAAFAF" : "#F0E4E4", + bgcolor: isHalf === false ? "#FFF1F1" : "#FCFAFA", + color: "#171717", + fontFamily: "Pretendard", + fontSize: "16px", + textTransform: "none", + "& .MuiButton-startIcon": { + color: "#C87575", + }, + "&:hover": { + borderColor: "#EAAFAF", + bgcolor: "#FFF6F6", + }, + }} + > + 주일 예배 이전 + + + setIsHalf(true)} + startIcon={isHalf === true ? : undefined} + sx={{ + flex: 1, + height: "72px", + borderRadius: "11px", + borderColor: isHalf === true ? "#EAAFAF" : "#F0E4E4", + bgcolor: isHalf === true ? "#FFF1F1" : "#FCFAFA", + color: "#171717", + fontFamily: "Pretendard", + fontSize: "16px", + textTransform: "none", + "& .MuiButton-startIcon": { + color: "#C87575", + }, + "&:hover": { + borderColor: "#EAAFAF", + bgcolor: "#FFF6F6", + }, + }} + > + 주일 예배 이후 + + + + + + 신청하기 + + + ) +} diff --git a/client/src/app/retreat/register/page.tsx b/client/src/app/retreat/register/page.tsx index 54118ad0..98859c27 100644 --- a/client/src/app/retreat/register/page.tsx +++ b/client/src/app/retreat/register/page.tsx @@ -1,105 +1,163 @@ "use client" -import { Box, Button, IconButton, Stack } from "@mui/material" import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded" +import CheckRoundedIcon from "@mui/icons-material/CheckRounded" +import { Box, Button, IconButton, Stack } from "@mui/material" +import { keyframes } from "@mui/material/styles" import { useRouter } from "next/navigation" -import { useState } from "react" -import axios from "@/config/axios" -import { useNotification } from "@/hooks/useNotification" +import usePageColor from "@/hooks/usePageColor" +import useRetreat from "../hooks/useRetreat" + +const revealPage = keyframes` + from { + opacity: 0; + transform: translateY(16px); + } + to { + opacity: 1; + transform: translateY(0); + } +` export default function RetreatRegister() { const { push } = useRouter() - const { success } = useNotification() - const [isWorking, setIsWorking] = useState(false) + const { isWorker, setIsWorker } = useRetreat() + + usePageColor("#FFFFFF") function handleGoToBack() { push("/retreat") } - async function handleSubmit() { - const { data } = await axios.post("/retreat/attend", { - isWorker: isWorking, - }) - success(data.result) - push(`/retreat/complete?isWorker=${isWorking}`) + function handleSubmit() { + push(`/retreat/participation-time`) } return ( - - + + - 수련회 신청 - - - - 직장인이신가요? + + 수련회 신청 + - { - setIsWorking(true) - }} - > - 직장인이에요! + + 직장인이신가요? - { - setIsWorking(false) - }} - > - 직장인 아니에요! + + + 해당되는 항목을 선택해주세요. + + + setIsWorker(true)} + startIcon={isWorker ? : undefined} + sx={{ + flex: 1, + height: "72px", + borderRadius: "11px", + borderColor: isWorker ? "#EAAFAF" : "#F0E4E4", + bgcolor: isWorker ? "#FFF1F1" : "#FCFAFA", + color: "#171717", + fontFamily: "Pretendard", + fontSize: "16px", + textTransform: "none", + "& .MuiButton-startIcon": { + color: "#C87575", + }, + "&:hover": { + borderColor: "#EAAFAF", + bgcolor: "#FFF6F6", + }, + }} + > + 직장인이에요! + + + setIsWorker(false)} + startIcon={isWorker === false ? : undefined} + sx={{ + flex: 1, + height: "72px", + borderRadius: "11px", + borderColor: isWorker === false ? "#EAAFAF" : "#F0E4E4", + bgcolor: isWorker === false ? "#FFF1F1" : "#FCFAFA", + color: "#171717", + fontFamily: "Pretendard", + fontSize: "16px", + textTransform: "none", + "& .MuiButton-startIcon": { + color: "#C87575", + }, + "&:hover": { + borderColor: "#EAAFAF", + bgcolor: "#FFF6F6", + }, + }} + > + 직장인이 아니에요! + + - - - 신청하기 - - + + + 다음으로 + ) } diff --git a/client/src/app/retreat/search/page.tsx b/client/src/app/retreat/search/page.tsx new file mode 100644 index 00000000..210611bf --- /dev/null +++ b/client/src/app/retreat/search/page.tsx @@ -0,0 +1,386 @@ +"use client" + +import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded" +import { + Box, + Button, + FormControl, + FormControlLabel, + FormLabel, + IconButton, + Radio, + RadioGroup, + Stack, + TextField, +} from "@mui/material" +import { keyframes } from "@mui/material/styles" +import { FormEvent, useState } from "react" +import { useRouter } from "next/navigation" +import { useNotification } from "@/hooks/useNotification" +import usePageColor from "@/hooks/usePageColor" +import axios from "@/config/axios" +import useAuth from "@/hooks/useAuth" +import useRetreat from "../hooks/useRetreat" + +const revealField = keyframes` + from { + opacity: 0; + transform: translateY(18px); + filter: blur(2px); + } + to { + opacity: 1; + transform: translateY(0); + filter: blur(0); + } +` + +const fieldSx = { + "& .MuiOutlinedInput-root": { + height: "50px", + bgcolor: "#FCFAFA", + borderRadius: "10px", + fontFamily: "Pretendard", + fontSize: "16px", + "& fieldset": { + borderColor: "#F0E4E4", + }, + "&:hover fieldset": { + borderColor: "#E9D4D4", + }, + "&.Mui-focused fieldset": { + borderColor: "#EAAFAF", + borderWidth: "1px", + }, + }, +} + +const YOUNGEST_BIRTH_YEAR = 2007 +const OLDEST_BIRTH_YEAR = 1940 +const BIRTH_YEARS = Array.from( + { length: YOUNGEST_BIRTH_YEAR - OLDEST_BIRTH_YEAR + 1 }, + (_, index) => YOUNGEST_BIRTH_YEAR - index, +) + +function getRevealSx(delay: number) { + return { + opacity: 0, + animation: `${revealField} 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards`, + animationDelay: `${delay}ms`, + "@media (prefers-reduced-motion: reduce)": { + opacity: 1, + animation: "none", + }, + } +} + +function formatPhoneNumber(value: string) { + const digits = value.replace(/\D/g, "").slice(0, 11) + + return digits.replace( + /^(\d{3})(\d{0,4})(\d{0,4})$/, + (_, first, middle, last) => [first, middle, last].filter(Boolean).join("-"), + ) +} + +export default function RetreatSearch() { + const { push } = useRouter() + const { warning } = useNotification() + const [phone, setPhone] = useState("") + const [isLookupComplete, setIsLookupComplete] = useState(false) + const [name, setName] = useState("") + const [gender, setGender] = useState<"남성" | "여성" | "">("") + const [birthYear, setBirthYear] = useState("") + const { kakaoToken, login } = useAuth() + const { updateNuon } = useRetreat() + + usePageColor("#FFFFFF") + + function handleGoToBack() { + push("/retreat") + } + + async function handlePhoneLookup(event: FormEvent) { + event.preventDefault() + if (phone.replace(/\D/g, "").length !== 11) { + warning("전화번호 11자리를 입력해주세요.") + return + } + + // TODO: 전화번호 조회 API가 연결되면 성공 응답을 받은 경우에만 true로 변경해주세요. + // 현재는 올바른 길이의 전화번호로 폼을 제출하면 조회가 완료된 것으로 처리합니다. + try { + const purePhone = phone.replace(/\D/g, "") + await axios.get("/retreat/isRegistered", { params: { phone: purePhone } }) + setIsLookupComplete(false) + if (!kakaoToken) { + warning("카카오 로그인 정보가 없습니다. 다시 시도해주세요. (1)") + return + } + await axios.post("/retreat/bind", { + phone: purePhone, + kakaoToken, + }) + await login(kakaoToken) + push("/retreat/register") + } catch (error) { + setIsLookupComplete(true) + } + } + + async function handleNextStep(event: FormEvent) { + event.preventDefault() + + if (phone.replace(/\D/g, "").length !== 11) { + warning("전화번호 11자리를 입력해주세요.") + return + } + + if (!name.trim() || !gender || !birthYear) { + warning("필수 정보를 모두 입력해주세요.") + return + } + + if (!kakaoToken) { + warning("카카오 로그인 정보가 없습니다. 다시 시도해주세요. (2)") + return + } + + await updateNuon({ + kakaoToken, + name, + yearOfBirth: parseInt(birthYear), + gender: gender === "남성" ? "man" : "woman", + phone: phone.replace(/\D/g, ""), + }) + + push("/retreat/register") + } + + function handleSubmit(event: FormEvent) { + if (isLookupComplete) { + return handleNextStep(event) + } + + return handlePhoneLookup(event) + } + + return ( + + + + + + + 수련회 신청 조회 + + + + + + 기본 정보를 입력해주세요! + + + + + 전화번호{" "} + + * + + + { + setPhone(formatPhoneNumber(event.target.value)) + setIsLookupComplete(false) + }} + placeholder="010-0000-0000" + type="tel" + autoComplete="tel" + required + fullWidth + inputProps={{ + inputMode: "numeric", + maxLength: 13, + "aria-label": "전화번호", + }} + sx={{ + ...fieldSx, + }} + /> + + + {isLookupComplete && ( + + + + 이름{" "} + + * + + + setName(event.target.value)} + placeholder="이름을 입력해주세요" + autoComplete="name" + required + fullWidth + sx={fieldSx} + /> + + + + + 성별 + + + setGender(event.target.value as "남성" | "여성") + } + sx={{ gap: "10px", flexWrap: "nowrap" }} + > + {(["남성", "여성"] as const).map((option) => ( + + } + label={option} + sx={{ + m: 0, + flex: 1, + height: "50px", + borderRadius: "10px", + border: "1px solid", + borderColor: gender === option ? "#EAAFAF" : "#F0E4E4", + bgcolor: gender === option ? "#FFF1F1" : "#FCFAFA", + color: gender === option ? "#C87575" : "#555", + fontFamily: "Pretendard", + fontSize: "16px", + textTransform: "none", + justifyContent: "center", + "& .MuiFormControlLabel-label": { + fontFamily: "Pretendard", + fontSize: "16px", + }, + "&:hover": { + borderColor: "#EAAFAF", + bgcolor: "#FFF6F6", + }, + }} + /> + ))} + + + + + + 출생연도{" "} + + * + + + setBirthYear(event.target.value)} + autoComplete="bday-year" + required + fullWidth + select + SelectProps={{ + native: true, + }} + sx={fieldSx} + > + + 출생연도를 선택해주세요 + + {BIRTH_YEARS.map((year) => ( + + {year}년 + + ))} + + + + )} + + + {isLookupComplete ? "다음으로" : "조회하기"} + + + + ) +} diff --git a/client/src/app/retreat/sections/fourth.tsx b/client/src/app/retreat/sections/fourth.tsx index 3e0e11d5..ccdcf0de 100644 --- a/client/src/app/retreat/sections/fourth.tsx +++ b/client/src/app/retreat/sections/fourth.tsx @@ -4,6 +4,8 @@ import { useEffect, useRef, useState } from "react" import { Box, Stack } from "@mui/material" const DAY_MS = 1000 * 60 * 60 * 24 +const MAP_ADDRESS = "경기도 화성시 정남면 세자로 286" +const MAP_URL = `https://map.naver.com/p/search/${encodeURIComponent(MAP_ADDRESS)}` function getTargetDday() { const targetDate = new Date(2026, 7, 14) @@ -121,7 +123,18 @@ export default function RetreatMainFourth() { - + + + + + + ) diff --git a/client/src/font/MapoDacapo.otf b/client/src/font/MapoDacapo.otf new file mode 100644 index 00000000..487bdf51 Binary files /dev/null and b/client/src/font/MapoDacapo.otf differ diff --git a/client/src/font/hand-font.woff2 b/client/src/font/hand-font.woff2 deleted file mode 100644 index 61308735..00000000 Binary files a/client/src/font/hand-font.woff2 and /dev/null differ diff --git a/server/src/routes/admin/permissionRouter.ts b/server/src/routes/admin/permissionRouter.ts index 3260ee68..4cc0d0ad 100644 --- a/server/src/routes/admin/permissionRouter.ts +++ b/server/src/routes/admin/permissionRouter.ts @@ -46,8 +46,6 @@ router.post("/set-user-permission", async (req, res) => { return } - console.log("user is admin", isAdmin) - const permission = user.permissions.find( (p) => p.permissionType === permissionType, ) diff --git a/server/src/routes/retreat/retreatRouter.ts b/server/src/routes/retreat/retreatRouter.ts index 740f1866..87578b6b 100644 --- a/server/src/routes/retreat/retreatRouter.ts +++ b/server/src/routes/retreat/retreatRouter.ts @@ -7,6 +7,8 @@ import { import { getUserFromToken } from "../../util/util" import adminRouter from "./adminRouter" import sharingRouter from "./sharingRouter" +import { getKakaoIdFromAccessToken } from "../../util/auth" +import { IsNull } from "typeorm" const router = express.Router() @@ -57,7 +59,7 @@ router.get("/", async (req, res) => { }) interface JoinNuonRequest { - kakaoId: string + kakaoToken: string name: string yearOfBirth: number gender: "man" | "woman" @@ -67,9 +69,11 @@ interface JoinNuonRequest { router.post("/join", async (req, res) => { const retreatAttend: JoinNuonRequest = req.body + const kakaoId = await getKakaoIdFromAccessToken(retreatAttend.kakaoToken) + const foundUser = await userDatabase.findOne({ where: { - kakaoId: retreatAttend.kakaoId, + kakaoId: kakaoId, }, }) @@ -89,14 +93,14 @@ router.post("/join", async (req, res) => { }) if (foundUserByPhoneAndName) { - foundUserByPhoneAndName.kakaoId = retreatAttend.kakaoId + foundUserByPhoneAndName.kakaoId = kakaoId await userDatabase.save(foundUserByPhoneAndName) res.send({ result: "success" }) return } const newUser = await userDatabase.create({ - kakaoId: retreatAttend.kakaoId, + kakaoId: kakaoId, name: retreatAttend.name, yearOfBirth: retreatAttend.yearOfBirth, gender: retreatAttend.gender, @@ -124,19 +128,19 @@ router.post("/attend", async (req, res) => { }) if (foundRetreatAttend) { - //foundRetreatAttend.isHalf = req.body.isHalf + foundRetreatAttend.isHalf = req.body.isHalf foundRetreatAttend.isWorker = req.body.isWorker await retreatAttendDatabase.save(foundRetreatAttend) res.send({ result: "수련회 정보가 수정 되었습니다." }) return } - const { isWorker } = req.body + const { isHalf, isWorker } = req.body const retreatAttend = retreatAttendDatabase.create({ user: { id: foundUser.id, }, - isHalf: false, + isHalf: isHalf, isWorker: isWorker, }) retreatAttend.attendanceNumber = (await retreatAttendDatabase.count()) + 1 @@ -144,6 +148,44 @@ router.post("/attend", async (req, res) => { res.send({ result: "수련회 정보가 등록 되었습니다." }) }) +router.post("/bind", async (req, res) => { + const { phone, kakaoToken } = req.body + + const foundUser = await userDatabase.findOne({ + where: { + phone: phone as string, + kakaoId: IsNull(), + }, + }) + + if (!foundUser) { + res.status(401).send({ result: "fail" }) + return + } + + const kakaoId = await getKakaoIdFromAccessToken(kakaoToken as string) + foundUser.kakaoId = kakaoId + await userDatabase.save(foundUser) + res.send({ result: "success" }) +}) + +router.get("/isRegistered", async (req, res) => { + const { phone } = req.query + + const foundUser = await userDatabase.findOne({ + where: { + phone: phone as string, + }, + }) + + if (!foundUser) { + res.status(404).send({ result: "fail" }) + return + } + + res.send({ result: foundUser ? "success" : "fail" }) +}) + router.use("/sharing", sharingRouter) router.use("/admin", adminRouter)
- 
+
+
+
-
+
+
+