Ah-ae

import { useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { userContext } from '../App';

function useCheckLogin() {
  const navigate = useNavigate();
  const { isLoggedIn } = useContext(userContext);

  useEffect(() => {
    if (!isLoggedIn) {

Ah-ae

import { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { userContext } from '../App';
import { postFetch } from './API';
import { checkPassword } from './checkPassword';

function useLoginLogic(initialInputs, url, alertMsg, key1, key2, key3) {
  const navigate = useNavigate();
  const [inputs, setInputs] = useState(initialInputs);
  const { setIsLoggedIn, setTokens } = useContext(userContext);

Ah-ae

const postFetch = async (url, newData, jwt) => {
  try {
    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: jwt,
        withCredentials: true
      },
      body: JSON.stringify(newData)

Ah-ae

export const checkPassword = (str) => {
  const regexp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
  const result = regexp.test(str);

  if (!result) {
    alert(
      'Passwords must contain at least eight characters, including at least 1 letter and 1 number.'
    );
  }
  return result;

Ah-ae

import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

const StyledButton = styled.button`
  width: ${(props) => props.width || 'inherit'};
  padding: ${(props) => props.padding || '8px 10px'};
  background-color: ${(props) => props.bgColor || 'var(--blue-500)'};
  color: ${(props) => props.color || 'var(--white)'};
  border: ${(props) => (props.bdColor ? 'solid 1px' : 'none')};
  border-color: ${(props) => props.bdColor || 'none'};

Ah-ae

const aclean = (arr) => {
  const obj = {};

  for (let word of arr) {
    // ear, are, era을 알파벳 순으로 정렬을 해서 aer로 만들어준 다음 sorted 변수에 담는다.
    const sorted = word.toLowerCase().split("").sort().join("");
    
    // 정렬된 aer과 원래의 단어를 key-value로 객체에 담는다. 
    obj[sorted] = word;
  }

Ah-ae

// grid item component
const Container = styled.article`
  grid-row: ${(props) => (props.main ? "span 2" : "span 1")};
  grid-column: ${(props) => (props.main ? "span 6" : "span 3")};
  @media screen and (max-width: 1024px) {
    grid-column: ${(props) => (props.main ? "span 12" : "span 6")};
  }
  @media screen and (max-width: 720px) {
    grid-column: span 12;
  }

Ah-ae

// grid container component
const Section = styled.section`
  padding: 1rem 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  @media screen and (max-width: 1024px) {
    grid-template-rows: repeat(4, 1fr);
  }

Ah-ae

.container {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
}

/* 태블릿 분기 */
@media screen and (max-width: 1024px) {

Ah-ae

.container {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
}

.mainItem {
    grid-row: span 2;