Fix:실전모드 버튼 클릭 및 스피너 UI추가

Jr-YongFill · Aug 5, 2024 · fe607c2 · fe607c2
1 parent d86f8f6
commit fe607c2
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 17 deletions.
diff --git a/src/components/posts/EditorBox.js b/src/components/posts/EditorBox.js
@@ -32,6 +32,7 @@ const EditorBox = forwardRef((props, ref) => {
         placeholder="내용을 적어주세요!"
         previewStyle="vertical"
         height="600px"
+        initialEditType="wysiwyg"
         useCommandShortcut={true}
         language="ko-KR"
         ref={ref}

diff --git a/src/components/posts/EditorViewer.js b/src/components/posts/EditorViewer.js
@@ -3,7 +3,9 @@ import { Viewer } from '@toast-ui/react-editor';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 
 function EditorViewer({ contents }) {
-  return <Viewer initialValue={contents || ''} />;
+  return <Viewer 
+        initialValue={contents || ''} 
+  />;
 }
 
 export default EditorViewer;
diff --git a/src/pages/community/CommunityInfo.js b/src/pages/community/CommunityInfo.js
@@ -11,6 +11,7 @@ import GlassCard from "../../components/GlassCard";
 import PageButtonController from '../../components/PageButtonController';
 import GlassModal from "../../components/modal/GlassModal";
 import GlassInput from '../../components/GlassInput';
+import { CircularProgress } from '@mui/material';
 
 const Title = styled.div`
   display: flex;
@@ -139,10 +140,10 @@ const CommunityQNA = () => {
             </MainHeader>
             <MainBody>
               <MainContent>
-                {data &&
+                {data ?(
                   data.resultList.map((post, idx) => (
                     <GlassCard 
-                      width={"60vw"}
+                      width={"58vw"}
                       key={idx}
                       onClick={
                         () => navigate(`/post/${post.postId}`)}>
@@ -152,7 +153,9 @@ const CommunityQNA = () => {
                         <span>작성일 : {formatDate(post.createTime)}</span>
                       </PostDetails>
                     </GlassCard>
-                  ))
+                  ))):(
+                    <CircularProgress color="secondary" />
+                  )
                 }
               </MainContent>
               <PageButtonController

diff --git a/src/pages/community/CommunityMain.js b/src/pages/community/CommunityMain.js
@@ -12,10 +12,10 @@ import Block from '../../components/Block';
 import NPGlassCard from '../../components/NoPaddingGlassCard';
 import GlassTitle from '../../components/GlassTitle';
 import GlassModal from "../../components/modal/GlassModal";
+import { CircularProgress } from '@mui/material';
 
 const ContainerWrapper = styled.div`
   width:60vw;
-
 `
 
 const ContainerRow = styled.div`
@@ -203,14 +203,14 @@ const CommunityMain = () => {
                   <a href='/community/qna' style={{ color: palette.gray, textDecorationLine: 'none' }}>+ 더보기</a>
                 </GlassTitle>
                 <ul style={{ padding: '3vh 0', margin: '0 3vw' }}>
-                  {qnaData ?
+                  {qnaData[0] ?
                     (qnaData.map((data, idx) => {
                       return (
                         <CustomLi key={idx} data={data}></CustomLi>
                       )
                     }))
                     :
-                    (<div>게시글이 없네요!</div>)
+                    (<CircularProgress color="secondary" />)
                   }
                 </ul>
               </NPGlassCard>
@@ -224,14 +224,14 @@ const CommunityMain = () => {
                   <a href='/community/info' style={{ color: palette.gray, textDecorationLine: 'none' }}>+ 더보기</a>
                 </GlassTitle>
                 <ul style={{ padding: '3vh 0', margin: '0 3vw' }}>
-                  {infoData ?
+                  {infoData[0] ?
                     (infoData.map((data, idx) => {
                       return (
                         <CustomLi key={idx} data={data}></CustomLi>
                       )
                     }))
                     :
-                    (<div>게시글이 없네요!</div>)
+                    (<CircularProgress color="secondary" />)
                   }
                 </ul>
               </NPGlassCard>

diff --git a/src/pages/community/CommunityQNA.js b/src/pages/community/CommunityQNA.js
@@ -10,6 +10,7 @@ import GlassCard from "../../components/GlassCard";
 import PageButtonController from '../../components/PageButtonController';
 import GlassModal from "../../components/modal/GlassModal";
 import GlassInput from '../../components/GlassInput';
+import { CircularProgress } from '@mui/material';
 
 const Title = styled.div`
   display: flex;
@@ -141,11 +142,11 @@ const CommunityQNA = () => {
               </CustomButton>
             </MainHeader>
             <MainBody>
-              <MainContent>
-                {data &&
+            <MainContent>
+                {data ?(
                   data.resultList.map((post, idx) => (
                     <GlassCard 
-                      width={"60vw"}
+                      width={"58vw"}
                       key={idx}
                       onClick={
                         () => navigate(`/post/${post.postId}`)}>
@@ -155,7 +156,9 @@ const CommunityQNA = () => {
                         <span>작성일 : {formatDate(post.createTime)}</span>
                       </PostDetails>
                     </GlassCard>
-                  ))
+                  ))):(
+                    <CircularProgress color="secondary" />
+                  )
                 }
               </MainContent>
               <PageButtonController

diff --git a/src/pages/interview/InterviewChoiceStack.js b/src/pages/interview/InterviewChoiceStack.js
@@ -84,6 +84,8 @@ const InterviewChoiceStack = () => {
     fetchMemberStack();
   }, [fetchMemberStack]);
 
+
+
   const handleButtonClick = (stack) => {
     if (stack.isPurchase) {
       setStacks(stacks.map((s) =>
@@ -116,6 +118,8 @@ const InterviewChoiceStack = () => {
                     width={"150px"}
                     key={idx}
                     onClick={() => handleButtonClick(stack)}
+                    color={stack.selected
+                      ? (palette.purple): ( palette.dark)}
                   >
                     {stack.stackName}
                   </CustomButton>

diff --git a/src/pages/interview/PracticeChoiceStack.js b/src/pages/interview/PracticeChoiceStack.js
@@ -29,10 +29,11 @@ const Main = styled.div`
 `;
 
 const Content = styled.div`
-  display: grid;
-  margin: 20px 20px;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-gap: 30px;
+  display: flex;
+  justify-content:space-evenly;
+  flex-wrap: wrap;
+  margin: 20px 10vw;
+  gap: 5px;
 `;
 
 const ModalContent = styled.div`