Merge pull request #2 from haeyonghahn/feature/#1

Feature/#1
haeyonghahn · May 20, 2024 · 29a3485 · 29a3485
2 parents c89ab27 + 36bdfb2
commit 29a3485
Show file tree

Hide file tree

Showing 23 changed files with 651 additions and 326 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,34 +9,66 @@ const GlobalStyle = createGlobalStyle`
   * {
     box-sizing: border-box;
   }
+
   body {
     margin: 0;
     background-color: ${(props) => props.theme.bgColor};
     color: ${(props) => props.theme.textColor};
+    font-family: 'Pretendard';
+    font-style: normal
   }
+
   ul {
     margin: 0;
     padding: 0;
   }
+
   .label {
     font-size: 1.5em;
     padding: 0.5em;
     width: 100%;
   }
+
   .non-logged-in-body {
     margin: 0 auto;
-    width: 60%;
-    padding: 150px 20px;
+    height: 100vh;
+    width: 100%;
+    max-width: 500px;
+    padding: 40px 20px;
   }
+
   .general-layout {
+    margin: 0 auto;
     height: 100vh;
+    width: 100%;
+    max-width: 500px;
     display: flex;
+    align-items: center;
   }
 
   .general-layout__body {
     margin: 0 auto;
-    width: 800px;
-    padding: 80px 20px;
+    height: 100vh;
+    width: 100%;
+    max-width: 500px;
+  }
+
+  @media (min-width: 500px) {
+    body {
+      background-color: #f0f0f0;
+    }
+
+    .non-logged-in-body {
+      background-color: ${(props) => props.theme.bgColor};
+    }
+
+    .general-layout {
+      background-color: ${(props) => props.theme.bgColor};
+    }
+
+    .general-layout__body {
+      background-color: ${(props) => props.theme.bgColor};
+    }
   }
 `;
 

diff --git a/src/_shared/colors/colors.ts b/src/_shared/colors/colors.ts
@@ -28,6 +28,7 @@ const colors = {
   gray400: "#ADB5BD",
   gray500: "#868E96",
   gray600: "#4A5056",
+  gray650: "#575860",
   gray700: "#3D4248",
   gray800: "#31363B",
   gray850: "#282932",

diff --git a/src/_shared/icons/index.ts b/src/_shared/icons/index.ts
@@ -1,3 +1,4 @@
 export { default as social } from "./social";
 export { default as icons } from "./basic";
 export { default as avatar } from "./avatar";
+export { default as sidebar } from "./sidebar";
diff --git a/src/_shared/icons/sidebar.tsx b/src/_shared/icons/sidebar.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { colors } from "../colors";
+import { useRouter } from "@/hooks/useRouter";
+
+interface IBasicProps {
+  [key: string]: () => JSX.Element;
+}
+
+const sidebar: IBasicProps = {
+  mygooding: (): JSX.Element => {
+    const [color, setColor] = useState(colors.gray650);
+    const { currentPath } = useRouter();
+
+    const handleColor = () => {
+      if (currentPath === "/my/record") {
+        setColor(colors.white);
+      } else {
+        setColor(colors.gray650);
+      }
+    };
+    useEffect(() => {
+      console.log("/my/record");
+      handleColor();
+    });
+    return (
+      <>
+        <svg
+          width="20"
+          height="21"
+          viewBox="0 0 20 21"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="10" cy="5" r="5" fill={color} />
+          <path
+            d="M0 19C0 15.6863 2.68629 13 6 13H14C17.3137 13 20 15.6863 20 19V20C20 20.5523 19.5523 21 19 21H1C0.447715 21 0 20.5523 0 20V19Z"
+            fill={color}
+          />
+        </svg>
+      </>
+    );
+  },
+  record: (): JSX.Element => {
+    const [color, setColor] = useState(colors.gray650);
+    const { currentPath } = useRouter();
+
+    const handleColor = () => {
+      if (currentPath === "/record") {
+        setColor(colors.white);
+      } else {
+        setColor(colors.gray650);
+      }
+    };
+    useEffect(() => {
+      console.log("/record");
+      handleColor();
+    });
+    return (
+      <>
+        <svg
+          width="21"
+          height="20"
+          viewBox="0 0 21 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clipPath="url(#clip0_3737_22116)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M10.5 20C16.0228 20 20.5 15.5228 20.5 10C20.5 4.47715 16.0228 0 10.5 0C4.97715 0 0.5 4.47715 0.5 10C0.5 15.5228 4.97715 20 10.5 20ZM10.0398 5.01334C10.2182 4.62059 10.7768 4.62283 10.952 5.017L12.2622 7.96485C12.3123 8.07762 12.4023 8.16786 12.515 8.21823L15.4791 9.54355C15.8737 9.71996 15.8737 10.28 15.4791 10.4565L12.515 11.7818C12.4023 11.8321 12.3123 11.9224 12.2622 12.0351L10.952 14.983C10.7768 15.3772 10.2182 15.3794 10.0398 14.9867L8.69787 12.0315C8.64768 11.921 8.55899 11.8325 8.44835 11.7825L5.50943 10.4557C5.11707 10.2786 5.11707 9.72142 5.50943 9.54429L8.44835 8.21749C8.55899 8.16754 8.64768 8.07905 8.69787 7.96852L10.0398 5.01334Z"
+              fill={color}
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_3737_22116">
+              <rect
+                width="20"
+                height="20"
+                fill={color}
+                transform="translate(0.5)"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+      </>
+    );
+  },
+  feed: (): JSX.Element => {
+    const [color, setColor] = useState(colors.gray650);
+    const { currentPath } = useRouter();
+
+    const handleColor = () => {
+      if (currentPath === "/feed") {
+        setColor(colors.white);
+      } else {
+        setColor(colors.gray650);
+      }
+    };
+    useEffect(() => {
+      console.log("/feed");
+      handleColor();
+    });
+    return (
+      <>
+        <svg
+          width="19"
+          height="18"
+          viewBox="0 0 19 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect x="0.5" width="18" height="3" rx="1" fill={color} />
+          <rect x="0.5" y="15" width="18" height="3" rx="1" fill={color} />
+          <rect x="0.5" y="5" width="18" height="8" rx="1" fill={color} />
+        </svg>
+      </>
+    );
+  },
+};
+
+export default sidebar;
diff --git a/src/_shared/typography/fontWeight.ts b/src/_shared/typography/fontWeight.ts
@@ -1,7 +1,8 @@
 const fontWeight = {
-  regular: "400",
-  semiBoldRegular: "500",
-  semiBold: "600",
+  regular: 400,
+  semiBoldRegular: 500,
+  semiBold: 600,
+  bold: 700,
 };
 
 export default fontWeight;
diff --git a/src/components/Button/Button.styled.tsx b/src/components/Button/Button.styled.tsx
@@ -1,6 +1,6 @@
 import loadings from "@/_shared/animations/loadings";
 import { colors } from "@/_shared/colors";
-import { fontSize } from "@/_shared/typography";
+import { fontSize, fontWeight } from "@/_shared/typography";
 import styled, { css } from "styled-components";
 
 interface ILayoutProps {
@@ -28,7 +28,7 @@ export const Layout = styled.button<ILayoutProps>`
   color: "#1C1D27";
   font-family: "Pretendard";
   font-style: normal;
-  font-weight: 700;
+  font-weight: ${fontWeight.bold};
   font-size: ${fontSize.h3};
   text-align: center;
   text-decoration: none;

diff --git a/src/components/OnboardCard/OnboardCard.styled.tsx b/src/components/OnboardCard/OnboardCard.styled.tsx
@@ -32,7 +32,7 @@ const hoverColor: CardProps = {
 
 export const Layout = styled.div<IILayoutProps>`
   position: relative;
-  width: fit-content;
+  width: 90%;
   text-align: center;
   flex-direction: column;
   align-items: center;
@@ -41,7 +41,6 @@ export const Layout = styled.div<IILayoutProps>`
   display: flex;
   user-select: none;
   cursor: pointer;
-  height: 100px;
   justify-content: center;
   ${(props) =>
     props.disabled
@@ -65,10 +64,9 @@ export const Layout = styled.div<IILayoutProps>`
 `;
 
 export const Title = styled.div<ITitleProps>`
-  min-width: 240px;
-  min-height: ${fontSize.h1};
+  width: 100%;
   font-weight: ${fontWeight.semiBold};
   font-size: ${fontSize.h1};
   color: ${(props) => textColor[props.theme]};
-  margin-top: 5px;
+  margin: 5px 10px 5px 10px;
 `;
diff --git a/src/components/OnboardCard/OnboardCard.tsx b/src/components/OnboardCard/OnboardCard.tsx
@@ -4,13 +4,18 @@ import { useRecoilState } from "recoil";
 import { useEffect, useState } from "react";
 import { interestAtom } from "@/atoms/user";
 import { InterestElement } from "@/types/user";
+import styled from "styled-components";
 
 interface ICardProps extends ImageBoxElement {
   interestCode: string;
   title: string;
   disabled?: boolean;
 }
 
+const OnboardCardContent = styled.div`
+  /* padding-top: 5%; */
+`;
+
 const OnboardCard = ({
   interestCode,
   icon,
@@ -63,13 +68,15 @@ const OnboardCard = ({
         className={className}
         disabled={disabled}
       >
+        {/* <OnboardCardContent> */}
         <Icon
           icon={icon}
           minX="10"
           minY="10"
           viewBoxWidth="30"
           viewBoxHeight="30"
         />
+        {/* </OnboardCardContent> */}
         <Title theme={theme}>{title}</Title>
       </Layout>
     </>

diff --git a/src/components/Spinner/Spinner.styled.tsx b/src/components/Spinner/Spinner.styled.tsx
@@ -1,12 +1,7 @@
 import { motion } from "framer-motion";
 import styled from "styled-components";
 
-export const Container = styled.div`
-  display: grid;
-  place-items: center;
-  min-height: 90vh;
-  align-content: center;
-`;
+export const Container = styled.div``;
 
 export const Svg = styled(motion.svg)`
   display: block;

diff --git a/src/foundations/IconSocial/IconSocial.tsx b/src/foundations/IconSocial/IconSocial.tsx
@@ -1,4 +1,5 @@
 import { Svg } from "./IconSocial.styled";
+
 interface IconSocialProps {
   icon: JSX.Element;
 }

diff --git a/src/foundations/Typography/Typography.styled.ts b/src/foundations/Typography/Typography.styled.ts
@@ -5,6 +5,10 @@ interface ITextProps {
   [key: string]: string;
 }
 
+interface ITextWeightProps {
+  [key: string]: number;
+}
+
 interface IText {
   type: string;
   textover?: string;
@@ -21,7 +25,7 @@ const textSize: ITextProps = {
   body2: fontSize.body2,
 };
 
-const textWeight: ITextProps = {
+const textWeight: ITextWeightProps = {
   h0: fontWeight.semiBold,
   h1: fontWeight.semiBold,
   h2: fontWeight.semiBold,
@@ -37,10 +41,13 @@ const textWeight: ITextProps = {
 export const Text = styled.div<IText>`
   font-weight: ${(props) => textWeight[props.type]};
   font-size: ${(props) => textSize[props.type]};
-  ${(props) => props.textover === "true" ? css`
-    width: ${props.textoverwidth};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  ` : ""}
+  ${(props) =>
+    props.textover === "true"
+      ? css`
+          width: ${props.textoverwidth};
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        `
+      : ""}
 `;
diff --git a/src/layout/GeneralLayoutProps.tsx → src/layout/GeneralLayout.tsx b/src/layout/GeneralLayoutProps.tsx → src/layout/GeneralLayout.tsx
@@ -42,14 +42,27 @@ const GeneralLayout: React.FC<GeneralLayoutProps> = ({
     fetchUserProfile();
   }, []);
 
-  if (!userProfile?.id) return <Spinner />;
+  if (!userProfile?.id) {
+    return (
+      <div className="general-layout">
+        <div className="general-layout__body">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="general-layout">
       {withSidebar ? (
-        <Sidebar sidebarContent={SidebarContent} userProfile={userProfile} />
-      ) : null}
-      <div className="general-layout__body">{children}</div>
+        <Sidebar
+          children={children}
+          sidebarContent={SidebarContent}
+          userProfile={userProfile}
+        />
+      ) : (
+        <div className="general-layout__body">{children}</div>
+      )}
     </div>
   );
 };