diff --git a/apps/pwrcode-frontend/.gitignore b/apps/pwrcode-frontend/.gitignore
index eb9a2be..c1f2dc6 100755
--- a/apps/pwrcode-frontend/.gitignore
+++ b/apps/pwrcode-frontend/.gitignore
@@ -27,10 +27,14 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*
 
 # vercel
 .vercel
 
+# berry
+.yarn
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts
diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx
index fa00e5c..7bd2303 100755
--- a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx
+++ b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx
@@ -16,35 +16,25 @@ import { MainLink } from '../../atoms/Link/Link.stories';
 import { Card } from '../../molecules/Card/Card';
 import { CardGroup } from './CardGroup';
 import { MainCard, SearchCardStory } from '../../molecules/Card/Card.stories';
-import { atom, useAtom, useAtomValue } from 'jotai';
-import {
-  SearchKeywordProps,
-  readAndWriteSearchKeywordAtom,
-  searchKeywordAtom,
-  testAtom,
-} from '@/app/state';
-import { useHydrateAtoms } from 'jotai/utils';
-import {
-  QueryClient,
-  QueryClientProvider,
-  QueryKey,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
-import { atomsWithQuery } from 'jotai-tanstack-query';
+import { useAtom } from 'jotai';
+import { testAtom } from '@/app/state';
+import { useQuery } from '@tanstack/react-query';
 
 import { motion } from 'framer-motion';
 
 async function getCardData() {
-  const response = await fetch('http://localhost:4000/search', {
-    method: 'POST',
-    body: JSON.stringify({
-      text: '상태',
-    }),
-  });
+  const response = await fetch(
+    `http://${process.env.NEXT_PUBLIC_BACKEND_API}/search`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        text: '상태',
+      }),
+    },
+  );
 
   if (!response.ok) {
-    throw new Error('Failed to fetch');
+    // throw new Error('Failed to fetch');
   }
 
   return response.json();
@@ -70,7 +60,7 @@ export function CardGroupDataServerComponent(
   const { isPending, error, data } = useQuery({
     queryKey: ['repoData'],
     queryFn: (): Promise<ResponseBodyProps> =>
-      fetch('http://localhost:4000/search', {
+      fetch(`http://${process.env.NEXT_PUBLIC_BACKEND_API}/search`, {
         method: 'POST',
         body: JSON.stringify({
           text: '상태',
@@ -79,7 +69,7 @@ export function CardGroupDataServerComponent(
   });
 
   if (error) {
-    throw new Error('Failed to fetch');
+    // throw new Error('Failed to fetch');
   }
 
   if (data?.hits?.length === 0) {
@@ -138,7 +128,7 @@ export function CardGroupMainDataServerComponent(
   const { isPending, error, data } = useQuery({
     queryKey: ['repoData'],
     queryFn: (): Promise<ResponseBodyProps> =>
-      fetch('http://localhost:4000/search', {
+      fetch(`http://${process.env.NEXT_PUBLIC_BACKEND_API}/search`, {
         method: 'POST',
         body: JSON.stringify({
           text: '상태',
@@ -147,7 +137,7 @@ export function CardGroupMainDataServerComponent(
   });
 
   if (error) {
-    throw new Error('Failed to fetch');
+    // throw new Error('Failed to fetch');
   }
 
   const [cardsState, setCardsState] = useState([1, 0, -1]);
@@ -188,7 +178,11 @@ export function CardGroupMainDataServerComponent(
 export function CardGroupSearchDataServerComponent(
   props: CardDataServerComponentProps,
 ) {
-  const [data] = useAtom(testAtom);
+  const [{ data, isPending, isError }] = useAtom(testAtom);
+
+  if (isError) {
+    return <></>;
+  }
 
   if (data?.hits?.length === 0) {
     return (
diff --git a/apps/pwrcode-frontend/app/state/index.ts b/apps/pwrcode-frontend/app/state/index.ts
index 07f8690..13ac5e5 100755
--- a/apps/pwrcode-frontend/app/state/index.ts
+++ b/apps/pwrcode-frontend/app/state/index.ts
@@ -1,5 +1,5 @@
 import { atom, useSetAtom } from 'jotai';
-import { atomsWithQuery } from 'jotai-tanstack-query';
+import { atomWithQuery } from 'jotai-tanstack-query';
 import { ResponseBodyProps } from '../design/organisms/CardGroup/CardGroupDataComponent.server';
 import { QueryKey } from '@tanstack/react-query';
 
@@ -13,7 +13,7 @@ export const searchKeywordAtom = atom<SearchKeywordProps>({
   keyword: '',
 });
 
-export const [testAtom] = atomsWithQuery((get) => ({
+export const testAtom = atomWithQuery((get) => ({
   queryKey: ['articles', get(searchKeywordAtom).keyword],
   queryFn: async ({
     queryKey: [, searchKeyword],
@@ -22,15 +22,18 @@ export const [testAtom] = atomsWithQuery((get) => ({
   }): Promise<ResponseBodyProps> => {
     console.log('QUERY: ', searchKeyword, get(searchKeywordAtom).keyword);
 
-    const res = await fetch('http://localhost:4000/search', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
+    const res = await fetch(
+      `http://${process.env.NEXT_PUBLIC_BACKEND_API}/search`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          text: searchKeyword,
+        }),
       },
-      body: JSON.stringify({
-        text: searchKeyword,
-      }),
-    });
+    );
 
     return res.json();
   },
diff --git a/apps/pwrcode-frontend/package.json b/apps/pwrcode-frontend/package.json
old mode 100755
new mode 100644
index ccd0b38..0967ef4
--- a/apps/pwrcode-frontend/package.json
+++ b/apps/pwrcode-frontend/package.json
@@ -1,64 +1 @@
-{
-  "name": "pwrcode-frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@code-hike/mdx": "^0.10.0-next.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@monaco-editor/react": "^4.6.0",
-    "@next/mdx": "^14.0.3",
-    "@tanstack/query-core": "^5.12.1",
-    "@tanstack/react-query": "^5.12.2",
-    "@tanstack/react-query-devtools": "^5.12.2",
-    "@types/mdx": "^2.0.10",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "bright": "^0.8.4",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "framer-motion": "^10.16.4",
-    "jotai": "^2.5.1",
-    "jotai-tanstack-query": "^0.7.2",
-    "next": "14.0.1",
-    "next-mdx-remote": "^4.4.1",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-markdown": "^9.0.1",
-    "remark-breaks": "^4.0.0",
-    "remark-gfm": "3.0.1",
-    "remark-lint": "^9.1.2",
-    "remark-mdx": "^3.0.0",
-    "sass": "^1.69.5"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-themes": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/nextjs": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.1",
-    "eslint-plugin-storybook": "^0.6.15",
-    "storybook": "^7.5.3",
-    "typescript": "^5",
-    "webpack": "^5.89.0"
-  }
-}
+{}
diff --git a/yarn.lock b/yarn.lock
index d9292f8..050f341 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -4953,13 +4953,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:5.12.1, @tanstack/query-core@npm:^5.12.1":
+"@tanstack/query-core@npm:5.12.1":
   version: 5.12.1
   resolution: "@tanstack/query-core@npm:5.12.1"
   checksum: 46d142354c362cb588fdeb4158cb807b8822a1333d1bada3781b9bad7ac8ea98ee7264139cb85021a6e959a795d90f3c2e1a9fa5958c13b6d6bfe5c38f74808c
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:^5.14.2":
+  version: 5.14.2
+  resolution: "@tanstack/query-core@npm:5.14.2"
+  checksum: 1171510ecfaf51693de021c164dc94297260bd88f560705cda2cae460c869cf1bbe5f08389fcf36d69c3b8cfe6b24fec492bfa962afdbaabbe3c9e99065df6fd
+  languageName: node
+  linkType: hard
+
 "@tanstack/query-devtools@npm:5.12.1":
   version: 5.12.1
   resolution: "@tanstack/query-devtools@npm:5.12.1"
@@ -12058,13 +12065,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jotai-tanstack-query@npm:^0.7.2":
-  version: 0.7.2
-  resolution: "jotai-tanstack-query@npm:0.7.2"
+"jotai-tanstack-query@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "jotai-tanstack-query@npm:0.8.1"
   peerDependencies:
     "@tanstack/query-core": "*"
     jotai: ">=1.11.0"
-  checksum: 3e910f7ec283c67f9d1fd2c2132ea3cb26d289c51a6082a495e33e56f3fcfe2862f5a2a241335c4d92845ba74121ccd1e7d3f0dd94af234f2b48adeca9a261de
+    wonka: ^6.3.4
+  checksum: 85ec9129ab164bd66ee4aa1d86ef720ad08cbf55c26cb409ce45ca694d482db3ae5a52da8b9325a48c80d3e4dc7abc886f3b5fe05889b62df1fa083ea4344bd0
   languageName: node
   linkType: hard
 
@@ -15562,7 +15570,7 @@ __metadata:
     "@storybook/nextjs": "npm:^7.5.3"
     "@storybook/react": "npm:^7.5.3"
     "@storybook/testing-library": "npm:^0.2.2"
-    "@tanstack/query-core": "npm:^5.12.1"
+    "@tanstack/query-core": "npm:^5.14.2"
     "@tanstack/react-query": "npm:^5.12.2"
     "@tanstack/react-query-devtools": "npm:^5.12.2"
     "@types/mdx": "npm:^2.0.10"
@@ -15579,7 +15587,7 @@ __metadata:
     eslint-plugin-storybook: "npm:^0.6.15"
     framer-motion: "npm:^10.16.4"
     jotai: "npm:^2.5.1"
-    jotai-tanstack-query: "npm:^0.7.2"
+    jotai-tanstack-query: "npm:^0.8.1"
     next: "npm:14.0.1"
     next-mdx-remote: "npm:^4.4.1"
     react: "npm:^18"
@@ -15593,6 +15601,7 @@ __metadata:
     storybook: "npm:^7.5.3"
     typescript: "npm:^5"
     webpack: "npm:^5.89.0"
+    wonka: "npm:^6.3.4"
   languageName: unknown
   linkType: soft
 
@@ -18940,6 +18949,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wonka@npm:^6.3.4":
+  version: 6.3.4
+  resolution: "wonka@npm:6.3.4"
+  checksum: 77329eea673da07717476e1b8f1a22f1e1a4f261bb9a58fa446c03d3da13dbd5b254664f8aded5928d953f33ee5b399a17a4f70336e8b236e478209c0e78cda4
+  languageName: node
+  linkType: hard
+
 "wordwrap@npm:^1.0.0":
   version: 1.0.0
   resolution: "wordwrap@npm:1.0.0"