publish

.github/workflows/develop-deploy-v1.yml

@@ -15,7 +15,7 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_PASSWORD }}
-      
+
       # Docker 이미지 빌드 및 태깅
       - name: Build and push
         uses: docker/build-push-action@v3
@@ -27,7 +27,9 @@ jobs:
             NEXT_PUBLIC_API_MOCKING=${{ secrets.NEXT_PUBLIC_API_MOCKING }}
             NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}
             NEXT_PUBLIC_KAKAO_APP_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_APP_KEY }}
-
+            NEXT_PUBLIC_PAY200_KEY=${{ secrets.NEXT_PUBLIC_PAY200_KEY }}
+            NEXT_PUBLIC_TOSS_PAY_KEY=${{ secrets.NEXT_PUBLIC_TOSS_PAY_KEY }}
+            NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}
       # EC2 도커 컴포즈 실행
       - name: SSH and Deploy
         uses: appleboy/ssh-action@v0.1.8

.github/workflows/main-deploy-v1.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_PASSWORD }}
-      
+
       - name: Build and push
         uses: docker/build-push-action@v3
         with:
@@ -24,6 +24,8 @@ jobs:
             NEXT_PUBLIC_API_MOCKING=${{ secrets.NEXT_PUBLIC_API_MOCKING }}
             NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_PROD_API_URL }}
             NEXT_PUBLIC_KAKAO_APP_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_APP_KEY }}
+            NEXT_PUBLIC_PAY200_KEY=${{ secrets.NEXT_PUBLIC_PAY200_KEY }}
+            NEXT_PUBLIC_TOSS_PAY_KEY=${{ secrets.NEXT_PUBLIC_TOSS_PAY_KEY }}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1

.vscode/settings.json

@@ -12,11 +12,11 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "prettier.requireConfig": true,
-  "prettier.useEditorConfig": false,
+  "prettier.requireConfig": false,
+  "prettier.useEditorConfig": true,
   "javascript.format.enable": false,
   "typescript.format.enable": false,
-  "editor.formatOnSaveTimeout": 1500,
+  "editor.formatOnSaveTimeout": 5000,
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -27,9 +27,9 @@
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "vscode.typescript-language-features"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.formatOnSaveMode": "modifications",
+  "editor.formatOnSaveMode": "file",
   "tailwindCSS.validate": false,
   "files.watcherExclude": {
     "**/node_modules/**": true,

Dockerfile

@@ -10,11 +10,16 @@ RUN apk add --no-cache libc6-compat
 ARG NEXT_PUBLIC_API_MOCKING
 ARG NEXT_PUBLIC_API_URL
 ARG NEXT_PUBLIC_KAKAO_APP_KEY
-
+ARG NEXT_PUBLIC_PAY200_KEY
+ARG NEXT_PUBLIC_TOSS_PAY_KEY
+ARG NEXT_PUBLIC_KAKAO_API_KEY
 # .env 파일 생성
 RUN echo "NEXT_PUBLIC_API_MOCKING=${NEXT_PUBLIC_API_MOCKING}" > .env && \
     echo "NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}" >> .env && \
-    echo "NEXT_PUBLIC_KAKAO_APP_KEY=${NEXT_PUBLIC_KAKAO_APP_KEY}" >> .env
+    echo "NEXT_PUBLIC_KAKAO_APP_KEY=${NEXT_PUBLIC_KAKAO_APP_KEY}" >> .env && \
+    echo "NEXT_PUBLIC_PAY200_KEY=${NEXT_PUBLIC_PAY200_KEY}" >> .env && \
+    echo "NEXT_PUBLIC_TOSS_PAY_KEY=${NEXT_PUBLIC_TOSS_PAY_KEY}" >> .env && \
+    echo "NEXT_PUBLIC_KAKAO_API_KEY=${NEXT_PUBLIC_KAKAO_API_KEY}" >> .env
 
 # .env 파일 확인
 RUN echo "=== .env file contents ===" && cat .env

docker-compose.yml

@@ -1,4 +1,4 @@
-version: "3.8"
+version: '3.8'
 
 services:
   o2o-fe:
@@ -10,16 +10,22 @@ services:
         - NEXT_PUBLIC_API_MOCKING=${NEXT_PUBLIC_API_MOCKING}
         - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
         - NEXT_PUBLIC_KAKAO_APP_KEY=${NEXT_PUBLIC_KAKAO_APP_KEY}
+        - NEXT_PUBLIC_PAY200_KEY=${NEXT_PUBLIC_PAY200_KEY}
+        - NEXT_PUBLIC_TOSS_PAY_KEY=${NEXT_PUBLIC_TOSS_PAY_KEY}
+        - NEXT_PUBLIC_KAKAO_API_KEY=${NEXT_PUBLIC_KAKAO_API_KEY}
     image: yong7317/o2o-fe:latest
     ports:
       - '3000:3000'
     environment:
       - NEXT_PUBLIC_API_MOCKING=${NEXT_PUBLIC_API_MOCKING}
       - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
       - NEXT_PUBLIC_KAKAO_APP_KEY=${NEXT_PUBLIC_KAKAO_APP_KEY}
+      - NEXT_PUBLIC_PAY200_KEY=${NEXT_PUBLIC_PAY200_KEY}
+      - NEXT_PUBLIC_TOSS_PAY_KEY=${NEXT_PUBLIC_TOSS_PAY_KEY}
+      - NEXT_PUBLIC_KAKAO_API_KEY=${NEXT_PUBLIC_KAKAO_API_KEY}
     networks:
       - o2o-network
-  
+
 networks:
   o2o-network:
-    driver: bridge
+    driver: bridge

eslint.config.mjs

@@ -1,6 +1,5 @@
 import js from '@eslint/js'
 import nextPlugin from '@next/eslint-plugin-next'
-import pluginPrettier from 'eslint-plugin-prettier'
 import tailwind from 'eslint-plugin-tailwindcss'
 import ts from 'typescript-eslint'
 
@@ -16,24 +15,11 @@ export default [
     plugins: {
       '@typescript-eslint': ts.plugin,
       tailwindcss: tailwind,
-      prettier: pluginPrettier,
       '@next/next': nextPlugin,
     },
     rules: {
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-explicit-any': 'warn',
-      'prettier/prettier': [
-        'error',
-        {
-          tabWidth: 2,
-          useTabs: false,
-          singleQuote: true,
-          trailingComma: 'es5',
-          semi: false,
-          endOfLine: 'lf',
-          printWidth: 100,
-        },
-      ],
       indent: 'off',
       '@typescript-eslint/indent': 'off',
       'tailwindcss/no-custom-classname': 'off',

next.config.ts

@@ -18,6 +18,7 @@ const nextConfig: NextConfig = {
 
     return config
   },
+  reactStrictMode: false,
   output: 'standalone',
   devIndicators: {
     buildActivity: false,

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
+    "@pay200/sdk": "^0.0.5",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -49,6 +50,7 @@
     "@next/eslint-plugin-next": "^15.1.3",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query-devtools": "^5.66.3",
+    "@tosspayments/tosspayments-sdk": "^2.3.4",
     "@types/eslint-plugin-tailwindcss": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
@@ -58,15 +60,16 @@
     "@yarnpkg/sdks": "^3.2.0",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "husky": "^9.1.7",
+    "kakao.maps.d.ts": "^0.1.40",
     "msw": "^2.7.0",
     "postcss": "^8",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier": "^3.5.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
     "typescript-eslint": "^8.19.0"

src/api/useDeleteAddress.ts

@@ -5,11 +5,11 @@ const useDeleteAddress = () => {
   const queryClient = useQueryClient()
 
   return useMutation({
-    mutationFn: async (addressId: string) => {
+    mutationFn: async (addressId: number) => {
       return await api.delete(`members/address/${addressId}`)
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['completed-addresses'] })
+      // queryClient.invalidateQueries({ queryKey: ['completed-addresses'] })
     },
   })
 }

src/api/useGetAddress.ts

@@ -1,30 +1,40 @@
 import { api } from '@/lib/api'
+import addressStore from '@/store/addressStore'
+import memberStore from '@/store/user'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 interface Address {
   id: number
+  isDefault: boolean
   roadAddress: string
   jibunAddress: string
   detailAddress: string
   latitude: number
   longitude: number
+  alias?: string
 }
 
-interface AddressData {
-  defaultAddress: Address
-  house: Address
-  company: Address
-  others: Address[]
+export interface AddressResponseData {
+  defaultAddress?: Address
+  house?: Address
+  company?: Address
+  others?: Address[]
 }
 
 const useGetAddress = () => {
   const qc = useQueryClient()
+  const { member } = memberStore()
+  const { setAddress } = addressStore()
 
   const { data: address, isSuccess } = useQuery({
     queryKey: ['address'],
     queryFn: async () => {
-      return await api.get<AddressData>(`members/address`)
+      const response = await api.get<AddressResponseData>(`members/address`)
+      setAddress(response)
+
+      return response
     },
+    enabled: !!member,
   })
 
   const resetGetAddress = () => {

src/api/useGetAddressToGeolocation.ts

@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query'
+import ky from 'ky'
+
+const useGetAddressToGeolocation = () => {
+  return useMutation({
+    mutationFn: (address: string) =>
+      ky
+        .get<{
+          documents: {
+            jibunAddress: string
+            roadAddress: string
+            x: string
+            y: string
+          }[]
+        }>('https://dapi.kakao.com/v2/local/search/address.json', {
+          headers: {
+            Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_API_KEY}`,
+          },
+          searchParams: {
+            query: address,
+          },
+        })
+        .json(),
+  })
+}
+
+export default useGetAddressToGeolocation

src/api/useGetGeolocationToAddress.ts

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query'
+import ky from 'ky'
+
+interface GeolocationToAddressResponse {
+  address_name: string
+  main_address_no: string
+  mountain_yn: string
+  region_1depth_name: string
+  region_2depth_name: string
+  region_3depth_name: string
+  sub_address_no: string
+  zip_code: string
+}
+
+const useGetGeolocationToAddress = () => {
+  return useMutation({
+    mutationFn: ({ longitude, latitude }: { longitude: string; latitude: string }) =>
+      ky
+        .get<{
+          documents: {
+            address: GeolocationToAddressResponse
+            road_address: GeolocationToAddressResponse
+          }[]
+        }>('https://dapi.kakao.com/v2/local/geo/coord2address.json', {
+          headers: {
+            Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_API_KEY}`,
+          },
+          searchParams: {
+            x: longitude,
+            y: latitude,
+          },
+        })
+        .json(),
+  })
+}
+
+export default useGetGeolocationToAddress

src/api/useGetOrderStatus.ts

@@ -0,0 +1,20 @@
+import { api } from '@/lib/api'
+import { useQuery } from '@tanstack/react-query'
+import { OrderStatus } from './useGetOrdersDetail'
+
+const useGetOrderStatus = (orderId?: string) => {
+  const { data: status, isSuccess } = useQuery({
+    queryKey: ['orderStatus', orderId],
+    queryFn: async () => {
+      return await api.get<{ status: OrderStatus }>(`orders/${orderId}/status`)
+    },
+    refetchInterval: (data) => {
+      const shouldRefetch = ['NEW', 'ONGOING'].includes(data.state.data?.status as OrderStatus)
+      return shouldRefetch ? 5000 : false
+    },
+  })
+
+  return { status, isSuccess }
+}
+
+export default useGetOrderStatus