diff --git a/src/AppBarral.ts b/src/AppBarral.ts index d5bf766b..68a95fd9 100644 --- a/src/AppBarral.ts +++ b/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'; diff --git a/src/Component/ArrowBarrel.ts b/src/Component/ArrowBarrel.ts deleted file mode 100644 index 74ebd759..00000000 --- a/src/Component/ArrowBarrel.ts +++ /dev/null @@ -1,7 +0,0 @@ -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 }; diff --git a/src/Component/CTA/CTAContainer.tsx b/src/Component/CTA/CTAContainer.tsx index 166c8e2c..d5ac72b4 100644 --- a/src/Component/CTA/CTAContainer.tsx +++ b/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 ( - - 인증하기 - + + + 인증하기 + + ); }; @@ -80,11 +82,11 @@ const ErrorCTA = (): JSX.Element => { const navigate = useNavigate(); return ( - + navigate('/')}> 메인으로 - + ); }; @@ -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; diff --git a/src/Component/IconBarrel/ArrowBarrel.ts b/src/Component/IconBarrel/ArrowBarrel.ts new file mode 100644 index 00000000..2a95d3dd --- /dev/null +++ b/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 }; diff --git a/src/Component/Like_CommentBarrel.ts b/src/Component/IconBarrel/Like_CommentBarrel.ts similarity index 100% rename from src/Component/Like_CommentBarrel.ts rename to src/Component/IconBarrel/Like_CommentBarrel.ts diff --git a/src/Component/Mission/GroupArticle.tsx b/src/Component/Mission/GroupArticle.tsx index 2f0bd8be..a43e181b 100644 --- a/src/Component/Mission/GroupArticle.tsx +++ b/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; diff --git a/src/Component/Mission/GroupHeader.tsx b/src/Component/Mission/GroupHeader.tsx index 07a6c36d..73090f02 100644 --- a/src/Component/Mission/GroupHeader.tsx +++ b/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'; diff --git a/src/Component/GroupCheck.tsx b/src/Component/Routing/GroupCheck.tsx similarity index 87% rename from src/Component/GroupCheck.tsx rename to src/Component/Routing/GroupCheck.tsx index 8c9463c0..12b37446 100644 --- a/src/Component/GroupCheck.tsx +++ b/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, diff --git a/src/Component/OAuthPage.tsx b/src/Component/Routing/OAuthPage.tsx similarity index 92% rename from src/Component/OAuthPage.tsx rename to src/Component/Routing/OAuthPage.tsx index 150029da..1a470131 100644 --- a/src/Component/OAuthPage.tsx +++ b/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; diff --git a/src/Component/SignUp/Loginheader.tsx b/src/Component/SignUp/Loginheader.tsx index 18fb36f0..6c82a8f0 100644 --- a/src/Component/SignUp/Loginheader.tsx +++ b/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 - 로그인/회원가입 헤더 */ diff --git a/src/Component/UploadPost/CreateExampleImage.tsx b/src/Component/UploadPost/CreateExampleImage.tsx index c6583e12..48ffd3b7 100644 --- a/src/Component/UploadPost/CreateExampleImage.tsx +++ b/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); `; diff --git a/src/Component/UploadPost/UploadImage.tsx b/src/Component/UploadPost/UploadImage.tsx index 7fd8d1c8..c06044a5 100644 --- a/src/Component/UploadPost/UploadImage.tsx +++ b/src/Component/UploadPost/UploadImage.tsx @@ -26,9 +26,7 @@ const UploadImage = ({ {imageUrl ? ( - - 추가된 이미지 - + 추가된 이미지 ) : ( @@ -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; diff --git a/src/Component/UploadPost/UploadPostHeader.tsx b/src/Component/UploadPost/UploadPostHeader.tsx index d5ddf9d9..d29deeb7 100644 --- a/src/Component/UploadPost/UploadPostHeader.tsx +++ b/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); diff --git a/src/Page/GroupPage/Comment/Comment.tsx b/src/Page/GroupPage/Comment/Comment.tsx index eccaecc9..468213ef 100644 --- a/src/Page/GroupPage/Comment/Comment.tsx +++ b/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'; diff --git a/src/Page/GroupPage/Comment/CommentPage.tsx b/src/Page/GroupPage/Comment/CommentPage.tsx index d8df5aaa..bee638ab 100644 --- a/src/Page/GroupPage/Comment/CommentPage.tsx +++ b/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 { diff --git a/src/Component/DeleteModal.tsx b/src/Page/GroupPage/DeleteModal.tsx similarity index 83% rename from src/Component/DeleteModal.tsx rename to src/Page/GroupPage/DeleteModal.tsx index 67cefd27..764ad542 100644 --- a/src/Component/DeleteModal.tsx +++ b/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, diff --git a/src/Page/GroupPage/Post/PostHeader.tsx b/src/Page/GroupPage/Post/PostHeader.tsx index ae9664b0..523e09ba 100644 --- a/src/Page/GroupPage/Post/PostHeader.tsx +++ b/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'; diff --git a/src/Page/LogIn/LoginBarrel.ts b/src/Page/LogIn/LoginBarrel.ts index ec2f5f75..d919a5da 100644 --- a/src/Page/LogIn/LoginBarrel.ts +++ b/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} diff --git a/src/Component/ConfirmModal.tsx b/src/Page/MyPage/ConfirmModal.tsx similarity index 100% rename from src/Component/ConfirmModal.tsx rename to src/Page/MyPage/ConfirmModal.tsx diff --git a/src/Page/MyPage/MypageBarrel.ts b/src/Page/MyPage/MypageBarrel.ts index b86d357b..7c909f2e 100644 --- a/src/Page/MyPage/MypageBarrel.ts +++ b/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'; diff --git a/src/Page/UploadPost/UploadPost.tsx b/src/Page/UploadPost/UploadPost.tsx index 32a79809..ebda4813 100644 --- a/src/Page/UploadPost/UploadPost.tsx +++ b/src/Page/UploadPost/UploadPost.tsx @@ -177,8 +177,8 @@ const UploadPost = () => { + - {isLoading ? ( @@ -196,10 +196,7 @@ const UploadPost = () => { )} - - - - + ); @@ -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);