From fe607c2a74f8c32eda21ea1d0980c67653c35584 Mon Sep 17 00:00:00 2001
From: wisdom <52325199+Wisdom-Kim@users.noreply.github.com>
Date: Mon, 5 Aug 2024 15:28:28 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=EC=8B=A4=EC=A0=84=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EB=B0=8F=20=EC=8A=A4?=
 =?UTF-8?q?=ED=94=BC=EB=84=88=20UI=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/posts/EditorBox.js           |  1 +
 src/components/posts/EditorViewer.js        |  4 +++-
 src/pages/community/CommunityInfo.js        |  9 ++++++---
 src/pages/community/CommunityMain.js        | 10 +++++-----
 src/pages/community/CommunityQNA.js         | 11 +++++++----
 src/pages/interview/InterviewChoiceStack.js |  4 ++++
 src/pages/interview/PracticeChoiceStack.js  |  9 +++++----
 7 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/posts/EditorBox.js b/src/components/posts/EditorBox.js
index 09349d6..10a5048 100644
--- 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
index c0f209d..7fd55f1 100644
--- 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;
\ No newline at end of file
diff --git a/src/pages/community/CommunityInfo.js b/src/pages/community/CommunityInfo.js
index 152c96b..f6ac1e1 100644
--- 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
index 0af4f1d..f031ea8 100644
--- 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
index cfbcbc8..b1e89cf 100644
--- 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
index b9cd61a..949dcb8 100644
--- 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
index 7e96775..0ae8419 100644
--- 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`