Merge branch 'develop' into feature/#1

Qfeed-Dev · Aug 9, 2023 · 97c4d4a · 97c4d4a
2 parents c5016eb + d1a1b36
commit 97c4d4a
Show file tree

Hide file tree

Showing 12 changed files with 1,029 additions and 235 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
         "@types/styled-components": "^5.1.26",
         "autoprefixer": "10.4.14",
         "axios": "^1.4.0",
-        "eslint": "8.44.0",
         "eslint-config-next": "13.4.9",
         "framer-motion": "^10.15.0",
         "next": "13.4.9",
@@ -31,8 +30,9 @@
         "react-dom": "18.2.0",
         "react-stack-grid": "^0.7.1",
         "styled-components": "^5.3.10",
+        "swc": "^1.0.11",
         "tailwindcss": "3.3.2",
-        "ts-pattern": "^5.0.4",
+        "ts-pattern": "^5.0.1",
         "typescript": "5.1.6"
     },
     "eslintConfig": {
@@ -51,6 +51,9 @@
         "@storybook/react": "^7.1.0",
         "@storybook/testing-library": "^0.2.0",
         "@types/react-stack-grid": "^0.7.3",
+        "eslint": "^8.46.0",
+        "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-plugin-import": "^2.28.0",
         "eslint-plugin-storybook": "^0.6.13",
         "storybook": "^7.1.0"
     }

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -9,10 +9,8 @@ export default function App({ children }: { children: React.ReactNode }) {
 
     return (
         <StyledComponentsRegistry>
-            <Layout>
-                {children}
-                {visible && <BottomSheet />}
-            </Layout>
+            <Layout>{children}</Layout>
+            {visible ? <BottomSheet /> : null}
         </StyledComponentsRegistry>
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { Metadata } from "next";
 import { useRouter } from "next/navigation";
 import styled from "styled-components";
 import BottomNavigation from "src/components/BottomNavigation";
@@ -9,7 +8,6 @@ import HomeTitle from "src/components/pages/home/HomeTitle";
 import QfeedFrame from "src/components/pages/home/QfeedFrame";
 import Spacing from "src/components/Spacing";
 import { colors } from "styles/theme";
-import { globalValue } from "src/constants/globalValue";
 import { Route } from "src/constants/Route";
 import StackGrid from "react-stack-grid";
 import useDisplaySize from "src/hooks/useDisplaySize";
@@ -40,6 +38,7 @@ export default function Page() {
     const handleClickPlus = () => {
         router.push(Route.ADD_QUESTION());
     };
+    console.log(width);
 
     return (
         <>
@@ -83,7 +82,6 @@ export default function Page() {
 
 const HomeWrapper = styled.div`
     height: 100%;
-    padding: 0 16px;
 `;
 
 const FrameWrapper = styled.div`

diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -17,13 +17,13 @@ interface Props {
     children?: any;
 }
 
-const COMPONENT_HEIGHT = {
+const COMPONENT_HEIGHT: any = {
     report: 540 + 30,
     reportFriend: 331,
     coin: 324 + 30,
     friend: 325 + 60
 };
-const COMPONENT = {
+const COMPONENT: any = {
     report: <Report />,
     reportFriend: <ReportFriend />,
     coin: <Coin />,

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -21,11 +21,11 @@ const Button = forwardRef(function Button(
             color={match(type)
                 .with("primary", () => colors.light_qblack)
                 .with("secondary", () => colors.light_qwhite)
-                .exhaustive()}
+                .otherwise(() => colors.light_qblack)}
             backgroundColor={match(type)
                 .with("primary", () => colors.light_qwhite)
                 .with("secondary", () => colors.light_qblack)
-                .exhaustive()}
+                .otherwise(() => colors.light_qwhite)}
         >
             <Text typo="Subtitle1b" style={{ margin: "auto" }}>
                 {children}

diff --git a/src/components/Hr/Hr.tsx b/src/components/Hr/Hr.tsx
@@ -17,7 +17,7 @@ const Hr = ({ horizonal = false, type = "default", size = 1 }: Props) => {
             backgroundColor={match(type)
                 .with("primary", () => colors.light_qwhite)
                 .with("default", () => colors.line_black_5)
-                .exhaustive()}
+                .otherwise(() => colors.light_qwhite)}
         />
     );
 };

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -17,27 +17,27 @@ const Image = ({ src, type = "default", size, height, grayscale }: Props) => {
             width={match(type)
                 .with("background", () => "100%")
                 .with("default", () => size)
-                .exhaustive()}
+                .otherwise(() => "100%")}
             height={match(type)
-                .with("background", () => (height ? height : "100%"))
+                .with("background", () => (height ? height + "px" : "100%"))
                 .with("default", () => size)
-                .exhaustive()}
+                .otherwise(() => "100%")}
             ratio={match(type)
                 .with("background", () => "auto")
                 .with("default", () => 1)
-                .exhaustive()}
+                .otherwise(() => "auto")}
             radius={match(type)
                 .with("background", () => "0")
                 .with("default", () => "999px")
-                .exhaustive()}
+                .otherwise(() => "0")}
             style={{ filter: `grayscale(${grayscale}%)` }}
         />
     );
 };
 
 const ImageWrapper = styled.img<{
-    ratio: number;
-    radius: number;
+    ratio: any;
+    radius: any;
 }>`
     margin: auto;
 

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { colors, repeatQuestionColor, typo } from "styles/theme";
-import styled,{css} from "styled-components";
+import styled, { css } from "styled-components";
 import { match } from "ts-pattern";
 import { Text } from "../common/Text";
 
@@ -14,33 +14,33 @@ const Input = ({ type = "question-friend", ...props }: any) => {
             radius={match(type)
                 .with("question-friend", () => 48)
                 .with("add-question", () => 10)
-                .exhaustive()}
+                .otherwise(() => 48)}
             backgroundColor={match(type)
                 .with("question-friend", () => colors.light_gray3)
                 .with(
                     "add-question",
                     () => repeatQuestionColor[5 - (props.idx % 6)]
                 )
-                .exhaustive()}
+                .otherwise(() => () => colors.light_gray3)}
         >
             <InputInner>
                 <InputBox
                     placeholder="내 친구의 이름을 검색해보세요."
                     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)}
                 />
                 <div style={{ display: "flex", margin: "auto" }}>
                     {type === "add-question" && (

diff --git 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)}
             >
                 <BasicQuestionInner>
-                    <Menu>
-                        <TopText>가장 더위를 잘 탈거 같은 사람은?</TopText>
-                    </Menu>
+                    <Text typo="Headline2b" color="light_qblack">
+                        가장 더위를 잘 탈 것 같은 사람은?
+                    </Text>
 
-                    <Menu>
-                        <MiddleText>아직 9문제 남았어요!</MiddleText>
-                    </Menu>
+                    <Text typo="Caption1r" color="light_qblack">
+                        아직 9문제 남았어요!
+                    </Text>
 
                     {type === "question" && (
-                        <Menu>
-                            <BottomButton>계속하기</BottomButton>
-                        </Menu>
+                        <BottomButton>
+                            <Text
+                                typo="Caption1b"
+                                color="light_qblack"
+                                style={{
+                                    padding: "6px 16px",
+                                    borderRadius: 5,
+                                    backgroundColor: colors.light_qwhite
+                                }}
+                            >
+                                계속하기
+                            </Text>
+                        </BottomButton>
                     )}
                 </BasicQuestionInner>
             </BasicQuestionWrapper>
@@ -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
@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
 
 export default function useDisplaySize() {
-  const [width, setWidth] = useState<number>(0);
-  const [height, setHeight] = useState<number>(0);
+    const [width, setWidth] = useState<number>(0);
+    const [height, setHeight] = useState<number>(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
@@ -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}</>;
     });