FRONTENDSCHOOL7 · merrybmc · Aug 9, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "carousel",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/recoil": "^0.0.9",
+    "@types/styled-components": "^5.1.26",
+    "browser-image-compression": "^2.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.0.7",
+    "styled-reset": "^4.5.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/123.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <title>Weniv Slide</title>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
+  </style>
+
+
+</head>
+
+<body>
+
+  <div id="root"></div>
+
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,21 @@
+import Mainpage from './pages/Mainpage';
+import { createGlobalStyle } from 'styled-components';
+import Reset from 'styled-reset';
+
+const GlobalStyle = createGlobalStyle`
+  ${Reset}
+  * {
+    font-family: 'Noto Sans KR', sans-serif;
+  }
+`;
+
+function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <Mainpage />
+    </>
+  );
+}
+
+export default App;
diff --git a/src/Global/global.css b/src/Global/global.css
@@ -0,0 +1,8 @@
+.a11y-hidden {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+}
diff --git a/src/components/CreateImg/CreateImg.styled.js b/src/components/CreateImg/CreateImg.styled.js
@@ -0,0 +1,47 @@
+import { styled } from 'styled-components';
+
+export const Header = styled.header`
+  @media screen and (max-width: 1800px) {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    margin-top: 2rem;
+  }
+`;
+
+export const CreateImgInput = styled.input`
+  max-width: 100%;
+  margin-top: 4.81rem;
+
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip-path: inset(50%);
+
+  @media screen and (max-width: 1800px) {
+    margin-top: 0;
+  }
+`;
+
+export const CreateImgLabel = styled.label`
+  border-radius: 0.625rem;
+  background: #2f80ed;
+
+  border: none;
+
+  margin-left: 9.31rem;
+  padding: 0.88rem 2.63rem 0.88rem 2.44rem;
+
+  color: #fff;
+  text-align: center;
+  font-family: Noto Sans KR;
+  font-size: 1.125rem;
+  font-weight: 700;
+
+  cursor: pointer;
+
+  @media screen and (max-width: 1800px) {
+    margin-left: 0;
+  }
+`;
diff --git a/src/components/CreateImg/CreateImg.tsx b/src/components/CreateImg/CreateImg.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { CreateImgInput, CreateImgLabel, Header } from './CreateImg.styled';
+import useCreateImage from '../../hooks/useCreateImage';
+import '../../Global/global.css';
+
+const CreateImg: React.FC = () => {
+  const { actionImgCompress } = useCreateImage();
+
+  const handleImg = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const imgFile = e.target.files?.[0];
+    const fileCheck = imgFile?.type.includes('image');
+
+    imgFile && fileCheck ? actionImgCompress(imgFile) : alert('파일이 올바르지 않습니다.');
+  };
+
+  return (
+    <>
+      <Header>
+        <h1 className='a11y-hidden'>이미지 업로드</h1>
+        <CreateImgInput
+          type='file'
+          id='createImg'
+          onChange={(e) => {
+            handleImg(e);
+          }}
+        />
+        <CreateImgLabel htmlFor='createImg'>이미지 업로드</CreateImgLabel>
+      </Header>
+    </>
+  );
+};
+
+export default CreateImg;
diff --git a/src/components/ImgList/ImgList.styled.js b/src/components/ImgList/ImgList.styled.js
@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+
+export const Article = styled.article`
+  display: flex;
+  margin-top: 3.63rem;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  @media screen and (max-width: 1800px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+export const LeftBtn = styled.button`
+  border-radius: 2.28125rem;
+  border: 3px solid var(--gray-3, #828282);
+  background: #fff;
+
+  margin-top: 12.56rem;
+  margin-left: 9.31rem;
+
+  color: #828282;
+  text-align: center;
+  font-family: Noto Sans KR;
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  padding: 1rem 2.44rem;
+
+  cursor: pointer;
+
+  @media screen and (max-width: 1800px) {
+    margin-top: 0;
+    margin-left: 0;
+    margin-bottom: 2rem;
+  }
+
+  @media screen and (max-width: 1120px) {
+    margin-bottom: 23rem;
+  }
+`;
+
+export const RightBtn = styled.button`
+  border-radius: 2.28125rem;
+  border: 3px solid var(--gray-3, #828282);
+  background: #fff;
+
+  margin-top: 12.56rem;
+  margin-right: 9.31rem;
+
+  color: #828282;
+  text-align: center;
+  font-family: Noto Sans KR;
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  padding: 1rem 2.44rem;
+
+  cursor: pointer;
+
+  @media screen and (max-width: 1800px) {
+    margin-right: 0;
+    margin-top: 2rem;
+  }
+
+  @media screen and (max-width: 1120px) {
+    margin-top: 28rem;
+  }
+`;
+
+export const ImgGroup = styled.section`
+  display: flex;
+  justify-content: center;
+
+  @media screen and (max-width: 1120px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+export const MainImgGroup = styled.div`
+  position: relative;
+  z-index: 3;
+`;
+
+export const MainImg = styled.img`
+  width: 29rem;
+  height: 28.9375rem;
+
+  border-radius: 0.625rem;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
+`;
+
+export const SideImgGroup = styled.div`
+  display: flex;
+  position: absolute;
+  gap: 9rem;
+  z-index: 2;
+  margin-top: 2.13rem;
+  @media screen and (max-width: 1120px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+export const SideImg = styled.img`
+  width: 23.625rem;
+  height: 23.625rem;
+  border-radius: 0.625rem;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+`;
+
+export const EdgeImgGroup = styled.div`
+  display: flex;
+  position: absolute;
+  gap: 40.12rem;
+
+  margin-top: 5.13rem;
+  @media screen and (max-width: 1120px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+export const EdgeImg = styled.img`
+  width: 18.0625rem;
+  height: 18.0625rem;
+  border-radius: 0.625rem;
+
+  background-size: cover;
+`;