feat: 로그인 기능 구현

frontend/.vscode/settings.json

@@ -9,6 +9,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
 
   "stylelint.enable": true,
+
   "stylelint.config": null,
   "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"]
 }

frontend/package.json

@@ -4,7 +4,7 @@
   "main": "index.tsx",
   "license": "MIT",
   "scripts": {
-    "start": "webpack serve --open --mode development",
+    "start": "webpack serve --open --mode development --port 3000",
     "start:prod": "webpack serve --open --mode production",
     "build": "webpack --mode production",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -32,6 +32,7 @@
     "msw": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "storybook": "^7.0.25",
     "styled-components": "^6.0.2",
     "ts-loader": "^9.4.4",

frontend/public/index.html

@@ -11,5 +11,6 @@ <h2>경고!</h2>
       <div>현재 사용 중인 브라우저는 스크립트를 지원하지 않거나, 해당 기능이 활성화 되어 있지 않습니다.</div>
     </noscript>
     <div id="root"></div>
+    <div id="modal"></div>
   </body>
 </html>

frontend/src/@types/api.types.ts

@@ -1,3 +1,12 @@
+export interface RestaurantListData {
+  content: RestaurantData[];
+  currentElementsCount: number;
+  currentPage: number;
+  pageSize: number;
+  totalElementsCount: number;
+  totalPage: number;
+}
+
 export interface RestaurantData {
   id: number;
   name: string;

frontend/src/@types/image.type.ts

@@ -0,0 +1,5 @@
+import type { RestaurantData } from './api.types';
+
+type RestaurantImages = RestaurantData['images'];
+
+export type RestaurantImage = RestaurantImages[number];

frontend/src/@types/oauth.types.ts

@@ -0,0 +1 @@
+export type Oauth = 'google' | 'kakao' | 'naver';

frontend/src/App.tsx

@@ -1,7 +1,18 @@
-import MainPage from './pages/MainPage';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import OauthRedirectPage from '~/pages/OauthRedirectPage';
+import MainPage from '~/pages/MainPage';
 
 function App() {
-  return <MainPage />;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/oauth/redirect/kakao" element={<OauthRedirectPage type="kakao" />} />
+        <Route path="/oauth/redirect/naver" element={<OauthRedirectPage type="naver" />} />
+        <Route path="/oauth/redirect/google" element={<OauthRedirectPage type="google" />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
 export default App;

frontend/src/components/@common/Header/Header.tsx

@@ -1,23 +1,50 @@
+import React from 'react';
 import { styled } from 'styled-components';
 import Logo from '~/assets/logo.png';
+import { Modal, ModalContent } from '~/components/@common/Modal';
+import InfoDropDown from '~/components/InfoDropDown';
+import LoginModalContent from '~/components/LoginModalContent';
+import useBooleanState from '~/hooks/useBooleanState';
+
+const options = [
+  { id: 1, value: '로그인' },
+  { id: 2, value: '회원가입' },
+];
 
 function Header() {
+  const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);
+
+  const handleInfoDropDown = (event: React.MouseEvent<HTMLElement>) => {
+    const currentOption = event.currentTarget.dataset.name;
+
+    if (currentOption === '로그인') openModal();
+  };
+
   return (
-    <StyledHeader>
-      <StyledLogo alt="셀럽잇 로고" src={Logo} />
-    </StyledHeader>
+    <>
+      <StyledHeader>
+        <StyledLogo alt="셀럽잇 로고" src={Logo} />
+        <InfoDropDown options={options} externalOnClick={handleInfoDropDown} isOpen={isModalOpen} />
+      </StyledHeader>
+      <Modal>
+        <ModalContent isShow={isModalOpen} title="로그인 및 회원 가입" closeModal={closeModal}>
+          <LoginModalContent />
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
 
 export default Header;
 
 const StyledHeader = styled.header`
   display: flex;
+  justify-content: space-between;
   align-items: center;
 
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 20;
 
   width: 100%;
   height: 80px;

frontend/src/components/@common/ImageCarousel/ImageCarousel.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ImageCarousel from './ImageCarousel';
+
+const meta: Meta<typeof ImageCarousel> = {
+  title: 'ImageCarousel',
+  component: ImageCarousel,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageCarousel>;
+
+export const Default: Story = {
+  args: {
+    images: [
+      { id: 1, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' },
+      { id: 2, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' },
+      { id: 3, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' },
+      { id: 4, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' },
+    ],
+  },
+};
+
+export const OneImage: Story = {
+  args: {
+    images: [{ id: 1, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' }],
+  },
+};

frontend/src/components/@common/ImageCarousel/ImageCarousel.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { RestaurantImage } from '~/@types/image.type';
+import LeftBracket from '~/assets/icons/left-bracket.svg';
+import RightBracket from '~/assets/icons/right-bracket.svg';
+import { BORDER_RADIUS } from '~/styles/common';
+import WaterMarkImage from '../WaterMarkImage';
+
+interface ImageCarouselProps {
+  images: RestaurantImage[];
+  type: 'list' | 'map';
+}
+
+function ImageCarousel({ images, type }: ImageCarouselProps) {
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+
+  const goToPrevious = () => {
+    setCurrentIndex(prevIndex => prevIndex - 1);
+  };
+
+  const goToNext = () => {
+    setCurrentIndex(prevIndex => prevIndex + 1);
+  };
+
+  return (
+    <StyledCarouselContainer type={type}>
+      <StyledCarouselSlide currentIndex={currentIndex}>
+        {images.map(({ id, name, author }) => (
+          <WaterMarkImage key={id} imageUrl={name} waterMark={author} />
+        ))}
+      </StyledCarouselSlide>
+      {currentIndex !== 0 && (
+        <StyledLeftButton type="button" onClick={goToPrevious}>
+          <LeftBracket width={10} height={10} />
+        </StyledLeftButton>
+      )}
+      {currentIndex !== images.length - 1 && (
+        <StyledRightButton type="button" onClick={goToNext}>
+          <RightBracket width={10} height={10} />
+        </StyledRightButton>
+      )}
+      {images.length > 1 && (
+        <StyledDots currentIndex={currentIndex}>
+          {Array.from({ length: images.length }, () => (
+            <StyledDot />
+          ))}
+        </StyledDots>
+      )}
+    </StyledCarouselContainer>
+  );
+}
+
+export default ImageCarousel;
+
+const StyledCarouselContainer = styled.div<{ type: 'list' | 'map' }>`
+  position: relative;
+
+  width: 100%;
+  overflow: hidden;
+
+  border-radius: ${({ type }) =>
+    type === 'list' ? `${BORDER_RADIUS.md}` : `${BORDER_RADIUS.md} ${BORDER_RADIUS.md} 0 0`};
+
+  button {
+    visibility: hidden;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 50%;
+
+    width: 32px;
+    height: 32px;
+
+    border: none;
+    border-radius: 50%;
+    background-color: var(--white);
+
+    cursor: pointer;
+    opacity: 0;
+    transition: transform 0.15s ease-in-out, opacity 0.2s ease-in-out;
+    transform: translateY(-50%);
+    box-shadow: var(--shadow);
+    outline: none;
+
+    &:hover {
+      transform: translateY(-50%) scale(1.04);
+    }
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+
+      opacity: 0.85;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+`;
+
+const StyledLeftButton = styled.button`
+  left: 12px;
+`;
+
+const StyledRightButton = styled.button`
+  right: 12px;
+`;
+
+const StyledCarouselSlide = styled.div<{ currentIndex: number }>`
+  display: flex;
+
+  width: 100%;
+
+  transition: transform 0.3s ease-in-out;
+  transform: ${({ currentIndex }) => `translateX(-${currentIndex * 100}%)`};
+  flex-wrap: nowrap;
+
+  aspect-ratio: 1.05 / 1;
+`;
+
+const StyledDots = styled.div<{ currentIndex: number }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 0.5rem;
+
+  position: absolute;
+  bottom: 12px;
+
+  width: 100%;
+
+  ${({ currentIndex }) => css`
+    & > span:nth-child(${currentIndex + 1}) {
+      opacity: 1;
+      transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+      transform: scale(1.1);
+    }
+  `}
+`;
+
+const StyledDot = styled.span`
+  width: 6px;
+  height: 6px;
+
+  border-radius: 50%;
+  background-color: var(--white);
+
+  opacity: 0.2;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+`;

frontend/src/components/@common/ImageCarousel/index.tsx

@@ -0,0 +1,3 @@
+import ImageCarousel from './ImageCarousel';
+
+export default ImageCarousel;

frontend/src/components/@common/InfoButton/InfoButton.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InfoButton from './InfoButton';
+
+const meta: Meta<typeof InfoButton> = {
+  title: 'InfoButton',
+  component: InfoButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfoButton>;
+
+export const Default: Story = {
+  args: {},
+};