QA: 각종 레이아웃 수정 반영

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