한지우 10주차 과제 제출

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+# Description(구현한 기능)
+
+- [ ] 
+- [ ] 
+
+
+## Type of change (전 주차 대비)
+
+Please delete options that are not relevant.
+
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as
+      expected)
+
+
+## Screenshots (if appropriate):

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode/*

README.md

@@ -1,70 +1,59 @@
-# Getting Started with Create React App
+# 11th snulion pre-seminar react
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Goal
 
-## Available Scripts
+-   2023 1학기 블로그만들기 세션에서 backend 파트 세미나를 위한 base code 제작
+-   1학기 동아리 활동 간 필요한 매 주차 solution code 제작
 
-In the project directory, you can run:
+## Curriculum
 
-### `npm start`
+-   8주차(5/6) React 입문
+    -   발표 : 김동훈 김시원 김진호
+    -   검수 : 김주연 한우현 홍정우
+-   9주차(5/13) React 실습
+    -   발표 : 김지현 한승오 홍정우
+    -   검수 : 김시원 이동재 이희승
+-   10주차(5/20) React 심화1
+    -   발표 : 이동재 한우현
+    -   검수 : 김진호 이희승 박평재 한승오
+-   10주차(5/27) React 심화2
+    -   발표 : 김동훈 한우현
+    -   검수 : 김시원 김지현 박평재 이동재
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+## Deadline
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+-   8주차(5/6) : 2/14 자정까지
+-   9주차(5/13) : 2/28 자정까지
+-   10주차(5/20) : 4/1 자정까지
+-   11주차(5/27) : 5/1 자정까지
 
-### `npm test`
+## Rule
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### 1. time limit
 
-### `npm run build`
+    -   정해진 deadline까지 code base를 완성해주세요.
+    -   다음 주차 사람은 이를 기반으로 세미나를 준비하게 됩니다.
+    -   불가피하게 code base 변경이 필요할 경우 세미나 팀에 꼭 노티주세요.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### 2. Process
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+    1) branch 생성
+    - solution branch에서 branch를 파서 작업하시면 됩니다.
+    - branch 명은 week8/solution, week9/solution, week10/solution, week11/solution 으로 해주세요.
+    - 협업이 필요할시 jh/week5, hs/week5 이런식으로 작업하고 최종적으로 soluion/week2로 합쳐주시면 됩니다. 이 부분은 자유롭게
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+    2) commit
+    - commit message는 다음 중 하나로 작성해주세요.
+      - feat: 새로운 feature추가
+      - fix: 내용 수정
+      - refactor: 최적화
+      - chore: 사소한 변경(lint, typo ...)
 
-### `npm run eject`
+    3) pull request
+    - 작업 후 solution branch로 pull request 날려주세요.
+    - reviewers : 다른 발표자 1명
+    - assignees : 자기 자신
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+    4) merge
+    - 발표자 2명 중 1명이 merge 하시고 노티 주세요.
+    - merge 후에 week8/solution, week9/solution, week10/solution, week11/solution branch는 반드시 남겨주세요. 삭제 금지 !

package.json

@@ -1,14 +1,16 @@
 {
-  "name": "0506",
+  "name": "snulion-react-1",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.1",
+    "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -37,6 +39,6 @@
     ]
   },
   "devDependencies": {
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.2.6"
   }
 }

src/App.css

@@ -1,4 +1,4 @@
-.App {
+.app {
   overflow-x: hidden;
   box-sizing: border-box;
   display: flex;

src/App.js

@@ -1,19 +1,18 @@
-import logo from "./logo.svg";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import "./App.css";
-
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import HomePage from "./routes/HomePage";
 import PostCreatePage from "./routes/PostCreatePage";
 import PostEditPage from "./routes/PostEditPage";
 import SignUpPage from "./routes/SignUpPage";
 import PostDetailPage from "./routes/PostDetailPage";
 import SignInPage from "./routes/SignInPage";
+import MyPage from "./routes/MyPage"
 
 function App() {
   return (
-    <div className="App">
+    <div className="app">
       <BrowserRouter>
         <Header />
         <Routes>
@@ -29,6 +28,8 @@ function App() {
           <Route path="/signup" element={<SignUpPage />} />
           {/* sign up */}
           <Route path="/signin" element={<SignInPage />} />
+          {/* my info */}
+          <Route path="/mypage" element={<MyPage />} />
         </Routes>
         <Footer />
       </BrowserRouter>

src/apis/api.js

@@ -0,0 +1,150 @@
+import { instance, instanceWithToken } from "./axios";
+
+// Account 관련 API들
+export const signIn = async (data) => {
+  const response = await instance.post("/account/signin/", data);
+  if (response.status === 200) {
+    window.location.href = "/";
+  } else {
+    console.log("Error");
+  }
+};
+
+export const signUp = async (data) => {
+  const response = await instance.post("/account/signup/", data);
+  if (response.status === 200) {
+    window.location.href = "/";
+  } else {
+    console.log("Error");
+  }
+  return response;
+};
+// src/apis/api.js
+// ...
+// 추가
+export const getPosts = async () => {
+  const response = await instance.get("/post/");
+  return response.data;
+};
+
+export const getPost = async (id) => {
+  const response = await instance.get(`/post/${id}/`);
+  return response.data;
+};
+
+export const createPost = async (data, navigate) => {
+  const response = await instanceWithToken.post("/post/", data);
+  if (response.status === 201) {
+    console.log("POST SUCCESS");
+    navigate("/");
+  } else {
+    console.log("[ERROR] error while creating post");
+  }
+};
+
+export const updatePost = async (id, data, navigate) => {
+  const response = await instanceWithToken.patch(`/post/${id}/`, data);
+  if (response.status === 200) {
+    console.log("POST UPDATE SUCCESS");
+    navigate("/");
+  } else {
+    console.log("[ERROR] error while updating post");
+  }
+};
+
+export const getUser = async () => {
+  const response = await instanceWithToken.get("/account/info/");
+  if (response.status === 200) {
+    console.log("GET USER SUCCESS");
+  } else {
+    console.log("[ERROR] error while updating comment");
+  }
+  return response.data;
+};
+
+// 과제!!
+export const deletePost = async (id, navigate) => {
+  const response = await instanceWithToken.delete(`/post/${id}/`);
+  if (response.status === 204) {
+    console.log("POST DELETE SUCCESS");
+    navigate("/");
+  } else {
+    console.log("[ERROR] error while deleting post");
+  }
+};
+
+// 과제!!
+export const likePost = async (postId) => {
+  const response = await instanceWithToken.post(`/post/${postId}/like/`);
+  window.location.reload();
+  return response.data;
+};
+
+// Tag 관련 API들
+export const getTags = async () => {
+  const response = await instance.get("/tag/");
+  return response.data;
+};
+
+export const createTag = async (data) => {
+  const response = await instanceWithToken.post("/tag/", data);
+  if (response.status === 201) {
+    console.log("TAG SUCCESS");
+  } else {
+    console.log("[ERROR] error while creating tag");
+  }
+  return response; // response 받아서 그 다음 처리
+};
+
+// Comment 관련 API들
+export const getComments = async (postId) => {
+  const response = await instance.get(`/comment/?post=${postId}`);
+  return response.data;
+};
+
+export const createComment = async (data) => {
+  const response = await instanceWithToken.post("/comment/", data);
+  if (response.status === 201) {
+    console.log("COMMENT SUCCESS");
+    window.location.reload(); // 새로운 코멘트 생성시 새로고침으로 반영
+  } else {
+    console.log("[ERROR] error while creating comment");
+  }
+};
+
+export const updateComment = async (id, data) => {
+  const response = await instanceWithToken.patch(`/comment/${id}/`, data);
+  if (response.status === 200) {
+    console.log("COMMENT UPDATE SUCCESS");
+    window.location.reload();
+  } else {
+    console.log("[ERROR] error while updating comment");
+  }
+};
+
+// 과제 !!
+export const deleteComment = async (id) => {
+  const response = await instanceWithToken.delete(`/comment/${id}/`);
+  return response.data;
+};
+
+export const getMyPage = async () => {
+  const response = await instanceWithToken.get("/account/mypage/");
+  if (response.status === 200) {
+    console.log("GET USER SUCCESS");
+  } else {
+    console.log("[ERROR] error while updating comment");
+  }
+  return response.data;
+};
+
+export const MyInfo = async (data) => {
+  const response = await instanceWithToken.patch(`/account/mypage/`, data);
+  if (response.status === 200) {
+    console.log("MYINFO UPDATE SUCCESS");
+    window.location.reload();
+  } else {
+    console.log("[ERROR] error while updating myinfo");
+  }
+  return response.data;
+};