From b8234164270267337b9d552a0dc42297d7d4a115 Mon Sep 17 00:00:00 2001 From: benidene <111226162+benidene@users.noreply.github.com> Date: Thu, 29 Aug 2024 00:02:31 +0900 Subject: [PATCH] Fe refactor (#108) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * #97 : cors 문제 해결을 위한 업로드 * #91 : naver map 키 적용을 위한 코드 추가 * #97 : cors 문제 해결을 위한 업로드 * : 개발 후순위로 밀린 부분 주석처리 * #19 : 지도 중심을 서울시청으로 변경 * #19 : paymentList 함수명 변경 * #59 : 헤더 footer 리팩토링으로 함께 리팩토링 진행 * #56 : header footer 리팩토링 * #59 : 헤더 footer 리팩토링으로 함께 리팩토링 진행 --- .github/workflows/deploy.yml | 4 + fe/.gitignore | 1 - fe/certs/localhost-key.pem | 28 ++++++ fe/certs/localhost.pem | 26 +++++ fe/src/app/_component/AccordionMenu.tsx | 4 +- fe/src/app/_component/FooterMenu.css.ts | 29 ++++-- fe/src/app/_component/FooterMenu.tsx | 13 ++- fe/src/app/_component/Header.css.ts | 83 +++++++++++----- fe/src/app/_component/Header.tsx | 12 ++- fe/src/app/_component/MapSection.tsx | 2 +- fe/src/app/_component/RerenderButton.css.ts | 8 +- fe/src/app/_component/RerenderButton.tsx | 4 +- fe/src/app/_component/StoreDetail.tsx | 6 +- fe/src/app/_component/map.css.ts | 2 +- fe/src/app/report/[id]/page.css.ts | 61 ++++++++---- fe/src/app/report/[id]/page.tsx | 102 +++++++++++--------- fe/src/app/report/page.css.ts | 58 ++++++----- fe/src/app/report/page.tsx | 33 ++++--- fe/src/hooks/useMap.tsx | 4 +- fe/src/types/store.ts | 4 +- 20 files changed, 322 insertions(+), 162 deletions(-) create mode 100644 fe/certs/localhost-key.pem create mode 100644 fe/certs/localhost.pem diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 746ec81..13ba529 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -13,6 +13,10 @@ jobs: - name: Checkout code uses: actions/checkout@v2 + - name: Set up environment variables + run: | + echo "NEXT_PUBLIC_NAVER_MAP_ID=${{ secrets.NEXT_PUBLIC_NAVER_MAP_ID }}" >> .env + - name: Install SSH key run: | mkdir -p ~/.ssh diff --git a/fe/.gitignore b/fe/.gitignore index 93a6164..0992a23 100644 --- a/fe/.gitignore +++ b/fe/.gitignore @@ -18,7 +18,6 @@ # misc .DS_Store -*.pem # debug npm-debug.log* diff --git a/fe/certs/localhost-key.pem b/fe/certs/localhost-key.pem new file mode 100644 index 0000000..c50e7df --- /dev/null +++ b/fe/certs/localhost-key.pem @@ -0,0 +1,28 @@ +-----BEGIN PRIVATE KEY----- +MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQD2NJ5lvgbHDxR2 +RWWqnthdYM/C2lXApClTnuY5dmQAPM65P1kcKudZh9UR5hb2Wv6x+0T4qAxBScpd +YVCGVr1us9+iJ/5iPvfc44M1+nmC9UVVeUEFywuinssqXdmJ27mLTcFONhnCb2qH +NkLCcujj8hJFJTD7WMw+NwsuaNQeS/8/Gvhtg2I/Ut/GJVNqO/JBJNJIzIEKhZ8U +3bHkQK9koW/sLX/fNpceLisLdmyY07l0MZw55R20fX1LpTfdJCQaSYKjk/2fOGNG +2+Ro3f47B8S3l6tecp90z76gor3KLIfyUY7Li2qjjp/yKBBQhi1mw2K5oZUJeSPX +vN20CTLJAgMBAAECggEAA0Davvlt2X+Hg7CTEVgb/8/hru93pp4EtcgpvqSj2aT0 +DlqZ8NdYS0SSOjRSJVs6dludo7OExfAVrno0uDG5OxdBY0EoCWBPoimXeEUhCev3 +yJNbmpn+Q13ZzWuEDmBK6V5TqZbpbDpQrAy5gRxHm4t9VlCRfyDDQic0DJ7x/px3 +1luuukbBpBNcdCRfeNDUt4ZOGEyO1BVRCWKxo5WuZnTbvS9vsgF3kBypQh/PyyCx +a0fkro8K5V8VyCrqAzQVIPdJBNlg5X52aTZ5wDJPnCYyRGNzkm89o47lQPPUXQ9X +jYVb3rfLtFy/O8mBsmoFRoSmIvrY2ilg3kJV50OhCQKBgQD9g99BIwrUHqxlO4Y1 +RpRqNstDn8qL5CXtyGNGesI8UnvQvdWSxEoz1WnBgp3e0xjsQ0ZgNuHuuk/vmlm/ +o2jw5Ryslxke0/4U0yOxA0iO002C07A5aFW7yS5XeNT3BcNYxc9MGI5lqnYU8eBR +1v3iHMKgzaHkgGa1IOaJ2LQJOwKBgQD4nme8n8J7jbsD2jFDoFArHPeGy7JmebGK +qWFJCeql4ByyFljZKyJRFKxbtEe6bX5VxYT2tHYKyktdbt847gbHS4Tu1yb93u15 +tRVUToH7Y6VxA+nSXVY3Y1fZ5duTqLXcvRbWe4MaNdvEMSIO55VkjWzCCBY0q+LU +gwt9XFuTywKBgQC00405Dt+4cbCR/KU79v4BzNergpycr72GH/r/2KwXDtaWC/H8 +39n1ovHuP1aQC46pZ0sZccwx1d8SjswZb1t5CFMtoBEg9iEzhW7d4fOtPHb7LDd0 +m0Eb0uIlLmDpWcj+1wmHw7Q+PBpB0k0o0usAj3cb79DcBeI8rB0EkffI5QKBgFzy +M4wkGfxA91qwVtyWcYI8uRlOy+pdso9JVZKNv4i16WR20E6YPqMbXHiIRIyg5KtC +RbxJqRvNlzFeAtvwuN4HELKOAwjEL/nhRhEXrKaEEVTYBrFbraDVZgGTWmywlRTq +KECVOmUxH3EQgVAbKhHGgZNknJCidhHG0CPUxHPTAoGAJwbxDilCwz43PKqsBBl8 +hjUIMHfC33OlXQrw0YE2hUaJjnkHGSixVXpb3osGQ9GWRWQbLZtlR/ED7o8pJPa1 +Vwx9Mvg4ook8hYCVV7St5SsXoFfhE7KdFYUrwDuFDZEL+n64ZHCtSsx4DU5f0u9l +8v5iz1l4tSYdwdfcSpCPddg= +-----END PRIVATE KEY----- diff --git a/fe/certs/localhost.pem b/fe/certs/localhost.pem new file mode 100644 index 0000000..74c7516 --- /dev/null +++ b/fe/certs/localhost.pem @@ -0,0 +1,26 @@ +-----BEGIN CERTIFICATE----- +MIIEbDCCAtSgAwIBAgIQRSNs8HI5PKWXf11QsMRjOjANBgkqhkiG9w0BAQsFADCB +pzEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMT4wPAYDVQQLDDVpaHll +b25kb25nQGloeWVvbmRvbmctdWktTWFjQm9va0Fpci5sb2NhbCAo7J207ZiE64+Z +KTFFMEMGA1UEAww8bWtjZXJ0IGloeWVvbmRvbmdAaWh5ZW9uZG9uZy11aS1NYWNC +b29rQWlyLmxvY2FsICjsnbTtmITrj5kpMB4XDTI0MDQwNzA0MTIzM1oXDTI2MDcw +NzA0MTIzM1owXDEnMCUGA1UEChMebWtjZXJ0IGRldmVsb3BtZW50IGNlcnRpZmlj +YXRlMTEwLwYDVQQLDChpaHllb25kb25nQE1hY0Jvb2stUHJvLmxvY2FsICjsnbTt +mITrj5kpMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA9jSeZb4Gxw8U +dkVlqp7YXWDPwtpVwKQpU57mOXZkADzOuT9ZHCrnWYfVEeYW9lr+sftE+KgMQUnK +XWFQhla9brPfoif+Yj733OODNfp5gvVFVXlBBcsLop7LKl3Zidu5i03BTjYZwm9q +hzZCwnLo4/ISRSUw+1jMPjcLLmjUHkv/Pxr4bYNiP1LfxiVTajvyQSTSSMyBCoWf +FN2x5ECvZKFv7C1/3zaXHi4rC3ZsmNO5dDGcOeUdtH19S6U33SQkGkmCo5P9nzhj +RtvkaN3+OwfEt5erXnKfdM++oKK9yiyH8lGOy4tqo46f8igQUIYtZsNiuaGVCXkj +17zdtAkyyQIDAQABo14wXDAOBgNVHQ8BAf8EBAMCBaAwEwYDVR0lBAwwCgYIKwYB +BQUHAwEwHwYDVR0jBBgwFoAUBnSChYW1FIR9a+YXOjonGvdRhj4wFAYDVR0RBA0w +C4IJbG9jYWxob3N0MA0GCSqGSIb3DQEBCwUAA4IBgQCSElSyTMJ+Zco3rrxgh3HK +RMcURBjy/wM3AZbyvxml4nt86LAWTVDNHDEvhNEhqDPsZfZ7901psBqJKUFadius +iGtFTxk0QlWR65WmsqitJI0Re6LkPH0uqWGuHCnTW+4E6psMhB5cbE3BpiS/1oun +wvA62dBvNJkFHkzRz1EcyHKewFULhzNZzkGQWvVjK4pJs4kVuiHLNDiB23Q2KNYL +GE5OFrvcj5q6Vrmeyvvj25Rk3xgDY6DApEiArDH6EttsL920yl1ejwlroDOwxNRk +WULOnjORSYXMAk9yehlkOCZdrPoiUVSSX7xHVpYavkxOO2ZI0FbSv8Ba13FaCMT8 +eDINttAaHyYsQqCAaa/jxQXVNoPzWujF0Qq9UsBGYbzvCNq/xmv2otG/YRQNSBzK +ENwnuB2kqa/OD3SPbgCJzEljnPOZBIvUUTqebKj5dM71LMg1Pa+J9GlVNIMfT4Pi +ZuMd1kLzpNUMAZK59OrIagnWB2FpdxS09aFCeZ+GlBE= +-----END CERTIFICATE----- diff --git a/fe/src/app/_component/AccordionMenu.tsx b/fe/src/app/_component/AccordionMenu.tsx index 82963a4..22109e4 100644 --- a/fe/src/app/_component/AccordionMenu.tsx +++ b/fe/src/app/_component/AccordionMenu.tsx @@ -21,9 +21,9 @@ const AccordionMenu = ({ isOpen, setIsOpen }:Props) => {
  • 홈
    • -
  • + {/*
  • 결제 수단 선택 -
    • + */}
  • 오류 정보 알리기
    • diff --git a/fe/src/app/_component/FooterMenu.css.ts b/fe/src/app/_component/FooterMenu.css.ts index 6136d46..b6d2717 100644 --- a/fe/src/app/_component/FooterMenu.css.ts +++ b/fe/src/app/_component/FooterMenu.css.ts @@ -3,18 +3,29 @@ import {global} from "@/app/globalTheme.css"; export const container = style({ display: 'flex', + position: 'relative', + bottom: '43px', width: '100%', - height: '5dvh', - background: 'light', - borderTop: '0.5px solid lightGray', + padding: '12px 0px', + borderTop: '1px solid lightGray', + backgroundColor: 'rgba(255, 255, 255, 0.6)', + zIndex: '102' }); export const menu = style({ - textAlign: 'center', - alignItems: 'center', - justifyContent: "center", + display: 'flex', + position: 'relative', + justifyContent: 'center', + flex: 1, + fontSize: '14px', +}); + +export const borderMenu = style({ + display: 'flex', + position: 'relative', + justifyContent: 'center', + flex: 1, fontSize: '14px', - lineHeight: '2.8', - height: '100%', - flex: 1 + borderLeft: '1px solid lightGray', + borderRight: '1px solid lightGray', }); \ No newline at end of file diff --git a/fe/src/app/_component/FooterMenu.tsx b/fe/src/app/_component/FooterMenu.tsx index 0aa1e5d..10eaa56 100644 --- a/fe/src/app/_component/FooterMenu.tsx +++ b/fe/src/app/_component/FooterMenu.tsx @@ -5,16 +5,19 @@ const FooterMenu = () => { return (
    • - 최근 본 상점 + + 최근 본 상점
      • -
    • - 홈 +
    • + + 홈
    • - 문의 + + 문의
    ) } -export default FooterMenu +export default FooterMenu; \ No newline at end of file diff --git a/fe/src/app/_component/Header.css.ts b/fe/src/app/_component/Header.css.ts index f0efb6f..fbad220 100644 --- a/fe/src/app/_component/Header.css.ts +++ b/fe/src/app/_component/Header.css.ts @@ -6,40 +6,77 @@ export const container = style({ justifyContent: "space-between", width: '100dvw', maxWidth: '540px', - height: '5dvh', - minHeight: '30px', - maxHeight: '50px', - borderBottom: '0.5px solid lightGray', - fontSize: '25px', - backgroundColor: "white", + height: '0px', +}); + +export const logo = style({ + position: 'relative', + top: '2dvh', + height: '40px', + padding: '4px 8px', + marginLeft: '12px', + border: `1px solid ${global.foreground.color}`, + borderRadius:'50px', + backgroundColor: 'rgba(255, 255, 255, 0.6)', color: global.foreground.color, + boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)', + zIndex: '102', '@media': { '(max-width: 500px)': { - fontSize: '22px', + fontSize: '20px', } } -}); - - +}) -export const logo = style({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - height: '100%', - marginLeft: '8px', +export const logoText = style({ + fontSize: '24px', + color: global.foreground.color, fontWeight: 500, }) export const menu = style({ - display: 'flex', - flexDirection: 'column', + position: 'relative', + height: '40px', + top: '2dvh', alignItems: 'center', justifyContent: 'center', - border: 'none', + marginRight: '12px', background: 'none', color: global.foreground.color, - width: '40px', - height: '100%', -}) \ No newline at end of file + padding: '8px 14px', + zIndex: '102', + border: `1px solid ${global.foreground.color}`, + borderRadius:'50px', + backgroundColor: 'rgba(255, 255, 255, 0.6)', +}) + +// export const container = style({ +// display: 'flex', +// justifyContent: "space-between", +// width: '100dvw', +// maxWidth: '540px', +// height: '50px', +// minHeight: '30px', +// maxHeight: '50px', +// borderBottom: '0.5px solid lightGray', +// fontSize: '25px', +// color: global.foreground.color, +// '@media': { +// '(max-width: 500px)': { +// fontSize: '22px', +// } +// } +// }); + + + +// export const logo = style({ +// display: 'flex', +// flexDirection: 'row', +// alignItems: 'center', +// justifyContent: 'center', +// height: '100%', +// marginLeft: '8px', +// fontWeight: 500, +// }) + diff --git a/fe/src/app/_component/Header.tsx b/fe/src/app/_component/Header.tsx index 03d52f0..eba61a9 100644 --- a/fe/src/app/_component/Header.tsx +++ b/fe/src/app/_component/Header.tsx @@ -10,11 +10,15 @@ const Header = () => { return (
    - Paypick -
    setIsOpen(!isOpen)}>=
    - + + Paypick + +
    setIsOpen(!isOpen)}> + = + +
    ) } -export default Header +export default Header; \ No newline at end of file diff --git a/fe/src/app/_component/MapSection.tsx b/fe/src/app/_component/MapSection.tsx index 5a15d36..0ee6312 100644 --- a/fe/src/app/_component/MapSection.tsx +++ b/fe/src/app/_component/MapSection.tsx @@ -34,7 +34,7 @@ const MapSection = () => { useEffect(() => { getGeoLocation(); - }, []); + }, [getGeoLocation]); return ( <> diff --git a/fe/src/app/_component/RerenderButton.css.ts b/fe/src/app/_component/RerenderButton.css.ts index e978da4..f9f00d5 100644 --- a/fe/src/app/_component/RerenderButton.css.ts +++ b/fe/src/app/_component/RerenderButton.css.ts @@ -1,21 +1,21 @@ import {style} from "@vanilla-extract/css"; import {global} from "@/app/globalTheme.css"; -export const secondContainer = style({ +export const container = style({ position:'absolute', top:'70px', left: '50%', - transform:'translate(-50%)', // 모달 가로축 중심으로 놓는 코드 + transform:'translate(-50%)', zIndex: '101' }); export const displayModal = style({ width: '130px', height: '30px', - backgroundColor: 'white', + backgroundColor: 'rgba(255, 255, 255, 0.6)', color: global.foreground.color, border: `1px solid ${global.foreground.color}`, - boxShadow:'0 2px 3px 0 rgba(0, 0, 0, 0.1)',//테두리 그림자 + boxShadow:'0 2px 3px 0 rgba(0, 0, 0, 0.1)', borderRadius:'50px', ':active': { /* 클릭될 때 적용할 스타일 */ diff --git a/fe/src/app/_component/RerenderButton.tsx b/fe/src/app/_component/RerenderButton.tsx index a09bd4c..bd541c4 100644 --- a/fe/src/app/_component/RerenderButton.tsx +++ b/fe/src/app/_component/RerenderButton.tsx @@ -24,7 +24,7 @@ const RerenderButton = ({ refetchMarkers }: Props) => { }; return ( - + @@ -32,4 +32,4 @@ const RerenderButton = ({ refetchMarkers }: Props) => { ) } -export default RerenderButton \ No newline at end of file +export default RerenderButton; \ No newline at end of file diff --git a/fe/src/app/_component/StoreDetail.tsx b/fe/src/app/_component/StoreDetail.tsx index 1b413a9..4dfc225 100644 --- a/fe/src/app/_component/StoreDetail.tsx +++ b/fe/src/app/_component/StoreDetail.tsx @@ -29,7 +29,7 @@ import { getApi } from '@/hooks/api'; return null; } - const { name, middleCategory, address, paywayList } = storeData + const { name, middleCategory, address, paymentList } = storeData return ( @@ -43,7 +43,7 @@ import { getApi } from '@/hooks/api';
    {address}
    -
    {paywayList}애플페이
    +
    {paymentList}애플페이
    정보 수정 요청
    @@ -51,4 +51,4 @@ import { getApi } from '@/hooks/api'; ) } -export default StoreDetail \ No newline at end of file +export default StoreDetail; \ No newline at end of file diff --git a/fe/src/app/_component/map.css.ts b/fe/src/app/_component/map.css.ts index 1e7a12e..651219a 100644 --- a/fe/src/app/_component/map.css.ts +++ b/fe/src/app/_component/map.css.ts @@ -3,5 +3,5 @@ import {style} from "@vanilla-extract/css"; export const mapSize = style({ width: '100%', maxWidth: '540px', - height: '90dvh' + height: '100dvh', }); \ No newline at end of file diff --git a/fe/src/app/report/[id]/page.css.ts b/fe/src/app/report/[id]/page.css.ts index 866f672..aef10ba 100644 --- a/fe/src/app/report/[id]/page.css.ts +++ b/fe/src/app/report/[id]/page.css.ts @@ -1,22 +1,26 @@ -import {globalStyle, style} from "@vanilla-extract/css"; +import { globalStyle, style, styleVariants} from "@vanilla-extract/css"; import {global} from "@/app/globalTheme.css"; export const container = style({ width: '100dvw', maxWidth: '540px', - height: 'calc(100dvh - 60px)', + height: 'calc(100dvh - 50px)', backgroundColor: 'rgb(248, 249, 253)', + alignItems: 'center', + justifyContent: 'center', }); export const info = style({ display: 'flex', - marginTop: '16px', - padding: '16px 20px', + padding: '84px 20px 16px 20px', fontSize: '18px', fontWeight: '800', }); export const payWrapper = style({ + display:"flex", + flexDirection: 'column', + alignItems: 'center', margin: '20px 16px', padding: '20px 16px', boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 8px', @@ -25,8 +29,8 @@ export const payWrapper = style({ }); globalStyle(`${payWrapper} li`, { - paddingBottom: '16px', fontSize: '20px', + width: '100%', '@media': { '(max-width: 800px)': { fontSize: '16px' @@ -34,15 +38,16 @@ globalStyle(`${payWrapper} li`, { } }) -export const inputBox = style({ +export const input = style({ marginTop: '8px', + marginBottom: '20px', padding: '8px', border: '0.5px solid lightGray', boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 8px', borderRadius: '8px', backgroundColor: 'white', width: '100%', - height: '35px', + height: '36px', fontSize: '14px', color: global.foreground.color, selectors: { @@ -56,27 +61,47 @@ export const inputBox = style({ export const otherBox= style({ display: 'flex', flexDirection: 'column', - marginTop: '16px', - marginBottom: '12px', + marginBottom: '48px', backgroundColor: 'white', width: '100%', - height: '35px', + height: '36px', fontSize: '16px', color: global.foreground.color, }); -export const confirmBox = style({ + export const confirmBox = style({ + width: '540px', + alignItems: 'center', + justifyContent: 'center', + }); + +export const confirmButton = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - border: 'none', + borderRadius: '100px', maxWidth: '540px', width: '100%', - height: '10dvh', + height: '8dvh', maxHeight: '120px', + fontSize: '20px', backgroundColor: global.foreground.color, - color: 'white', - fontSize: '25px', - position: 'fixed', - bottom: '0px', - }); \ No newline at end of file + color: '#fff', + '@media': { + '(max-width: 540px)': { + fontSize: '16px' + } + } + }); + + export const confirmButtonVariants = styleVariants({ + enabled: { + backgroundColor: global.foreground.color, + color: '#fff', + }, + disabled: { + backgroundColor: '#ccc', + color: '#666', + cursor: 'not-allowed', + }, +}); diff --git a/fe/src/app/report/[id]/page.tsx b/fe/src/app/report/[id]/page.tsx index 526e6e5..bf52d73 100644 --- a/fe/src/app/report/[id]/page.tsx +++ b/fe/src/app/report/[id]/page.tsx @@ -21,14 +21,21 @@ const Page = () => { useEffect(() => { const name = searchParams.get('name'); - if (typeof name === 'string') { - setFormData(prevState => ({ - ...prevState, - storeName: name - })); - console.log(name); - } - }, [searchParams]); + + // if (!name) { // url 조작으로 report/[id] 페이지 접근시 일반 report 페이지로 리디렉션 + // alert('잘못된 접근입니다!'); + // router.push('/report'); + // return; + // } + + if (typeof name === 'string') { + setFormData(prevState => ({ + ...prevState, + storeName: name + })); + console.log(name); + } + }, [id, searchParams, router]); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; @@ -72,55 +79,58 @@ const handleSubmit = async (e: React.FormEvent) => { }; - return ( -
    -
    문제가 있는 부분을 저희에게 공유해주세요 :
    -
      - -
    • +return ( +
      +
      문제가 있는 부분을 저희에게 공유해주세요 : )
      +
        +
      • + -
        • + +
      • -
      • - - -
        • - {showInput && ( -
        - - -
        - )} -
      - -
      - ) + +
      • + {showInput && ( +
      + + +
      + )} + +
    +
    +) } export default Page; \ No newline at end of file diff --git a/fe/src/app/report/page.css.ts b/fe/src/app/report/page.css.ts index d529550..aef10ba 100644 --- a/fe/src/app/report/page.css.ts +++ b/fe/src/app/report/page.css.ts @@ -1,10 +1,10 @@ -import { globalStyle, style} from "@vanilla-extract/css"; +import { globalStyle, style, styleVariants} from "@vanilla-extract/css"; import {global} from "@/app/globalTheme.css"; export const container = style({ width: '100dvw', maxWidth: '540px', - height: 'calc(100dvh - 60px)', + height: 'calc(100dvh - 50px)', backgroundColor: 'rgb(248, 249, 253)', alignItems: 'center', justifyContent: 'center', @@ -12,13 +12,15 @@ export const container = style({ export const info = style({ display: 'flex', - marginTop: '16px', - padding: '16px 20px', + padding: '84px 20px 16px 20px', fontSize: '18px', fontWeight: '800', }); export const payWrapper = style({ + display:"flex", + flexDirection: 'column', + alignItems: 'center', margin: '20px 16px', padding: '20px 16px', boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 8px', @@ -28,6 +30,7 @@ export const payWrapper = style({ globalStyle(`${payWrapper} li`, { fontSize: '20px', + width: '100%', '@media': { '(max-width: 800px)': { fontSize: '16px' @@ -35,16 +38,16 @@ globalStyle(`${payWrapper} li`, { } }) -export const inputBox = style({ +export const input = style({ marginTop: '8px', - marginBottom: '16px', + marginBottom: '20px', padding: '8px', border: '0.5px solid lightGray', boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 8px', borderRadius: '8px', backgroundColor: 'white', width: '100%', - height: '35px', + height: '36px', fontSize: '14px', color: global.foreground.color, selectors: { @@ -58,38 +61,47 @@ export const inputBox = style({ export const otherBox= style({ display: 'flex', flexDirection: 'column', - // marginTop: '16px', - marginBottom: '12px', + marginBottom: '48px', backgroundColor: 'white', width: '100%', - height: '35px', + height: '36px', fontSize: '16px', color: global.foreground.color, }); export const confirmBox = style({ - width: '100%', + width: '540px', alignItems: 'center', justifyContent: 'center', }); -export const confirm = style({ +export const confirmButton = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - border: 'none', - borderRadius: '50px', + borderRadius: '100px', maxWidth: '540px', - width: '50%', - height: '10dvh', + width: '100%', + height: '8dvh', maxHeight: '120px', + fontSize: '20px', backgroundColor: global.foreground.color, - color: 'white', - fontSize: '25px', - position: 'fixed', - bottom: '5dvh', + color: '#fff', + '@media': { + '(max-width: 540px)': { + fontSize: '16px' + } + } }); - - - \ No newline at end of file + export const confirmButtonVariants = styleVariants({ + enabled: { + backgroundColor: global.foreground.color, + color: '#fff', + }, + disabled: { + backgroundColor: '#ccc', + color: '#666', + cursor: 'not-allowed', + }, +}); diff --git a/fe/src/app/report/page.tsx b/fe/src/app/report/page.tsx index 9510bb2..108d976 100644 --- a/fe/src/app/report/page.tsx +++ b/fe/src/app/report/page.tsx @@ -61,20 +61,20 @@ const Report = () => {
    문제가 있는 부분을 저희에게 공유해주세요 : )
    • - - + +
      • - {showInput && (
      { />
      )} - +
    -
    - -
    ) } diff --git a/fe/src/hooks/useMap.tsx b/fe/src/hooks/useMap.tsx index 25ea216..bde15c5 100644 --- a/fe/src/hooks/useMap.tsx +++ b/fe/src/hooks/useMap.tsx @@ -2,8 +2,8 @@ import { useCallback, useState } from 'react'; import { useQueryClient } from '@tanstack/react-query'; import { Coordinates, NaverMap } from '@/types/map'; -export const INITIAL_CENTER: Coordinates = [37.693314,126.779666]; -export const INITIAL_ZOOM = 17; +export const INITIAL_CENTER: Coordinates = [37.566535,126.9779692]; +export const INITIAL_ZOOM = 15; export const MAP_KEY = "map" const useMap = () => { diff --git a/fe/src/types/store.ts b/fe/src/types/store.ts index f098500..a52c088 100644 --- a/fe/src/types/store.ts +++ b/fe/src/types/store.ts @@ -8,7 +8,7 @@ export interface storeData extends Store { name: string; middleCategory: string; address: string; - paywayList: string | string[]; + paymentList: string | string[]; } export interface reportData { @@ -18,7 +18,7 @@ export interface reportData { name?: string; middleCategory?: string; address?: string; - paywayList?: string | string[]; + paymentList?: string | string[]; reportId: number; errorType: string; errorContent?: string