🚚 Rename: Button 컴포넌트 변수명 변경 및 type 속성 추가

FRONTENDSCHOOL5 · Oct 27, 2023 · 919644e · 919644e
1 parent f5c1e22
commit 919644e
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 23 deletions.
diff --git a/src/components/Header/TopUploadHeader.jsx b/src/components/Header/TopUploadHeader.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDarkModeState } from '../../atoms/StylesAtom';
-import UploadButton from '../common/Button/ButtonContainer';
+import Button from '../common/Button/Button';
 import Container from './HeaderContainer';
 import BackButton from './BackButton';
 import { Section } from './TopUploadHeaderStyle';
@@ -12,8 +12,8 @@ const TopUploadHeader = ({ text, handleClick, isDisabled }) => {
     <Container>
       <BackButton />
       <Section>
-        <UploadButton
-          type={'MS'}
+        <Button
+          size={'MS'}
           text={text}
           isClicked={false}
           handleClick={handleClick}

diff --git a/src/components/common/User/Follow/Follow.jsx b/src/components/common/User/Follow/Follow.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { userInfoAtom } from '../../../../atoms/UserAtom';
 import { isDarkModeState } from '../../../../atoms/StylesAtom';
-import Button from '../../Button/ButtonContainer';
+import Button from '../../Button/Button';
 import basicImg from '../../../../assets/images/basic-profile-s.svg';
 import basicDarkImg from '../../../../assets/images/basic-profile-s-dark.svg';
 import {
@@ -44,15 +44,13 @@ const Follow = ({ user }) => {
         </Link>
       </UserContainer>
       {account !== accountname && isFollow === true && (
-        <ButtonContainer>
           <Button
-            type={'S'}
+            size={'S'}
             text={'취소'}
             isClicked={isFollow}
             handleClick={handleClick}
             isDarkMode={isDarkMode}
           />
-        </ButtonContainer>
       )}
       {account !== accountname && isFollow === false && (
         <ButtonContainer>

diff --git a/src/pages/FeedPage/FeedNoUser.jsx b/src/pages/FeedPage/FeedNoUser.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilValue } from "recoil";
 import { isDarkModeState } from "../../atoms/StylesAtom";
-import Button from '../../components/common/Button/ButtonContainer';
+import Button from '../../components/common/Button/Button';
 import HomeLogo from '../../assets/images/home-logo.svg';
 import HomeDarkLogo from '../../assets/images/home-logo-dark.svg';
 import { Container, Text, Image } from './FeedNoUserStyle'
@@ -14,7 +14,7 @@ const FeedNoUser = () => {
       <Image src={isDarkMode ? HomeDarkLogo : HomeLogo} alt="" />
         <Text>유저를 검색해 팔로우 해보세요!</Text>
       <Link to={'/search'}>
-        <Button type={'ML'} text={'검색하기'} isDarkMode={isDarkMode} />
+        <Button size={'ML'} text={'검색하기'} isDarkMode={isDarkMode} />
       </Link>
     </Container>
   );

diff --git a/src/pages/NotFoundPage/NotFoundPage.jsx b/src/pages/NotFoundPage/NotFoundPage.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from "recoil";
-import Button from '../../components/common/Button/ButtonContainer';
+import Button from '../../components/common/Button/Button';
 import { isDarkModeState } from '../../atoms/StylesAtom';
 import Icon404 from '../../assets/images/icon-404.svg';
 import DarkIcon404 from '../../assets/images/icon-404-dark.svg';
 import { Section, Image, ErrorMessage } from './NotFoundPageStyle';
 
-const NotFound = ({theme}) => {
+const NotFound = () => {
   const isDarkMode = useRecoilValue(isDarkModeState);
   const navigate = useNavigate();
   const handleGoBack = () => {
@@ -18,7 +18,7 @@ const NotFound = ({theme}) => {
       <Section>
         <Image src={isDarkMode ? DarkIcon404 : Icon404} alt="404 로고"/>
         <ErrorMessage>페이지를 찾을 수 없습니다.</ErrorMessage>
-        <Button text={'이전 페이지'} type={'ML'} handleClick={handleGoBack} />
+        <Button text={'이전 페이지'} size={'ML'} handleClick={handleGoBack} />
       </Section>
   );
 };

diff --git a/src/pages/PostPage/PostPage.jsx b/src/pages/PostPage/PostPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import JoinButton from '../../components/common/Button/ButtonContainer';
+import Button from '../../components/common/Button/Button';
 import Map from '../../components/Map/FeedMap';
 import { isDarkModeState } from '../../atoms/StylesAtom';
 import { postLike, deleteLike } from '../../api/post';
@@ -229,8 +229,8 @@ const PostPage = ({ data, showModal }) => {
         </Contents>
       </Post>
       {detail ? (
-        <JoinButton
-          type={'XL'}
+        <Button
+          size={'XL'}
           text={postLikeState ? '참가하기 취소' : '참가하기'}
           isClicked={postLikeState}
           handleClick={handleToggleLike}

diff --git a/src/pages/ProfilePage/UserInfo.jsx b/src/pages/ProfilePage/UserInfo.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import Button from '../../components/common/Button/ButtonContainer';
+import Button from '../../components/common/Button/Button';
 import FollowCount from './FollowCount';
 import { userInfoAtom } from '../../atoms/UserAtom';
 import { isDarkModeState } from '../../atoms/StylesAtom';
@@ -74,7 +74,7 @@ const UserInfo = ({ data, myProfile }) => {
       <ButtonSection>
         {!myProfile ? (
           <Button
-            type="M"
+            size="M"
             text={profile.isfollow ? '언팔로우' : '팔로우'}
             handleClick={profile.isfollow ? handleUnFollow : handleFollow}
             isClicked={profile.isfollow}
@@ -83,14 +83,14 @@ const UserInfo = ({ data, myProfile }) => {
         ) : (
           <>
             <Button
-              type="M"
+              size="M"
               text="러닝 등록"
               isClicked={true}
               isDarkMode={isDarkMode}
               handleClick={handleBtnClick}
             />
             <Button
-              type="M"
+              size="M"
               text="프로필 수정"
               isClicked={true}
               isDarkMode={isDarkMode}

diff --git a/src/pages/SignupPage/ProfileSettingPage/ProfileSettingPage.jsx b/src/pages/SignupPage/ProfileSettingPage/ProfileSettingPage.jsx
@@ -3,7 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useRecoilValue } from "recoil";
 import imageCompression from 'browser-image-compression';
 import Input from '../../../components/common/Input/Input';
-import Button from '../../../components/common/Button/ButtonContainer';
+import Button from '../../../components/common/Button/Button';
 import { isDarkModeState } from '../../../atoms/StylesAtom';
 import { postAccountnameDuplicate, postUserSignup, postUploadProfile } from '../../../api/auth';
 import BasicProfileImg from '../../../assets/images/basic-profile-l.svg'
@@ -22,7 +22,7 @@ import {
 } from './ProfileSettingPageStyle';
 
 
-const ProfileSettingPage = ({theme}) => {
+const ProfileSettingPage = () => {
   const isDarkMode = useRecoilValue(isDarkModeState);
   const URL = 'https://api.mandarin.weniv.co.kr/';
   const navigate = useNavigate();
@@ -38,7 +38,8 @@ const ProfileSettingPage = ({theme}) => {
   const [accountnameErrorMsg, setAccountnameErrorMsg] = useState('');
   const [usernameValid, setUsernameValid] = useState(false);
   const [accountnameValid, setAccountnameValid] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
+  const [isComplete, setIsComplete] = useState(false); 
+
   const formData = new FormData();
   const blobToFile = (blob, filename) => {
   const file = new File([blob], filename);
@@ -193,7 +194,7 @@ const handleProfileSignup = async (e) => {
           required
           />
         </TextSection>
-        <Button type={'L'} text={'들숨날숨 시작하기'} isDisabled = {!handleActivateButton()} 
+        <Button type='submit' size={'L'} text={'들숨날숨 시작하기'} isDisabled = {!handleActivateButton()} 
         handleClick={handleProfileSignup}/>
           </Form>
         </Container>