diff --git a/components/atoms/button/SubAuth.tsx b/components/atoms/button/SubAuth.tsx new file mode 100644 index 0000000..d8a8b3a --- /dev/null +++ b/components/atoms/button/SubAuth.tsx @@ -0,0 +1,19 @@ +import styled from "@emotion/styled" + +const SubAuthButton = ({ + text, + onClick, +}: { + text: string + onClick: () => Promise +}) => { + return {text} +} + +export default SubAuthButton +const ButtonWrapper = styled.button` + padding: 0 11.6rem; + font-size: 1.2rem; + color: var(--color-green-04); + text-decoration: underline; +` diff --git a/components/atoms/slide/index.tsx b/components/atoms/slide/index.tsx index b39ea8c..4f39400 100644 --- a/components/atoms/slide/index.tsx +++ b/components/atoms/slide/index.tsx @@ -21,7 +21,7 @@ const Slide = ({ id, setStateModal }: ISlide) => { const { islandItemLoc } = useIsland() const handleItemSelect = () => { - console.log(islandItemLoc[`loc_${id}`]) + // console.log(islandItemLoc[`loc_${id}`]) // 아이템은 가지고 있지만 아직 섬에 위치시킨 적 없는 경우 if (!islandItemLoc[`loc_${id}`]) { const data = { id, x: 200, y: 100, z: 1 } diff --git a/components/drag/draggable.tsx b/components/drag/draggable.tsx index 4f07429..00d4ea7 100644 --- a/components/drag/draggable.tsx +++ b/components/drag/draggable.tsx @@ -70,7 +70,7 @@ const DragItem = ({ const updateLocation = (item: DraggableState) => { const data = { x: item.x, y: item.y, z: item.z, id: item.id } - console.log("update", { ...islandItemLoc, [`loc_${data.id}`]: data }) + // console.log("update", { ...islandItemLoc, [`loc_${data.id}`]: data }) setIslandItemLoc({ ...islandItemLoc, [`loc_${data.id}`]: data }) } diff --git a/components/forms/LoginForm.tsx b/components/forms/LoginForm.tsx index 9179f6c..bd60715 100644 --- a/components/forms/LoginForm.tsx +++ b/components/forms/LoginForm.tsx @@ -4,6 +4,7 @@ import { FormEvent, useEffect, useRef, useState } from "react" import BorderPointBtn from "@/components/atoms/button/BorderPointBtn" import FormButton from "@/components/atoms/button/FormButton" +import SubAuthButton from "@/components/atoms/button/SubAuth" import TextInput from "@/components/atoms/input/TextInput" import Text from "@/components/atoms/typo/Text" import AuthModal from "@/components/modal/AuthModal" @@ -155,19 +156,11 @@ const LoginForm = () => { -
- - - -
+ + router.push("/auth?type=signup")} + /> ) } @@ -179,24 +172,27 @@ type CheckBoxStyle = { const CheckBox = styled.input` border: solid 0.3rem var(--color-green-04); - width: 1rem; - height: 1rem; + width: 2.2rem; + height: 2.2rem; background-color: ${({ checked }) => checked ? `var(--color-green-04)` : "transparent"}; + background-image: ${({ checked }) => + checked ? `url("/assets/yellow/marked.png")` : "none"}; + background-size: 1.5rem 1.2rem; + background-repeat: no-repeat; + background-position: center; ` -const FormWrapper = styled.form`` +const FormWrapper = styled.form` + margin-bottom: 4.8rem; +` const CheckBoxWrapper = styled.div` display: flex; flex-direction: row; align-items: center; - margin-bottom: 1.2rem; + margin-bottom: 2.4rem; label { margin-left: 0.8rem; } ` - -const AuthTypeButton = styled.div` - margin-top: 1.2rem; -` diff --git a/components/forms/SignupForm.tsx b/components/forms/SignupForm.tsx index 3d8a5c2..bfba30d 100644 --- a/components/forms/SignupForm.tsx +++ b/components/forms/SignupForm.tsx @@ -5,6 +5,7 @@ import { FormEvent, MouseEvent, useEffect, useRef, useState } from "react" import BorderPointBtn from "@/components/atoms/button/BorderPointBtn" import FormButton from "@/components/atoms/button/FormButton" +import SubAuthButton from "@/components/atoms/button/SubAuth" import UnderLineInput from "@/components/atoms/input/UnderLineInput" import Text from "@/components/atoms/typo/Text" import AuthModal from "@/components/modal/AuthModal" @@ -102,14 +103,14 @@ const SignupForm = () => { const signupForm = new FormData(form) const dsId = signupForm.get("dsId") const text = await dsIdCheck(dsId, setIsDsIdValid) - console.log(dsId, text) + // console.log(dsId, text) if (text) { setStateModal({ state: isDsIdValid ? "success" : "fail", text, isOpen: true, }) - console.log(isDsIdValid) + // console.log(isDsIdValid) if (!isDsIdValid) { form.dsId.value = "" } @@ -211,24 +212,19 @@ const SignupForm = () => { - - - + router.push("/auth?type=login")} + /> ) } export default SignupForm -const FormWrapper = styled.form`` +const FormWrapper = styled.form` + margin-bottom: 3.2rem; +` const FormInputWrapper = styled.div` display: flex; @@ -239,9 +235,7 @@ const FormInputWrapper = styled.div` width: 28rem; margin-bottom: 3rem; ` -const AuthTypeButton = styled.div` - margin-top: 1.2rem; -` + const DsIdCheckButton = styled.button` width: 5.2rem; height: 4rem; diff --git a/components/forms/VisitForm.tsx b/components/forms/VisitForm.tsx index 06939ae..de37e0f 100644 --- a/components/forms/VisitForm.tsx +++ b/components/forms/VisitForm.tsx @@ -32,7 +32,7 @@ const VisitForm = () => { const { email, name } = data setFriendName(name) setFriendEmail(email) - console.log(data) + // console.log(data) setEmailExist(true) } else { setStateModal({ diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx index cf3b625..9db715c 100644 --- a/components/layouts/Header.tsx +++ b/components/layouts/Header.tsx @@ -6,15 +6,15 @@ import Triangle from "@/components/atoms/triangle/Triangle" const Header = () => { const router = useRouter() - const rout = () => { - console.log("router") + const route = () => { + // console.log("router") router.replace("/") } return ( -
+
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 8c49d91..f3a8159 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -88,7 +88,7 @@ const ModalRoot = ({ const ModalCloseButton = ({ imgSrc, needClose = true, - size = 32, + size = 20, }: ModalCloseProps) => { const { onClose, setOverlayClicked } = useContext(ModalContext) if (!setOverlayClicked || !onClose) { @@ -214,8 +214,8 @@ const CloseButtonWrapper = styled.div` position: absolute; top: 0; right: 0; - margin-top: 1.5rem; - margin-right: 1.5rem; + margin-top: 2.4rem; + margin-right: 2.4rem; background-color: transparent; ` diff --git a/components/molecules/ItemStats.tsx b/components/molecules/ItemStats.tsx index acb59b9..7918f6a 100644 --- a/components/molecules/ItemStats.tsx +++ b/components/molecules/ItemStats.tsx @@ -18,7 +18,7 @@ const ItemStats = () => { useEffect(() => { if (userEmail) { // 현재 서버에 저장된 섬타입, 아이템 위치, 아이템 소유목록 dispatch - console.log("현재 저장된 섬 정보 불러오기", userEmail) + // console.log("현재 저장된 섬 정보 불러오기", userEmail) getItemExist(userEmail) } }, [userEmail]) diff --git a/components/molecules/LandControl.tsx b/components/molecules/LandControl.tsx index d6c5b91..a153955 100644 --- a/components/molecules/LandControl.tsx +++ b/components/molecules/LandControl.tsx @@ -62,7 +62,8 @@ const LandControl = ({ useEffect(() => { // 초대 결과로 모달 열린게 아닌 편집에서 완료 저장 누른 경우에만 리로드 - if (needReLoad && isOpen) { + // console.log(needReLoad, isOpen) + if (needReLoad && isOpen && router.isReady) { router.reload() } }, [needReLoad, isOpen]) diff --git a/components/molecules/LandDrag.tsx b/components/molecules/LandDrag.tsx index c2306ab..a88903e 100644 --- a/components/molecules/LandDrag.tsx +++ b/components/molecules/LandDrag.tsx @@ -44,34 +44,36 @@ const LandContent = ({ isOwner }: { isOwner: boolean }) => { return ( <> - - {LAND_CHOICE[islandType].title} - - {items.length > 0 && - items.map((item: LocationProps, index: number) => ( - - - - ))} - - + {items && ( + + {LAND_CHOICE[islandType].title} + + {items.length > 0 && + items.map((item: LocationProps, index: number) => ( + + + + ))} + + + )} ) diff --git a/components/molecules/LandLoading.tsx b/components/molecules/LandLoading.tsx index 3151649..1c715e1 100644 --- a/components/molecules/LandLoading.tsx +++ b/components/molecules/LandLoading.tsx @@ -16,13 +16,15 @@ const LandLoading = () => { degree="180deg" > - loading +
+ loading +
) @@ -32,7 +34,10 @@ export default LandLoading const IconWrapper = styled.div` width: 24rem; - + height: 50vh; + display: flex; + justify-content: center; + align-items: center; position: relative; animation: ${Bounce} 2s infinite ease-in-out; ` diff --git a/components/pages/island/index.tsx b/components/pages/island/index.tsx index e3e3a90..4e43dc5 100644 --- a/components/pages/island/index.tsx +++ b/components/pages/island/index.tsx @@ -30,6 +30,7 @@ const Island = () => { const { userEmail } = useUserProfile() useEffect(() => { + console.log(id, name) if (id && userEmail && id !== userEmail) { console.log("user is no island owner") setIsOwner(false) diff --git a/constants/animations.ts b/constants/animations.ts index d8862b2..b9e3eca 100644 --- a/constants/animations.ts +++ b/constants/animations.ts @@ -39,7 +39,7 @@ const Bounce = keyframes` } 50% { - top: 10rem; + top: 15rem; } diff --git a/public/assets/loading/loading.png b/public/assets/loading/loading.png new file mode 100644 index 0000000..fe2073f Binary files /dev/null and b/public/assets/loading/loading.png differ diff --git a/public/assets/loading/loading.svg b/public/assets/loading/loading.svg deleted file mode 100644 index 18fc9a2..0000000 --- a/public/assets/loading/loading.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/yellow/marked.png b/public/assets/yellow/marked.png new file mode 100644 index 0000000..40c6f51 Binary files /dev/null and b/public/assets/yellow/marked.png differ diff --git a/public/fonts/MundialBold.woff b/public/fonts/MundialBold.woff deleted file mode 100644 index c394f30..0000000 Binary files a/public/fonts/MundialBold.woff and /dev/null differ diff --git a/public/fonts/style.css b/public/fonts/style.css index 09893c4..48ed648 100644 --- a/public/fonts/style.css +++ b/public/fonts/style.css @@ -4,7 +4,7 @@ font-weight: large; font-display: swap; /*로딩 되지 않았을 때 시스템 폰트*/ src: url('YdestreetL.woff') format('woff'); - unicode-range:U+AC00-D7A3, U+0030-0039; /* 한글과 숫자 */ + /* unicode-range:U+AC00-D7A3,U+0030-0039;; /* 한글과 숫자 => 현재 전체 텍스트 폰트로 적용*/ } @font-face { @@ -13,14 +13,5 @@ font-weight: bold; font-display: swap; /*로딩 되지 않았을 때 시스템 폰트*/ src: url('YdestreetB.woff') format('woff'); - unicode-range:U+AC00-D7A3,U+0030-0039;; /* 한글과 숫자 */ + /* unicode-range:U+AC00-D7A3,U+0030-0039;; /* 한글과 숫자 => 현재 전체 텍스트 폰트로 적용*/ } - -@font-face { - font-family: "Mundial"; - font-style: normal; - font-weight: bold; - font-display: swap; /*로딩 되지 않았을 때 시스템 폰트*/ - src: url("MundialBold.woff") format('woff'); - unicode-range:U+0041-005A, U+0061-007A; /* 영문 대소문자 */ -} \ No newline at end of file diff --git a/utils/formValidation.ts b/utils/formValidation.ts index 9c9203c..8a2a439 100644 --- a/utils/formValidation.ts +++ b/utils/formValidation.ts @@ -8,7 +8,7 @@ import { ILoginForm, ISignupForm } from "@/types/common/authProps" const passwordCheck = (password: FormDataEntryValue | null) => { const password_format = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,16}$/ - console.log("비밀번호", password, password_format.test(password as string)) + // console.log("비밀번호", password, password_format.test(password as string)) if (typeof password === "string") { if (!password.length) { return "비밀번호를 입력하시오" @@ -72,13 +72,13 @@ const LoginValidation = ( const isEmailValid = emailCheck(email) const isPasswordValid = passwordCheck(password) - console.log(isEmailValid, isPasswordValid) + // console.log(isEmailValid, isPasswordValid) if (isEmailValid) { SetAuthModalState("fail", isEmailValid, setIsModalOpen) } else if (isPasswordValid) { SetAuthModalState("fail", isPasswordValid, setIsModalOpen) } else { - console.log("all Login validation pass") + // console.log("all Login validation pass") SetAuthModalState("success", "", setIsModalOpen) } } diff --git a/utils/island.ts b/utils/island.ts index d7e7957..28ec1cd 100644 --- a/utils/island.ts +++ b/utils/island.ts @@ -49,6 +49,6 @@ export const getItemsLoc = async (userEmail: User["email"]) => { export const getItemExist = async (userEmail: User["email"]) => { const data = await islandApi.getItemIds(userEmail) - console.log("data", data) + // console.log("data", data) setIslandItemExist(data) }