fix: iphone 에서 CSS 오류 해결 connect-foundation#428

아이폰 환경에서 질문 카드가 옆으로도 밀림 guest-app 의 App.js 최상단에 overflow:hidden 아이폰 환경에서 질문 카드가 옆으로도 밀림 guest-app 의 QuestionContainer 최상단에 overflow-y: scroll 해당 CSS 적용으로 인해 reply 의 스크롤바가 먹지 않아 reply 에서 Scrollbar 를 사용하였고, 이로인해 x축으로도 밀리게 되어 명시적으로 overflow-y:scroll 을 자식 컴포넌트에 적용함
teihong93 · Dec 16, 2019 · 122f1e4 · 122f1e4
1 parent d94a1ea
commit 122f1e4
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 43 deletions.
diff --git a/frontend/guest-app/src/App/App.css b/frontend/guest-app/src/App/App.css
@@ -1,3 +1,8 @@
+/*아이폰*/
+*, *::before, *::after{
+	overflow: hidden;
+}
+
 .App {
 	text-align: center;
 }

diff --git a/...Question/QuestionInputArea/PaddingArea.js → ...components/CommonComponent/PaddingArea.js b/...Question/QuestionInputArea/PaddingArea.js → ...components/CommonComponent/PaddingArea.js
@@ -8,4 +8,4 @@ const style = {
 
 export default function PaddingArea() {
 	return <Box p={24} style={style} />;
-}
+}
diff --git a/frontend/guest-app/src/components/Question/MyQuestionDrawer.js b/frontend/guest-app/src/components/Question/MyQuestionDrawer.js
@@ -6,7 +6,7 @@ import AppDrawer from "../AppDrawer/AppDrawer.js";
 import {useQuestions} from "./QuestionsContext.js";
 import QuestionCardList from "./QuestionCard/QuestionCardList.js";
 import {GuestGlobalContext} from "../../libs/guestGlobalContext.js";
-import PaddingArea from "./QuestionInputArea/PaddingArea.js";
+import PaddingArea from "../CommonComponent/PaddingArea.js";
 
 const fullSizeCardStyle = {
 	width: "100vw",

diff --git a/frontend/guest-app/src/components/Question/QuestionContainer.js b/frontend/guest-app/src/components/Question/QuestionContainer.js
@@ -1,21 +1,25 @@
 import React, {useRef} from "react";
+import styled from "styled-components";
 import QuestionContainerTabBar from "./QuestionContainerTabBar.js";
 import useTabs from "../../materialUIHooks/useTabs.js";
 import AddQuestionInputButton from "./QuestionInputArea/AddQuestionInputButton.js";
 import QuestionCardList from "./QuestionCard/QuestionCardList.js";
 import {socketClient} from "../../libs/socketIoClientProvider.js";
-import PaddingArea from "./QuestionInputArea/PaddingArea.js";
+import PaddingArea from "../CommonComponent/PaddingArea.js";
 import QuestionEditMenuDrawer from "./QuestionCard/QuestionEditMenuDrawer.js";
 import NewQuestionInputDrawer from "./NewQuestionInputDrawer.js";
 import EditQuestionInputDrawer from "./EditQuestionInputDrawer.js";
 import {useUIControllerContext} from "../UIController/UIController.js";
 import {useQuestions} from "./QuestionsContext.js";
-
 import MyQuestionsDrawer from "./MyQuestionDrawer.js";
 
 const RECENT_TAB_IDX = 1;
 const POPULAR_TAB_IDX = 2;
 
+const QuestionContainerStyle = styled.div`
+	overflow-y:scroll;
+`;
+
 function QuestionContainer() {
 	const {dispatch, questions, replies} = useQuestions();
 
@@ -42,7 +46,7 @@ function QuestionContainer() {
 	};
 
 	return (
-		<>
+		<QuestionContainerStyle>
 			<QuestionContainerTabBar
 				tabIdx={tabIdx}
 				onSelectTab={onContainerSelectTab}
@@ -84,7 +88,7 @@ function QuestionContainer() {
 					myQuestionDrawerReducer.setOff();
 				}}
 			/>
-		</>
+		</QuestionContainerStyle>
 	);
 }
 

diff --git a/frontend/guest-app/src/components/Reply/RepliesContainer.js b/frontend/guest-app/src/components/Reply/RepliesContainer.js
@@ -1,34 +1,35 @@
 import React from "react";
-import Box from "@material-ui/core/Box";
-import {styled} from "@material-ui/core/styles";
-import AppDrawNavBar from "../AppDrawer/AppDrawerNavBar";
+import styled from "styled-components";
+import {Scrollbars} from "react-custom-scrollbars"
 import PreviewQuestion from "./PreviewQuestion";
 import RepliesList from "./RepliesList";
 import ReplyQuestionDivider from "./ReplyQuestionDivider";
 import ReplyInputContainer from "./ReplyInputContainer";
+import PaddingArea from "../CommonComponent/PaddingArea";
 
-const Container = styled(Box)({
-	display: "flex",
-	flexDirection: "column",
-	position: "absolute",
-	top: "4rem",
-	width: "99%",
-});
+const RepliesContainerStyle = styled.div`
+	overflow-y:scroll;
+`;
 
 function RepliesContainer(props) {
-	const {onClose} = props;
+	const fullScreen = {
+		width: "100vw",
+		height: "100vh",
+	};
 
 	return (
-		<Container>
-			<AppDrawNavBar onClick={onClose} title="답글" />
-			<PreviewQuestion {...props} />
-			<ReplyQuestionDivider
-				{...props}
-				style={{marginTop: "0.5rem", marginBottom: "0.5rem"}}
-			/>
-			<RepliesList {...props} />
-			<ReplyInputContainer {...props} />
-		</Container>
+		<Scrollbars style={fullScreen}>
+			<RepliesContainerStyle>
+				<PreviewQuestion {...props} />
+				<ReplyQuestionDivider
+					{...props}
+					style={{marginTop: "0.5rem", marginBottom: "0.5rem"}}
+				/>
+				<RepliesList {...props} />
+				<ReplyInputContainer {...props} />
+				<PaddingArea/>
+			</RepliesContainerStyle>
+		</Scrollbars>
 	);
 }
 

diff --git a/frontend/guest-app/src/components/Reply/RepliesPaper.js b/frontend/guest-app/src/components/Reply/RepliesPaper.js
@@ -1,20 +1,10 @@
 import React from "react";
-import {styled} from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
 import RepliesContainer from "./RepliesContainer";
 
-const StyledPaper = styled(Paper)({
-	width: "100vw",
-	height: "100vh",
-	position: "relative",
-});
-
 function RepliesPaper(props) {
 	return (
 		<>
-			<StyledPaper>
-				<RepliesContainer {...props} />
-			</StyledPaper>
+			<RepliesContainer {...props} />
 		</>
 	);
 }

diff --git a/frontend/guest-app/src/components/Reply/ReplyArea.js b/frontend/guest-app/src/components/Reply/ReplyArea.js
@@ -2,13 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import {styled} from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
-import Drawer from "@material-ui/core/Drawer";
 import ReplyAvatar from "./ReplyAvatar";
 import RepliesPaper from "./RepliesPaper";
 import AddReplyRow from "./AddReplyRow";
 import useReplies from "./useReplies";
 
 import CurrentRepliesTextField from "./CurrentRepliesTextField";
+import AppDrawer from "../AppDrawer/AppDrawer";
 
 const MAX_SHOWING_AVATAR = 5;
 const PreviewReplyContainer = styled(Paper)({
@@ -66,9 +66,9 @@ export default function ReplyArea(props) {
 			) : (
 				<AddReplyRow openReplies={openReplies}></AddReplyRow>
 			)}
-			<Drawer anchor="bottom" open={repliesIsOpened}>
-				<RepliesPaper onClose={closeReplies} {...props} />
-			</Drawer>
+			<AppDrawer anchor="bottom" isOpen={repliesIsOpened} onClose={closeReplies}>
+				<RepliesPaper {...props} />
+			</AppDrawer>
 		</>
 	);
 }

diff --git a/frontend/guest-app/src/libs/socketIoClientProvider.js b/frontend/guest-app/src/libs/socketIoClientProvider.js
@@ -58,7 +58,7 @@ export function SocketIoClientProvider(props) {
 	const emit = socketClient.emit;
 
 	return (
-		<context.Provider value={{socketClient, emit}}>${children}</context.Provider>
+		<context.Provider value={{socketClient, emit}} >${children}</context.Provider>
 	);
 }