Fe refactor (#108)

* #97 <fix> : cors 문제 해결을 위한 업로드 * #91 <fix> : naver map 키 적용을 위한 코드 추가 * #97 <fix> : cors 문제 해결을 위한 업로드 * <comment> : 개발 후순위로 밀린 부분 주석처리 * #19 <feat> : 지도 중심을 서울시청으로 변경 * #19 <fix> : paymentList 함수명 변경 * #59 <refactor> : 헤더 footer 리팩토링으로 함께 리팩토링 진행 * #56 <refactor> : header footer 리팩토링 * #59 <refactor> : 헤더 footer 리팩토링으로 함께 리팩토링 진행
WeImproveOurSkill · Aug 28, 2024 · b823416 · b823416
1 parent cf5043c
commit b823416
Show file tree

Hide file tree

Showing 20 changed files with 322 additions and 162 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -21,9 +21,9 @@ const AccordionMenu = ({ isOpen, setIsOpen }:Props) => {
           <li>
             <Link href='/' onClick={closeAccordion}>홈</Link>
           </li>
-          <li>
+          {/* <li>
             <Link href='/selectpay' onClick={closeAccordion}>결제 수단 선택</Link>
-          </li>
+          </li> */}
           <li>
             <Link href='/report' onClick={closeAccordion}>오류 정보 알리기</Link>
           </li>

diff --git 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',
 });
diff --git a/fe/src/app/_component/FooterMenu.tsx b/fe/src/app/_component/FooterMenu.tsx
@@ -5,16 +5,19 @@ const FooterMenu = () => {
   return (
     <ul className={styles.container}>
       <li className={styles.menu}>
-        <Link href='/'>최근 본 상점</Link>
+        <Link href='/'></Link>
+        <span>최근 본 상점</span>
       </li>
-      <li className={styles.menu}>
-        <Link href='/'>홈</Link>
+      <li className={styles.borderMenu}>
+        <Link href='/'></Link>
+        <span>홈</span>
       </li>
       <li className={styles.menu}>
-       <Link href='/report'>문의</Link>
+       <Link href='/report'></Link>
+       <span>문의</span>
       </li>
     </ul>
   )
 }
 
-export default FooterMenu
+export default FooterMenu;
diff --git 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%',
-})
+  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
@@ -10,11 +10,15 @@ const Header = () => {
 
   return (
     <div className={styles.container}>
-      <Link href={'/'} className={styles.logo}>Paypick</Link>
-      <div className={styles.menu} onClick={() => setIsOpen(!isOpen)}>=</div>
-      <AccordionMenu isOpen={isOpen} setIsOpen={setIsOpen}/>
+      <Link href={'/'} className={styles.logo}>
+        <span className={styles.logoText}>Paypick</span>
+      </Link>
+      <div className={styles.menu} onClick={() => setIsOpen(!isOpen)}>
+        <span>=</span>
+        <AccordionMenu isOpen={isOpen} setIsOpen={setIsOpen}/>
+      </div> 
     </div>
   )
 }
 
-export default Header
+export default Header;
diff --git 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
@@ -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
@@ -24,12 +24,12 @@ const RerenderButton = ({ refetchMarkers }: Props) => {
   };
 
   return (
-    <Modal open={rerenderShow} className={styles.secondContainer}>
+    <Modal open={rerenderShow} className={styles.container}>
       <button onClick={onClick} className={styles.displayModal} >
         <span>현 지도에서 검색</span>
       </button>
     </Modal>
   )
 }
 
-export default RerenderButton
+export default RerenderButton;
diff --git 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 (
       <Modal open={show} className={styles.container}>
@@ -43,12 +43,12 @@ import { getApi } from '@/hooks/api';
             <div>{address}</div>
           </div>
           <div className={styles.payInfo}>
-            <div>{paywayList}애플페이</div>
+            <div>{paymentList}애플페이</div>
             <a href={`/report/${id}?name=${encodeURIComponent(name)}`}>정보 수정 요청</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
@@ -3,5 +3,5 @@ import {style} from "@vanilla-extract/css";
 export const mapSize = style({
   width: '100%',
   maxWidth: '540px',
-  height: '90dvh'
+  height: '100dvh',
 });