기본 기능 구현 완료 dev 브랜치 머지

.eslintrc.json

@@ -6,37 +6,54 @@
     "project": "./tsconfig.json",
     "createDefaultProgram": true
   },
-  "env": { // 전역객체를 eslint가 인식하는 구간
-    "browser": true, // document나 window 인식되게 함
+  "env": {
+    "browser": true,
     "node": true,
     "es6": true
   },
-  "ignorePatterns": ["node_modules/"], // eslint 미적용될 폴더나 파일 명시
+  "ignorePatterns": ["node_modules/"],
   "extends": [
     "airbnb",
     "airbnb-typescript",
     "airbnb/hooks",
     "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended", // ts 권장
-    "plugin:prettier/recommended", // eslint의 포매팅을 prettier로 사용.
-    "prettier" // eslint-config-prettier prettier와 중복된 eslint 규칙 제거
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
   ],
   "rules": {
-    "react/react-in-jsx-scope": "off", // react 17부턴 import 안해도돼서 기능 끔
-    // 경고표시, 파일 확장자를 .ts나 .tsx 모두 허용함
+    "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
-    "no-useless-catch": "off", // 불필요한 catch 못쓰게 하는 기능 끔
-    "react/function-component-definition":[
+    "no-useless-catch": "off",
+    "react/function-component-definition": [
       2,
-      { "namedComponents": [
-        "arrow-function",
-        "function-declaration"
-      ] }
+      { "namedComponents": ["arrow-function", "function-declaration"] }
     ],
     "react/require-default-props": "off",
-    "max-len": ["error", { "code": 120 }], // 최대 줄 길이를 120자로 설정
-    "jsx-a11y/label-has-associated-control": [ 2, { // 라벨이 입력폼과 연결이 되어있는지에 대한 옵션. 심각도 2(에러)로 설정.
-      "some": [ "nesting", "id" ] // 감싸거나 아이디를 연결해주면 되도록 설정.
-    }],
-  }
-}
+    "max-len": ["error", { "code": 120 }],
+    "jsx-a11y/label-has-associated-control": [
+      2,
+      {
+        "some": ["nesting", "id"]
+      }
+    ],
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": ["state"]
+      }
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/explicit-function-return-type": "off"
+      }
+    }
+  ]
+}

.github/workflows/docker-deploy.yml

@@ -68,4 +68,6 @@ jobs:
             docker stop frontend-container || true
             docker rm frontend-container || true
 
-            docker run -d --name frontend-container -p 3000:3000 ${{ secrets.DOCKERHUB_USERNAME }}/folio-frontend:latest
+            docker run -d --name frontend-container \
+              -p 3000:3000 ${{ secrets.DOCKERHUB_USERNAME }}/folio-frontend:latest \
+              -e NEXT_PUBLIC_API_BASE_URL=http://yrpark.duckdns.org:8080

package.json

@@ -10,10 +10,14 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@reduxjs/toolkit": "^2.2.7",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^11.9.0",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "react-redux": "^9.1.2"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/account/page.tsx

@@ -0,0 +1,5 @@
+import AccountPage from '@/components/templates/AccountPage'
+
+export default function Page() {
+  return <AccountPage />
+}

src/app/client-layout.tsx

@@ -1,8 +1,44 @@
-"use client";
+'use client'
 
-import { ChakraProvider } from '@chakra-ui/react';
-import theme from '../theme';
+import { ChakraProvider } from '@chakra-ui/react'
+import { useEffect, useRef } from 'react'
+import { Provider, useDispatch } from 'react-redux'
+import { fetchSkills } from '@/features/skill/skillSlice'
+import store, { AppDispatch } from '@/store'
+import isTokenExpired from '@/utils/TokenExpiredChecker'
+import { useRouter } from 'next/navigation'
+import theme from '../theme'
+
+function ClientComponentWrapper({ children }: { children: React.ReactNode }) {
+  const dispatch: AppDispatch = useDispatch()
+  const didFetchRef = useRef(false) // NOTE: 재랜더링해도 값이 저장되는 useRef를 이용해서 최초 1번 실행
+
+  useEffect(() => {
+    if (!didFetchRef.current) {
+      dispatch(fetchSkills())
+      didFetchRef.current = true
+    }
+  }, [dispatch])
+
+  return children
+}
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+  const router = useRouter()
+
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    if (!token || isTokenExpired(token)) {
+      localStorage.removeItem('token')
+      router.push('/')
+    }
+  }, [router])
+
+  return (
+    <Provider store={store}>
+      <ClientComponentWrapper>
+        <ChakraProvider theme={theme}>{children}</ChakraProvider>
+      </ClientComponentWrapper>
+    </Provider>
+  )
 }

src/app/globals.css

@@ -116,4 +116,13 @@ a {
 .fade-in.show {
   opacity: 1;
   transform: translateY(0); /* 원래 위치로 이동 */
+}
+
+.fixed-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #f8f9fa;
+  text-align: center;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
 }

src/app/layout.tsx

@@ -14,10 +14,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={inter.className}>
-        <ClientLayout>
-          {children}
-        </ClientLayout>
+        <ClientLayout>{children}</ClientLayout>
       </body>
     </html>
   )
-}
+}

src/app/page.tsx

@@ -1,7 +1,5 @@
-import MainPage from '@/components/templates/MainPage';
+import MainPage from '@/components/templates/MainPage'
 
 export default function Home() {
-  return (
-    <MainPage />
-  )
+  return <MainPage />
 }

src/app/portfolio/[id]/page.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import PortfolioViewPage from '@/components/templates/PortfolioViewPage'
+import { useParams } from 'next/navigation'
+
+export default function Page() {
+  const params = useParams()
+  if (Array.isArray(params.id) || !params.id) {
+    return <div>올바르지 않은 접근입니다.</div>
+  }
+  const id = parseInt(params.id, 10)
+
+  return <PortfolioViewPage id={id} />
+}