Skip to content

Commit

Permalink
Feat: Footer 반응형 (#4)
Browse files Browse the repository at this point in the history
* Feat: ProjectsPage

asdf

* Feat: Projects 세부페이지 router

* Feat: Footer Wrap 적용

Footer width 안줄어드는거 해결
ProjectsPage 역순 안되는 버그 해결
  • Loading branch information
bkkim7421 authored Mar 5, 2024
1 parent 420827c commit af75a36
Show file tree
Hide file tree
Showing 12 changed files with 242 additions and 109 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./src/assets/implude.svg" />
<link href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>We Are #IMPLUDE</title>
</head>
Expand Down
Binary file added src/assets/ProjectThumbnail/ASD2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 28 additions & 23 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { Col, Header1, Row, Title } from './atomic'
import { Col, Header1, Row, Title, Wrap } from './atomic'

import Implude from '../assets/implude-light.svg?react'
import Youtube from '../assets/youtube.svg?react'
Expand All @@ -10,27 +10,16 @@ const Footer = () => {
return (
<>
<Container>
<Row style={{ padding: '40px 80px' }} justify="space-between">
<Col gap={'45px'}>
<Row gap={'15px'} align="center">
<Implude />
<Col align="start">
<Title color="--gray-white" $bold>
#IMPLUDE
</Title>
<Header1 color="--gray-white">IMPORT + INCLUDE</Header1>
</Col>
</Row>
<Col>
<Header1 color="--gray-white">
상호 : #IMPLUDE | 대표자명 : 김진욱, 박지윤
<br />
이메일 : 몰라몰라@implude.com
<br />
주소 : 경기도 안산시 단원구 사세충열로 94
</Header1>
<Wrap justify="space-between" gap="32px">
<Wrap gap={'15px'} align="center">
<Implude />
<Col align="start">
<Title color="--gray-white" $bold>
#IMPLUDE
</Title>
<Header1 color="--gray-white">IMPORT + INCLUDE</Header1>
</Col>
</Col>
</Wrap>
<Row gap={'32px'}>
<Link to={'https://www.youtube.com/@implude_official/featured'} style={{ cursor: 'pointer' }}>
<Youtube />
Expand All @@ -39,18 +28,34 @@ const Footer = () => {
<Instagram />
</Link>
</Row>
</Row>
</Wrap>
<Col>
<Info>
상호 : #IMPLUDE | 대표자명 : 김진욱, 박지윤
<br />
이메일 : 몰라몰라@implude.com
<br />
주소 : 경기도 안산시 단원구 사세충열로 94
</Info>
</Col>
</Container>
</>
)
}

const Container = styled.div`
const Container = styled(Col)`
width: 100%;
background-color: var(--gray-black);
padding: 40px 80px;
gap: 45px;
div {
user-select: text;
}
`
const Info = styled(Header1)`
color: var(--gray-white);
text-wrap: wrap;
`

export default Footer
10 changes: 8 additions & 2 deletions src/components/Router.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import React from 'react'
import { BrowserRouter, Routes, Route, NavLink, Outlet } from 'react-router-dom'

import MainPage from '../pages/Main/MainPage'
import HistoryPage from '../pages/History/HistoryPage.tsx'
import VisionPage from '../pages/Vision/VisionPage'
import ProjectsPage from '../pages/Projects/ProjectsPage'
import ProjectPage from '../pages/Projects/ProjectPage'
import RecruitPage from '../pages/Recruit/RecruitPage'

import Footer from '../components/Footer'
import Header from '../components/Header'
import HeaderBanner from '../components/HeaderBanner'

const Layout = () => {
return (
<>
Expand All @@ -18,11 +22,11 @@ const Layout = () => {
</>
)
}

export default function Router() {
return (
<BrowserRouter>
<nav>
{/* class에 함수 넣는거 수정해야 함 */}
<NavLink className={({ isActive }) => 'nav-link' + (isActive ? ' click' : '')} to="/">
MainPage
</NavLink>
Expand All @@ -45,7 +49,9 @@ export default function Router() {
<Route path="/" element={<MainPage />} />
<Route path="/history" element={<HistoryPage />} />
<Route path="/vision" element={<VisionPage />} />
<Route path="/projects" element={<ProjectsPage />} />
<Route path="/projects" element={<ProjectsPage />}>
<Route path=":id" element={<ProjectPage />} />
</Route>
<Route path="/recruit" element={<RecruitPage />} />
</Route>
</Routes>
Expand Down
2 changes: 2 additions & 0 deletions src/components/atomic/container/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export const Row = styled.div<rowColTypes>`
${(props) => props.justify && `justify-content: ${props.justify};`}
${(props) => props.align && `align-items: ${props.align};`}
${(props) => props.gap && `gap: ${props.gap};`}
${(props) => props.padding && `padding: ${props.padding}`}
${(props) => props.margin && `margin: ${props.margin}`}
`

export const Col = styled(Row)`
Expand Down
2 changes: 1 addition & 1 deletion src/components/atomic/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Title, Header1, Description } from './typo'
import { Row, Col, Wrap, Blank } from './container'

export { Title, Header1, Description, Row, Col, Wrap, Blank }
export { Title, Header1, Description, Row, Col, Wrap, Blank }
2 changes: 2 additions & 0 deletions src/components/atomic/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ export interface flex {
alignContent?: string
gap?: string
$reverse?: boolean
padding?: string
margin?: string
}

export interface widthAndHeight {
Expand Down
84 changes: 40 additions & 44 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,50 +1,46 @@



html,body {

width:100vw;
height:100vh;
margin:0;
padding:0;

html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
* {
font-family:'SUIT Variable', sans-serif;
box-sizing: border-box;
user-select: none;
font-family: 'Pretendard Variable', sans-serif;
box-sizing: border-box;
user-select: none;
}
a {
text-decoration: none;
cursor: pointer;
text-decoration: none;
cursor: pointer;
}
:root {
--gray-white:#FFFFFF;
--gray-0:#FBFBFB;
--gray-100:#EBEDEF;
--gray-200:#DADCDE;
--gray-300:#CACBCD;
--gray-400:#ABACAF;
--gray-500:#8D9093;
--gray-600:#64676C;
--gray-700:#56595D;
--gray-800:#3B3D3F;
--gray-900:#212325;
--gray-black:#000000;

--brand-100:#CCE4FF;
--brand-200:#99C8FF;
--brand-300:#66ADFF;
--brand-400:#3391FF;
--brand-500:#0076FF;
--brand-600:#005ECC;
--brand-700:#004799;
--brand-800:#002F66;
--brand-900:#001833;

--negative-500:#F63A3A;

--caution-500:#FFD224;

--positive-500:#27B278;
}
--gray-white: #ffffff;
--gray-0: #fbfbfb;
--gray-100: #ebedef;
--gray-200: #dadcde;
--gray-300: #cacbcd;
--gray-400: #abacaf;
--gray-500: #8d9093;
--gray-600: #64676c;
--gray-700: #56595d;
--gray-800: #3b3d3f;
--gray-900: #212325;
--gray-black: #000000;

--brand-100: #cce4ff;
--brand-200: #99c8ff;
--brand-300: #66adff;
--brand-400: #3391ff;
--brand-500: #0076ff;
--brand-600: #005ecc;
--brand-700: #004799;
--brand-800: #002f66;
--brand-900: #001833;

--negative-500: #f63a3a;

--caution-500: #ffd224;

--positive-500: #27b278;
}
10 changes: 8 additions & 2 deletions src/pages/History/HistoryPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,11 @@ export default function HistoryPage() {
{[...Array(9)].map((v, i) => (
<>
<Row width="120px" justify="space-between">
<Year hover={{ color: '--gray-black' }} enabled={2023 - i === activated} onClick={() => setActivated(2023 - i)}>
<Year
hover={{ color: '--gray-black' }}
enabled={2023 - i === activated}
onClick={() => setActivated(2023 - i)}
>
{2023 - i}
</Year>
<YearCircle enabled={2023 - i === activated} />
Expand Down Expand Up @@ -99,7 +103,9 @@ export default function HistoryPage() {
2020.07.21
</Header1>
</Row>
<Title color={'--gray-black'}>[STAC2022] 미래산업 부문 대상 'ASD' "AI를 통한 더 좋은 공부 방법을 소개해요"</Title>
<Title color={'--gray-black'}>
[STAC2022] 미래산업 부문 대상 'ASD' "AI를 통한 더 좋은 공부 방법을 소개해요"
</Title>
</Col>
</Link>
</Col>
Expand Down
116 changes: 116 additions & 0 deletions src/pages/Projects/ProjectData.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
{
"imageFolderPath": "./src/assets/ProjectThumbnail/",
"projects": [
{
"id": 1,
"imageUrl": ["JipGaGoSipDa.jpg"],
"year": 2020,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 2,
"imageUrl": ["DAYCUBE.jpg"],
"year": 2020,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 3,
"imageUrl": ["MOLA.jpg"],
"year": 2020,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 4,
"imageUrl": ["JOIN.jpg"],
"year": 2020,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 5,
"imageUrl": ["DINEON.jpg"],
"year": 2020,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 6,
"imageUrl": ["ITNun.jpg"],
"year": 2022,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 7,
"imageUrl": ["ASD.jpg", "ASD2.jpg"],
"year": 2022,
"title": "학습 환경 개선 프로젝트, ASD",
"detail": [
{
"content": "우리는 공부를 할 때에 수많은 방해에 노출되어 있습니다.\n\n그중 가장 치명적인 것은 모바일 기기라고 할 수 있는데요, ",
"bold": false
},
{
"content": "ASD는 모바일 기기로부터의 방해를 받지 않도록 돕습니다. 자체적으로 개발한 인공지능 스피커와 함께 사용",
"bold": true
},
{
"content": "하며, 스피커 위에 기기를 올리면 공부시간에 돌입하며 방해금지 모드가 됩니다.\n\n인공지능 스피커에게 말로 명령을 내려 모바일 기기와의 불필요한 접촉을 막을 수 있습니다.",
"bold": false
}
],
"achievement": [
{ "content": "STA+C", "highlight": false },
{ "content": "대상", "highlight": true },
{ "content": "수상", "highlight": false }
],
"media": {
"press": "게임 동아",
"date": "2022.11.14",
"title": "[STAC2022] 미래산업 부문 대상 'ASD' \"AI를 통한 더 좋은 공부 방법을 소개해요\""
}
},
{
"id": 8,
"imageUrl": ["Yummy.jpg"],
"year": 2023,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 9,
"imageUrl": ["MK1.jpg"],
"year": 2023,
"title": "",
"detail": "",
"achievement": null,
"media": null
},
{
"id": 10,
"imageUrl": ["VOAH.jpg"],
"year": 2023,
"title": "",
"detail": "",
"achievement": null,
"media": null
}
]
}
Loading

0 comments on commit af75a36

Please sign in to comment.