{
color={match(type)
.with("question-friend", () => colors.light_qwhite)
.with("add-question", () => colors.light_qblack)
- .exhaustive()}
+ .otherwise(() => colors.light_qwhite)}
placeholderColor={match(type)
.with("question-friend", () => colors.light_gray2)
.with("add-question", () => colors.light_qblack)
- .exhaustive()}
+ .otherwise(() => colors.light_qwhite)}
backgroundColor={match(type)
.with("question-friend", () => colors.light_gray3)
.with(
"add-question",
() => repeatQuestionColor[5 - (props.idx % 6)]
)
- .exhaustive()}
+ .otherwise(() => colors.light_qwhite)}
/>
{type === "add-question" && (
diff --git a/src/components/pages/home/BasicQuestion.tsx b/src/components/pages/home/BasicQuestion.tsx
index 0f57ea1..929ee35 100644
--- a/src/components/pages/home/BasicQuestion.tsx
+++ b/src/components/pages/home/BasicQuestion.tsx
@@ -1,8 +1,9 @@
"use client";
import Spacing from "src/components/Spacing";
import { colors } from "styles/theme";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
import { match } from "ts-pattern";
+import Text from "src/components/common/Text";
interface Props {
type: "pick-me" | "question";
@@ -18,21 +19,31 @@ const BasicQuestion = ({ type = "pick-me", ...props }: Props) => {
color={match(type)
.with("pick-me", () => colors.light_qwhite)
.with("question", () => colors.primary_qred)
- .exhaustive()}
+ .otherwise(() => colors.light_qwhite)}
>
-
+
+ 가장 더위를 잘 탈 것 같은 사람은?
+
-
+
+ 아직 9문제 남았어요!
+
{type === "question" && (
-
+
+
+ 계속하기
+
+
)}
@@ -55,20 +66,8 @@ const BasicQuestionInner = styled.div`
gap: 4px;
`;
-const Menu = styled.div`
- margin: auto 0;
-`;
-
-const TopText = styled.div``;
-
-const MiddleText = styled.div``;
-
-const BottomButton = styled.button`
- padding: 6px 16px;
-
- border: 0;
- border-radius: 5px;
- background-color: ${colors.Qwhite};
+const BottomButton = styled.div`
+ display: flex;
`;
export default BasicQuestion;
diff --git a/src/hooks/useDisplaySize.ts b/src/hooks/useDisplaySize.ts
index bf9dff3..46780b5 100644
--- a/src/hooks/useDisplaySize.ts
+++ b/src/hooks/useDisplaySize.ts
@@ -1,13 +1,13 @@
import { useEffect, useState } from "react";
export default function useDisplaySize() {
- const [width, setWidth] = useState(0);
- const [height, setHeight] = useState(0);
+ const [width, setWidth] = useState(0);
+ const [height, setHeight] = useState(0);
- useEffect(() => {
- setWidth(window.innerWidth);
- setHeight(window.innerHeight);
- }, []);
+ useEffect(() => {
+ setWidth(window.innerWidth > 600 ? 600 : window.innerWidth);
+ setHeight(window.innerHeight);
+ }, []);
- return { width, height };
+ return { width, height };
}
diff --git a/src/lib/registry.tsx b/src/lib/registry.tsx
index 8402d6f..e190c6e 100644
--- a/src/lib/registry.tsx
+++ b/src/lib/registry.tsx
@@ -11,10 +11,12 @@ export default function StyledComponentsRegistry({
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement();
+ // @ts-ignore
styledComponentsStyleSheet.instance.clearTag();
return <>{styles};
});