Merge pull request #300 from Team-Lecue/SP1/Mypage

마이페이지를 데브로!!!
Team-Lecue · Apr 16, 2024 · 194651d · 194651d
2 parents 2a64c68 + 1868242
commit 194651d
Show file tree

Hide file tree

Showing 85 changed files with 1,755 additions and 333 deletions.
diff --git a/index.html b/index.html
@@ -1,53 +1,73 @@
 <!doctype html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=0"
+    />
+    <meta name="title" content="레큐 lecue" />
+    <meta name="description" content="레큐노트에 우리의 마음을 담아 전달해요" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
-  <meta name="title" content="레큐 lecue" />
-  <meta name="description" content="레큐노트에 우리의 마음을 담아 전달해요" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="레큐 lecue" />
+    <meta
+      property="og:description"
+      content="레큐노트에 우리의 마음을 담아 전달해요"
+    />
+    <meta
+      property="og:image"
+      content="https://dzfv99wxq6tx0.cloudfront.net/lecue.png"
+    />
 
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="레큐 lecue" />
-  <meta property="og:description" content="레큐노트에 우리의 마음을 담아 전달해요" />
-  <meta property="og:image" content="https://dzfv99wxq6tx0.cloudfront.net/lecue.png" />
+    <meta name="twitter:title" content="레큐 lecue" />
+    <meta
+      name="twitter:description"
+      content="레큐노트에 우리의 마음을 담아 전달해요"
+    />
+    <meta
+      name="twitter:image"
+      content="https://dzfv99wxq6tx0.cloudfront.net/lecue.png"
+    />
 
-  <meta name="twitter:title" content="레큐 lecue" />
-  <meta name="twitter:description" content="레큐노트에 우리의 마음을 담아 전달해요" />
-  <meta name="twitter:image" content="https://dzfv99wxq6tx0.cloudfront.net/lecue.png" />
+    <title>Lecue</title>
+  </head>
 
-  <title>Lecue</title>
-</head>
+  <!-- Google Tag Manager -->
+  <script>
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({
+        'gtm.start': new Date().getTime(),
+        event: 'gtm.js',
+      });
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != 'dataLayer' ? '&l=' + l : '';
+      j.async = true;
+      j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+      f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-PS49HW2G');
+  </script>
+  <!-- End Google Tag Manager -->
 
-<!-- Google Tag Manager -->
-<script>
-  (function (w, d, s, l, i) {
-    w[l] = w[l] || [];
-    w[l].push({
-      'gtm.start': new Date().getTime(),
-      event: 'gtm.js',
-    });
-    var f = d.getElementsByTagName(s)[0],
-      j = d.createElement(s),
-      dl = l != 'dataLayer' ? '&l=' + l : '';
-    j.async = true;
-    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-    f.parentNode.insertBefore(j, f);
-  })(window, document, 'script', 'dataLayer', 'GTM-PS49HW2G');
-</script>
-<!-- End Google Tag Manager -->
+  <body>
+    <div id="root"></div>
+    <div id="lecuenote-modal"></div>
+    <div id="historyselect-modal"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 
-<body>
-  <div id="root"></div>
-  <div id="lecuenote-modal"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-<!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PS49HW2G" height="0" width="0"
-    style="display: none; visibility: hidden"></iframe></noscript>
-<!-- End Google Tag Manager (noscript) -->
-
-</html>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript
+    ><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-PS49HW2G"
+      height="0"
+      width="0"
+      style="display: none; visibility: hidden"
+    ></iframe
+  ></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+</html>
diff --git a/src/EditNickname/api/patchNickname.ts b/src/EditNickname/api/patchNickname.ts
@@ -0,0 +1,16 @@
+import { api } from '../../libs/api';
+
+export const patchNickname = async (token: string, nickname: string) => {
+  const response = await api.patch(
+    '/api/nickname',
+    { nickname: nickname },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  return { code: response.data.code };
+};
diff --git a/src/EditNickname/components/EditButton/EditButton.style.ts b/src/EditNickname/components/EditButton/EditButton.style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const ButtonWrapper = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: end;
+
+  width: 100%;
+  height: calc(100% - 12.1rem);
+  margin-bottom: 2rem;
+`;
diff --git a/src/EditNickname/components/EditButton/index.tsx b/src/EditNickname/components/EditButton/index.tsx
@@ -0,0 +1,43 @@
+import Button from '../../../components/common/Button';
+import usePatchNickname from '../../hooks/usePatchNickname';
+import { EditButtonProps } from '../../types/editNicknameTypes';
+import * as S from './EditButton.style';
+
+function EditButton({
+  isActive,
+  token,
+  nickname,
+  handleSetIsValid,
+  handleSetIsActive,
+}: EditButtonProps) {
+  const patchMutation = usePatchNickname({
+    handleSetIsValid,
+    handleSetIsActive,
+    token,
+    nickname,
+  });
+
+  const handelClickSubmitBtn = (token: string, nickname: string) => {
+    const patchNickname = nickname.trim();
+
+    patchMutation.mutate({
+      nickname: patchNickname,
+      token: token,
+    });
+  };
+
+  return (
+    <S.ButtonWrapper>
+      <Button
+        type="button"
+        variant="complete"
+        disabled={!isActive}
+        onClick={() => handelClickSubmitBtn(token, nickname)}
+      >
+        완료
+      </Button>
+    </S.ButtonWrapper>
+  );
+}
+
+export default EditButton;
diff --git a/src/EditNickname/components/NicknameInput/NicknameInput.style.ts b/src/EditNickname/components/NicknameInput/NicknameInput.style.ts
@@ -0,0 +1,56 @@
+import styled from '@emotion/styled';
+
+export const NicknameInputWrapper = styled.section`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  margin-top: 1.2rem;
+`;
+
+export const InputContainer = styled.div<{
+  isEmpty: boolean;
+  isValid: string;
+}>`
+  display: flex;
+  gap: 1.6rem;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  padding: 1.9rem 2rem;
+
+  ${({ theme }) => theme.fonts.Body3_R_14};
+
+  border: 0.1rem solid
+    ${({ theme, isEmpty, isValid }) =>
+      isValid === 'special' || isValid === 'duplicate' || isValid === 'space'
+        ? theme.colors.red
+        : isEmpty || isValid === 'enter'
+          ? theme.colors.LG
+          : theme.colors.BG};
+  border-radius: 0.8rem;
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+export const Input = styled.input<{ isValid: string }>`
+  width: 100%;
+
+  color: ${({ theme, isValid }) =>
+    isValid === 'enter' ? theme.colors.MG : theme.colors.BG};
+  ${({ theme }) => theme.fonts.Body2_M_14};
+`;
+
+export const WordCount = styled.p`
+  color: ${({ theme }) => theme.colors.WG};
+  ${({ theme }) => theme.fonts.E_Body2_R_14};
+`;
+
+export const WarnigMsg = styled.p`
+  width: 100%;
+  padding-top: 0.9rem;
+
+  ${({ theme }) => theme.fonts.Caption1_R_12};
+  color: ${({ theme }) => theme.colors.red};
+`;
diff --git a/src/EditNickname/components/NicknameInput/index.tsx b/src/EditNickname/components/NicknameInput/index.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+import { NicknameInputProps } from '../../types/editNicknameTypes';
+import handleChangeInput from '../../utils/handleCheckInput';
+import * as S from './NicknameInput.style';
+
+function NicknameInput({
+  nickname,
+  isValid,
+  handleSetNickname,
+  handleSetIsValid,
+}: NicknameInputProps) {
+  const [wordCnt, setWordCnt] = useState(0);
+  const currentNickname: string = localStorage.getItem('nickname') || '';
+
+  const handleSetWordCnt = (wordCnt: number) => {
+    setWordCnt(wordCnt);
+  };
+
+  return (
+    <S.NicknameInputWrapper>
+      <S.InputContainer isEmpty={wordCnt === 0} isValid={isValid}>
+        <S.Input
+          isValid={isValid}
+          type="text"
+          value={nickname}
+          onChange={(e) => {
+            handleChangeInput({
+              handleSetNickname,
+              handleSetWordCnt,
+              handleSetIsValid,
+              currentNickname,
+              e,
+            });
+          }}
+        />
+        <S.WordCount>({wordCnt}/8)</S.WordCount>
+      </S.InputContainer>
+      {isValid === 'special' ? (
+        <S.WarnigMsg>특수문자/이모지는 사용 불가능해요</S.WarnigMsg>
+      ) : isValid === 'duplicate' ? (
+        <S.WarnigMsg>이미 있는 닉네임이에요</S.WarnigMsg>
+      ) : (
+        isValid === 'space' && (
+          <S.WarnigMsg>마지막 공백 제외 2자 이상 입력해주세요</S.WarnigMsg>
+        )
+      )}
+    </S.NicknameInputWrapper>
+  );
+}
+
+export default NicknameInput;
diff --git a/src/EditNickname/constants/.gitkeep b/src/EditNickname/constants/.gitkeep
diff --git a/src/EditNickname/hooks/usePatchNickname.ts b/src/EditNickname/hooks/usePatchNickname.ts
@@ -0,0 +1,43 @@
+import { AxiosError } from 'axios';
+import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+import { patchNickname } from '../api/patchNickname';
+import {
+  patchNicknameProps,
+  usePatchNicknameProps,
+} from '../types/editNicknameTypes';
+
+const usePatchNickname = (props: usePatchNicknameProps) => {
+  const { handleSetIsValid, handleSetIsActive, token, nickname } = props;
+
+  const navigate = useNavigate();
+
+  const mutation = useMutation({
+    mutationFn: async ({ token, nickname }: patchNicknameProps) => {
+      return await patchNickname(token, nickname);
+    },
+    onError: (err: AxiosError) => {
+      const code = err.response?.status;
+      if (code === 409) {
+        // 닉네임 중복코드 : 409
+        handleSetIsValid('duplicate');
+        handleSetIsActive(false);
+      } else if (code === 400) {
+        handleSetIsValid('space');
+        handleSetIsActive(false);
+      } else {
+        navigate('/error');
+      }
+    },
+    onSuccess: () => {
+      window.localStorage.setItem('token', token);
+      window.localStorage.setItem('nickname', nickname);
+      navigate('/');
+    },
+  });
+
+  return mutation;
+};
+
+export default usePatchNickname;
diff --git a/src/EditNickname/page/EditNickname.style.ts b/src/EditNickname/page/EditNickname.style.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+export const EditNicknameBodyWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  height: calc(100dvh - 5.4rem);
+  padding: 0 1.6rem;
+  margin-top: 5.4rem;
+`;
+
+export const NicknameInputSection = styled.section`
+  width: 100%;
+  margin-top: 3.4rem;
+`;
+
+export const NicknameInputSectionTitle = styled.h2`
+  color: ${({ theme }) => theme.colors.BG};
+
+  ${({ theme }) => theme.fonts.Head2_SB_18}
+`;