diff --git a/next.config.ts b/next.config.ts
index aeb8204..6587be6 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -4,6 +4,11 @@ const nextConfig: NextConfig = {
 
   // webpack 설정
   webpack: (config) => {
+
+    env: {
+      NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL;
+    }
+
     // @ts-expect-error 타입 에러 무시
     const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
 
diff --git a/src/app/api/config/appConfig.ts b/src/app/api/config/appConfig.ts
new file mode 100644
index 0000000..e7fdb97
--- /dev/null
+++ b/src/app/api/config/appConfig.ts
@@ -0,0 +1,4 @@
+export const getApi =
+  process.env.NODE_ENV === 'development'
+    ? process.env.NEXT_PUBLIC_API_URL_DEV
+    : process.env.NEXT_PUBLIC_API_URL_PROD;
diff --git a/src/app/mypage/my-setting/page.tsx b/src/app/mypage/my-setting/page.tsx
index 1890778..9adc305 100644
--- a/src/app/mypage/my-setting/page.tsx
+++ b/src/app/mypage/my-setting/page.tsx
@@ -24,7 +24,6 @@ function MySetting() {
           <ToggleBtn />
         </div>
       </div>
-      <div className="p-4 bg-gray w-20 flex-center items-center">ToopTip</div>
       <div className="flex justify-between items-center">
         <TextButton onClick={() => setIsQuit(!isQuit)}>회원탈퇴</TextButton>
 
diff --git a/src/app/mypage/mybar/page.tsx b/src/app/mypage/mybar/page.tsx
index c5662c1..c1c34b7 100644
--- a/src/app/mypage/mybar/page.tsx
+++ b/src/app/mypage/mybar/page.tsx
@@ -5,20 +5,44 @@ import Img from '@/shared/assets/images/dummy/exampleCocktail.png';
 function MyBar() {
   return (
     <div
-      className="grid grid-cols-2 mt-10 gap-8 w-full sm:[grid-template-columns:repeat(2,minmax(0,320px))]  md:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]  
-     lg:[grid-template-columns:repeat(4,minmax(0,250px))]"
+      className="grid grid-cols-1 justify-items-center mt-10 gap-8  sm:[grid-template-columns:repeat(2,minmax(0,320px))]  sm:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]  
+  "
     >
-      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>
       <CocktailCard
         src={Img}
-        type="myBar"
+        textSize1="text-xl"
         name="Old Pashioned"
         nameKo="올드 패션드"
-      ></CocktailCard>{' '}
-      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>{' '}
-      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>{' '}
-      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>{' '}
-      <CocktailCard src={Img} type="myBar" name="Old Pashioned" nameKo="올드 패션드"></CocktailCard>
+        keep={false}
+      ></CocktailCard>
+      <CocktailCard
+        src={Img}
+        textSize1="text-xl"
+        name="Old Pashioned"
+        nameKo="올드 패션드"
+        keep={false}
+      ></CocktailCard>
+      <CocktailCard
+        src={Img}
+        textSize1="text-xl"
+        name="Old Pashioned"
+        nameKo="올드 패션드"
+        keep={false}
+      ></CocktailCard>
+      <CocktailCard
+        src={Img}
+        textSize1="text-xl"
+        name="Old Pashioned"
+        nameKo="올드 패션드"
+        keep={false}
+      ></CocktailCard>
+      <CocktailCard
+        src={Img}
+        textSize1="text-xl"
+        name="Old Pashioned"
+        nameKo="올드 패션드"
+        keep={false}
+      ></CocktailCard>
     </div>
   );
 }
diff --git a/src/domains/recipe/CocktailCard.tsx b/src/domains/recipe/CocktailCard.tsx
index 759be87..87796a1 100644
--- a/src/domains/recipe/CocktailCard.tsx
+++ b/src/domains/recipe/CocktailCard.tsx
@@ -27,7 +27,7 @@ function CocktailCard({ src, name, nameKo, keep = true, className, textSize1, te
         {/* <Image src={src} alt={name} fill /> */}
         <Image src={Img} alt="" fill className="object-cover " />
         {keep && (
-          <div className="flex w-full px-2 items-center justify-between absolute left-0 top-0">
+          <div className="flex w-full pl-4 px-3 py-2 items-center justify-between absolute left-0 top-0">
             <div>
               <Label title="레시피" />
             </div>
diff --git a/src/domains/shared/store/auth.ts b/src/domains/shared/store/auth.ts
index f4ac90b..112abce 100644
--- a/src/domains/shared/store/auth.ts
+++ b/src/domains/shared/store/auth.ts
@@ -1,3 +1,4 @@
+import { getApi } from '@/app/api/config/appConfig';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -29,7 +30,7 @@ export const useAuthStore = create<AuthState>()(
       isLoggedIn: false,
 
       loginWithProvider: (provider) => {
-        window.location.href = `http://localhost:8080/oauth2/authorization/${provider}`;
+        window.location.href = `${getApi}/oauth2/authorization/${provider}`;
       },
 
       setUser: (user, token) => {
@@ -39,7 +40,7 @@ export const useAuthStore = create<AuthState>()(
 
       logout: async () => {
         try {
-          await fetch('http://localhost:8080/user/auth/logout', {
+          await fetch(`${getApi}/user/auth/logout`, {
             method: 'POST',
             credentials: 'include',
           });
@@ -51,7 +52,7 @@ export const useAuthStore = create<AuthState>()(
 
       updateUser: async () => {
         try {
-          const res = await fetch('http://localhost:8080/user/auth/refresh', {
+          const res = await fetch(`${getApi}/user/auth/refresh`, {
             method: 'POST',
             credentials: 'include',
             headers: { 'Content-Type': 'application/json' },