[FE] feat: 소셜 연동 로그인 버튼 및 로그인 요청 모달

frontend/src/components/common/GithubLoginButton/index.tsx

@@ -0,0 +1,22 @@
+import GithubWhiteLogoIcon from '@/assets/githubWhiteLogo.svg';
+import { LoginButtonStyleProps } from '@/components/common/LoginButton';
+import { LoginButton } from '@/components/index';
+
+interface GithubLoginButtonProps extends LoginButtonStyleProps {
+  handleClick: () => void;
+}
+
+const GithubLoginButton = ({ handleClick, $logoStyle, $style }: GithubLoginButtonProps) => {
+  return (
+    <LoginButton
+      platform="깃허브"
+      engPlatform="github"
+      handleClick={handleClick}
+      logoSrc={GithubWhiteLogoIcon}
+      $logoStyle={$logoStyle}
+      $style={$style}
+    ></LoginButton>
+  );
+};
+
+export default GithubLoginButton;

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

@@ -0,0 +1,43 @@
+import { Button } from '@/components/index';
+import { calculateParticle } from '@/utils';
+
+import * as S from './styles';
+
+interface LoginButtonProps extends LoginButtonStyleProps {
+  platform: string;
+  engPlatform?: string;
+  logoSrc: string;
+  handleClick: () => void;
+}
+
+export interface LoginButtonStyleProps {
+  $logoStyle?: React.CSSProperties;
+  $style?: React.CSSProperties;
+}
+
+const LoginButton = ({
+  platform,
+  engPlatform,
+  logoSrc,
+  handleClick,
+  $logoStyle,
+  $style,
+}: LoginButtonProps) => {
+  return (
+    <Button onClick={handleClick} styleType="primary" style={$style}>
+      <S.ButtonLabelContainer>
+        <S.LogoImg src={logoSrc} alt={`${platform} 로고`} $logoStyle={$logoStyle} />
+        <span>
+          {engPlatform || platform}
+          {calculateParticle({
+            target: platform,
+            particles: { withFinalConsonant: '으로', withoutFinalConsonant: '로' },
+          })}{' '}
+          로그인하기
+        </span>
+      </S.ButtonLabelContainer>
+    </Button>
+  );
+};
+
+export default LoginButton;

frontend/src/components/common/LoginButton/styles.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+import { LoginButtonStyleProps } from './index';
+
+export const ButtonLabelContainer = styled.div`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+`;
+
+export const LogoImg = styled.img<Omit<LoginButtonStyleProps, '$style' >>`
+  width: 3.2rem;
+  height: 3.2rem;
+
+  ${({ $logoStyle }) => $logoStyle && { ...$logoStyle }};
+`;

frontend/src/components/common/index.tsx

@@ -13,4 +13,6 @@ export { default as Toast } from './Toast';
 
 export { default as OptionSwitch } from './OptionSwitch';
 export { default as ReviewEmptySection } from './ReviewEmptySection';
+export { default as GithubLoginButton } from './GithubLoginButton';
+export { default as LoginButton } from './LoginButton';
 export * from './modals';

frontend/src/components/common/modals/index.tsx

@@ -1,3 +1,4 @@
 export { default as ConfirmModal } from './ConfirmModal';
 export { default as AlertModal } from './AlertModal';
 export { default as ErrorAlertModal } from './ErrorAlertModal';
+export { default as ContentModal } from './ContentModal';

frontend/src/pages/ReviewWritingPage/modals/components/LoginRequestModal/index.tsx

@@ -0,0 +1,32 @@
+import { ContentModal, GithubLoginButton } from '@/components';
+
+import * as S from './styles';
+
+type LoginRequestTitleType = 'loginIntent' | 'membershipCheck';
+
+interface LoginRequestModalProps {
+  titleType: LoginRequestTitleType;
+  closeModal: () => void;
+}
+
+const LoginRequestModal = ({ titleType, closeModal }: LoginRequestModalProps) => {
+  const getTitleLabel = (titleType: LoginRequestTitleType) => {
+    if (titleType === 'loginIntent') return '로그인하시겠어요?';
+    if (titleType === 'membershipCheck') return '회원이신가요?';
+  };
+
+  return (
+    <ContentModal title={getTitleLabel(titleType)} handleClose={closeModal} isClosableOnBackground={true} $style={{}}>
+      <S.LoginRequestModal>
+        <S.LoginRequestLabel>로그인 후 간편하게 받은 리뷰를 확인하세요!</S.LoginRequestLabel>
+        <GithubLoginButton
+          handleClick={() => {}}
+          $logoStyle={{ height: '3rem' }}
+          $style={{ fontSize: '1.3rem', height: '4rem', width: '100%' }}
+        />
+      </S.LoginRequestModal>
+    </ContentModal>
+  );
+};
+
+export default LoginRequestModal;

frontend/src/pages/ReviewWritingPage/modals/components/LoginRequestModal/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const LoginRequestModal = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const LoginRequestLabel = styled.p`
+  margin-bottom: 1rem;
+  font-size: 1.4rem;
+`;