[박소희] 멋쟁이 사자처럼 fe-gallery 과제 제출

README.md

@@ -49,14 +49,6 @@ http://likelion-10th-inha-gallery.surge.sh
 
 기타 디자인과 레이아웃은 원본과 요구사항과 크게 다르지 않은 범위에서 원하는대로 만드셔도 좋습니다.
 
-### 📘 추가 구현 사항
-
-> 아래 내용은 필수 구현 사항을 모두 구현한 다음 선택적으로 구현해주세요.
-
-이미지 조회, 댓글 추가/삭제를 넘어 이미지를 추가하고 삭제하는 기능을 개발합니다. 아래 내용은 자유롭게 기획, 디자인 하여 구현해주세요 🤗.
-
-1. 특정한 이미지를 삭제하는 기능
-
 ## API
 
 요청을 호스트 정보와 문서는 아래와 같습니다.

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,5 +1,30 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import GlobalStyle from "./component/Global";
+import HomePage from "./pages/HomePage";
+import Detail from "./pages/Detail";
+
+const apiUrl = "https://gallery.devhudi.xyz";
+
 const App = () => {
-  return <div> Code Here :)</div>;
+  return (
+    <BrowserRouter>
+      <GlobalStyle />
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <HomePage
+              imgUrl="fire.jpg"
+              name="likelion_10th_frontend"
+              content="멋쟁이사자처럼 10기 여러분의 소중한 추억들을 보관합니다 😎"
+              apiUrl={apiUrl}
+            />
+          }
+        />
+        <Route path="/:id" element={<Detail apiUrl={apiUrl} />} />
+      </Routes>
+    </BrowserRouter>
+  );
 };
 
 export default App;

src/component/ArticleDetail.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+
+const Title = styled.div`
+  width: 100%;
+  height: 50px;
+  font-size: 30px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-left: 20px;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 50px;
+  font-size: 18px;
+  margin-left: 20px;
+`;
+
+const Image = styled.div`
+  width: 100%;
+  height: 500px;
+  background-image: url(${(props) => props.imgUrl});
+  background-size: cover;
+`;
+
+const ArticleDetail = ({ title, content, imgUrl }) => {
+  return (
+    <>
+      <Title>{title}</Title>
+      <Content>{content}</Content>
+      <Image imgUrl={imgUrl}></Image>
+    </>
+  );
+};
+
+export default ArticleDetail;

src/component/Comment.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import axios from "axios";
+
+const CommentContainer = styled.div`
+  display: flex;
+  padding: 10px 30px 10px 30px;
+`;
+
+const CommentName = styled.div`
+  flex-basis: 50px;
+  font-weight: bold;
+`;
+
+const CommentContent = styled.div`
+  flex-grow: 5;
+  font-weight: 500;
+`;
+
+const CommentDelete = styled.div`
+  flex-basis: 50px;
+  color: gray;
+  cursor: pointer;
+`;
+
+const Comment = ({ id, content, apiUrl }) => {
+  const onClickDelete = () => {
+    axios.delete(`${apiUrl}/album/delete/comment/${id}`).then(() => {
+      window.location.reload(true);
+    });
+  };
+
+  return (
+    <>
+      <CommentContainer>
+        <CommentName>익명</CommentName>
+        <CommentContent>{content}</CommentContent>
+        <CommentDelete onClick={onClickDelete}>삭제</CommentDelete>
+      </CommentContainer>
+    </>
+  );
+};
+
+export default Comment;

src/component/Global.jsx

@@ -0,0 +1,9 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0px;
+  }
+`;
+
+export default GlobalStyle;