Report (#61)

* #60 <chore> <fix> : vanilla-extract/next-plugin의 next.js 다이나믹 라우팅시 css compile 오류로 인해 버전업 2.3.5 -> 2.4.0 * #56 <design> : 모바일 환경에 맞게 maxWidth를 540px로 제한 및 네이버 맵 api의 확대 축소 버튼의 임의 지정 z-Index 100으로 인해 모달과 아코디언 메뉴 임의로 z-index 지정 * #52 <feat> : a태그를 Link 태그로 번경, 클릭시 아코디언 닫히게 변경 * <feat> : naver map 옵션 추가와 Link 태그 사용시 mapRef.current?.destroy로 인해 화면이 렌더링 되지않는 이슈로 주석처리 * #19 <feat> : onclick 이벤트 추가, icon 옵션 origin, scaledSize에서 anchor로 변경 * #19 <comment> : 사용하지 않는 주석 제거와 corner 타입 적용 * #39 <comment> : payInfo의 padding 주석제거 * #39 <feat> : 모달에서의 오류정보 알리기 기능 추가를 위한 준비작업 (서버액션 적용 대비) * #59 <feat> : report 페이지 개발 완료 * #59 <feat> : report/[id] dynamic route 페이지 개발 완료 * #18 <feat> : api 함수 컴포넌트화 * <feat> : setSelectStore 함수 주석처리 추가 * <refactor> : 서버로 보내는 좌표 Corner 타입 수정
WeImproveOurSkill · May 8, 2024 · 5a92b0a · 5a92b0a
1 parent eb70ecf
commit 5a92b0a
Show file tree

Hide file tree

Showing 22 changed files with 1,823 additions and 950 deletions.
diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -27,7 +27,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vanilla-extract/next-plugin": "^2.3.5",
+    "@vanilla-extract/next-plugin": "^2.4.0",
     "cors": "^2.8.5",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",

diff --git a/fe/src/app/_component/AccordionMenu.css.ts b/fe/src/app/_component/AccordionMenu.css.ts
@@ -5,16 +5,15 @@ export const container = style({
   position: 'fixed', 
   top: '0', /* 상단에 붙임 */
   right: '0', /* 오른쪽에 붙임 */
-
   height: '100dvh', 
   backgroundColor: 'white', 
   transition: 'transform 0.3s ease-in-out' , /* 부드러운 애니메이션 효과 */
   transform: 'translateX(100%)', /* 기본적으로 오른쪽으로 숨김 */
-  zIndex: '1',
+  zIndex: '102',
   borderLeft: '0.5px solid lightGray',
   '@media': {
-    '(min-width: 1280px)': {
-      right: 'calc((100vw - 1280px)/2)', // 화면의 중앙에 위치한 컨텐츠 오른쪽 끝에서 시작되도록 조정
+    '(min-width: 540px)': {
+      right: 'calc((100dvw - 540px)/2)', // 화면의 중앙에 위치한 컨텐츠 오른쪽 끝에서 시작되도록 조정
       transform: 'translateX(1000%)',
       transition: 'none' ,
     }
@@ -25,7 +24,7 @@ export const container = style({
 export const menuOpen = style({
   transform: 'translateX(0)',
   '@media': {
-    '(min-width: 1280px)': {
+    '(min-width: 540px)': {
       transform: 'none',
       transition: 'none' ,
     }

diff --git a/fe/src/app/_component/AccordionMenu.tsx b/fe/src/app/_component/AccordionMenu.tsx
@@ -8,20 +8,27 @@ interface Props {
 
 const AccordionMenu = ({ isOpen, setIsOpen }:Props) => {
 
+  const closeAccordion = () => {
+    setIsOpen(false)
+  }
+
   return (
     <div className={`${styles.container} ${isOpen ? styles.menuOpen : ''}`}>
       <div className={styles.closeButtonBox}>
         <button className={styles.closeButton} onClick={() => setIsOpen(!isOpen)}>X</button>
       </div>
         <ul className={styles.menuContent}>
           <li>
-            <a href='/selectpay'>결제 수단 선택</a>
+            <Link href='/' onClick={closeAccordion}>홈</Link>
+          </li>
+          <li>
+            <Link href='/selectpay' onClick={closeAccordion}>결제 수단 선택</Link>
           </li>
           <li>
-            <a href='/'>결제 인증</a>
+            <Link href='/' onClick={closeAccordion}>결제 인증</Link>
           </li>
           <li>
-            <a href='/'>오류 정보 알리기</a>
+            <Link href='/report' onClick={closeAccordion}>오류 정보 알리기</Link>
           </li>
         </ul>
     </div>

diff --git a/fe/src/app/_component/Header.css.ts b/fe/src/app/_component/Header.css.ts
@@ -5,14 +5,19 @@ export const container = style({
   display: 'flex',
   justifyContent: "space-between",
   width: '100dvw',
-  maxWidth: '1280px',
+  maxWidth: '540px',
   height: '5dvh',
-  minHeight: '40px',
+  minHeight: '38px',
   maxHeight: '60px',
   borderBottom: '0.5px solid lightGray',
   fontSize: '25px',
   backgroundColor: "white",
   color: global.foreground.color,
+  '@media': {
+    '(max-width: 500px)': {
+      fontSize: '22px',
+    }
+  }
 });
 
 export const logo = style({
@@ -35,12 +40,4 @@ export const menu = style({
   color: global.foreground.color,
   width: '40px',
   height: '100%',
-})
-
-// '@media': {
-//   '(max-width: 1100px)': {
-//     flexDirection: 'row',
-//     marginRight: '10px',
-//     alignItems: 'center',
-//   }
-// }
+})
diff --git a/fe/src/app/_component/Header.tsx b/fe/src/app/_component/Header.tsx
@@ -3,13 +3,14 @@
 import { useState } from 'react';
 import * as styles from './Header.css'
 import AccordionMenu from './AccordionMenu';
+import Link from 'next/link';
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div className={styles.container}>
-      <a href={'/'} className={styles.logo}>Paypick</a>
+      <Link href={'/'} className={styles.logo}>Paypick</Link>
       <button className={styles.menu} onClick={() => setIsOpen(!isOpen)}>=</button>
       <AccordionMenu isOpen={isOpen} setIsOpen={setIsOpen}/>
     </div>

diff --git a/fe/src/app/_component/Modal.css.ts b/fe/src/app/_component/Modal.css.ts
@@ -5,15 +5,16 @@ export const modalContainer = style({
   top:'80%', //모달을 화면 하단에 놓기 위함
   left: '50%',
   width:'80%',
-  maxWidth: '1024px',
+  minWidth: '320px',
+  maxWidth: '432px',
   height: '15%',
   minHeight: '130px',
-  maxHeight:'180px', // 반응형을 위한 코드
+  maxHeight:'180px',
   padding:'10px',
   backgroundColor: "white",
   borderRadius:'10px',
   border: '1px solid lightGray',
   boxShadow:'0 2px 3px 0 rgba(0, 0, 0, 0.1)',//테두리 그림자 
   transform:'translate(-50%)', // 모달 가로축 중심으로 놓는 코드
-
+  zIndex: '101'
 });
diff --git a/fe/src/app/_component/StoreDetail.css.ts b/fe/src/app/_component/StoreDetail.css.ts
@@ -14,7 +14,6 @@ export const info = style({
 });
 
 export const payInfo = style({
-  // padding: '5px',
   display: "flex",
   justifyContent: "space-between"
 });

diff --git a/fe/src/app/_component/StoreDetail.tsx b/fe/src/app/_component/StoreDetail.tsx
@@ -1,30 +1,40 @@
 
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import * as styles from './StoreDetail.css'
+import { useQuery } from '@tanstack/react-query';
 import Modal from './Modal';
 import { Store } from '@/types/store';
+import { CURRENT_STORE_KEY } from '@/hooks/useStore';
 
  const StoreDetail = () => {
 
-  const [open, setOpen] = useState(true)
+  const { data: store } = useQuery<Store>({ queryKey: [CURRENT_STORE_KEY]});
+  const id = store?.id
+  console.log(id);
+
+  const [open, setOpen] = useState(false)
 
   const closeButton = () => {
     setOpen(false);
   };
 
-  async function getStore() {
-    const res = await fetch(`http://localhost:8080/store/59368`)
-    if(!res.ok) {
+  const { data: stores } = useQuery<Store>({ 
+    queryKey: [`/store`],
+    queryFn: () => id ? getStore(id) : Promise.resolve(undefined),
+  });
+
+  async function getStore(id:number) {
+    const res = await fetch(`http://localhost:8080/store/${id}`)
+    if(!res.ok)  {
       throw new Error('Failed fetch data');
     }
+    setOpen(true)
     return await res.json();
   }
+
 
-  const { data } = useQuery<Store>({ queryKey: ["get-store"], queryFn: getStore });
-
-  if (data) {
-    const {id, name, middleCategory, address, paywayList} = data
+  if (stores) {
+    const {id, name, middleCategory, address, paywayList} = stores
 
     return (
       <Modal open={open}>
@@ -39,13 +49,12 @@ import { Store } from '@/types/store';
           </div>
           <div className={styles.payInfo}>
             <div>{paywayList}애플페이</div>
-            <div>정보 수정 요청</div>
+            <a href={'/report/' + id}>정보 수정 요청</a>
           </div>
         </div>
       </Modal>
     )
   }
 }
 
-export default StoreDetail
-
+export default StoreDetail
diff --git a/fe/src/app/_component/map.css.ts b/fe/src/app/_component/map.css.ts
@@ -1,6 +1,7 @@
-import {globalStyle, style} from "@vanilla-extract/css";
+import {style} from "@vanilla-extract/css";
 
 export const mapSize = style({
   width: '100dvw',
-  height: '100dvh'
+  maxWidth: '540px',
+  height: '95dvh'
 });
diff --git a/fe/src/app/_component/map.tsx b/fe/src/app/_component/map.tsx
@@ -29,9 +29,17 @@ const Map = ({
             minZoom: 10,
             scaleControl: false,
             mapDataControl: false,
+            disableDoubleTapZoom:true,
+            zoomControl:true,
+            zoomControlOptions: {
+                position: naver.maps.Position.BOTTOM_RIGHT,
+                style: naver.maps.ZoomControlStyle.SMALL,
+            },
             logoControlOptions: {
-            position: naver.maps.Position.BOTTOM_RIGHT,
+                position: naver.maps.Position.BOTTOM_LEFT,
             },
+
+
         };
         //새로운 네이버 맵 인스턴스 생성 
         const map = new window.naver.maps.Map(mapId, mapOptions);
@@ -42,11 +50,11 @@ const Map = ({
         }
     };
 
-    useEffect(() => {
-        return () => {
-            mapRef.current?.destroy();
-        };
-    }, []);
+    // useEffect(() => {
+    //     return () => {
+    //         mapRef.current?.destroy();
+    //     };
+    // }, []);
 
     return (
         <>

diff --git a/fe/src/app/_component/marker.tsx b/fe/src/app/_component/marker.tsx
@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { Marker as MarkerType  } from "@/types/map";
 
-const Marker = ({ map, coordinates}: MarkerType): null => {
+const Marker = ({ map, coordinates, onClick}: MarkerType): null => {
 
   useEffect(() => {
       if (!map) return;
@@ -13,17 +13,16 @@ const Marker = ({ map, coordinates}: MarkerType): null => {
           map: map,
           position: new naver.maps.LatLng(...coordinates),
           icon:{
-                url: '/marker.svg',
-                size: new naver.maps.Size(30, 45),
-                origin: new naver.maps.Point(0, 0),
-                scaledSize: new naver.maps.Size(30 , 45),
-              }
+            url: '/marker.svg',
+            size: new naver.maps.Size(38, 58),
+            anchor: new naver.maps.Point(19, 58),
+          }
       });
       }
 
-      // if (onClick) {
-      //     naver.maps.Event.addListener(marker, 'click', onClick);
-      // }
+      if (onClick) {
+          naver.maps.Event.addListener(marker, 'click', onClick);
+      }
 
       return () => {
       marker?.setMap(null);

diff --git a/fe/src/app/_component/markers.tsx b/fe/src/app/_component/markers.tsx
@@ -1,28 +1,18 @@
+import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { NaverMap } from '@/types/map';
-import { Coordinates, mapCorner } from '@/types/map';
-import { Store } from '@/types/store';
 import Marker from "./marker";
+import { getApi } from '@/hooks/api';
+import { NaverMap, Coordinates, Corner } from '@/types/map';
+import { Store } from '@/types/store';
 import useStore, { STORE_KEY, CURRENT_STORE_KEY } from '@/hooks/useStore';
 import { MAP_KEY } from '@/hooks/useMap';
-import { useEffect, useState } from 'react';
 
 const Markers = () => {
-  // async function getStores(coordinates: mapCorner) {
-  //   const res = await fetch(`http://localhost:8080/store`, {
-  //     body: JSON.stringify(coordinates)
-  //   });
-
-  //   if (!res.ok) {
-  //     console.log('Failed fetch data');
-  //   }
-  //   return await res.json()
-  // }
 
   const { setCurrentStore, clearCurrentStore } = useStore();
   const { data: currentStore } = useQuery<Store>({ queryKey: [CURRENT_STORE_KEY] });
   const { data: map } = useQuery<NaverMap>({ queryKey: [MAP_KEY] });
-  const [corner, setCorner] = useState<string | undefined>(undefined);
+  const [corner, setCorner] = useState<Corner | undefined>(undefined);
 
   useEffect(() => {
     if (map) {
@@ -36,26 +26,21 @@ const Markers = () => {
     }
   }, [map]);
 
-  async function getStores(corner: string) { // 쿼리스트링 방식 get요청
-    const url = `http://localhost:8080/store?${corner}`; // URL에 쿼리 스트링 추가
-    const res = await fetch(url);
-
-    if (!res.ok) {
-      console.log('Failed fetch data');
+  async function getStores(corner: Corner) {
+    const url = `http://localhost:8080/store?${corner}`;
+    try {
+      const data = await getApi(url);
+      return data;
+    } catch (error) {
+      console.error(error);
     }
-    return await res.json()
   }
-
-  const { data: stores, isLoading, error } = useQuery<Store[]>({
+  
+  const { data: stores } = useQuery<Store[]>({
     queryKey: [STORE_KEY],
     queryFn: () => corner ? getStores(corner) : Promise.resolve(undefined),
     enabled: !!corner, // corner가 정의된 경우에만 쿼리 실행
   });
-  // console.log(corner);
-
-  // if (isLoading) return <div>Loading...</div>;
-  // if (error) return <div>{error.message}</div>; // 에러 발생시 UI 처리
-  // if (error) return console.log(error.message);
 
   const convertToCoordinates = (lat: number, lng: number): Coordinates => {
     return [lat, lng];

diff --git a/fe/src/app/layout.css.ts b/fe/src/app/layout.css.ts
@@ -1,7 +1,7 @@
 import {style} from "@vanilla-extract/css";
 
 export const wrapper = style({
-  maxWidth: '1280px',
+  maxWidth: '540px',
   margin: '0 auto',
   width: '100%',
   backgroundColor: 'white',