[TEST] 🔨 Refactor: 업로드 페이지 리팩토링 및 Component 폴더 구조 정리

src/AppBarral.ts

@@ -9,8 +9,8 @@ import LogIn from './Page/LogIn/LogIn';
 import UploadPost from './Page/UploadPost/UploadPost';
 import SignUp from './Page/SignUp/SignUp';
 import NotFound from './Page/NotFound/NotFound';
-import OAuthPage from './Component/OAuthPage';
-import GroupCheck from './Component/GroupCheck';
+import OAuthPage from './Component/Routing/OAuthPage';
+import GroupCheck from './Component/Routing/GroupCheck';
 
 import RouteChangeTracker from './RouteChangeTracker';
 

src/Component/CTA/CTAContainer.tsx

@@ -69,9 +69,11 @@ const BackButton = (): JSX.Element => {
 /** 2023-08-22 CTAContainer.tsx - 인증하기 버튼 */
 const SubmitButtonCTA = ({ hasImage }: { hasImage: boolean }): JSX.Element => {
   return (
-    <CTAButtonS valid={String(hasImage)} disabled={!hasImage}>
-      인증하기
-    </CTAButtonS>
+    <SubmitButtonWrapperS>
+      <CTAButtonS valid={String(hasImage)} disabled={!hasImage}>
+        인증하기
+      </CTAButtonS>
+    </SubmitButtonWrapperS>
   );
 };
 
@@ -80,11 +82,11 @@ const ErrorCTA = (): JSX.Element => {
   const navigate = useNavigate();
 
   return (
-    <ErrorCTAS>
+    <ErrorButtonWrapperS>
       <CTAButtonS valid={'true'} onClick={() => navigate('/')}>
         메인으로
       </CTAButtonS>
-    </ErrorCTAS>
+    </ErrorButtonWrapperS>
   );
 };
 
@@ -97,7 +99,20 @@ const CTAContainerS = styled.div`
   flex-direction: column-reverse;
 `;
 
-const ErrorCTAS = styled.div`
+const SubmitButtonWrapperS = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+
+  button {
+    width: 100%;
+  }
+`;
+
+const ErrorButtonWrapperS = styled.div`
   position: absolute;
   bottom: 0rem;
   display: flex;

src/Component/IconBarrel/ArrowBarrel.ts

@@ -0,0 +1,7 @@
+import Arrow_Left_B from '../../image/Icon/Arrow/Arrow_icon_B.svg'
+import Arrow_Left_W from '../../image/Icon/Arrow/Arrow_icon_W.svg'
+import Arrow_Down from '../../image/Icon/Arrow/Arrow_icon_Down.svg';
+import Arrow_Up from '../../image/Icon/Arrow/Arrow_icon_Up.svg';
+import Arrow_Right from '../../image/Icon/Arrow/Arrow_icon_Right.svg';
+
+export { Arrow_Left_B, Arrow_Left_W, Arrow_Down, Arrow_Up, Arrow_Right };

src/Component/Mission/GroupArticle.tsx

@@ -20,7 +20,7 @@ export const GroupArticleS = styled.article<{ passsort: PageSort }>`
     props.passsort === 'Intro'
       ? '0 1rem'
       : props.passsort === 'Create'
-      ? '3.75rem 1rem 0.5rem 1rem'
+      ? '0.75rem 1rem 0 1rem'
       : '0.87rem 1rem 1.25rem 1rem'};
 `;
 
@@ -53,6 +53,7 @@ const HeadLineS = styled.div<{ passsort: string }>`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  margin-bottom: 0.75rem;
 
   h1 {
     font-size: 1.5rem;
@@ -93,6 +94,7 @@ const MissionRuleS = styled.div<{ passsort: PageSort }>`
   background-color: ${(props) =>
     props.passsort === 'Create' ? 'var(--color-bg)' : 'rgba(255, 255, 255, 0.7)'};
   color: black;
+  margin-bottom: 0.5rem;
   padding: 1rem;
   margin-top: ${(props) => (props.passsort === 'Create' ? '' : '1.25rem')};
   border-radius: 1rem;

src/Component/Mission/GroupHeader.tsx

@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 import { useEffect, useState } from 'react';
-import { Arrow_Left_B, Arrow_Left_W } from '../ArrowBarrel';
+import { Arrow_Left_B, Arrow_Left_W } from '../IconBarrel/ArrowBarrel';
 import post_Icon from '../../image/Icon/post_Icon.svg';
 import post_Icon_locked from '../../image/Icon/post_Icon_locked.svg';
 import { Link, useLocation, useParams } from 'react-router-dom';

src/Component/GroupCheck.tsx → src/Component/Routing/GroupCheck.tsx

@@ -1,7 +1,7 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { getCheckedJoined } from '../API/joinedMinds';
-import { getMindSingle } from '../API/Mind';
-import getToken from '../data/tocken';
+import { getCheckedJoined } from '../../API/joinedMinds';
+import { getMindSingle } from '../../API/Mind';
+import getToken from '../../data/tocken';
 const GroupCheck = ({
   component,
   sort,

src/Component/OAuthPage.tsx → src/Component/Routing/OAuthPage.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
-import { getIsLogined } from '../API/Users';
-import { NotFound } from '../AppBarral';
+import { getIsLogined } from '../../API/Users';
+import { NotFound } from '../../AppBarral';
 
 type OAuthPageProps = {
   component: JSX.Element;

src/Component/SignUp/Loginheader.tsx

@@ -1,5 +1,5 @@
 import { styled } from 'styled-components';
-import { Arrow_Left_B } from '../../Component/ArrowBarrel';
+import { Arrow_Left_B } from '../IconBarrel/ArrowBarrel';
 import { goBack } from '../Mission/GroupHeader';
 
 /** 2023-08-27 Loginheader.tsx - 로그인/회원가입 헤더 */

src/Component/UploadPost/CreateExampleImage.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { getExampleImage } from '../../API/Mind';
-import { Arrow_Down } from '../ArrowBarrel';
+import { Arrow_Down } from '../IconBarrel/ArrowBarrel';
 import defaultImage from '../../image/error-example-image.png';
 
 const CreateExampleImage = (): JSX.Element => {
@@ -46,7 +46,6 @@ const PostS = styled.article`
   gap: var(--height-gap);
   padding: 1rem;
   border-radius: 1rem;
-  margin: 0 1rem;
   color: var(--font-color1);
   background-color: var(--color-bg);
 `;

src/Component/UploadPost/UploadImage.tsx

@@ -26,9 +26,7 @@ const UploadImage = ({
       <UploadImageTitle />
       {imageUrl ? (
         <AddedImageS>
-          <ImageS>
-            <img src={imageUrl} alt='추가된 이미지' />
-          </ImageS>
+          <img src={imageUrl} alt='추가된 이미지' />
           <DeleteIcon className='delete_icon' onClick={handleDeleteIconClick} />
         </AddedImageS>
       ) : (
@@ -57,41 +55,31 @@ const UploadImageWrapperS = styled(UploadWrapperS)`
   }
 `;
 
-const AddedImageS = styled.div`
+const commonImageS = styled.label`
   width: 5rem;
   height: 5rem;
   position: relative;
 
-  .delete_icon {
-    position: absolute;
-    bottom: -7.14px;
-    right: -4.14px;
-  }
-`;
-
-const ImageS = styled.div`
-  width: 5rem;
-  height: 5rem;
-  border-radius: 0.625rem;
-  overflow: hidden;
-
   img {
     width: 5rem;
     height: 5rem;
-    object-fit: cover;
   }
 `;
 
-const UploadImageS = styled.label`
-  width: 5rem;
-  height: 5rem;
-  position: relative;
-
+const AddedImageS = styled(commonImageS)`
   img {
-    width: 5rem;
-    height: 5rem;
+    object-fit: cover;
+    border-radius: 0.625rem;
+  }
+
+  .delete_icon {
+    position: absolute;
+    bottom: -7.14px;
+    right: -4.14px;
   }
+`;
 
+const UploadImageS = styled(commonImageS)`
   .add_icon {
     position: absolute;
     bottom: -11.28px;

src/Component/UploadPost/UploadPostHeader.tsx

@@ -15,6 +15,7 @@ export default UploadPostHeader;
 const UploadPostHeaderS = styled(GroupHeaderContainerS)`
   justify-content: center;
   left: 0;
+  position: sticky;
 
   h1 {
     font-size: var(--header);

src/Page/GroupPage/Comment/Comment.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { CommentType } from '../../../API/Boards';
 import { GetUser } from '../GroupPageBarrel';
 import { deleteComment, deleteReply } from '../../../API/Comment';
-import DeleteModal from '../../../Component/DeleteModal';
+import DeleteModal from '../DeleteModal';
 import { useRecoilState } from 'recoil';
 import { isCommentInputFocused, refreshState } from '../../../data/initialData';
 

src/Page/GroupPage/Comment/CommentPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { Arrow_Left_B } from '../../../Component/ArrowBarrel';
+import { Arrow_Left_B } from '../../../Component/IconBarrel/ArrowBarrel';
 import { isCommentInputFocused } from '../../../data/initialData';
 import Bind from '../../../Type/Bind';
 import {

src/Component/DeleteModal.tsx → src/Page/GroupPage/DeleteModal.tsx

@@ -1,5 +1,5 @@
-import ConfirmModal from './ConfirmModal';
-import Bind from '../Type/Bind';
+import ConfirmModal from '../MyPage/ConfirmModal';
+import Bind from '../../Type/Bind';
 
 const DeleteModal = ({
   modalBind,

src/Page/GroupPage/Post/PostHeader.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { styled } from 'styled-components';
 import point3 from '../../../image/Icon/3point_icon.svg';
 import { PostProps } from '../PostPropsType';
-import DeleteModal from '../../../Component/DeleteModal';
+import DeleteModal from '../DeleteModal';
 import { deleteBoard } from '../../../API/Boards';
 import Bind from '../../../Type/Bind';
 import { refreshState } from '../../../data/initialData';

src/Page/LogIn/LoginBarrel.ts

@@ -5,6 +5,6 @@ import { useNavigate } from "react-router-dom";
 
 import { LogInS, LoginInputS } from "../../StyleComp/LoginInputS";
 import { SignClearBtnS } from "../../StyleComp/SignBtnS";
-import { Arrow_Right } from "../../Component/ArrowBarrel";
+import { Arrow_Right } from "../../Component/IconBarrel/ArrowBarrel";
 
 export {useEffect, useState, Link, styled, useNavigate, LogInS, LoginInputS, SignClearBtnS, Arrow_Right}

src/Page/MyPage/MypageBarrel.ts

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Arrow_Left_B } from '../../Component/ArrowBarrel';
+import { Arrow_Left_B } from '../../Component/IconBarrel/ArrowBarrel';
 import 기본프로필 from '../../image/예시사진모음/default_profile_W_MyPage.png';
 
 import Info_icon_B from '../../image/Icon/Info_icon_B.svg';
 import ArticleTab from '../../Component/ArticleTab';
 import { CurrentMind, EndMindList } from './MyPageMind';
 
-import ConfirmModal from '../../Component/ConfirmModal';
+import ConfirmModal from './ConfirmModal';
 import scrollTop from '../../Hooks/scrollTop';
 import { GetUser } from '../../Type/User';
 import { getMyList } from '../../API/Mind';

src/Page/UploadPost/UploadPost.tsx

@@ -177,8 +177,8 @@ const UploadPost = () => {
       <GroupArticleS passsort={'Create'}>
         <HeadLine getMindInfoData={getMindInfoData} passsort={'Create'} />
         <MissionRule getMindInfoData={getMindInfoData} passsort={'Create'} />
+        <CreateExampleImage />
       </GroupArticleS>
-      <CreateExampleImage />
       <DivideBaS />
       <CreateFormS onSubmit={handleFormSubmit}>
         {isLoading ? (
@@ -196,10 +196,7 @@ const UploadPost = () => {
             <UploadText initialText={INITIAL_TEXT} handleTextareaChange={handleTextareaChange} />
           </>
         )}
-
-        <SubmitButtonWrapperS>
-          <SubmitButtonCTA hasImage={image.file !== null} />
-        </SubmitButtonWrapperS>
+        <SubmitButtonCTA hasImage={image.file !== null} />
       </CreateFormS>
     </CreatePostS>
   );
@@ -218,19 +215,6 @@ const CreateFormS = styled.form`
   gap: 1rem;
 `;
 
-const SubmitButtonWrapperS = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: sticky;
-  bottom: 0;
-  background-color: #fff;
-
-  button {
-    width: 100%;
-  }
-`;
-
 const spin = keyframes`
   from {
     transform: rotate(0deg);