Merge pull request #39 from Team-return/feature/38-banner_page

src/Components/Banner/BannerDetail.tsx/index.tsx

@@ -0,0 +1,22 @@
+import * as _ from './style';
+import banner from '../../../Assets/PNG/banner.png';
+
+export function BannerDetail() {
+	return (
+		<_.Container>
+			<_.BannerImg src={banner} />
+			<_.Wrapper>
+				<_.TextWrapper>
+					<_.Text>이동 되는 페이지</_.Text>
+					<_.TextContent>체험형 현장실습</_.TextContent>
+				</_.TextWrapper>
+				<_.TextWrapper>
+					<_.Text>표시 기간</_.Text>
+					<_.TextContent>
+						2024년 2월 24일 ~ 2024년 2월 27일
+					</_.TextContent>
+				</_.TextWrapper>
+			</_.Wrapper>
+		</_.Container>
+	);
+}

src/Components/Banner/BannerDetail.tsx/style.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+`;
+
+export const Wrapper = styled.div`
+	width: 1000px;
+	display: flex;
+	justify-content: space-between;
+`;
+
+export const BannerImg = styled.img`
+	width: 1000px;
+	height: 300px;
+`;
+
+export const TextWrapper = styled.div`
+	display: flex;
+	gap: 5px;
+`;
+
+export const Text = styled.p`
+	font-size: 18px;
+	font-weight: 600;
+	color: #444444;
+`;
+
+export const TextContent = styled.p`
+	font-size: 18px;
+	font-weight: 600;
+	color: #000000;
+`;

src/Components/Banner/index.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@team-return/design-system';
+import * as _ from './style';
+import { BannerDetail } from './BannerDetail.tsx';
+import { useState } from 'react';
+
+export function Banner() {
+	const [bannerStatus, setBannerStatus] = useState('current');
+
+	const handleBtnClick = (status: 'current' | 'notPublished') => {
+		setBannerStatus(status);
+	};
+	return (
+		<_.Container>
+			<_.Wrapper>
+				<Button kind="Solid">+ 배너 만들기</Button>
+				<Button kind="Ghost">선택</Button>
+			</_.Wrapper>
+			<_.BannerWrapper>
+				<_.Wrapper>
+					{bannerStatus === 'current' ? (
+						<_.Title>현재 게시되어있는 배너</_.Title>
+					) : (
+						<_.Title>아직 게시되어있지 않은 배너</_.Title>
+					)}
+					<_.ButtonWrapper>
+						<_.Btn
+							onClick={() => handleBtnClick('current')}
+							active={bannerStatus === 'current'}
+						>
+							현재 게시 된 배너
+						</_.Btn>
+						<_.Btn
+							onClick={() => handleBtnClick('notPublished')}
+							active={bannerStatus === 'notPublished'}
+						>
+							아직 게시 안 된 배너
+						</_.Btn>
+					</_.ButtonWrapper>
+				</_.Wrapper>
+				<BannerDetail />
+				<BannerDetail />
+				<BannerDetail />
+			</_.BannerWrapper>
+		</_.Container>
+	);
+}

src/Components/Banner/style.ts

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+interface BtnProps {
+	bannerStatus?: 'current' | 'notPublished';
+	active?: boolean;
+}
+
+export const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 40px;
+`;
+
+export const Wrapper = styled.div`
+	width: 1000px;
+	display: flex;
+	justify-content: space-between;
+`;
+
+export const BannerWrapper = styled.div`
+	min-width: 1000px;
+	background: #ffffff;
+	border: 1px solid #e5e5e5;
+	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
+	padding: 52px 30px;
+	overflow: scroll;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+`;
+
+export const ButtonWrapper = styled.div`
+	display: flex;
+`;
+
+export const Btn = styled.div<BtnProps>`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 180px;
+	height: 45px;
+	font-size: 16px;
+	font-weight: 500;
+	background-color: ${(props) => (props.active ? '#E0EBF6' : '#ffffff')};
+	border: 1px solid ${(props) => (props.active ? '#0F4C82' : '#333333')};
+
+	&:first-child {
+		border-radius: 8px 0px 0px 8px;
+	}
+
+	&:last-child {
+		border-radius: 0px 8px 8px 0px;
+	}
+`;
+
+export const BannerImg = styled.img`
+	width: 1000px;
+	height: 300px;
+`;
+
+export const TextWrapper = styled.div`
+	display: flex;
+	gap: 5px;
+`;
+
+export const Title = styled.p`
+	font-size: 24px;
+	font-weight: 500;
+	letter-spacing: 0.48px;
+`;
+
+export const Text = styled.p`
+	font-size: 18px;
+	font-weight: 600;
+	color: #444444;
+`;
+
+export const TextContent = styled.p`
+	font-size: 18px;
+	font-weight: 600;
+	color: #000000;
+`;

src/Components/CreateBanner/index.tsx

@@ -0,0 +1,140 @@
+import * as _ from './styled';
+import React, { useState } from 'react';
+import templete from '../../Assets/PNG/templete.png';
+import banner from '../../Assets/PNG/banner.png';
+import search from '../../Assets/SVG/search.svg';
+import { Button } from '@team-return/design-system';
+
+export function CreateBanner() {
+	const [logoPreview, setLogoPreview] = useState<string | null>(null);
+
+	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const selectedFile = event.target.files?.[0];
+
+		if (selectedFile) {
+			const reader = new FileReader();
+
+			reader.onloadend = () => {
+				setLogoPreview(reader.result as string);
+			};
+
+			reader.readAsDataURL(selectedFile);
+		}
+	};
+	return (
+		<>
+			<_.Container>
+				<_.TempleteWrapper>
+					<_.TemplteTitle>템플릿</_.TemplteTitle>
+					<div>
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+						<_.TempleteImg src={banner} />
+					</div>
+				</_.TempleteWrapper>
+				<_.Right>
+					<_.CreateWrapper>
+						<_.Title>배너 내용을 추가해주세요.</_.Title>
+						<div>
+							<_.BannerImg src={templete} />
+							<_.InputWrapper>
+								<_.Input placeholder="제목"></_.Input>
+								<_.Input placeholder="제목"></_.Input>
+								<_.Input placeholder="회사 이름 "></_.Input>
+								<_.Input placeholder="설명"></_.Input>
+							</_.InputWrapper>
+							<_.LogoUpload>
+								<_.FileInputContainer>
+									{logoPreview ? (
+										<img
+											src={logoPreview}
+											alt="로고 미리보기"
+											style={{
+												width: '100%',
+												height: '100%',
+												borderRadius: '12px',
+											}}
+										/>
+									) : (
+										<>로고를 업로드 해주세요.</>
+									)}
+									<_.FileInput
+										type="file"
+										onChange={handleFileChange}
+									/>
+								</_.FileInputContainer>
+							</_.LogoUpload>
+						</div>
+					</_.CreateWrapper>
+					<_.MovePage>
+						<_.Title>
+							배너를 누르면 이동 될 페이지를 선택해 주세요.
+						</_.Title>
+						<_.Table>
+							<tr>
+								<_.Td>
+									<input type="radio" name="page" />
+								</_.Td>
+								<_.Name>
+									<_.SearchIcon src={search} />
+									<_.Search placeholder="기업명 검색 (기업 상세)"></_.Search>
+								</_.Name>
+							</tr>
+							<tr>
+								<_.Td>
+									<input type="radio" name="page" />
+								</_.Td>
+								<_.Name>
+									<_.SearchIcon src={search} />
+									<_.Search placeholder="기업명 검색 (모집 의뢰서)"></_.Search>
+								</_.Name>
+							</tr>
+							<tr>
+								<_.Td>
+									<input type="radio" name="page" />
+								</_.Td>
+								<_.Name>체험형 현장실습</_.Name>
+							</tr>
+							<tr>
+								<_.Td>
+									<input type="radio" name="page" />
+								</_.Td>
+								<_.Name>북마크</_.Name>
+							</tr>
+							<tr>
+								<_.Td>
+									<input type="radio" name="page" />
+								</_.Td>
+								<_.Name>페이지 이동 안 함</_.Name>
+							</tr>
+						</_.Table>
+					</_.MovePage>
+					<_.ButtonWrapper>
+						<_.TimeWrapper>
+							<_.Title>
+								배너가 보여질 기간을 선택해 주세요.
+							</_.Title>
+							<_.Wrapper>
+								<_.Time>
+									<_.TimeTitle>시작</_.TimeTitle>
+									<_.TimeInput type="date"></_.TimeInput>
+								</_.Time>
+								<_.Time>
+									<_.TimeTitle>끝</_.TimeTitle>
+									<_.TimeInput type="date"></_.TimeInput>
+								</_.Time>
+							</_.Wrapper>
+						</_.TimeWrapper>
+						<Button kind="Solid">배너 추가</Button>
+					</_.ButtonWrapper>
+				</_.Right>
+			</_.Container>
+		</>
+	);
+}