Merge pull request #36 from JangAyeon/feat/visit

Feat/visit: 섬 방문 URL에 사용자 이메일 및 이름 드러나지 않게 함
JangAyeon · Feb 26, 2024 · db9fdd1 · db9fdd1
2 parents 75ce19d + 392aa05
commit db9fdd1
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/apis/authApi.ts b/apis/authApi.ts
@@ -29,7 +29,7 @@ const getDsIdValid = (dsId: FormDataEntryValue) =>
     .single()
 
 const getUserEmailExist = (email: FormDataEntryValue) =>
-  supabase.from("userinfo").select("*").eq("email", email).single()
+  supabase.from("userinfo").select("email, name").eq("email", email).single()
 const authApi = {
   signup,
   login,

diff --git a/components/forms/VisitForm.tsx b/components/forms/VisitForm.tsx
@@ -15,19 +15,25 @@ import Squiggly from "@/public/assets/green/squiggly.svg"
 
 const VisitForm = () => {
   const [friendEmail, onChangeFriendEmail, setFriendEmail] = useInput("")
+  const [friendName, onChangeFriendName, setFriendName] = useInput("")
   const { state, text, isOpen, setStateModal, closeModal, setIsOpen } =
     useStateModal()
   const [isEmailExist, setEmailExist] = useState(false)
   const router = useRouter()
 
   const visitFriend = () => {
-    router.push(`/island?id=${friendEmail}`)
+    // 브라우저 url에 사용자 Email, name 노출 안되게
+    router.push(`/island?id=${friendEmail}&name=${friendName}`, "/island")
   }
 
   const checkValidEmail = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const { data, error } = await authApi.getUserEmailExist(friendEmail)
     if (data) {
+      const { email, name } = data
+      setFriendName(name)
+      setFriendEmail(email)
+      console.log(data)
       setEmailExist(true)
     } else {
       setStateModal({

diff --git a/components/molecules/LandControl.tsx b/components/molecules/LandControl.tsx
@@ -15,7 +15,13 @@ import islandApi from "@/apis/island"
 
 import { setIslandIsEdit } from "@/utils/island"
 
-const LandControl = ({ isOwner }: { isOwner: boolean }) => {
+const LandControl = ({
+  isOwner,
+  name = "",
+}: {
+  isOwner: boolean
+  name: string
+}) => {
   const { islandType, islandItemLoc, islandIsEdit } = useIsland()
   const { userName, userEmail } = useUserProfile()
   const { state, text, isOpen, setStateModal, closeModal, setIsOpen } =
@@ -55,7 +61,7 @@ const LandControl = ({ isOwner }: { isOwner: boolean }) => {
         mainColor={"--color-yellow-01"}
         pointColor={"--color-green-04"}
         textColor={"--color-green-04"}
-        text={userName}
+        text={isOwner ? userName : name}
         textSize={1.6}
         borderRadius={1.5}
       />

diff --git a/components/pages/island/index.tsx b/components/pages/island/index.tsx
@@ -23,7 +23,7 @@ const Island = () => {
   const { islandIsEdit, islandType } = useIsland()
   const [isOwner, setIsOwner] = useState(true)
   const {
-    query: { id },
+    query: { id, name },
   } = useRouter()
 
   const { userEmail } = useUserProfile()
@@ -41,7 +41,7 @@ const Island = () => {
         endColor={BACKGROUND_COLOR[islandType].endColor}
         degree="180deg"
       >
-        <LandControl isOwner={isOwner} />
+        <LandControl isOwner={isOwner} name={name as string} />
 
         <LandContent isOwner={isOwner} />
         {isOwner && islandIsEdit && (