release 1.3.1 (#401)

* feat(client): 비회원 로그인시 회원가입, 회원 회원가입시 로그인 플로우 추가 (#372)

* feat: 비회원 로그인시 회원가입, 회원 회원가입시 로그인 플로우 추가

* refactor: useRegisterPageName 함수형 컴포넌트 정상적으로 변경

* feat: 가입된 사용자 아닙니다 문구 수정 및 자동 로그인 분기문 적용

* feat(client): 네이버 로그인, 회원가입 버튼 제거 (#373)

* feat: 네이버 로그인, 회원가입 버튼 제거

* feat: 네이버 로고 svg 복구

* fix(client): 로그인시, 간헐적으로 이전의 이전 페이지로 리다이렉션 되는 현상 (#378)

* feat: 사용하지 않는 파일 제거

* fix: 로그인 시 이전의 이전 페이지로 리다이렉션 되는 현상

* feat: 정산관리 페이지, 환급일 정책에 맞게 수정 (#380)

* feat(client): 도네이션 메세지폼, 닉네임 고정 처리 (#381)

* feat: 정산관리 페이지, 환급일 정책에 맞게 수정

* feat: 도네이션 메세지폼, 닉네임 관련 로직 제거

* feat(client): 정산 수수료 페이지 마크업 (#382)

* feat(client): 정산 수수료 페이지 마크업 (#375)

* feat: 정산 수수료 페이지 마크업

* feat: Footer 컴포넌트에 수수료 안내 링크 추가

* feat: 메인페이지 물음표 플로팅 버튼 추가

* feat: 정산관리 페이지에 정산수수료안내 링크버튼 추가

* Revert "feat(client): 정산 수수료 페이지 마크업 (#375)"

This reverts commit 266cbd8.

Co-authored-by: hwano <jho2301@gmail.com>

* feat(client): 닉네임 한글, 영어, 숫자만 가능하게 변경 (#383)

* feat(client): 포인트 충전 이용약관 전부 필수로 변경 (#384)

* feat(client): 포인트 충전 모달 모바일 레이아웃 대응 (#390)

* feat(client): 정산 관리 페이지, 모바일/데스크탑 UI 기준 해상도 변경 (#387)

* fix: 파일명 변경

* feat: SettlementInfo 컴포넌트 모바일/데스크탑 기준 해상도 변경

* feat: 은행 가짓수를 늘린다 (#389)

* fix: 투명한 프로필 이미지 불투명처리 (#391)

* feat(client): 계좌등록 페이지 모바일 대응 (#393)

* fix(client): 자기소개 메세지 개행 적용 (#377)

* feat: 자기소개 메세지 개행 적용 추가, line-height 추가

* feat: 자기소개 메세지 가운데 정렬 적용

* feat(client): 환불신청 페이지 텍스트 수정 및 레이아웃 개선 (#394)

* fix(client): 타 창작자페이지에서 내 페이지로 이동시, 후원메시지리스트 갱신이 안되는 현상 (#395)

Co-authored-by: Chayan <hchayan196@gmail.com>

feat(client): 정산 수수료 페이지 마크업  (#402)

* feat: 정산 수수료 페이지 마크업

* feat: Footer 컴포넌트에 수수료 안내 링크 추가

* feat: 메인페이지 물음표 플로팅 버튼 추가

* feat: 정산관리 페이지에 정산수수료안내 링크버튼 추가

Co-authored-by: jho2301 <jho2301@gmail.com>

client/main/src/App.tsx

@@ -26,6 +26,7 @@ import { useWindowResize } from './utils/useWindowResize';
 import SettlementPage from './pages/Settlement/SettlementPage';
 import SettlementRegisterPage from './pages/Settlement/Register/SettlementRegisterPage';
 import MyPointPage from './pages/MyPoint/MyPointPage';
+import FeeGuide from './pages/FeeGuide/FeeGuide';
 
 export interface ParamTypes {
   oauthProvider: OAuthProvider;
@@ -90,7 +91,7 @@ const App = () => {
           path="/mypoint"
           component={MyPointPage}
           isAuthed={!!accessToken}
-          redirectTo="/login"
+          redirectTo="/login?redirectTo=/mypoint"
         />
 
         <PrivateRoute
@@ -118,6 +119,8 @@ const App = () => {
         <Route path="/refund/cert" component={RefundCertificationPage} />
         <Route path="/refund/confirm" component={RefundConfirmPage} />
 
+        <Route path="/fee-guide" component={FeeGuide} />
+
         <Redirect from="*" to="/" />
       </Switch>
       <Footer />

client/main/src/components/@atom/Checkbox/Checkbox.styles.ts

@@ -7,6 +7,7 @@ export const StyledCheckbox = styled.input`
   width: 1rem;
   height: 1rem;
   cursor: inherit;
+  flex-shrink: 0;
 
   &:after {
     content: '';

client/main/src/components/Creator/CreatorInfo/CreatorInfo.tsx

@@ -24,7 +24,7 @@ const CreatorInfo = ({ isAdmin, creatorId, toggleModal }: CreatorInfoProps) => {
   const popupDonationAmountPage = () => {
     if (!accessToken) {
       alert('도네이션을 하기 위해서 로그인을 해주세요.');
-      history.push('/login');
+      history.push(`/login?redirectTo=${window.location.pathname}`);
       return;
     }
 

client/main/src/components/Creator/CreatorInfo/Desktop/DesktopCreatorInfo.styles.ts

@@ -58,12 +58,15 @@ export const StyledButton = styled(Button)`
 `;
 
 export const DescriptionContainer = styled(Container)`
-  @media ${DEVICE.DESKTOP} {
-    margin-top: 2rem;
-    border-top: 1px solid ${({ theme }) => theme.color.border};
-    border-bottom: 1px solid ${({ theme }) => theme.color.border};
-    color: ${PALETTE.GRAY_500};
-    min-height: 6rem;
-    padding: 1rem 3rem;
+  line-height: 1.25;
+  margin-top: 2rem;
+  border-top: 1px solid ${({ theme }) => theme.color.border};
+  border-bottom: 1px solid ${({ theme }) => theme.color.border};
+  color: ${PALETTE.GRAY_500};
+  min-height: 6rem;
+  padding: 1rem 3rem;
+
+  p {
+    text-align: center;
   }
 `;

client/main/src/components/Creator/CreatorInfo/Desktop/DesktopCreatorInfo.tsx

@@ -32,7 +32,14 @@ const DesktopCreatorInfo = ({ creator, isAdmin, shareUrl, popupDonationAmountPag
         </StyledInfo>
 
         <DescriptionContainer>
-          <p>{creator.bio}</p>
+          <p>
+            {creator.bio.split('\n').map((line) => (
+              <>
+                {line}
+                <br />
+              </>
+            ))}
+          </p>
         </DescriptionContainer>
       </InfoContainer>
     </StyledCreatorInfo>

client/main/src/components/Creator/CreatorInfo/Mobile/MobileCreatorInfo.styles.ts

@@ -21,6 +21,11 @@ export const DescriptionContainer = styled(Container)`
   padding: 1rem;
   color: ${PALETTE.GRAY_500};
   min-height: 6rem;
+  line-height: 1.25;
+
+  p {
+    text-align: center;
+  }
 `;
 
 export const StyledButton = styled(Button)``;

client/main/src/components/Creator/CreatorInfo/Mobile/MobileCreatorInfo.tsx

@@ -14,7 +14,14 @@ const MobileCreatorInfo = ({ creator, isAdmin, shareUrl, popupDonationAmountPage
     <StyledCreatorInfo>
       <Profile />
       <DescriptionContainer>
-        <p>{creator.bio}</p>
+        <p>
+          {creator.bio.split('\n').map((line) => (
+            <>
+              {line}
+              <br />
+            </>
+          ))}
+        </p>
       </DescriptionContainer>
       {isAdmin ? (
         <StyledButton onClick={shareUrl}>내 페이지 공유하기</StyledButton>

client/main/src/components/Creator/Profile/Profile.styles.tsx

@@ -7,6 +7,7 @@ export const ProfileImg = styled.img`
   border-radius: 50%;
   margin-bottom: 1rem;
   object-fit: cover;
+  background-color: white;
 `;
 
 export const NickName = styled.p`

client/main/src/components/Donation/MessageForm/DonationMessageForm.tsx

@@ -3,6 +3,7 @@ import { FormEvent } from 'react';
 import { MAX_MESSAGE_LENGTH } from '../../../constants/donation';
 import useDonationMessage from '../../../service//donation/useDonationMessage';
 import useDonationMessageForm from '../../../service//donation/useDonationMessageForm';
+import useUserInfo from '../../../service/user/useUserInfo';
 import { CreatorId } from '../../../types';
 import Checkbox from '../../@atom/Checkbox/Checkbox';
 import Textarea from '../../@atom/Textarea/Textarea';
@@ -20,13 +21,14 @@ export interface DonationMessageFormProps {
 }
 
 const DonationMessageForm = ({ creatorId }: DonationMessageFormProps) => {
-  const { form, isPrivate, setMessage, setName, setIsPrivate } = useDonationMessageForm();
+  const { form, isPrivate, setMessage, setIsPrivate } = useDonationMessageForm();
   const { sendDonationMessage } = useDonationMessage(creatorId);
+  const { userInfo } = useUserInfo();
 
   const onSubmitMessage = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    sendDonationMessage(form.name, form.message, isPrivate);
+    sendDonationMessage(form.message, isPrivate);
   };
 
   return (
@@ -36,12 +38,7 @@ const DonationMessageForm = ({ creatorId }: DonationMessageFormProps) => {
         <br /> 응원의 한마디를
         <br /> 남겨주세요!
       </DonationMessageTitle>
-      <NickNameInput
-        aria-label="nickname"
-        placeholder="닉네임 입력하기"
-        value={form.name}
-        onChange={({ target }) => setName(target.value)}
-      />
+      <NickNameInput aria-label="nickname" value={userInfo?.nickname ?? ''} readOnly />
       <Textarea
         aria-label="message"
         placeholder="응원메세지 작성하기"

client/main/src/components/Footer/Footer.styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { SIZE } from '../../constants/device';
 
+import { SIZE } from '../../constants/device';
 import PALETTE from '../../constants/palette';
 
 export const StyledFooter = styled.footer`

client/main/src/components/Footer/Footer.tsx

@@ -11,8 +11,11 @@ const Footer = () => {
       </p>
       <p>
         [고객센터] 전화번호 070 - 8098 - 2158 | 이메일
-        <a href="mailto://thank.you.for.tyf@gmail.com"> thank.you.for.tyf@gmail.com</a> |
-        <Anchor to="/refund"> 도네이션 환불하기</Anchor>
+        <a href="mailto://thank.you.for.tyf@gmail.com"> thank.you.for.tyf@gmail.com</a>
+        &nbsp;|&nbsp;
+        <Anchor to="/refund">충전금액 환불</Anchor>
+        &nbsp;|&nbsp;
+        <Anchor to="/fee-guide">정산 수수료 안내</Anchor>
       </p>
       <p>© Thank You For ___ all rights reserved</p>
     </StyledFooter>

client/main/src/components/Help/HelpButton/HelpButton.styles.ts

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+import { DEVICE } from '../../../constants/device';
+import PALETTE from '../../../constants/palette';
+
+export const StyledHelpButton = styled.a`
+  position: sticky;
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin-left: auto;
+  margin-right: 2rem;
+
+  bottom: 3rem;
+  background-color: ${PALETTE.WHITE_400};
+  border-radius: 100%;
+  border: 3px solid ${PALETTE.GRAY_300};
+  cursor: pointer;
+  transition: transform 0.5s ease;
+
+  ::after {
+    content: '?';
+    width: 100%;
+    height: 100%;
+    color: ${PALETTE.GRAY_400};
+    font-weight: 700;
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  :hover {
+    transform: translateY(-0.375rem);
+    background-color: ${PALETTE.GRAY_100};
+  }
+
+  :active {
+    background-color: ${PALETTE.GRAY_200};
+  }
+
+  @media ${DEVICE.DESKTOP_LARGE} {
+    position: fixed;
+    right: 3rem;
+  }
+`;

client/main/src/components/Help/HelpButton/HelpButton.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+import { StyledHelpButton } from './HelpButton.styles';
+
+const HelpButton = () => {
+  return (
+    <Link to="/fee-guide">
+      <StyledHelpButton />
+    </Link>
+  );
+};
+
+export default HelpButton;

client/main/src/components/Login/LoginForm.tsx

@@ -32,9 +32,9 @@ const LoginForm = () => {
         <GoogleBarButton onClick={() => routeToOAuthPage('GOOGLE', 'LOGIN')}>
           구글 로그인
         </GoogleBarButton>
-        <NaverBarButton onClick={() => routeToOAuthPage('NAVER', 'LOGIN')}>
+        {/* <NaverBarButton onClick={() => alert('현재 서비스 준비중입니다.')} disabled>
           네이버 로그인
-        </NaverBarButton>
+        </NaverBarButton> */}
         <KakaoBarButton onClick={() => routeToOAuthPage('KAKAO', 'LOGIN')}>
           카카오 로그인
         </KakaoBarButton>

client/main/src/components/Main/CreatorCard/CreatorCard.styles.ts

@@ -47,6 +47,7 @@ export const ProfileImg = styled.img`
   transform: translateX(-50%);
   z-index: ${Z_INDEX.MIDGROUND};
   top: 1.5rem;
+  background-color: white;
 
   @media ${DEVICE.DESKTOP_LARGE} {
     width: 5.625rem;

client/main/src/components/NavBar/NavBar.tsx

@@ -30,7 +30,7 @@ const NavBar = () => {
             <StyledTextButton onClick={toggleModal}>{userInfo.nickname}</StyledTextButton>
           </>
         ) : (
-          <LoginButton to="/login">로그인</LoginButton>
+          <LoginButton to={`/login?redirectTo=${window.location.pathname}`}>로그인</LoginButton>
         )}
       </StyledNavBar>
       <NavBarArea />

client/main/src/components/Point/ChargeModal/PointChargeModal.styles.ts

@@ -1,30 +1,45 @@
 import styled from 'styled-components';
-import { SIZE } from '../../../constants/device';
+import { DEVICE, SIZE } from '../../../constants/device';
 import PALETTE from '../../../constants/palette';
 import Button from '../../@atom/Button/Button.styles';
 import Container from '../../@atom/Container/Container.styles';
 import Modal from '../../@atom/Modal/Modal';
 import SubTitle from '../../@atom/SubTitle/SubTitle.styles';
 
 export const StyledModal = styled(Modal)`
-  border-radius: 1rem;
+  position: fixed;
+  bottom: 0;
+  width: 100vw;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  min-height: 40rem;
-  padding: 3.5rem;
+  padding: 1.5rem;
+  border-radius: 0.625rem 0.625rem 0 0;
+
+  @media ${DEVICE.DESKTOP} {
+    position: static;
+    width: auto;
+    border-radius: 1rem;
+    justify-content: center;
+
+    min-height: 40rem;
+    padding: 3.5rem;
+  }
 `;
 
 export const ButtonContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   row-gap: 1.5rem;
   column-gap: 1.5rem;
 
   margin-top: 5rem;
   margin-bottom: 1.25rem;
+
+  @media ${DEVICE.DESKTOP} {
+    grid-template-columns: repeat(3, 1fr);
+  }
 `;
 
 export const CheckboxContainerList = styled.div`

client/main/src/components/Point/ChargeModal/PointChargeModal.tsx

@@ -121,7 +121,7 @@ const PointChargeModal = ({ closeModal }: PointChargeModalProps) => {
                 <DonatorTermLink onClick={() => popupTerms('/contracts/donator-policy.html')}>
                   결제 약관
                 </DonatorTermLink>
-                에 동의합니다. (필수)
+                에 동의합니다.
               </span>
             </CheckboxContainer>
             <CheckboxContainer>

client/main/src/components/Refund/ApplyForm/RefundApplyForm.tsx

@@ -22,9 +22,9 @@ const RefundApplyForm = () => {
     <StyledRefundApplyForm onSubmit={onSubmit}>
       <Title>환불신청</Title>
       <Container>
-        <SubTitle>주문번호</SubTitle>
+        <SubTitle>결제번호</SubTitle>
         <Input
-          placeholder="주문번호 입력하기"
+          placeholder="결제번호 입력하기"
           value={merchantUid}
           onChange={({ target }) => setMerchantUid(target.value)}
         />
@@ -35,8 +35,9 @@ const RefundApplyForm = () => {
         <TextButton>인증 메일 보내기</TextButton>
       )}
       <CautionContainer>
-        <p>결제일로부터 7일이내 요청에 대해서만 환불이 가능합니다.</p>
-        <p>이후 환불건에 대해서는 도네이션을 받은 창작자와 협의가 필요합니다.</p>
+        <p>미사용 포인트는 결제일로부터 7일이내 요청에 대해서 카드 취소 환불이 가능합니다.</p>
+        <p>이외의 환불 문의에 대해서는 고객센터로 문의해주세요.</p>
+        <p>사용한 포인트에 대해서는 환불이 불가능합니다.</p>
       </CautionContainer>
     </StyledRefundApplyForm>
   );

client/main/src/components/Register/AuthForm/RegisterAuthForm.tsx

@@ -17,9 +17,9 @@ const RegisterAuthForm = () => {
         <GoogleBarButton onClick={() => routeToOAuthPage('GOOGLE', 'REGISTER')}>
           구글 회원가입
         </GoogleBarButton>
-        <NaverBarButton onClick={() => routeToOAuthPage('NAVER', 'REGISTER')}>
+        {/* <NaverBarButton onClick={() => alert('현재 서비스 준비중입니다.')} disabled>
           네이버 회원가입
-        </NaverBarButton>
+        </NaverBarButton> */}
         <KakaoBarButton onClick={() => routeToOAuthPage('KAKAO', 'REGISTER')}>
           카카오 회원가입
         </KakaoBarButton>

client/main/src/components/Settlement/Info/Desktop/DesktopSettlementInfo.tsx

@@ -34,7 +34,7 @@ const DesktopSettlementInfo = () => {
           <span>
             <Amount>{toCommaSeparatedString(exchangeablePoint ?? 0)}</Amount>원
           </span>
-          <Caution>오늘 요청시 환급일 2021/{nextMonth}/28</Caution>
+          <Caution>오늘 요청시 환급일 2021 / {nextMonth} / 7</Caution>
         </AmountContainer>
         <Button onClick={applySettlement}>정산 신청하기</Button>
       </InfoContainer>

client/main/src/components/Settlement/Info/Mobile/MobileSettlementInfo.tsx

@@ -34,7 +34,7 @@ const MobileSettlementInfo = () => {
           <AmountContainer>
             <Amount>{toCommaSeparatedString(exchangeablePoint ?? 0)}</Amount>원
           </AmountContainer>
-          <Caution>오늘 요청시 환급일 2021/{nextMonth}/28</Caution>
+          <Caution>오늘 요청시 환급일 2021 / {nextMonth} / 7</Caution>
         </InfoContainer>
         <InfoContainer>
           <StyledSubTitle>현재까지 정산 받은 금액은</StyledSubTitle>

client/main/src/components/Settlement/Info/SettlementInfo.tsx

@@ -6,7 +6,7 @@ import MobileSettlementInfo from './Mobile/MobileSettlementInfo';
 const SettlementInfo = () => {
   const { windowWidth } = useWindowResize();
 
-  return windowWidth > SIZE.DESKTOP_LARGE ? <DesktopSettlementInfo /> : <MobileSettlementInfo />;
+  return windowWidth > SIZE.DESKTOP_EXTRA ? <DesktopSettlementInfo /> : <MobileSettlementInfo />;
 };
 
 export default SettlementInfo;