🚨 Fix/common/directory

src/components/UserText/UserId.style.ts

@@ -2,5 +2,5 @@ import styled from '@emotion/styled';
 
 export const UserIdSpan = styled.span`
   font-size: 16px;
-  color: ${({ theme }) => theme.greyLight};
+  color: ${({ theme }) => theme.color.greyLight};
 `;

src/components/UserText/UserName.style.ts

@@ -3,5 +3,5 @@ import styled from '@emotion/styled';
 export const UserNameSpan = styled.span`
   font-size: 16px;
   font-weight: 700;
-  color: ${({ theme }) => theme.black};
+  color: ${({ theme }) => theme.color.black};
 `;

src/pages/landing/Landing.tsx

@@ -0,0 +1,62 @@
+import { Link } from '@components/Link';
+import { Button } from '@components/Button';
+import { Icon } from '@components/Icon';
+import {
+  LandingMain,
+  Heading,
+  PreviewLink,
+  PreviewSpan,
+  LinkContainer
+} from './Landing.style';
+
+const LandingPage = () => {
+  return (
+    <LandingMain>
+      <Heading />
+      <PreviewLink>
+        <PreviewSpan>다른 사람들의 후기를 먼저 만나보세요.</PreviewSpan>
+        <Link
+          pageLink='/posts'
+          size={12}
+          color='white'>
+          명상 후기 보러가기
+          <Icon
+            name='arrow_forward'
+            size={11}
+            color='white'
+          />
+        </Link>
+      </PreviewLink>
+      <LinkContainer>
+        <Link
+          pageLink='/login'
+          size={16}
+          color='white'>
+          <Button
+            width={300}
+            height={50}
+            label='로그인'
+            handleClick={() => {}}
+            dark={false}
+            bold={false}
+          />
+        </Link>
+        <Link
+          pageLink='/signup'
+          size={16}
+          color='white'>
+          <Button
+            width={300}
+            height={50}
+            label='회원가입'
+            handleClick={() => {}}
+            dark={true}
+            bold={false}
+          />
+        </Link>
+      </LinkContainer>
+    </LandingMain>
+  );
+};
+
+export default LandingPage;

src/pages/landing/index.tsx

@@ -1,61 +1,3 @@
-import { Link } from '@components/Link';
-import { Button } from '@components/Button';
-import { Icon } from '@components/Icon';
-import {
-  LandingMain,
-  Heading,
-  PreviewLink,
-  PreviewSpan,
-  LinkContainer
-} from './style';
-
-const LandingPage = () => {
-  return (
-    <LandingMain>
-      <Heading />
-      <PreviewLink>
-        <PreviewSpan>다른 사람들의 후기를 먼저 만나보세요.</PreviewSpan>
-        <Link
-          pageLink='/posts'
-          size={12}
-          color='white'>
-          명상 후기 보러가기
-          <Icon
-            name='arrow_forward'
-            size={11}
-            color='white'></Icon>
-        </Link>
-      </PreviewLink>
-      <LinkContainer>
-        <Link
-          pageLink='/login'
-          size={16}
-          color='white'>
-          <Button
-            width={300}
-            height={50}
-            label='로그인'
-            handleClick={() => {}}
-            dark={false}
-            bold={false}
-          />
-        </Link>
-        <Link
-          pageLink='/signup'
-          size={16}
-          color='white'>
-          <Button
-            width={300}
-            height={50}
-            label='회원가입'
-            handleClick={() => {}}
-            dark={true}
-            bold={false}
-          />
-        </Link>
-      </LinkContainer>
-    </LandingMain>
-  );
-};
+import LandingPage from './Landing';
 
 export default LandingPage;

src/pages/layout/Layout.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router';
+import { Header } from '@components/Header';
+import { LayoutContainer } from './Layout.style';
+import { Footer } from '@components/Footer';
+
+const Layout = () => {
+  return (
+    <>
+      <Header />
+      <LayoutContainer>
+        <Outlet />
+      </LayoutContainer>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;

src/pages/layout/index.tsx

@@ -1,18 +1,3 @@
-import { Outlet } from 'react-router';
-import { Header } from '@components/Header';
-import { LayoutContainer } from './styles';
-import { Footer } from '@components/Footer';
-
-const Layout = () => {
-  return (
-    <>
-      <Header />
-      <LayoutContainer>
-        <Outlet />
-      </LayoutContainer>
-      <Footer />
-    </>
-  );
-};
+import Layout from './Layout';
 
 export default Layout;

src/pages/login/styles.tsx → src/pages/login/Login.style.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import logo from '@assets/logo.svg';
 
-const LogoContainer = styled.div`
+export const LogoContainer = styled.div`
   margin-bottom: 80px;
 `;
 
-const Logo = () => {
+export const Logo = () => {
   return (
     <svg
       width='223'
@@ -21,7 +21,7 @@ const Logo = () => {
   );
 };
 
-const LoginContainer = styled.div`
+export const LoginContainer = styled.div`
   ${({ theme }) => theme.style.flexCenter};
   flex-direction: column;
   width: 100vw;
@@ -30,7 +30,7 @@ const LoginContainer = styled.div`
   background: ${({ theme }) => theme.color.linearGradientPurple};
 `;
 
-const LoginForm = styled.form`
+export const LoginForm = styled.form`
   background-color: ${({ theme }) => theme.color.white};
   ${({ theme }) => theme.style.flexCenter};
   flex-direction: column;
@@ -42,10 +42,8 @@ const LoginForm = styled.form`
   border-radius: 10px;
 `;
 
-const ButtonContainer = styled.div`
+export const ButtonContainer = styled.div`
   ${({ theme }) => theme.style.flexJustifyCenter};
   width: 300px;
   margin-top: 15px;
 `;
-
-export { LoginForm, ButtonContainer, LoginContainer, LogoContainer, Logo };

src/pages/login/Login.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import postLogInUser from '@apis/login';
+import { Button } from '@components/Button';
+import { UserInput } from '@components/UserInput';
+import { USER_INPUT } from './constants';
+import { GoToSignUp } from './components';
+import {
+  LoginForm,
+  ButtonContainer,
+  LoginContainer,
+  LogoContainer,
+  Logo
+} from './Login.style';
+import useSessionStorage from '@hooks/useSessionStorage';
+import { User } from '@/types';
+
+const Login = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [errorCatched, setErrorCatched] = useState<boolean>(false);
+  const navigate = useNavigate();
+  let timer = 0;
+
+  const [userSessionData, setUserSessionData] = useSessionStorage<
+    Pick<User, '_id' | 'token'>
+  >('userData', {
+    _id: '',
+    token: ''
+  });
+
+  useEffect(() => {
+    if (userSessionData.token) {
+      navigate('/meditation');
+    }
+  }, [userSessionData, navigate]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const { name, value } = event.target;
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      switch (name) {
+        case 'email':
+          setEmail(value);
+          break;
+        case 'password':
+          setPassword(value);
+          break;
+        default:
+          break;
+      }
+    }, 200);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    postLogInUser({ email, password })
+      .then((res) => {
+        const { user, token } = res.data;
+        setUserSessionData({ _id: user._id, token });
+      })
+      .catch((err) => {
+        console.log(err);
+        setErrorCatched(true);
+      });
+  };
+
+  return (
+    <LoginContainer>
+      <LogoContainer>
+        <Logo />
+      </LogoContainer>
+
+      <LoginForm onSubmit={handleSubmit}>
+        <UserInput
+          name={USER_INPUT.EMAIL.NAME}
+          placeholder={USER_INPUT.EMAIL.PLACE_HOLDER}
+          title={USER_INPUT.EMAIL.TITLE}
+          handleChange={handleInputChange}
+          show={errorCatched}
+          errorMessage={USER_INPUT.ERROR_MESSAGE}
+        />
+        <UserInput
+          name={USER_INPUT.PASSWORD.NAME}
+          placeholder={USER_INPUT.PASSWORD.PLACE_HOLDER}
+          title={USER_INPUT.PASSWORD.TITLE}
+          handleChange={handleInputChange}
+          type={USER_INPUT.PASSWORD.TYPE}
+        />
+        <ButtonContainer>
+          <Button
+            label='로그인'
+            width={300}
+            height={45}
+            bold={false}
+            dark={true}
+            handleClick={() => handleSubmit}
+          />
+        </ButtonContainer>
+        <GoToSignUp />
+      </LoginForm>
+    </LoginContainer>
+  );
+};
+
+export default Login;

src/pages/login/components/GoToSignUp.style.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const GoToSignUpContainer = styled.div`
+  margin-top: 30px;
+  ${({ theme }) => theme.style.flexAlignCenter};
+  flex-direction: column;
+`;
+
+export const Message = styled.span`
+  color: ${({ theme }) => theme.color.greyLight};
+  font-size: 14px;
+  margin-bottom: 10px;
+`;
+
+export const LinkContainer = styled.div`
+  ${({ theme }) => theme.style.flexCenter};
+`;

src/pages/login/components/GoToSignUp.tsx

@@ -1,23 +1,11 @@
-import styled from '@emotion/styled';
 import { Link } from '@components/Link';
 import { Icon } from '@components/Icon';
 import { MESSAGE, LABEL } from '../constants';
-
-const GoToSignUpContainer = styled.div`
-  margin-top: 30px;
-  ${({ theme }) => theme.style.flexAlignCenter};
-  flex-direction: column;
-`;
-
-const Message = styled.span`
-  color: ${({ theme }) => theme.color.greyLight};
-  font-size: 14px;
-  margin-bottom: 10px;
-`;
-
-const LinkContainer = styled.div`
-  ${({ theme }) => theme.style.flexCenter};
-`;
+import {
+  GoToSignUpContainer,
+  Message,
+  LinkContainer
+} from './GoToSignUp.style';
 
 const GoToSignUp = () => {
   return (