From 49d538936c4b9876ee2bc33705eb9b17db782ca7 Mon Sep 17 00:00:00 2001 From: jinhobyeong Date: Thu, 22 Dec 2022 02:24:05 +0900 Subject: [PATCH 1/2] feat : create Detail Component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # feat : 기능(새로운 기능) # fix : 버그(버그 수정) # refactor : 리팩토링 # style : 스타일(코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음) # docs : 문서(문서 추가, 수정, 삭제) # test : 테스트(테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음) # chore : 기타 변경사항, 셋팅 관련(빌드 스크립트 수정 등) --- .../EventDetailBox/EventDetailBox/index.tsx | 18 ----- .../EventDetailHeader/index.tsx | 18 ----- .../EventDetailHeader/styled.ts | 37 --------- .../src/components/EventDetailBox/index.tsx | 81 +++++++++---------- .../{EventDetailBox => }/styled.ts | 47 ++++++++++- 5 files changed, 83 insertions(+), 118 deletions(-) delete mode 100644 Frontend/src/components/EventDetailBox/EventDetailBox/index.tsx delete mode 100644 Frontend/src/components/EventDetailBox/EventDetailHeader/index.tsx delete mode 100644 Frontend/src/components/EventDetailBox/EventDetailHeader/styled.ts rename Frontend/src/components/EventDetailBox/{EventDetailBox => }/styled.ts (53%) diff --git a/Frontend/src/components/EventDetailBox/EventDetailBox/index.tsx b/Frontend/src/components/EventDetailBox/EventDetailBox/index.tsx deleted file mode 100644 index 8aebb55..0000000 --- a/Frontend/src/components/EventDetailBox/EventDetailBox/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import test from "@/assets/test.png"; -import { Container, TitleLabel, TextLabel, TextBox } from "./styled"; - -const EnrollInfoBox = () => { - return ( - - Event Detail - - 재난 상황 - 홍수 - - 위치 - 인천 부평구 충선로203번길 24 - - ); -}; - -export default EnrollInfoBox; diff --git a/Frontend/src/components/EventDetailBox/EventDetailHeader/index.tsx b/Frontend/src/components/EventDetailBox/EventDetailHeader/index.tsx deleted file mode 100644 index d19120d..0000000 --- a/Frontend/src/components/EventDetailBox/EventDetailHeader/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import { Container, BackBtn, BackImg } from "./styled"; -import backbtn from "@/assets/backbtn.png"; - -const EnrollHeader = () => { - const handleClickTest = () => { - console.log("success"); - }; - return ( - - - - - - ); -}; - -export default EnrollHeader; diff --git a/Frontend/src/components/EventDetailBox/EventDetailHeader/styled.ts b/Frontend/src/components/EventDetailBox/EventDetailHeader/styled.ts deleted file mode 100644 index 4b87454..0000000 --- a/Frontend/src/components/EventDetailBox/EventDetailHeader/styled.ts +++ /dev/null @@ -1,37 +0,0 @@ -import Styled from "styled-components"; - -export const Container = Styled.div` - display: flex; - justify-content: right; - align-items: center; - width: 100%; - height : 4rem; - flex-direction: row; - border-radius: 20px 0px 0px 0px; - overflow: hidden; -`; - -export const BackBtn = Styled.button` - all: unset; - display : flex; - width : fit; - height : fit; - margin-right : 1rem; - border-radius : 20px; - background-color : white; - outline:none; - - &:hover { - cursor : pointer; - } - &:focus { - outline:none; - } - -`; - -export const BackImg = Styled.img` - width : 3rem; - height : 3rem; - -`; diff --git a/Frontend/src/components/EventDetailBox/index.tsx b/Frontend/src/components/EventDetailBox/index.tsx index 7ba726f..b690aa7 100644 --- a/Frontend/src/components/EventDetailBox/index.tsx +++ b/Frontend/src/components/EventDetailBox/index.tsx @@ -1,50 +1,45 @@ -import React from "react"; -import Styled from "styled-components"; -import EnrollHeader from "./EventDetailHeader"; -import EnrollInfoBox from "./EventDetailBox"; +import { + EnrollBox, + Container, + TitleLabel, + InputImg, + TextLabel, + TextBox, + CheckBtn, + CheckImg, +} from "./styled"; -const Container = Styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 100vw; - height : 100vh; - flex-direction: column; - background-color: white; -`; +import checkimg from "@/assets/checkimg.png"; +import axios from "axios"; -const EnrollBox = Styled.div` - display: flex; - width: 35rem; - height : 45rem; - border: 1px solid black; - background-color: white; - border-radius: 20px 0px 0px 20px; - flex-direction: column; -`; +const EventDetailInfo = (props: any) => { + const putTest = async () => { + await axios + .put(`api/v1/event?id=${props.data.id}`) + .then((res) => console.log(res)) + .catch((err) => console.log(err)); + }; -const InputBox = Styled.input` - font-family: "Roboto", sans-serif; - outline: 0; - background: #f2f2f2; - width: 100%; - border: 0; - margin: 0 0 15px; - padding: 15px; - box-sizing: border-box; - font-size: 14px; - color : black; -`; - -const EventDetailBox = () => { return ( - - - - - - + + + Event Detail + + 재난 상황 + {props.data.category} + + 내용 + {props.data.content} + + 위치 + 인천 부평구 충선로203번길 24 + + + + + + ); }; -export default EventDetailBox; +export default EventDetailInfo; diff --git a/Frontend/src/components/EventDetailBox/EventDetailBox/styled.ts b/Frontend/src/components/EventDetailBox/styled.ts similarity index 53% rename from Frontend/src/components/EventDetailBox/EventDetailBox/styled.ts rename to Frontend/src/components/EventDetailBox/styled.ts index 785ace6..6769eaa 100644 --- a/Frontend/src/components/EventDetailBox/EventDetailBox/styled.ts +++ b/Frontend/src/components/EventDetailBox/styled.ts @@ -27,13 +27,13 @@ export const TextLabel = Styled.label` font-weight : bold; `; -export const TextBox = Styled.text` +export const TextBox = Styled.div` display : flex; justify-content: center; align-items: center; font-size : 1rem; width : 18rem; - height : 1.5rem; + height : fit; padding: 10px 10px; border-radius: 8px; border: 1px solid #BDBDBD; @@ -42,4 +42,47 @@ export const TextBox = Styled.text` margin: 10px 0 40px; box-shadow: 2px 2px 2px #BDBDBD; outline:none; + word-break:break-all; +`; + +export const EnrollBox = Styled.div` + width: 35vw; + height: 92vh; + background-color: white; + border-radius: 10px 0px 0px 10px; + flex-direction: column; +`; + +export const InputImg = Styled.img` + margin : 3rem; + width : 18rem; + height : 12rem; + border-radius : 10px; + +`; + +export const CheckBtn = Styled.button` + all: unset; + display : flex; + width : fit; + height : fit; + border-radius : 20px; + + background-color : white; + justify-content: center; + align-items: center; + outline:none; + &:hover { + cursor : pointer; + } + &:focus { + outline:none; + } + +`; + +export const CheckImg = Styled.img` + width : 3rem; + height : 3rem; + `; From 4f44607bb42decf94e7e4c8ece9146a190dc2a5f Mon Sep 17 00:00:00 2001 From: jinhobyeong Date: Thu, 22 Dec 2022 02:34:33 +0900 Subject: [PATCH 2/2] feat : update EventDetailBox name --- Frontend/src/components/EventDetailBox/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Frontend/src/components/EventDetailBox/index.tsx b/Frontend/src/components/EventDetailBox/index.tsx index b690aa7..7ffeed7 100644 --- a/Frontend/src/components/EventDetailBox/index.tsx +++ b/Frontend/src/components/EventDetailBox/index.tsx @@ -12,7 +12,7 @@ import { import checkimg from "@/assets/checkimg.png"; import axios from "axios"; -const EventDetailInfo = (props: any) => { +const EventDetailBox = (props: any) => { const putTest = async () => { await axios .put(`api/v1/event?id=${props.data.id}`) @@ -42,4 +42,4 @@ const EventDetailInfo = (props: any) => { ); }; -export default EventDetailInfo; +export default EventDetailBox;