From 8c3a509892bf1cdb98ee384eb28a5fcdb50d6567 Mon Sep 17 00:00:00 2001 From: limkhl Date: Wed, 1 Jun 2022 21:14:59 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20alias=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: goum --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index a7ec642..2c55715 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,7 @@ "jsx": "react-jsx", "baseUrl": ".", "paths": { - "@/*": ["src/*"] + "@components/*": ["src/components/*"] } }, "include": ["**/*.ts", "**/*.tsx", ".eslintrc.json"], From c78138a1be873e3ab2883881b956643df2d72e9e Mon Sep 17 00:00:00 2001 From: limkhl Date: Wed, 1 Jun 2022 21:17:21 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EB=8C=80=EB=9E=B5=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/Button/index.tsx | 9 +++++++++ src/components/base/Card/index.tsx | 5 +++++ src/components/base/Chip/index.tsx | 10 ++++++++++ src/components/base/Logo/index.tsx | 3 +++ src/components/base/Pagination/index.tsx | 5 +++++ src/components/base/Select/index.tsx | 5 +++++ src/components/base/index.ts | 6 ++++++ src/components/layouts/Header/index.tsx | 3 +++ 8 files changed, 46 insertions(+) create mode 100644 src/components/base/Button/index.tsx create mode 100644 src/components/base/Card/index.tsx create mode 100644 src/components/base/Chip/index.tsx create mode 100644 src/components/base/Logo/index.tsx create mode 100644 src/components/base/Pagination/index.tsx create mode 100644 src/components/base/Select/index.tsx create mode 100644 src/components/base/index.ts create mode 100644 src/components/layouts/Header/index.tsx diff --git a/src/components/base/Button/index.tsx b/src/components/base/Button/index.tsx new file mode 100644 index 0000000..f6bd284 --- /dev/null +++ b/src/components/base/Button/index.tsx @@ -0,0 +1,9 @@ +import { Button } from '@mui/material'; + +interface Props { + children: string; +} + +export default function CustomButton({ children }: Props) { + return ; +} diff --git a/src/components/base/Card/index.tsx b/src/components/base/Card/index.tsx new file mode 100644 index 0000000..52d2eef --- /dev/null +++ b/src/components/base/Card/index.tsx @@ -0,0 +1,5 @@ +import { Card } from '@mui/material'; + +export default function CustomCard() { + return ; +} diff --git a/src/components/base/Chip/index.tsx b/src/components/base/Chip/index.tsx new file mode 100644 index 0000000..b4007e7 --- /dev/null +++ b/src/components/base/Chip/index.tsx @@ -0,0 +1,10 @@ +import { Chip } from '@mui/material'; + +interface Props { + label: string; + onClick: () => void; +} + +export default function CustomChip({ label, onClick }: Props) { + return ; +} diff --git a/src/components/base/Logo/index.tsx b/src/components/base/Logo/index.tsx new file mode 100644 index 0000000..5f0b088 --- /dev/null +++ b/src/components/base/Logo/index.tsx @@ -0,0 +1,3 @@ +export default function Logo() { + return

Til-Store

; +} diff --git a/src/components/base/Pagination/index.tsx b/src/components/base/Pagination/index.tsx new file mode 100644 index 0000000..789573a --- /dev/null +++ b/src/components/base/Pagination/index.tsx @@ -0,0 +1,5 @@ +import { Pagination } from '@mui/material'; + +export default function CustomPagination() { + return ; +} diff --git a/src/components/base/Select/index.tsx b/src/components/base/Select/index.tsx new file mode 100644 index 0000000..762dbdf --- /dev/null +++ b/src/components/base/Select/index.tsx @@ -0,0 +1,5 @@ +import { Select } from '@mui/material'; + +export default function CustomSelect() { + return + {options.map((option) => ( + + {option} + + ))} + + + ); +} diff --git a/src/components/base/Select/index.tsx b/src/components/base/Select/index.tsx deleted file mode 100644 index 762dbdf..0000000 --- a/src/components/base/Select/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Select } from '@mui/material'; - -export default function CustomSelect() { - return + + ); +} diff --git a/src/components/layouts/Footer/Footer.style.ts b/src/components/layouts/Footer/Footer.style.ts new file mode 100644 index 0000000..11f9ed6 --- /dev/null +++ b/src/components/layouts/Footer/Footer.style.ts @@ -0,0 +1,22 @@ +import { styled } from '@mui/material'; + +const Footer = styled('footer')` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + text-align: center; + background-color: #efefef; + + address { + font-size: 0.75rem; + font-style: normal; + } + + a { + color: inherit; + text-decoration: none; + } +`; + +export default Footer; diff --git a/src/components/layouts/Footer/index.tsx b/src/components/layouts/Footer/index.tsx new file mode 100644 index 0000000..82e18cb --- /dev/null +++ b/src/components/layouts/Footer/index.tsx @@ -0,0 +1,20 @@ +import { Container } from '@components/base'; +import StyledFooter from './Footer.style'; + +export default function Footer() { + return ( + + +
+ + https://github.com/TIL-store + +
+ + + ); +} diff --git a/src/components/layouts/Header/BetweenWrapper.style.tsx b/src/components/layouts/Header/BetweenWrapper.style.tsx deleted file mode 100644 index 86934d9..0000000 --- a/src/components/layouts/Header/BetweenWrapper.style.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { styled } from '@mui/material'; - -const BetweenWrapper = styled('div')` - display: flex; - align-items: center; - justify-content: space-between; -`; - -export default BetweenWrapper; diff --git a/src/components/layouts/Header/TitleLink.style.tsx b/src/components/layouts/Header/Header.style.ts similarity index 52% rename from src/components/layouts/Header/TitleLink.style.tsx rename to src/components/layouts/Header/Header.style.ts index 805fe95..9156eeb 100644 --- a/src/components/layouts/Header/TitleLink.style.tsx +++ b/src/components/layouts/Header/Header.style.ts @@ -1,6 +1,12 @@ import { styled } from '@mui/material'; -const TitleLink = styled('a')` +export const BetweenWrapper = styled('div')` + display: flex; + align-items: center; + justify-content: space-between; +`; + +export const TitleLink = styled('a')` display: block; font-size: 1rem; ${({ theme }) => ` @@ -9,5 +15,3 @@ const TitleLink = styled('a')` text-decoration: none; `; - -export default TitleLink; diff --git a/src/components/layouts/Header/index.tsx b/src/components/layouts/Header/index.tsx index d28522e..5de1292 100644 --- a/src/components/layouts/Header/index.tsx +++ b/src/components/layouts/Header/index.tsx @@ -1,19 +1,18 @@ import { LinkButton, Container, Logo } from '@components/base'; -import BetweenWrapper from '@components/layouts/Header/BetweenWrapper.style'; -import TitleLink from '@components/layouts/Header/TitleLink.style'; +import * as S from './Header.style'; export default function Header() { return (
- +

- + - +

관리자 페이지로 이동 - +
); diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 39563b0..ce0e65e 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,21 +1,23 @@ import { rest } from 'msw'; const handlers = [ - rest.get('/movies', (req, res, ctx) => { + rest.get('/teams', (req, res, ctx) => { return res( ctx.status(200), ctx.json({ data: [ - { - id: 1, - title: 'Spider Man', - rate: 4.5, - }, - { - id: 2, - title: 'Kings Man', - rate: 4.5, - }, + { id: 1, name: '동영' }, + { id: 2, name: '기동' }, + { id: 3, name: '달리' }, + { id: 4, name: '동근' }, + { id: 5, name: '나영' }, + { id: 6, name: '요한' }, + { id: 7, name: '찬희' }, + { id: 8, name: '화랑' }, + { id: 9, name: '지은' }, + { id: 10, name: '재호' }, + { id: 11, name: '루카스' }, + { id: 12, name: '오프' }, ], }) ); diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx new file mode 100644 index 0000000..ea9d492 --- /dev/null +++ b/src/pages/MainPage/index.tsx @@ -0,0 +1,133 @@ +import Header from '@components/layouts/Header'; +import CardList from '@components/layouts/CardList'; +import Footer from '@components/layouts/Footer'; +import PageContainer from '@components/layouts/PageContainer'; +import FilterChips from '@components/layouts/FilterChips'; +import { useState } from 'react'; +import FilterSelect from '@components/layouts/FilterSelect'; + +const teams = [ + { id: 1, name: '동영' }, + { id: 2, name: '기동' }, + { id: 3, name: '달리' }, + { id: 4, name: '동근' }, + { id: 5, name: '나영' }, + { id: 6, name: '요한' }, + { id: 7, name: '찬희' }, + { id: 8, name: '화랑' }, + { id: 9, name: '지은' }, + { id: 10, name: '재호' }, + { id: 11, name: '루카스' }, + { id: 12, name: '오프' }, +]; + +const generations = [1, 2]; + +const tils = [ + { + author: { + name: 'rekong', + imgSrc: '', + }, + team: '동영', + date: '2022-04-27', + thumbnail: 'image', + title: '글의 제목 입니다.', + description: + '간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다', + }, + { + author: { + name: 'rekong', + imgSrc: '', + }, + team: '동영', + date: '2022-04-27', + thumbnail: 'image', + title: '글의 제목 입니다.', + description: + '간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다', + }, + { + author: { + name: 'rekong', + imgSrc: '', + }, + team: '동영', + date: '2022-04-27', + thumbnail: 'image', + title: '글의 제목 입니다.', + description: + '간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다', + }, + { + author: { + name: 'rekong', + imgSrc: '', + }, + team: '동영', + date: '2022-04-27', + thumbnail: 'image', + title: '글의 제목 입니다.', + description: + '간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다', + }, + { + author: { + name: 'rekong', + imgSrc: '', + }, + team: '동영', + date: '2022-04-27', + thumbnail: 'image', + title: '글의 제목 입니다.', + description: + '간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다', + }, + { + author: { + name: 'rekong', + imgSrc: '', + }, + team: '동영', + date: '2022-04-27', + thumbnail: 'image', + title: '글의 제목 입니다.', + description: + '간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다간단 요약입니다 간단 요약입니다 간단 요약입니다', + }, +]; + +export default function MainPage() { + const [selectedTeam, setSelectedTeam] = useState(teams[0].name); + + const handleClickTeam = (name: string) => { + setSelectedTeam(name); + // TODO : 팀별 TIL card 불러오기 + }; + + const handleChangeGeneration = (generation: string) => { + console.log('Change', generation); + // TODO : 기수별 TIL card 불러오기 + }; + + return ( + +
+ + +
+ +
+ +