Merge pull request #72 from urther/develop

kakako login,member signUp
bodyBudy · Jul 6, 2022 · fec0e00 · fec0e00
2 parents 6903314 + a5672a3
commit fec0e00
Show file tree

Hide file tree

Showing 10 changed files with 261 additions and 127 deletions.
diff --git a/api/firebase.ts b/api/firebase.ts
@@ -1,5 +1,6 @@
 import { initializeApp } from 'firebase/app';
-import { getFirestore, collection, getDocs, where, query } from 'firebase/firestore/lite';
+import { getFirestore, collection, getDocs, where, query, addDoc } from 'firebase/firestore/lite';
+import { usertype } from './firebase.type';
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_API_KEY,
@@ -13,13 +14,14 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 
-const userRef = collection(db, 'user');
+const userCollection = collection(db, 'user');
 
+// 회원가입
 export const checkIsNicknameDuplicated = async (nickname: string) => {
   try {
     let user = '';
 
-    const q = query(userRef, where('nickname', '==', nickname));
+    const q = query(userCollection, where('nickname', '==', nickname));
     const querySnapshot = await getDocs(q);
     querySnapshot.forEach((doc) => {
       user = doc.id;
@@ -34,3 +36,17 @@ export const checkIsNicknameDuplicated = async (nickname: string) => {
     console.log(e);
   }
 };
+
+export const signUpMember = async ({ nickname, email, gender, city, district }: usertype) => {
+  try {
+    await addDoc(collection(db, 'user'), {
+      nickname,
+      email,
+      gender,
+      city,
+      district,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
diff --git a/api/firebase.type.ts b/api/firebase.type.ts
@@ -0,0 +1,8 @@
+export interface usertype {
+  nickname?: string;
+  name?: string;
+  email: string;
+  gender: boolean;
+  city: string;
+  district: string;
+}
diff --git a/components/common/button/index.tsx b/components/common/button/index.tsx
@@ -12,7 +12,7 @@ import {
 
 import NaverLogo from '@assets/signUp/naver.svg';
 import KakaoLogo from '@assets/signUp/kakao.svg';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { throttle } from 'lodash';
 
 export const GradientButton = ({ link, buttonTitle, bottomPercent }: GradientButtonProps) => {
@@ -45,10 +45,14 @@ export const FixedBottomButton = ({
   buttonType,
   onButtonEvent,
 }: IsValidButtonProps) => {
+  const onFixedButton = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    onButtonEvent();
+  };
   return (
     <>
       {isValid ? (
-        <StyledFixedBottomButton type={buttonType} onClick={() => onButtonEvent()}>
+        <StyledFixedBottomButton type={buttonType} onClick={onFixedButton}>
           {buttonTitle}
         </StyledFixedBottomButton>
       ) : (

diff --git a/components/common/input/index.tsx b/components/common/input/index.tsx
@@ -0,0 +1,92 @@
+import { throttle } from 'lodash';
+import React, { useState } from 'react';
+
+import { checkIsNicknameDuplicated } from 'api/firebase';
+import Image from 'next/image';
+import correct from '@assets/signUp/correct.svg';
+import incorrect from '@assets/signUp/incorrect.svg';
+
+export const CheckIsValidNickname = ({
+  nickname,
+  onSetNickname,
+  isCheckNickname,
+}: CheckIsValid) => {
+  const [isValid, setIsValid] = useState(false);
+  const [isDuplicated, setIsDuplicated] = useState(false);
+
+  const onChangeNickName = throttle((e: React.SyntheticEvent) => {
+    if (!(e.target instanceof HTMLInputElement)) return;
+
+    const nickname = e.target.value;
+    onSetNickname(nickname);
+
+    if (nickname.length < 1 || nickname.length >= 5) setIsValid(false);
+    else {
+      const reg = /[!?@#$%^&*():;+-=~{}<>\_\[\]\|\\\"\'\,\.\/\`\₩\s]/g;
+
+      if (reg.test(nickname)) {
+        // 특수문자 있는 경우
+        setIsValid(false);
+      } else {
+        setIsValid(true);
+        checkDuplicated(nickname);
+      }
+    }
+  }, 200);
+
+  const checkDuplicated = async (nickname: string) => {
+    try {
+      const result = await checkIsNicknameDuplicated(nickname);
+      if (!result) {
+        isCheckNickname(true);
+        setIsDuplicated(true);
+      } else {
+        setIsDuplicated(false);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    <>
+      {isValid && isDuplicated ? (
+        <>
+          <span className="correct-nickname">좋은 닉네임이에요!</span>
+          <div className="nickname-img">
+            <Image src={correct} alt="옳음" width={'17px'} height={'17px'} />
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
+
+      {isValid ? (
+        <></>
+      ) : (
+        <>
+          <span className="incorrect-nickname">닉네임은 특수문자 제외 5자 이내에요.</span>
+          <div className="nickname-img">
+            <Image src={incorrect} alt="틀림" width={'17px'} height={'17px'} />
+          </div>
+        </>
+      )}
+      {isValid && !isDuplicated ? (
+        <>
+          <span className="duplicate-nickname">중복된 닉네임이 있습니다!</span>
+          <div className="nickname-img">
+            <Image src={incorrect} alt="틀림" width={'17px'} height={'17px'} />
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
+      <input
+        onChange={onChangeNickName}
+        value={nickname || ''}
+        type="text"
+        placeholder="특수 문자 제외 5자 이내"
+      />
+    </>
+  );
+};
diff --git a/components/common/input/input.d.ts b/components/common/input/input.d.ts
@@ -0,0 +1,5 @@
+interface CheckIsValid {
+  nickname: string;
+  onSetNickname: Dispatch<SetStateAction<string>>;
+  isCheckNickname: Dispatch<SetStateAction<boolean>>;
+}
diff --git a/components/common/select/index.tsx b/components/common/select/index.tsx
@@ -1,15 +1,23 @@
 import Image from 'next/image';
-import { useState } from 'react';
-import { StyledSelect, StyledSelectUl, StyledSelectWrapper } from './styledSelect';
+import { useEffect, useState } from 'react';
+import {
+  StyledBack,
+  StyledCityDistrictSelect,
+  StyledSelect,
+  StyledSelectUl,
+  StyledSelectWrapper,
+} from './styledSelect';
 
 import selectTriangle from '@assets/common/selectTriangle.svg';
 import selectTriangleClose from '@assets/common/selectTriangleClose.svg';
+import { city, district } from '@data';
 
 export const Select = ({
   currentSelectedData,
   selectData,
   selectWidth,
   onSetCurrentSelected,
+  isDisabled = false,
 }: SelectProps) => {
   const [isListOpen, setIsListOpen] = useState(false);
 
@@ -28,27 +36,59 @@ export const Select = ({
     setIsListOpen(false);
   };
 
+  const setListOpenFalse = () => {
+    setIsListOpen(false);
+  };
+
   return (
-    <StyledSelectWrapper>
-      <StyledSelect onClick={onSetIsListOpen} width={selectWidth}>
-        <span>{currentSelectedData}</span>
-        {isListOpen ? (
-          <Image src={selectTriangleClose} alt="옵션 닫기" width="15px" height="15px" />
+    <>
+      {isListOpen ? <StyledBack onClick={setListOpenFalse} /> : <></>}
+      <StyledSelectWrapper>
+        <StyledSelect onClick={onSetIsListOpen} width={selectWidth}>
+          <span>{currentSelectedData}</span>
+          {isListOpen && !isDisabled ? (
+            <Image src={selectTriangleClose} alt="옵션 닫기" width="15px" height="15px" />
+          ) : (
+            <Image src={selectTriangle} alt="옵션 열기" width="15px" height="15px" />
+          )}
+        </StyledSelect>
+        {isListOpen && !isDisabled ? (
+          <StyledSelectUl width={selectWidth}>
+            {selectData.map((data) => (
+              <li key={data} data-id={data} onClick={onClickCurrentSelected}>
+                {data}
+              </li>
+            ))}
+          </StyledSelectUl>
         ) : (
-          <Image src={selectTriangle} alt="옵션 열기" width="15px" height="15px" />
+          <></>
         )}
-      </StyledSelect>
-      {isListOpen ? (
-        <StyledSelectUl width={selectWidth}>
-          {selectData.map((data) => (
-            <li key={data} data-id={data} onClick={onClickCurrentSelected}>
-              {data}
-            </li>
-          ))}
-        </StyledSelectUl>
-      ) : (
-        <></>
-      )}
-    </StyledSelectWrapper>
+      </StyledSelectWrapper>
+    </>
+  );
+};
+
+export const CityAndDistrictSelect = ({
+  cityInfo,
+  onSetCityInfo,
+  districtInfo,
+  onSetDistrictInfo,
+}: CityDistrictSelectProps) => {
+  return (
+    <StyledCityDistrictSelect>
+      <Select
+        currentSelectedData={cityInfo}
+        onSetCurrentSelected={onSetCityInfo}
+        selectData={city}
+        selectWidth={100}
+      />
+      <Select
+        currentSelectedData={districtInfo}
+        onSetCurrentSelected={onSetDistrictInfo}
+        selectData={cityInfo === '시/군' ? [] : district[cityInfo]}
+        selectWidth={150}
+        isDisabled={cityInfo === '시/군' ? true : false}
+      />
+    </StyledCityDistrictSelect>
   );
 };
diff --git a/components/common/select/select.d.ts b/components/common/select/select.d.ts
@@ -3,8 +3,16 @@ interface SelectProps {
   selectData: string[] | number[];
   selectWidth: number;
   onSetCurrentSelected: Dispatch<SetStateAction<string>> | Dispatch<SetStateAction<number>>;
+  isDisabled?: boolean;
 }
 
 type EventProps = {
   target: EventProps;
 };
+
+interface CityDistrictSelectProps {
+  cityInfo: string;
+  onSetCityInfo: Dispatch<SetStateAction<string>>;
+  districtInfo: string;
+  onSetDistrictInfo: Dispatch<SetStateAction<string>>;
+}
diff --git a/components/common/select/styledSelect.ts b/components/common/select/styledSelect.ts
@@ -1,5 +1,12 @@
 import styled from '@emotion/styled';
 
+export const StyledBack = styled.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
 export const StyledSelectWrapper = styled.span`
   position: relative;
 `;
@@ -12,7 +19,7 @@ export const StyledSelect = styled.button<{ width: number }>`
   background: transparent;
   display: flex;
   justify-content: space-between;
-  padding-left: 0 10px;
+  padding: 0 10px;
   align-items: center;
   font-size: 12px;
   color: ${({ theme }) => theme.purple};
@@ -26,17 +33,29 @@ export const StyledSelectUl = styled.ul<{ width: number }>`
   background-color: #f8f8f8;
   box-sizing: border-box;
   width: ${({ width }) => width}px;
-  height: 100px;
+  max-height: 100px;
   overflow: auto;
-  padding: 2px 10px;
   font-size: 12px;
   border: 1px solid #b0b0b0;
   border-radius: 5px;
   position: absolute;
 
   li {
-    padding: 10px 0;
+    padding: 10px 7px;
     border-bottom: 1px solid ${({ theme }) => theme.lineGray};
     cursor: pointer;
   }
+
+  li:hover {
+    background-color: ${({ theme }) => theme.purple};
+    color: white;
+  }
+`;
+
+export const StyledCityDistrictSelect = styled.div`
+  display: flex;
+
+  span:first-of-type {
+    margin-right: 10px;
+  }
 `;