Merge pull request #48 from JangAyeon/develop

[3차 배포] 03.01

components/atoms/button/SubAuth.tsx

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled"
+
+const SubAuthButton = ({
+  text,
+  onClick,
+}: {
+  text: string
+  onClick: () => Promise<boolean>
+}) => {
+  return <ButtonWrapper onClick={onClick}>{text}</ButtonWrapper>
+}
+
+export default SubAuthButton
+const ButtonWrapper = styled.button`
+  padding: 0 11.6rem;
+  font-size: 1.2rem;
+  color: var(--color-green-04);
+  text-decoration: underline;
+`

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 }

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 })
   }
 

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 = () => {
           <FormButton width={28} height={4.0} type="submit" text="로그인" />
         </FormWrapper>
       </div>
-      <div>
-        <AuthTypeButton>
-          <BorderPointBtn
-            width={28.0}
-            height={4.0}
-            mainColor="transparent"
-            text="회원가입"
-            textSize={1.6}
-            textColor="--color-green-04"
-            link="/auth?type=signup"
-          />
-        </AuthTypeButton>
-      </div>
+
+      <SubAuthButton
+        text={"회원가입"}
+        onClick={() => router.push("/auth?type=signup")}
+      />
     </>
   )
 }
@@ -179,24 +172,27 @@ type CheckBoxStyle = {
 
 const CheckBox = styled.input<CheckBoxStyle>`
   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;
-`

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 = () => {
         </FormWrapper>
       </div>
 
-      <AuthTypeButton>
-        <BorderPointBtn
-          width={28.0}
-          height={4.0}
-          mainColor="transparent"
-          text="로그인"
-          textSize={1.6}
-          textColor="--color-green-04"
-          link="/auth?type=login"
-        />
-      </AuthTypeButton>
+      <SubAuthButton
+        text={"로그인"}
+        onClick={() => 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;

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({

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 (
     <HeaderWrapper>
       <Triangle type="original" width={139} height={72} alt="header triangle" />
-      <div onClick={rout}>
+      <div onClick={route}>
         <Logo type="header" width={185} height={32} alt="header logo" />
       </div>
     </HeaderWrapper>

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;
 `
 

components/molecules/ItemStats.tsx

@@ -18,7 +18,7 @@ const ItemStats = () => {
   useEffect(() => {
     if (userEmail) {
       // 현재 서버에 저장된 섬타입, 아이템 위치, 아이템 소유목록 dispatch
-      console.log("현재 저장된 섬 정보 불러오기", userEmail)
+      // console.log("현재 저장된 섬 정보 불러오기", userEmail)
       getItemExist(userEmail)
     }
   }, [userEmail])

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])

components/molecules/LandDrag.tsx

@@ -44,34 +44,36 @@ const LandContent = ({ isOwner }: { isOwner: boolean }) => {
   return (
     <>
       <DraggableContext.Provider value={{ zIndex, setZIndex }}>
-        <IslandContainer>
-          <Image
-            src={LAND_CHOICE[islandType].mainImgSrc}
-            alt={LAND_CHOICE[islandType].title}
-            fill
-            priority
-            sizes="100%"
-          />
-          <ItemsContainer>
-            {items.length > 0 &&
-              items.map((item: LocationProps, index: number) => (
-                <DragWrapper isFirst={index === 0 ? true : false}>
-                  <DragItem
-                    isOwner={isOwner}
-                    key={item.id}
-                    id={item.id}
-                    title={ITEM_CHOICE[`${item.id}`].title}
-                    x={item.x}
-                    y={item.y}
-                    z={item.z}
-                    width={ITEM_CHOICE[`${item.id}`].width}
-                    height={ITEM_CHOICE[`${item.id}`].height}
-                    active={false}
-                  />
-                </DragWrapper>
-              ))}
-          </ItemsContainer>
-        </IslandContainer>
+        {items && (
+          <IslandContainer>
+            <Image
+              src={LAND_CHOICE[islandType].mainImgSrc}
+              alt={LAND_CHOICE[islandType].title}
+              fill
+              priority
+              sizes="100%"
+            />
+            <ItemsContainer>
+              {items.length > 0 &&
+                items.map((item: LocationProps, index: number) => (
+                  <DragWrapper isFirst={index === 0 ? true : false}>
+                    <DragItem
+                      isOwner={isOwner}
+                      key={item.id}
+                      id={item.id}
+                      title={ITEM_CHOICE[`${item.id}`].title}
+                      x={item.x}
+                      y={item.y}
+                      z={item.z}
+                      width={ITEM_CHOICE[`${item.id}`].width}
+                      height={ITEM_CHOICE[`${item.id}`].height}
+                      active={false}
+                    />
+                  </DragWrapper>
+                ))}
+            </ItemsContainer>
+          </IslandContainer>
+        )}
       </DraggableContext.Provider>
     </>
   )

components/molecules/LandLoading.tsx

@@ -16,13 +16,15 @@ const LandLoading = () => {
       degree="180deg"
     >
       <IconWrapper>
-        <Image
-          src="/assets/loading/loading.svg"
-          width="240"
-          height="320"
-          alt="loading"
-          priority
-        />
+        <div>
+          <Image
+            src="/assets/loading/loading.png"
+            width="240"
+            height="245"
+            alt="loading"
+            priority
+          />
+        </div>
       </IconWrapper>
     </BackgroundLayout>
   )
@@ -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;
 `

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)

constants/animations.ts

@@ -39,7 +39,7 @@ const Bounce = keyframes`
       
     }
     50% {
-      top: 10rem;
+      top: 15rem;
   	   
     }