Merge branch 'dev' into feature-022

teamViNO · Feb 19, 2024 · 49b2a0b · 49b2a0b
2 parents f81ef33 + e873e2e
commit 49b2a0b
Show file tree

Hide file tree

Showing 27 changed files with 419 additions and 307 deletions.
diff --git a/src/apis/sms.ts b/src/apis/sms.ts
@@ -10,6 +10,10 @@ export const sendSMSAPI = (data: sendSMSRequest) => {
 
   };
 
+export const sendSMSFindAPI = (data : sendSMSRequest) => {
+  return axios.post<APIResponse<smsResponse>>(PREFIX + '/sendSMS-find', data);
+}
+
 export const checkSMSAPI = (data : checkSMSRequest, token : string) => {
     return axios.post<APIResponse<smsResponse>>(PREFIX + '/checkSMS', data, {
       headers : { Authorization : `Bearer ${token}`}

diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -76,13 +76,6 @@ export const getUnReadDummyVideosAPI = () => {
   return axios.get<APIResponse<VideoResponse>>('/videos/dummyVideos/unRead');
 };
 
-export const getUnReadDummyVideos = async (): Promise<
-  APIResponse<Record<'videos', IVideoProps[]>>
-> => {
-  const response = await axiosInstance.get('/videos/dummyVideos/unRead');
-  return response.data;
-};
-
 export const getAllDummyVideos = async (): Promise<
   APIResponse<Record<'videos', IVideoProps[]>>
 > => {

diff --git a/src/assets/naver-logo.png b/src/assets/naver-logo.png
diff --git a/src/components/NicknameModal.tsx b/src/components/NicknameModal.tsx
@@ -6,115 +6,115 @@ import nameImg from '@/assets/name.png';
 import { BlurBackground } from '@/styles/modals/common.style';
 import { userInfoState } from '@/stores/user';
 import { useSetRecoilState } from 'recoil';
+import useCreateToast from '@/hooks/useCreateToast';
 
 const NicknameModal = () => {
-    const [inputCount, setInputCount] = useState(0);
-    const [name, setName] = useState<string>("");
-
-    const setUserInfo = useSetRecoilState(userInfoState);
+  const [inputCount, setInputCount] = useState(0);
+  const [name, setName] = useState<string>('');
+  const { createToast } = useCreateToast();
 
-    const refreshMyInfo = async () => {
+  const setUserInfo = useSetRecoilState(userInfoState);
+  const NickNameRegex = /^[a-zA-Z0-9가-힣\s]*$/;
+  const testNickNameRegex = NickNameRegex.test(name);
+
+  const refreshMyInfo = async () => {
     try {
       const { result } = (await getMyInfoAPI()).data;
 
       setUserInfo(result);
     } catch (e) {
       console.error(e);
     }
-  }
+  };
 
-    const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const target = e.currentTarget;
-        if (target.value.length > 7) {
-          target.value = target.value.slice(0, 7);
-        }
-        setName(target.value);
-          setInputCount(
-            target.value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, "$&$1$2").length
-            );
-          setInputCount(target.value.length);
-        };
-
-    const onApply = () => {
-          if (name) {
-            // 서버에 데이터 전송
-            onRegisterNicknameInfo();
-          } else {
-            alert('입력값을 확인해주세요.');
-          }
-        };
-
-    const onRegisterNicknameInfo = async () => {
-          try {
-              const response = (await nickNameAPI({
-              nick_name : name,
-            })).data
-            refreshMyInfo();
-            console.log(response);
-          } catch (err) {
-            console.log(err);
-          }
-        };
-
-    return (
-        <BlurBackground>
-        <ModalDiv>
-
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              gap: 12
-            }}
-          >
-            <img src={nameImg} alt="signup" width={56} height={56} />
-            <h1 className="title">어떤 이름으로 불러드릴까요?</h1>
-            <span className="description">
-              vino에 오신걸 환영합니다! 원하시는 이름으로 불러드릴게요
-            </span>
-          </div>
-
-          <TextDiv 
-          className="text_box">
-          <InputBox
-              type="text"
-              id="name"
-              name="name"
-              value={name}
-              placeholder="원하시는 닉네임을 작성해주세요"
-              onChange={onChangeName}
-              maxLength={7}
-            >
-            </InputBox>
-            <InputNickNameMessage>
-            <InputNickNameLength>
-              {inputCount}
-            </InputNickNameLength>
-            /7(공백포함)
-            </InputNickNameMessage>
-            </TextDiv>
-            {name ? (
-            <SucButton 
-              type="submit"
-              onClick={onApply}
-              style={{ marginTop: 12 }}
-            >
-              등록하기
-            </SucButton>) : (
-            <Button
-            style={{ marginTop: 12 }}>
-              등록하기
-            </Button>)
-            }
-        </ModalDiv>
-      </BlurBackground>
+  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const target = e.currentTarget;
+    if (target.value.length > 7) {
+      target.value = target.value.slice(0, 7);
+    }
+    setName(target.value);
+    setInputCount(
+      target.value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, '$&$1$2').length,
     );
+    setInputCount(target.value.length);
+  };
+
+  const onApply = () => {
+    if (name) {
+      // 서버에 데이터 전송
+      onRegisterNicknameInfo();
+    } else {
+      createToast('입력값을 확인해주세요.');
+    }
   };
-
-  export default NicknameModal;
 
-  const ModalDiv = styled.div`
+  const onRegisterNicknameInfo = async () => {
+    try {
+      const response = (
+        await nickNameAPI({
+          nick_name: name,
+        })
+      ).data;
+      refreshMyInfo();
+      console.log(response);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <BlurBackground>
+      <ModalDiv>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 12,
+          }}
+        >
+          <img src={nameImg} alt="signup" width={56} height={56} />
+          <h1 className="title">어떤 이름으로 불러드릴까요?</h1>
+          <span className="description">
+            vino에 오신걸 환영합니다! 원하시는 이름으로 불러드릴게요
+          </span>
+        </div>
+
+        <TextDiv className="text_box">
+          <InputBox
+            type="text"
+            id="name"
+            name="name"
+            value={name}
+            placeholder="원하시는 닉네임을 작성해주세요"
+            onChange={onChangeName}
+            maxLength={7}
+          ></InputBox>
+          <InputNickNameMessage>
+            <InputNickNameLength>{inputCount}</InputNickNameLength>
+            /7(공백포함)
+          </InputNickNameMessage>
+        </TextDiv>
+        {!testNickNameRegex && (
+          <WarningMessage>
+            *아쉽지만,이모티콘은 사용할 수 없어요
+          </WarningMessage>
+        )}
+        {name ? (
+          <SucButton type="submit" onClick={onApply} style={{ marginTop: 12 }}>
+            등록하기
+          </SucButton>
+        ) : (
+          <Button style={{ marginTop: 12 }}>등록하기</Button>
+        )}
+      </ModalDiv>
+    </BlurBackground>
+  );
+};
+
+export default NicknameModal;
+
+const ModalDiv = styled.div`
   padding: 40px 50px;
   display: flex;
   flex-direction: column;
@@ -136,52 +136,52 @@ const NicknameModal = () => {
 `;
 
 const InputBox = styled.input`
-    width: 202px;
-    height: 56px;
-    background-color: #F3F3F3;
-    padding: 0px 0px 0px 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    flex: 1 0 0;
-    font-style: normal;
-    border: none;
-    border-radius: 12px;
-    color: var(--Main, #1E1E1E);
-    font-family: Pretendard;
-    ${theme.typography.Body1};
-    &:focus {
-      outline: none;
-    }
-    
-    &::placeholder {
+  width: 202px;
+  height: 56px;
+  background-color: #f3f3f3;
+  padding: 0px 0px 0px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  flex: 1 0 0;
+  font-style: normal;
+  border: none;
+  border-radius: 12px;
+  color: var(--Main, #1e1e1e);
+  font-family: Pretendard;
+  ${theme.typography.Body1};
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
     color: #bbb;
     ${theme.typography.Body1};
   }
 `;
 
 const SucButton = styled.button`
-    width: 100%;
-    height: 56px;
-    border: none;
-    border-radius: 12px;
-    background-color : #1E1E1E;
-    color: #fff;
-    text-align: center;
-    ${theme.typography.Body1};
-    cursor: pointer;
+  width: 100%;
+  height: 56px;
+  border: none;
+  border-radius: 12px;
+  background-color: #1e1e1e;
+  color: #fff;
+  text-align: center;
+  ${theme.typography.Body1};
+  cursor: pointer;
 `;
 
 const Button = styled.button`
-    width: 100%;
-    height: 56px;
-    border: none;
-    border-radius: 12px;
-    background-color : #F3F3F3;
-    color: #BBBBBB;
-    text-align: center;
-    ${theme.typography.Body1};
+  width: 100%;
+  height: 56px;
+  border: none;
+  border-radius: 12px;
+  background-color: #f3f3f3;
+  color: #bbbbbb;
+  text-align: center;
+  ${theme.typography.Body1};
 `;
 
 const InputNickNameMessage = styled.span`
@@ -195,14 +195,21 @@ const InputNickNameLength = styled.span`
 `;
 
 const TextDiv = styled.div`
-    position : relative;
-    width : 600px;
-    height : 56px;
-    align-items: center;
-    justify-content: center;
-    background-color: #F3F3F3;
-    display: flex;
-    flex-direction: row;
-    border-radius: 12px;
-    margin-top: 48px;
-    `
+  position: relative;
+  width: 600px;
+  height: 56px;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f3f3;
+  display: flex;
+  flex-direction: row;
+  border-radius: 12px;
+  margin-top: 48px;
+`;
+
+export const WarningMessage = styled.span`
+  align-self: flex-start;
+  margin: 0px 0px 12px 16px;
+  color: ${theme.color.red};
+  ${theme.typography.Body3}
+`;