import React, { useEffect, useRef } from 'react';
import { useTheme } from 'styled-components';

import { isMobile } from '../../utils/isMobile';
import { ReactComponent as ButtonLeft } from '../../assets/icons/common/chevron_left.svg';
import { ReactComponent as ButtonRight } from '../../assets/icons/common/chevron_right.svg';
import * as S from './Carousel.styled';

type CarouselProps = {
  children: React.ReactNode;
  currentSlideIndex: number;
  changeSlide: (index: number) => void;
};

type SlideProps = {
  children: React.ReactNode;
  isCurrentSlide?: boolean;
};

const Carousel = ({ children, currentSlideIndex, changeSlide }: CarouselProps) => {
  const touchStartPositionX = useRef(0);
  const touchEndPositionX = useRef(0);
  const handleSlideClick = (index: number) => {
    changeSlide(index);
  };

  useEffect(() => {
    const timer = setInterval(() => {
      if (currentSlideIndex >= React.Children.count(children) - 1) {
        changeSlide(0);
        return;
      }
      changeSlide(currentSlideIndex + 1);
    }, 4000);
    return () => {
      clearInterval(timer);
    };
  }, [currentSlideIndex, children]);

  const theme = useTheme();
  return (
    <S.CarouselContainer>
      <S.SlideContainer
        $currentSlideIndex={currentSlideIndex}
        onTouchStart={(e) => {
          touchStartPositionX.current = e.touches[0].clientX;
        }}
        onTouchEnd={(e) => {
          touchEndPositionX.current = e.changedTouches[0].clientX;
          const touchPositionDifference = touchStartPositionX.current - touchEndPositionX.current;

          if (touchPositionDifference > 5) {
            if (currentSlideIndex >= React.Children.count(children) - 1) {
              return;
            }
            handleSlideClick(currentSlideIndex + 1);
          }
          if (touchPositionDifference < -5) {
            if (currentSlideIndex <= 0) {
              return;
            }
            handleSlideClick(currentSlideIndex - 1);
          }
        }}
      >
        {children}
      </S.SlideContainer>
      {isMobile() || (
        <>
          {currentSlideIndex <= 0 || (
            <S.ArrowLeftButton
              onClick={() => {
                if (currentSlideIndex <= 0) {
                  return;
                }
                handleSlideClick(currentSlideIndex - 1);
              }}
            >
              <ButtonLeft fill={theme.colors.gray_05} />
            </S.ArrowLeftButton>
          )}
          {currentSlideIndex >= React.Children.count(children) - 1 || (
            <S.ArrowRightButton
              onClick={() => {
                if (currentSlideIndex >= React.Children.count(children) - 1) {
                  return;
                }
                handleSlideClick(currentSlideIndex + 1);
              }}
            >
              <ButtonRight fill={theme.colors.gray_05} />
            </S.ArrowRightButton>
          )}
        </>
      )}
    </S.CarouselContainer>
  );
};

const Slide = ({ children, isCurrentSlide }: SlideProps) => {
  return <S.SlideWrapper $isCurrentSlide={isCurrentSlide}>{children}</S.SlideWrapper>;
};

Carousel.Slide = Slide;

export default Carousel;

export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;

import axios from 'axios';

import { API_BASE_URL } from './apiConfig';

export const axiosFetch = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

import { useQuery } from '@tanstack/react-query';
import { axiosFetch } from '../../api/apiClient';

type Flavor = {
  id: number;
  flavorName: string;
  imageUrl: string;
};

export type Recipe = {
  id: number;
  recipeName: string;
  flavors: Flavor[];
};

export const useGetRecipe = (id: number) => {
  return useQuery<{ recipe: Recipe; message: string }>(['recipe', id], async () => {
    const { data } = await axiosFetch(`/recipes/${id}`);
    const { body: recipe, message } = data;
    return { recipe, message };
  });
};

import React from 'react';
import { useNavigate } from 'react-router-dom';

import { routes } from '../../router';
import SubGlobalNavBar from '../../components/SubGlobalNavBar';
import FootButton from '../../components/FootButton';
import Text from '../../components/Text';
import { PROGRESS_BAR_WIDTH } from '../../constants';
import { useGetIngredients } from '../../services/useGetIngredients';
import { usePostRecipe } from '../../services/usePostRecipe';
import { useUserItem, useChangeIngredientIds } from '../../contexts/UserItemContext';
import LoadingPage from '../LoadingPage';
import * as S from './IngredientSelectPage.styled';

const IngredientSelectPage = () => {
  const { data, isLoading } = useGetIngredients();
  const { size, ingredientIds } = useUserItem();
  const changeIngredientIds = useChangeIngredientIds();
  const mutation = usePostRecipe();

  const allFlavorIdList = ingredientIds
    .map((id) => {
      const flavorIdList = data?.ingredients?.find((ingredient) => ingredient.id === id)
        ?.flavorIdList;
      return flavorIdList;
    })
    .flat();
  const flavorIdList = allFlavorIdList.filter(
    (item, index) => allFlavorIdList.indexOf(item) === index,
  );
  const isAbleToRecommend = flavorIdList.length >= size.value;
  const navigate = useNavigate();
  if (size.id === -1) {
    navigate(routes.sizePick);
  }
  return (
    <>
      {isLoading && <LoadingPage />}
      {data && (
        <S.Container>
          <S.UpperContainer>
            <S.Header>
              <SubGlobalNavBar backTo={routes.sizePick} progressWidth={PROGRESS_BAR_WIDTH.MIDDLE} />
            </S.Header>
            <S.Main>
              <Text size="large">좋아하는 재료를 선택해주세요</Text>
              <S.IngredientsContainer>
                {data?.ingredients?.map((ingredient) => (
                  <S.IngredientWrapper
                    key={ingredient.id}
                    onClick={() => {
                      if (ingredientIds.includes(ingredient.id)) {
                        changeIngredientIds(ingredientIds.filter((id) => id !== ingredient.id));
                      } else {
                        changeIngredientIds([...ingredientIds, ingredient.id]);
                      }
                    }}
                  >
                    <S.IngredientImage
                      src={ingredient.imageUrl}
                      alt={ingredient.name}
                      $isClicked={ingredientIds.includes(ingredient.id)}
                    />
                    <S.IngredientName>{ingredient.name}</S.IngredientName>
                  </S.IngredientWrapper>
                ))}
              </S.IngredientsContainer>
            </S.Main>
          </S.UpperContainer>
          <S.Footer>
            <S.BottomContainer>
              {isAbleToRecommend || ingredientIds.length === 0 || (
                <Text size="small">재료를 조금 더 골라볼까요?</Text>
              )}
              <FootButton
                onClick={() => {
                  mutation.mutate({
                    sizeId: size.id,
                    ingredientIds,
                  });
                }}
                disabled={!isAbleToRecommend}
              >
                결과보기
              </FootButton>
            </S.BottomContainer>
          </S.Footer>
        </S.Container>
      )}
    </>
  );
};

export default IngredientSelectPage;

import React, { createContext, useContext, useState } from 'react';

type Size = {
  id: number;
  value: number;
};

type UserItem = {
  size: Size;
  ingredientIds: number[];
};

export const userItemContext = createContext<UserItem>({
  size: { id: -1, value: -1 },
  ingredientIds: [],
});
export const changeSizeContext = createContext(({ id, value }: Size) => {
  console.error(`changeSizeContext를 벗어났습니다. size: {id: ${id}, value: ${value}}`);
});
export const changeIngredientIdsContext = createContext((ingredientIds: number[]) => {
  console.error(`changeIngredientIdsContext를 벗어났습니다. ingredientIds: ${ingredientIds}`);
});
export const initUserItemContext = createContext(() => {
  console.error('initUserItemContext를 벗어났습니다.');
});

export const useUserItem = () => useContext(userItemContext);
export const useChangeSize = () => useContext(changeSizeContext);
export const useChangeIngredientIds = () => useContext(changeIngredientIdsContext);
export const useInitUserItem = () => useContext(initUserItemContext);

type Props = {
  children: React.ReactNode;
};

export const UserItemProvider = ({ children }: Props) => {
  const [userItem, setUserItem] = useState<UserItem>({
    size: { id: -1, value: -1 },
    ingredientIds: [],
  });

  const changeSize = ({ id, value }: Size) => {
    setUserItem({
      ...userItem,
      size: { id, value },
    });
  };

  const changeIngredientIds = (ingredientIds: number[]) => {
    setUserItem({
      ...userItem,
      ingredientIds,
    });
  };

  const initUserItem = () => {
    setUserItem({
      size: { id: -1, value: -1 },
      ingredientIds: [],
    });
  };

  return (
    <userItemContext.Provider value={userItem}>
      <changeSizeContext.Provider value={changeSize}>
        <changeIngredientIdsContext.Provider value={changeIngredientIds}>
          <initUserItemContext.Provider value={initUserItem}>
            {children}
          </initUserItemContext.Provider>
        </changeIngredientIdsContext.Provider>
      </changeSizeContext.Provider>
    </userItemContext.Provider>
  );
};

로그인(카카오 혹은 네이버)
북마크 기능
온보딩 페이지(북마크를 통한 앱 경험 안내가 될 것 같아요)
주위 배스킨라빈스 위치 제공 페이지
기존 코드 리팩토링(코드 정리)