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/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/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: {},
+};

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

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+
+import Menu from '~/assets/icons/etc/menu.svg';
+import User from '~/assets/icons/etc/user.svg';
+
+interface InfoButtonProps {
+  isShow?: boolean;
+}
+
+function InfoButton({ isShow = false }: InfoButtonProps) {
+  return (
+    <StyledInfoButton isShow={isShow}>
+      <Menu />
+      <User />
+    </StyledInfoButton>
+  );
+}
+
+export default InfoButton;
+
+const StyledInfoButton = styled.button<InfoButtonProps>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 77px;
+
+  padding: 0.5rem 0.5rem 0.5rem 1.2rem;
+
+  border: 1px solid #ddd;
+  border-radius: 21px;
+  background: transparent;
+
+  cursor: pointer;
+
+  ${({ isShow }) =>
+    isShow &&
+    css`
+      box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
+    `}
+
+  &:hover {
+    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
+
+    transition: box-shadow 0.2s ease-in-out;
+  }
+`;

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

@@ -0,0 +1,3 @@
+import InfoButton from '~/components/@common/InfoButton/InfoButton';
+
+export default InfoButton;

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import LoginButton from './LoginButton';
+
+const meta: Meta<typeof LoginButton> = {
+  title: 'Oauth/LoginButton',
+  component: LoginButton,
+  decorators: [
+    Story => (
+      <BrowserRouter>
+        <Routes>
+          <Route path="/*" element={<Story />} />
+        </Routes>
+      </BrowserRouter>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoginButton>;
+
+export const Google: Story = {
+  args: { type: 'google' },
+};
+
+export const KaKao: Story = {
+  args: { type: 'kakao' },
+};
+
+export const Naver: Story = {
+  args: { type: 'naver' },
+};

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

@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+import React from 'react';
+import { OAUTH_BUTTON_MESSAGE, OAUTH_LINK } from '~/constants/api';
+
+import KaKao from '~/assets/icons/oauth/kakao.svg';
+import Naver from '~/assets/icons/oauth/naver.svg';
+import Google from '~/assets/icons/oauth/google.svg';
+
+interface LoginButtonProps {
+  type: 'google' | 'kakao' | 'naver';
+}
+
+const LoginIcon: Record<string, React.ReactNode> = {
+  naver: <Naver />,
+  kakao: <KaKao />,
+  google: <Google />,
+};
+
+function LoginButton({ type }: LoginButtonProps) {
+  return (
+    <StyledLoginButtonWrapper type={type} to={OAUTH_LINK[type]} target="_blank">
+      <div>{LoginIcon[type]}</div>
+      <StyledLoginButtonText>{OAUTH_BUTTON_MESSAGE[type]}</StyledLoginButtonText>
+    </StyledLoginButtonWrapper>
+  );
+}
+
+export default LoginButton;
+
+const StyledLoginButtonWrapper = styled(Link)<LoginButtonProps>`
+  display: flex;
+
+  width: 100%;
+  height: fit-content;
+
+  padding: 2.3rem 1.3rem;
+
+  border-radius: 12px;
+
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-decoration: none;
+
+  ${({ type }) =>
+    type === 'naver' &&
+    css`
+      background: #03c759;
+
+      color: #fff;
+    `}
+
+  ${({ type }) =>
+    type === 'kakao' &&
+    css`
+      background: #fee500;
+    `}
+
+  ${({ type }) =>
+    type === 'google' &&
+    css`
+      border: 1px solid var(--gray-3);
+    `}
+
+  cursor: pointer;
+  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.1s cubic-bezier(0.2, 0, 0, 1);
+`;
+
+const StyledLoginButtonText = styled.span`
+  margin: 0 auto;
+
+  color: inherit;
+`;

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

@@ -0,0 +1,3 @@
+import LoginButton from '~/components/@common/LoginButton/LoginButton';
+
+export default LoginButton;

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

@@ -0,0 +1,11 @@
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  children: React.ReactNode;
+}
+
+function Modal({ children }: ModalProps) {
+  return createPortal(children, document.querySelector('#modal'));
+}
+
+export default Modal;

frontend/src/components/@common/Modal/ModalContent.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ModalContent from './ModalContent';
+
+const meta: Meta<typeof ModalContent> = {
+  title: 'ModalContent',
+  component: ModalContent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModalContent>;
+
+export const LoginModal: Story = {
+  args: {
+    isShow: true,
+    title: '로그인 또는 회원가입',
+    closeModal: () => {},
+    children: '모달 내용',
+  },
+};