hotfix: 배포 후 검증 이슈 사항 (#214)

* fix: add curation bio * fix: url 공유 배너 수행 사파리 문제 해결 * fix: url 복사 사파리 문제 해결 * feat: 프로필 이미지 업로드 용량 제한 구현 * feat: 닉네임 변경 유효성 검사 구현 * feat: 후원 금액 최대 금액 적용 및 유효성 input으로 변경 * fix: 결제약관 라우팅 메인홈페이지로 되는 현상 Co-authored-by: Chayan <[email protected]> * feat: 로그인 기본 상태유지로 변경 Co-authored-by: Chayan <[email protected]> Co-authored-by: jho2301 <[email protected]> Co-authored-by: Chayan <[email protected]>
woowacourse-teams · Aug 2, 2021 · 530b22f · 530b22f
1 parent e3ac918
commit 530b22f
Show file tree

Hide file tree

Showing 17 changed files with 117 additions and 49 deletions.
diff --git a/client/src/components/Donation/AmountForm/DonationAmountForm.styles.ts b/client/src/components/Donation/AmountForm/DonationAmountForm.styles.ts
@@ -3,28 +3,34 @@ import styled from 'styled-components';
 import Container from '../../@atom/Container/Container.styles';
 import Input from '../../@atom/Input/Input';
 import OutlineButton from '../../@molecule/OutlineButton/OutlineButton';
+import ValidationInput from '../../@molecule/ValidationInput/ValidationInput';
 
 export const StyledDonationAmountForm = styled.form`
   width: 100%;
 `;
 
 export const InputLabel = styled.label`
+  margin-bottom: 2rem;
+`;
+
+export const MoneyInputContainer = styled.div`
   position: relative;
+  margin-bottom: 0.5rem;
+  min-height: 10rem;
 
   &::after {
     content: '원';
     display: block;
     position: absolute;
     right: 0.5rem;
-    top: 0;
+    bottom: 3.5rem;
   }
 `;
 
-export const MoneyInput = styled(Input)`
+export const MoneyValidationInput = styled(ValidationInput)`
   font-size: 1.25rem;
   padding: 0 2rem;
   margin-top: 4.5rem;
-  margin-bottom: 1.75rem;
   text-align: right;
 
   -moz-appearance: textfield;

diff --git a/client/src/components/Donation/AmountForm/DonationAmountForm.tsx b/client/src/components/Donation/AmountForm/DonationAmountForm.tsx
@@ -6,11 +6,13 @@ import { CreatorId } from '../../../types';
 import { toCommaSeparatedString } from '../../../utils/format';
 import Button from '../../@atom/Button/Button';
 import SubTitle from '../../@atom/SubTitle/SubTitle.styles';
+import { MAX_DONATION_AMOUNT, MIN_DONATION_AMOUNT } from '../../../constants/donation';
 import {
   ButtonContainer,
   InputLabel,
   MoneyAddButton,
-  MoneyInput,
+  MoneyInputContainer,
+  MoneyValidationInput,
   StyledDonationAmountForm,
 } from './DonationAmountForm.styles';
 
@@ -32,13 +34,18 @@ const DonationAmountForm = ({ creatorId }: DonationAmountFormProps) => {
   return (
     <StyledDonationAmountForm onSubmit={onDonate}>
       <SubTitle>후원할 금액을 입력해주세요! 🎉</SubTitle>
-      <InputLabel>
-        <MoneyInput
-          placeholder="0"
-          value={donationAmount}
-          onChange={({ target }) => setDonationAmount(target.value)}
-        />
-      </InputLabel>
+      <MoneyInputContainer>
+        <InputLabel>
+          <MoneyValidationInput
+            placeholder="0"
+            value={donationAmount}
+            onChange={({ target }) => setDonationAmount(target.value)}
+            isSuccess={isDonationAmountInValidRange}
+            successMessage=""
+            failureMessage={`후원 금액은 최소 ${MIN_DONATION_AMOUNT}원 이상, 최대 ${MAX_DONATION_AMOUNT}원 이하여야 합니다.`}
+          />
+        </InputLabel>
+      </MoneyInputContainer>
       <ButtonContainer>
         <MoneyAddButton onClick={() => addDonationAmount(1000)}>
           +{toCommaSeparatedString(1000)}원

diff --git a/client/src/components/Donation/DonatorForm/DonatorForm.tsx b/client/src/components/Donation/DonatorForm/DonatorForm.tsx
@@ -1,8 +1,7 @@
 import { useHistory } from 'react-router-dom';
 
-import { DONATION_POPUP } from '../../../constants/popup';
 import useDonatorForm from '../../../service/hooks/useDonatorForm';
-import { popupWindow } from '../../../service/popup';
+import { popupTerms } from '../../../service/popup';
 import { CreatorId } from '../../../types';
 import Button from '../../@atom/Button/Button';
 import SubTitle from '../../@atom/SubTitle/SubTitle.styles';
@@ -27,13 +26,6 @@ const DonatorForm = ({ creatorId }: DonatorFormProps) => {
     history.push(`/donation/${creatorId}/payment`);
   };
 
-  const popupTerms = (route: string) => {
-    popupWindow(route, {
-      width: DONATION_POPUP.WIDTH,
-      height: DONATION_POPUP.HEIGHT,
-    });
-  };
-
   return (
     <StyledDonatorForm onSubmit={routeToPaymentPage}>
       <SubTitle>후원자님의 정보를 입력해주세요!</SubTitle>

diff --git a/client/src/components/Register/TermsForm/RegisterTermsForm.tsx b/client/src/components/Register/TermsForm/RegisterTermsForm.tsx
@@ -1,10 +1,8 @@
 import { useHistory } from 'react-router-dom';
 
-import { DONATION_POPUP } from '../../../constants/popup';
-import { S3_URL } from '../../../constants/s3';
 import useRegisterEffect from '../../../service/hooks/useRegisterEffect';
 import useTerms from '../../../service/hooks/useTerms';
-import { popupWindow } from '../../../service/popup';
+import { popupTerms } from '../../../service/popup';
 import Button from '../../@atom/Button/Button';
 import {
   Divider,
@@ -25,13 +23,6 @@ const RegisterTermsForm = () => {
     history.push('/register/url');
   };
 
-  const popupTerms = (route: string) => {
-    popupWindow(S3_URL + route, {
-      width: DONATION_POPUP.WIDTH,
-      height: DONATION_POPUP.HEIGHT,
-    });
-  };
-
   useRegisterEffect();
 
   return (

diff --git a/client/src/components/Setting/UserSettingForm/UserSettingForm.tsx b/client/src/components/Setting/UserSettingForm/UserSettingForm.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, ChangeEvent } from 'react';
+import { FormEvent, ChangeEvent, useEffect } from 'react';
 
 import Title from '../../@atom/Title/Title';
 import {
@@ -15,9 +15,19 @@ import Textarea from '../../@atom/Textarea/Textarea';
 import Button from '../../@atom/Button/Button';
 import useSettingForm from '../../../service/hooks/useSettingForm';
 import useSetting from '../../../service/hooks/useSetting';
+import useRegisterNickname from '../../../service/hooks/useRegisterNickname';
+import ValidationInput from '../../@molecule/ValidationInput/ValidationInput';
+import useUserInfo from '../../../service/hooks/useUserInfo';
 
 const UserSettingForm = () => {
+  const { userInfo } = useUserInfo();
   const { form, setNickname, setBio, setProfileImg } = useSettingForm();
+  const {
+    nickname,
+    setNickname: _setNickname,
+    nicknameErrorMessage,
+    isValidNickName,
+  } = useRegisterNickname();
   const { submit } = useSetting();
 
   const onChangeProfileImg = ({ target }: ChangeEvent<HTMLInputElement>) => {
@@ -34,6 +44,11 @@ const UserSettingForm = () => {
     submit(form);
   };
 
+  useEffect(() => {
+    _setNickname(form.nickname);
+  }, [form.nickname]);
+
+  const isSameNickname = userInfo?.nickname === nickname;
   return (
     <StyledUserSettingForm onSubmit={onApply}>
       <Title>설정</Title>
@@ -49,10 +64,14 @@ const UserSettingForm = () => {
 
       <NickNameInputContainer>
         <StyledSubTitle>닉네임</StyledSubTitle>
-        <Input
+        <ValidationInput
+          role="nickname"
           value={form.nickname}
           onChange={({ target }) => setNickname(target.value)}
           placeholder="닉네임 입력하기"
+          isSuccess={isSameNickname || isValidNickName}
+          successMessage="좋은 닉네임이네요!"
+          failureMessage={nicknameErrorMessage}
         />
       </NickNameInputContainer>
       <IntroductionTextareaContainer>
@@ -63,7 +82,7 @@ const UserSettingForm = () => {
           placeholder="자기소개 입력하기"
         />
       </IntroductionTextareaContainer>
-      <Button>적용하기</Button>
+      <Button disabled={!(isSameNickname || isValidNickName)}>적용하기</Button>
     </StyledUserSettingForm>
   );
 };

diff --git a/client/src/constants/donation.ts b/client/src/constants/donation.ts
@@ -1,5 +1,6 @@
 export const DONATION_MESSAGE_AMOUNT_PER_PAGE = 5;
 
 export const MIN_DONATION_AMOUNT = 1000;
+export const MAX_DONATION_AMOUNT = 9900000;
 
 export const MAX_MESSAGE_LENGTH = 200;
diff --git a/client/src/service/hooks/useDonationAmountForm.ts b/client/src/service/hooks/useDonationAmountForm.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useSetRecoilState } from 'recoil';
-import { MIN_DONATION_AMOUNT } from '../../constants/donation';
+import { MAX_DONATION_AMOUNT, MIN_DONATION_AMOUNT } from '../../constants/donation';
 import { donationState } from '../state/donation';
 
 const useDonationAmountForm = () => {
@@ -22,7 +22,8 @@ const useDonationAmountForm = () => {
     setGlobalDonation((prev) => ({ ...prev, amount: Number(value) }));
   };
 
-  const isDonationAmountInValidRange = MIN_DONATION_AMOUNT <= Number(donationAmount);
+  const isDonationAmountInValidRange =
+    MIN_DONATION_AMOUNT <= Number(donationAmount) && Number(donationAmount) <= MAX_DONATION_AMOUNT;
 
   return {
     donationAmount,

diff --git a/client/src/service/hooks/useSettingForm.ts b/client/src/service/hooks/useSettingForm.ts
@@ -29,6 +29,21 @@ const useSettingForm = () => {
   const setProfileImg = (profileImgData: File) => {
     const reader = new FileReader();
 
+    const mb = 1024 * 1024;
+    const { type, size } = profileImgData;
+
+    // gif 최대 용량 1mb 제한
+    if (type === 'image/gif' && size > mb) {
+      alert('gif 파일의 크기는 최대 1mb 이여야합니다.');
+      return;
+    }
+
+    // 이미지 최대 용량 2mb 제한
+    if (size > 2 * mb) {
+      alert('이미지 파일의 크기는 최대 2mb 이하여야합니다.');
+      return;
+    }
+
     reader.readAsDataURL(profileImgData);
 
     reader.onload = ({ target }) => {

diff --git a/client/src/service/hooks/useURLBanner.ts b/client/src/service/hooks/useURLBanner.ts
@@ -15,8 +15,9 @@ const useURLBanner = (userInfo: UserInfo) => {
   };
 
   const copySourceCode = () => {
-    navigator.clipboard.writeText(sourceCode);
-    alert('소스코드가 복사되었습니다.');
+    navigator.clipboard.writeText(sourceCode).then(() => {
+      alert('소스코드가 복사되었습니다.');
+    });
   };
 
   return { sourceCode, bannerURL, changeButtonColor, copySourceCode };

diff --git a/client/src/service/popup.ts b/client/src/service/popup.ts
@@ -1,3 +1,6 @@
+import { DONATION_POPUP } from '../constants/popup';
+import { S3_URL } from '../constants/s3';
+
 export const popupWindow = (path: string, option?: { width?: number; height?: number }) => {
   let optionString = '';
 
@@ -11,3 +14,10 @@ export const popupWindow = (path: string, option?: { width?: number; height?: nu
 
   window.open(path, '_blank', optionString);
 };
+
+export const popupTerms = (route: string) => {
+  popupWindow(S3_URL + route, {
+    width: DONATION_POPUP.WIDTH,
+    height: DONATION_POPUP.HEIGHT,
+  });
+};
diff --git a/client/src/service/share.ts b/client/src/service/share.ts
@@ -7,7 +7,9 @@ export const donationUrlShare = (creatorName: string, pageName: string) => {
     return window.navigator.share({ title, text, url });
   }
 
-  alert('도네이션 URL이 복사되었습니다.');
 
-  return navigator.clipboard.writeText(url);
+
+  return navigator.clipboard.writeText(url).then(() => {
+    alert('도네이션 URL이 복사되었습니다.');
+  });
 };
diff --git a/client/src/service/state/login.ts b/client/src/service/state/login.ts
@@ -22,6 +22,10 @@ export const accessTokenState = atom<string>({
 const getDefaultLoginPersistenceType = (): StorageType => {
   const isLoginPersist = getLocalStorageItem(STORAGE_KEY.IS_LOGIN_PERSIST);
 
+  if (isLoginPersist === null) {
+    return 'LOCAL';
+  }
+
   return isLoginPersist ? 'LOCAL' : 'SESSION';
 };
 

diff --git a/server/src/main/java/com/example/tyfserver/member/dto/CurationsResponse.java b/server/src/main/java/com/example/tyfserver/member/dto/CurationsResponse.java
@@ -12,11 +12,13 @@ public class CurationsResponse {
     private Long donationAmount;
     private String pageName;
     private String profileImage;
+    private String bio;
 
-    public CurationsResponse(String nickname, Long donationAmount, String pageName, String profileImage) {
+    public CurationsResponse(String nickname, Long donationAmount, String pageName, String profileImage, String bio) {
         this.nickname = nickname;
         this.donationAmount = donationAmount;
         this.pageName = pageName;
         this.profileImage = profileImage;
+        this.bio = bio;
     }
 }
diff --git a/server/src/main/java/com/example/tyfserver/member/repository/MemberRepositoryImpl.java b/server/src/main/java/com/example/tyfserver/member/repository/MemberRepositoryImpl.java
@@ -15,7 +15,7 @@ public class MemberRepositoryImpl implements MemberQueryRepository {
     public List<CurationsResponse> findCurations() {
         return em.createQuery(
                 "select new com.example.tyfserver.member.dto.CurationsResponse(" +
-                        "           d.member.nickname, sum(d.payment.amount), d.member.pageName, d.member.profileImage) " +
+                        "           d.member.nickname, sum(d.payment.amount), d.member.pageName, d.member.profileImage, d.member.bio) " +
                         "from Donation d " +
                         "join d.member " +
                         "group by d.member " +

diff --git a/server/src/test/java/com/example/tyfserver/member/controller/MemberControllerTest.java b/server/src/test/java/com/example/tyfserver/member/controller/MemberControllerTest.java
@@ -373,9 +373,9 @@ public void curations() throws Exception {
         //when
         when(memberService.findCurations()).thenReturn(
                 Arrays.asList(new CurationsResponse("nickname1", 1000L,
-                                "pagename1", "https://cloudfront.net/profile1.png"),
+                                "pagename1", "https://cloudfront.net/profile1.png", "I am test"),
                         new CurationsResponse("nickname2", 2000L,
-                                "pagename2", "https://cloudfront.net/profile2.png"))
+                                "pagename2", "https://cloudfront.net/profile2.png", "I am test"))
         );
         //then
         mockMvc.perform(get("/members/curations")
@@ -388,6 +388,7 @@ public void curations() throws Exception {
                 .andExpect(jsonPath("$[0].donationAmount").value(1000L))
                 .andExpect(jsonPath("$[0].pageName").value("pagename1"))
                 .andExpect(jsonPath("$[0].profileImage").value("https://cloudfront.net/profile1.png"))
+                .andExpect(jsonPath("$[0].bio").value("I am test"))
                 .andDo(document("curations",
                         preprocessRequest(prettyPrint()),
                         preprocessResponse(prettyPrint())))

diff --git a/server/src/test/java/com/example/tyfserver/member/repository/MemberRepositoryImplTest.java b/server/src/test/java/com/example/tyfserver/member/repository/MemberRepositoryImplTest.java
@@ -101,21 +101,27 @@ public void curationListTest() {
 
         Member member1 = new Member("email1", "nick1", "page1",
                 Oauth2Type.GOOGLE, "https://cloudfront.net/profile1.png");
+        member1.updateBio("I am test");
 
         Member member2 = new Member("email2", "nick2", "page2",
                 Oauth2Type.GOOGLE, "https://cloudfront.net/profile2.png");
+        member2.updateBio("I am test");
 
         Member member3 = new Member("email3", "nick3", "page3",
                 Oauth2Type.GOOGLE, "https://cloudfront.net/profile3.png");
+        member3.updateBio("I am test");
 
         Member member4 = new Member("email4", "nick4", "page4",
                 Oauth2Type.GOOGLE, "https://cloudfront.net/profile4.png");
+        member4.updateBio("I am test");
 
         Member member5 = new Member("email5", "nick5", "page5",
                 Oauth2Type.GOOGLE, "https://cloudfront.net/profile5.png");
+        member5.updateBio("I am test");
 
         Member member6 = new Member("email6", "nick6", "page6",
                 Oauth2Type.GOOGLE, "https://cloudfront.net/profile6.png");
+        member6.updateBio("I am test");
 
         Donation donation1 = new Donation(
                 paymentRepository.save(new Payment(1000L, "[email protected]", "test")
@@ -178,19 +184,28 @@ public void curationListTest() {
 
         List<CurationsResponse> curations = memberRepository.findCurations();
         assertThat(curations.get(0)).usingRecursiveComparison().isEqualTo(
-                new CurationsResponse("nick6", 13000L, "page6", "https://cloudfront.net/profile6.png")
+                new CurationsResponse("nick6", 13000L, "page6",
+                        "https://cloudfront.net/profile6.png", "I am test")
         );
+
         assertThat(curations.get(1)).usingRecursiveComparison().isEqualTo(
-                new CurationsResponse("nick3", 7000L, "page3", "https://cloudfront.net/profile3.png")
+                new CurationsResponse("nick3", 7000L, "page3",
+                        "https://cloudfront.net/profile3.png", "I am test")
         );
+
         assertThat(curations.get(2)).usingRecursiveComparison().isEqualTo(
-                new CurationsResponse("nick5", 5000L, "page5", "https://cloudfront.net/profile5.png")
+                new CurationsResponse("nick5", 5000L, "page5",
+                        "https://cloudfront.net/profile5.png", "I am test")
         );
+
         assertThat(curations.get(3)).usingRecursiveComparison().isEqualTo(
-                new CurationsResponse("nick2", 2000L, "page2", "https://cloudfront.net/profile2.png")
+                new CurationsResponse("nick2", 2000L, "page2",
+                        "https://cloudfront.net/profile2.png", "I am test")
         );
+
         assertThat(curations.get(4)).usingRecursiveComparison().isEqualTo(
-                new CurationsResponse("nick1", 1000L, "page1", "https://cloudfront.net/profile1.png")
+                new CurationsResponse("nick1", 1000L, "page1",
+                        "https://cloudfront.net/profile1.png", "I am test")
         );
     }
 }