Skip to content

Commit 38ef724

Browse files
soohyunmesoohyunme
authored
Merge pull request #19 from Pseudo-Lab/feat/front-form
Frontend page 개발 - Main 화면 개발 - 노션 폼 연동(예신님 Notion) - 기본 docker 배포 환경 구축
2 parents a88cba6 + 80df524 commit 38ef724

19 files changed

Lines changed: 612 additions & 128 deletions

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.vite

‎docker-compose.yaml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
version: '3.8'
2+
3+
services:
4+
frontend:
5+
build:
6+
context: ./frontend
7+
ports:
8+
- "8080:80" # 내부 80포트를 8080으로 매핑
9+
restart: always
10+
11+
# backend:
12+
# build:
13+
# context: ./backend
14+
# container_name: backend
15+
# ports:
16+
# - "8000:8000"
17+
# restart: always

‎frontend/Dockerfile‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 1단계: 빌드
2+
FROM node:20 AS builder
3+
WORKDIR /app
4+
5+
COPY package*.json .
6+
RUN npm install
7+
8+
COPY . .
9+
RUN npm run build
10+
11+
# 2단계: nginx로 정적 파일 서빙
12+
FROM nginx:alpine
13+
COPY --from=builder /app/dist /usr/share/nginx/html
14+
COPY nginx.conf /etc/nginx/conf.d/default.conf
15+
16+
EXPOSE 80
17+
CMD ["nginx", "-g", "daemon off;"]

‎frontend/nginx.conf‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
server {
2+
listen 80;
3+
server_name localhost;
4+
5+
root /usr/share/nginx/html;
6+
index index.html;
7+
8+
location / {
9+
try_files $uri /index.html;
10+
}
11+
12+
location ~* \.(?:js|css|jpg|jpeg|gif|png|ico|svg|woff|woff2)$ {
13+
expires 7d;
14+
add_header Cache-Control "public, max-age=604800, immutable";
15+
}
16+
}

‎frontend/package-lock.json‎

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@
2929
"globals": "^15.15.0",
3030
"typescript": "~5.7.2",
3131
"typescript-eslint": "^8.24.1",
32-
"vite": "^6.2.0"
32+
"vite": ">=6.2.3"
3333
}
3434
}

‎frontend/src/App.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
import React from 'react';
2-
import HomePage from './modules/Home';
2+
import Header from './components/common/Header';
3+
import Hero from './modules/Home/components/Hero';
4+
import Homepage from './modules/Home/index';
5+
import Features from './modules/Home/components/Features';
6+
import Footer from './components/common/Footer';
7+
import logo from './assets/logo.png';
38

49
const App: React.FC = () => {
510
return (
611
<>
7-
<HomePage />
12+
<Header logoSrc={logo}/>
13+
<Hero />
14+
<Homepage />
15+
<Features />
16+
<Footer />
817
</>
918
);
1019
};
1120

12-
export default App;
21+
export default App;

‎frontend/src/components/common/Footer.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { Box, Container, Grid, Typography, Link } from '@mui/material';
3+
import { colors } from '../../styles/theme';
4+
5+
const Footer: React.FC = () => {
6+
return (
7+
<Box component="footer" sx={{ backgroundColor: colors.dark, color: '#fff', py: 4, mt: 6 }}>
8+
<Container>
9+
<Grid container spacing={4} className="footer-content">
10+
<Grid item xs={12} md={4} className="footer-section">
11+
<Typography variant="h6" gutterBottom>PseudoLab</Typography>
12+
<Typography>
13+
PseudoLab은 인공지능과 데이터 사이언스 분야에서 함께 성장하는 커뮤니티입니다.
14+
</Typography>
15+
</Grid>
16+
17+
<Grid item xs={12} md={4} className="footer-section">
18+
<Typography variant="h6" gutterBottom>링크</Typography>
19+
<Box component="ul" sx={{ listStyle: 'none', p: 0 }}>
20+
{['홈페이지', '서비스', '커뮤니티', '연락처'].map((link, idx) => (
21+
<li key={idx}>
22+
<Link href="#" color="#d1d5db" underline="none" sx={{ transition: colors.transition, '&:hover': { color: '#fff' } }}>
23+
{link}
24+
</Link>
25+
</li>
26+
))}
27+
</Box>
28+
</Grid>
29+
30+
<Grid item xs={12} md={4} className="footer-section">
31+
<Typography variant="h6" gutterBottom>연락처</Typography>
32+
<Typography>이메일: info@pseudolab.com</Typography>
33+
<Typography>전화: 02-123-4567</Typography>
34+
</Grid>
35+
</Grid>
36+
37+
<Box sx={{ textAlign: 'center', pt: 4, borderTop: '1px solid rgba(255, 255, 255, 0.1)', mt: 4 }}>
38+
<Typography variant="body2" color="#9ca3af">
39+
&copy; 2025 PseudoLab. All rights reserved.
40+
</Typography>
41+
</Box>
42+
</Container>
43+
</Box>
44+
);
45+
};
46+
47+
export default Footer;

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { AppBar, Toolbar, Typography, IconButton, Box } from '@mui/material';
2+
import { AppBar, Toolbar, Typography, IconButton, Box, Tooltip } from '@mui/material';
33
import Brightness4Icon from '@mui/icons-material/Brightness4';
44
import Brightness7Icon from '@mui/icons-material/Brightness7';
55
import { useTheme } from '@mui/material/styles';
@@ -25,14 +25,26 @@ const Header: React.FC<HeaderProps> = ({ logoSrc }) => {
2525
PseudoLab ToolBox
2626
</Typography>
2727
</Link>
28-
{/* <Typography variant="h4" align="center" gutterBottom>
29-
PseudoLab ToolBox
30-
</Typography> */}
3128
</Box>
3229

33-
<IconButton onClick={toggleColorMode}>
30+
{/* <IconButton onClick={toggleColorMode}>
3431
{theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
35-
</IconButton>
32+
</IconButton> */}
33+
<Tooltip title={theme.palette.mode === 'dark' ? 'Light Mode' : 'Dark Mode'}>
34+
<IconButton
35+
onClick={toggleColorMode}
36+
sx={{
37+
transition: 'all 0.1s ease',
38+
color: theme.palette.mode === 'dark' ? theme.palette.custom.pseudolabOrange : '#333',
39+
}}
40+
>
41+
{theme.palette.mode === 'dark' ? (
42+
<Brightness7Icon sx={{ transition: 'all 0.1s ease' }} />
43+
) : (
44+
<Brightness4Icon sx={{ transition: 'all 0.1s ease' }} />
45+
)}
46+
</IconButton>
47+
</Tooltip>
3648
</Toolbar>
3749
</AppBar>
3850
);

‎frontend/src/modules/Home/components/CertificateModal.tsx‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
11
import React from 'react';
2-
import { Modal, Box, Typography, TextField, Button } from '@mui/material';
2+
import { Modal, Box, IconButton } from '@mui/material';
3+
import CloseIcon from '@mui/icons-material/Close';
34

45
interface Props {
56
open: boolean;
67
onClose: () => void;
78
}
89

910
const CertificateModal: React.FC<Props> = ({ open, onClose }) => {
10-
const handleSubmit = () => {
11-
// TODO: Submit logic
12-
onClose();
13-
};
14-
1511
return (
1612
<Modal open={open} onClose={onClose}>
1713
<Box sx={modalStyle}>
18-
<Typography variant="h6" mb={2}>수료증 발급 신청 및 출력</Typography>
19-
<TextField label="Name" fullWidth margin="normal" />
20-
<TextField label="Email" fullWidth margin="normal" />
21-
<TextField label="참여한 스터디" fullWidth margin="normal" />
22-
<Button variant="contained" fullWidth onClick={handleSubmit} sx={{ mt: 2 }}>Submit</Button>
14+
{/* Close Button */}
15+
<IconButton
16+
onClick={onClose}
17+
sx={{
18+
position: 'absolute',
19+
top: 8,
20+
right: 8,
21+
zIndex: 10,
22+
color: 'grey.500',
23+
}}
24+
>
25+
<CloseIcon />
26+
</IconButton>
27+
28+
{/* Notion Embed */}
29+
<Box
30+
sx={{
31+
width: '100%',
32+
height: '600px',
33+
borderRadius: '8px',
34+
overflow: 'hidden',
35+
}}
36+
>
37+
<iframe
38+
src="https://bailandoys.notion.site/ebd/1c03a2a2eed580b7ad6ac8c431061111"
39+
width="100%"
40+
height="600"
41+
allowFullScreen
42+
title="수료증 발급 신청 Notion Form"
43+
style={{
44+
border: 'none',
45+
}}
46+
/>
47+
</Box>
2348
</Box>
2449
</Modal>
2550
);
@@ -30,11 +55,12 @@ const modalStyle = {
3055
top: '50%',
3156
left: '50%',
3257
transform: 'translate(-50%, -50%)',
33-
width: 400,
58+
width: '80%',
59+
maxWidth: 800,
3460
bgcolor: 'background.paper',
3561
boxShadow: 24,
3662
p: 4,
3763
borderRadius: 2,
3864
};
3965

40-
export default CertificateModal;
66+
export default CertificateModal;

0 commit comments

Comments
 (0)