Merge branch 'develop' into 13-layout-component

package.json

@@ -9,9 +9,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.186",
     "@types/node": "^16.11.59",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.0",

src/components/common/Button.tsx

@@ -44,6 +44,8 @@ interface ButtonPorps {
    * @description Apply onClick event to the button
    */
   onClick?: () => void;
+  hoverBgColor?: "purple" | "black" | "block";
+  hoverColor?: "white" | "black";
   children: React.ReactNode;
 }
 
@@ -70,6 +72,8 @@ const Button = ({
   radius,
   type,
   onClick,
+  hoverBgColor,
+  hoverColor,
   children,
 }: ButtonPorps) => {
   const Component = styled.button`
@@ -93,6 +97,13 @@ const Button = ({
         : theme.background[backgroundColor]};
     cursor: pointer;
     border: none;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      color: ${({ theme }) =>
+        !hoverColor ? color : theme.font.color[hoverColor]};
+      background-color: ${({ theme }) =>
+        !hoverBgColor ? backgroundColor : theme.background[hoverBgColor]};
+    }
   `;
   return (
     <Component type={type === "submit" ? "submit" : "button"} onClick={onClick}>

src/components/common/TextField.tsx

@@ -6,42 +6,34 @@ interface TextFieldProps {
    * @default 'inline'
    */
   display?: "block" | "inline" | "inline-block";
-
   /**
    * @default 'auto'
    */
   width?: string;
-
   /**
    * @default 'auto'
    */
   height?: string;
-
   /**
    * @default '0'
    */
   margin?: string;
-
   /**
    * @default 'standard'
    */
   variant?: "standard" | "outlined";
-
   /**
    * @default 'text'
    */
   type?: "text" | "password" | "email" | "url";
-
   disabled?: boolean;
   error?: boolean;
   placeholder?: string;
   helperText?: string; // TODO: Add helper text
-
   /**
    * @default 'large'
    */
   size?: "small" | "large";
-
   value?: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   children?: React.ReactNode;
@@ -86,6 +78,7 @@ function TextField(props: TextFieldProps) {
         disabled={props.disabled}
         placeholder={props.placeholder}
         value={props.value}
+        onChange={props.onChange}
       />
       {props.helperText}
     </Label>

src/components/mainpage/videoTextSection/FirstScrollText.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Text } from "../../common";
+import { FirstTextBox } from "../../../styles/mainpage/videoTextSection";
+import { ScrollYType } from ".";
+const FirstScrollText = ({ scrollY }: ScrollYType) => {
+  return (
+    <FirstTextBox scrollY={scrollY}>
+      <Text size="h1" lineheight="90.37px" color="white">
+        좋은 사람들이 모여 <br />
+        좋은 개발자가 되는 곳,
+      </Text>
+    </FirstTextBox>
+  );
+};
+
+export default FirstScrollText;

src/components/mainpage/videoTextSection/SecondScrollText.tsx

@@ -0,0 +1,12 @@
+import { Text } from "../../common";
+import { SecondTextBox } from "../../../styles/mainpage/videoTextSection";
+import { ScrollYType } from ".";
+const SecondScrollText = ({ scrollY }: ScrollYType) => {
+  return (
+    <SecondTextBox scrollY={scrollY}>
+      <div style={{ fontSize: "160px", color: "white" }}>NL</div>
+    </SecondTextBox>
+  );
+};
+
+export default SecondScrollText;

src/components/mainpage/videoTextSection/ThirdScrollText.tsx

@@ -0,0 +1,56 @@
+// import { Text } from "../../common";
+// import { ThirdTextBox } from "../../../styles/mainpage/videoTextSection";
+// import { ScrollYType } from ".";
+// const ThirdScrollText = ({ scrollY }: ScrollYType) => {
+//   return (
+//     <ThirdTextBox scrollY={scrollY}>
+//       <Text size="h3" lineheight="56.32px" >
+//         잘하는 개발자가 되기 위한 방법은 많습니다.
+//         <br />
+//         하지만 우리들은 좋은 개발자가 되고 싶습니다.
+//       </Text>
+//       <Text size="h3" lineheight="56.32px">
+//         때로는 함께 목표를 위해 애써 달려가다가도, <br />
+//         동료들을 위해 기다려 주고 도와줄 수 있는 그런 사람.
+//       </Text>
+//       <Text size="h3" lineheight="56.32px">
+//         목표를 달성하고 성취감을 느끼며 행복을 얻는 사람, <br />
+//         그 행복을 느끼기 위해 더 노력하고, <br />이 노력으로 동료들의 수고를
+//         덜어주는 그런사람.
+//       </Text>
+//     </ThirdTextBox>
+//   );
+// };
+
+// export default ThirdScrollText;
+import { Text } from "../../common";
+import { ThirdTextBox } from "../../../styles/mainpage/videoTextSection";
+import { ScrollYType } from ".";
+const ThirdScrollText = ({ scrollY }: ScrollYType) => {
+  return (
+    <ThirdTextBox scrollY={scrollY}>
+      <div className="text1">
+        <Text size="h3" lineheight="56.32px" color="white">
+          잘하는 개발자가 되기 위한 방법은 많습니다.
+          <br />
+          하지만 우리들은 좋은 개발자가 되고 싶습니다.
+        </Text>
+      </div>
+      <div className="text2">
+        <Text size="h3" lineheight="56.32px" color="white">
+          때로는 함께 목표를 위해 애써 달려가다가도, <br />
+          동료들을 위해 기다 려 주고 도와줄 수 있는 그런 사람.
+        </Text>
+      </div>
+      <div className="text3">
+        <Text size="h3" lineheight="56.32px" color="white">
+          목표를 달성하고 성취감을 느끼며 행복을 얻는 사람, <br />
+          그 행복을 느끼기 위해 더 노력하고, <br />이 노력으로 동료들의 수고를
+          덜어주는 그런사람.
+        </Text>
+      </div>
+    </ThirdTextBox>
+  );
+};
+
+export default ThirdScrollText;

src/components/mainpage/videoTextSection/index.tsx

@@ -0,0 +1,30 @@
+import {
+  VideoContainer,
+  VideoBox,
+  VideoIframe,
+} from "../../../styles/mainpage/videoTextSection";
+import FirstScrollText from "./FirstScrollText";
+import SecondScrollText from "./SecondScrollText";
+import { useScrollY } from "../../../hooks/useScrollY";
+import ThirdScrollText from "./ThirdScrollText";
+
+export interface ScrollYType {
+  scrollY: number;
+}
+
+const VideoTextSection = () => {
+  const scrollY = useScrollY();
+  const src = `https://www.youtube.com/embed/ttc8Q39E0zI?&autoplay=1&showinfo=0&mute=1&loop=1&playlist=ttc8Q39E0zI&controls=0&modestbranding=1&disablekb=1&iv_load_policy=3&showinfo=1&start=30`;
+  return (
+    <VideoContainer>
+      <VideoBox scrollY={scrollY}>
+        <VideoIframe src={src} />
+        <FirstScrollText scrollY={scrollY} />
+        <SecondScrollText scrollY={scrollY} />
+        <ThirdScrollText scrollY={scrollY} />
+      </VideoBox>
+    </VideoContainer>
+  );
+};
+
+export default VideoTextSection;

src/components/member/Image.tsx

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import member from "../../assets/member.png";
+
+const ImageContainer = styled.div`
+  width: calc(100% - 590px);
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  .img {
+    width: 100%;
+  }
+`;
+
+const Image = () => {
+  return (
+    <ImageContainer>
+      <img className="img" src={member} alt="sign in" />
+    </ImageContainer>
+  );
+};
+
+export default Image;

src/components/member/signIn/Form.tsx

@@ -0,0 +1,58 @@
+import { Link } from "react-router-dom";
+import { Formation, FormContainer, Header } from "../../../styles/member/form";
+import { Button, Text, TextField } from "../../common";
+
+const Form = () => {
+  return (
+    <FormContainer>
+      <Header>
+        <Text size="h2" weight="medium">
+          Log In
+        </Text>
+      </Header>
+      <Formation>
+        <TextField
+          width="330px"
+          height="35px"
+          margin="0 0 10px 0"
+          placeholder="Student ID"
+          onChange={(e) => {
+            console.log(22);
+          }}
+        />
+        <TextField
+          width="330px"
+          height="35px"
+          margin="0 0 40px 0"
+          placeholder="Password"
+          type="password"
+          onChange={(e) => {
+            console.log(22);
+          }}
+        />
+        <Button
+          width="100%"
+          height="65px"
+          backgroundColor="block"
+          fontSize="xxlarge"
+          fontWeight="medium"
+          color="black"
+          hoverColor="white"
+          hoverBgColor="black"
+        >
+          Log In
+        </Button>
+      </Formation>
+      <div className="sign-up">
+        <Text size="medium">Don't have an account?</Text>
+        <Link to="/member/signup">
+          <Text size="medium" weight="medium">
+            Sign Up
+          </Text>
+        </Link>
+      </div>
+    </FormContainer>
+  );
+};
+
+export default Form;

src/components/member/signIn/index.tsx

@@ -0,0 +1,7 @@
+import Form from "./Form";
+
+const SignIn = () => {
+  return <Form />;
+};
+
+export default SignIn;