feat:배너 페이지 퍼블리싱 수정

Team-return · Mar 7, 2024 · 70b396b · 70b396b
1 parent eee30cb
commit 70b396b
Show file tree

Hide file tree

Showing 7 changed files with 226 additions and 53 deletions.
diff --git a/src/Components/Banner/BannerDetail.tsx/index.tsx b/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>
+	);
+}
diff --git a/src/Components/Banner/BannerDetail.tsx/style.ts b/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;
+`;
diff --git a/src/Components/Banner/index.tsx b/src/Components/Banner/index.tsx
@@ -1,20 +1,45 @@
 import { Button } from '@team-return/design-system';
-import banner from '../../Assets/PNG/banner.png';
-import * as _ from './styled';
+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>
-			<_.ButtonWrapper>
+			<_.Wrapper>
 				<Button kind="Solid">+ 배너 만들기</Button>
 				<Button kind="Ghost">선택</Button>
-			</_.ButtonWrapper>
+			</_.Wrapper>
 			<_.BannerWrapper>
-				<_.Title>현재 보여지는 배너</_.Title>
-				<_.BannerImg src={banner} />
-				<_.BannerImg src={banner} />
-				<_.BannerImg src={banner} />
-				<_.BannerImg src={banner} />
+				<_.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>
 	);

diff --git a/src/Components/Banner/style.ts b/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;
+`;
diff --git a/src/Components/Banner/styled.ts b/src/Components/Banner/styled.ts
diff --git a/src/Components/CreateBanner/index.tsx b/src/Components/CreateBanner/index.tsx
@@ -1,10 +1,26 @@
 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>
@@ -33,7 +49,27 @@ export function CreateBanner() {
 								<_.Input placeholder="회사 이름 "></_.Input>
 								<_.Input placeholder="설명"></_.Input>
 							</_.InputWrapper>
-							<_.LogoUpload>로고를 업로드 해 주세요</_.LogoUpload>
+							<_.LogoUpload>
+								<_.FileInputContainer>
+									{logoPreview ? (
+										<img
+											src={logoPreview}
+											alt="로고 미리보기"
+											style={{
+												width: '100%',
+												height: '100%',
+												borderRadius: '12px',
+											}}
+										/>
+									) : (
+										<>로고를 업로드 해주세요.</>
+									)}
+									<_.FileInput
+										type="file"
+										onChange={handleFileChange}
+									/>
+								</_.FileInputContainer>
+							</_.LogoUpload>
 						</div>
 					</_.CreateWrapper>
 					<_.MovePage>

diff --git a/src/Components/CreateBanner/styled.ts b/src/Components/CreateBanner/styled.ts
@@ -65,7 +65,7 @@ export const Input = styled.input`
 	font-size: 12px;
 	font-weight: 500;
 	color: black;
-	width: auto;
+	width: 250px;
 	height: 34px;
 	padding: 8px;
 	border-radius: 12px;
@@ -76,7 +76,9 @@ export const Input = styled.input`
 	}
 `;
 
-export const LogoUpload = styled.div`
+export const LogoUpload = styled.div``;
+
+export const FileInputContainer = styled.div`
 	position: absolute;
 	top: 35%;
 	left: 400px;
@@ -86,11 +88,21 @@ export const LogoUpload = styled.div`
 	width: 162px;
 	height: 162px;
 	border-radius: 12px;
-	background-color: white;
+	background-color: #ffffff;
 	font-size: 12px;
 	color: #cccccc;
 `;
 
+export const FileInput = styled.input`
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: pointer;
+`;
+
 export const MovePage = styled.div`
 	display: flex;
 	flex-direction: column;