[TS-38] home화면 UI구현

src/App.tsx

@@ -1,5 +1,7 @@
+import MainPage from '@pages/MainPage';
+
 function App() {
-  return <div className="App" />;
+  return <MainPage />;
 }
 
 export default App;

src/components/base/Card.tsx

@@ -0,0 +1,88 @@
+import {
+  Card,
+  CardContent,
+  CardMedia,
+  Chip,
+  styled,
+  Typography,
+} from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+
+interface Props {
+  author: {
+    name: string;
+    imgSrc: string;
+    url: string;
+  };
+  thumbnail: string;
+  title: string;
+  description: string;
+  team: string;
+  date: string;
+}
+
+const CardInfo = styled('div')`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+
+  div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+
+    a {
+      display: lock;
+      font-size: 16px;
+      line-height: 1.43;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    span:last-child {
+      display: block;
+      width: 100%;
+      font-size: 14px;
+    }
+  }
+`;
+
+const ClampTypography = styled(Typography)`
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+`;
+
+export default function CustomCard({
+  author,
+  thumbnail,
+  title,
+  description,
+  team,
+  date,
+}: Props) {
+  return (
+    <Card component="article" sx={{ maxWidth: 345 }}>
+      <CardInfo>
+        <Avatar alt="user profile" src={author.imgSrc} />
+        <div>
+          <a href={author.url}>{author.name}</a>
+          <Chip label={team} size="small" />
+          <span>{date}</span>
+        </div>
+      </CardInfo>
+      <CardMedia component="img" height="194" image={thumbnail} alt="" />
+      <CardContent>
+        <Typography variant="h5" component="h3">
+          {title}
+        </Typography>
+        <ClampTypography variant="body2">{description}</ClampTypography>
+      </CardContent>
+    </Card>
+  );
+}

src/components/base/Chip.tsx

@@ -0,0 +1,18 @@
+import { Chip } from '@mui/material';
+
+interface Props {
+  label: string;
+  onClick: () => void;
+  variant: 'filled' | 'outlined';
+}
+
+export default function CustomChip({ label, onClick, variant }: Props) {
+  return (
+    <Chip
+      label={label}
+      onClick={onClick}
+      variant={variant}
+      component="button"
+    />
+  );
+}

src/components/base/Container.tsx

@@ -0,0 +1,15 @@
+import { Container } from '@mui/material';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  sx?: { mb: string };
+}
+
+export default function CustomContainer({ children, sx }: Props) {
+  return <Container sx={sx}>{children}</Container>;
+}
+
+CustomContainer.defaultProps = {
+  sx: {},
+};

src/components/base/LinkButton.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@mui/material';
+
+interface Props {
+  children: string;
+}
+
+export default function CustomButton({ children }: Props) {
+  return (
+    <Button
+      variant="outlined"
+      component="a"
+      href="/"
+      color="primary"
+      size="small"
+    >
+      {children}
+    </Button>
+  );
+}

src/components/base/Logo/index.tsx → src/components/base/Logo.tsx

@@ -1,3 +1,3 @@
 export default function Logo() {
-  return <h1>Til-Store</h1>;
+  return <span>Til-Store</span>;
 }

src/components/base/Pagination.tsx

@@ -0,0 +1,16 @@
+import { Pagination } from '@mui/material';
+
+interface Props {
+  count: number;
+}
+
+export default function CustomPagination({ count }: Props) {
+  return (
+    <Pagination
+      variant="outlined"
+      shape="rounded"
+      count={count}
+      color="primary"
+    />
+  );
+}

src/components/base/Select.tsx

@@ -0,0 +1,42 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material';
+import { useState } from 'react';
+
+interface Props {
+  options: number[];
+  label: string;
+  onChange: (value: string) => void;
+}
+
+export default function CustomSelect({ label, options, onChange }: Props) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: SelectChangeEvent) => {
+    setValue(e.target.value);
+    onChange(e.target.value);
+  };
+
+  return (
+    <FormControl size="small" sx={{ minWidth: 200 }}>
+      <InputLabel id="generation-select-label">{label}</InputLabel>
+      <Select
+        labelId="generation-select-label"
+        id="generation-select"
+        value={value}
+        label={label}
+        onChange={handleChange}
+      >
+        {options.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

src/components/base/index.ts

@@ -1,6 +1,7 @@
-export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as Chip } from './Chip';
 export { default as Logo } from './Logo';
 export { default as Pagination } from './Pagination';
 export { default as Select } from './Select';
+export { default as Container } from './Container';
+export { default as LinkButton } from './LinkButton';

src/components/layouts/CardList/CardList.style.ts

@@ -0,0 +1,42 @@
+import { styled } from '@mui/material';
+
+export const HiddenTitle = styled('h2')`
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+`;
+
+export const PaginationWrapper = styled('div')`
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+`;
+
+export const CardList = styled('ul')`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+export const CardItem = styled('li')`
+  width: calc(25% - 12px);
+  padding: 0;
+  margin: 0;
+  @media (max-width: 1024px) {
+    width: calc(33.333% - 16px);
+  }
+  @media (max-width: 768px) {
+    width: calc(50% - 8px);
+  }
+  @media (max-width: 375px) {
+    width: 100%;
+  }
+`;

src/components/layouts/CardList/index.tsx

@@ -0,0 +1,45 @@
+import { Card, Container, Pagination } from '@components/base';
+import * as S from './CardList.style';
+
+interface Props {
+  cards: {
+    author: {
+      name: string;
+      imgSrc: string;
+      url: string;
+    };
+    team: string;
+    date: string;
+    thumbnail: string;
+    title: string;
+    description: string;
+  }[];
+}
+
+export default function CardList({ cards }: Props) {
+  return (
+    <Container>
+      <S.HiddenTitle>TIL 목록</S.HiddenTitle>
+      <S.CardList>
+        {cards.map(
+          ({ author, team, date, thumbnail, title, description }, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <S.CardItem key={index}>
+              <Card
+                author={author}
+                team={team}
+                date={date}
+                thumbnail={thumbnail}
+                title={title}
+                description={description}
+              />
+            </S.CardItem>
+          )
+        )}
+      </S.CardList>
+      <S.PaginationWrapper>
+        <Pagination count={10} />
+      </S.PaginationWrapper>
+    </Container>
+  );
+}

src/components/layouts/FilterChips/FilterChips.style.ts

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material';
+
+const ChipList = styled('ul')`
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 24px;
+  overflow-x: auto;
+  list-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export default ChipList;