[chore] env환경변수설정 (#86)

* [style]mybar

* [style]알람설정

* [style] 탭 메뉴 접근성

* [style]마이페이지

* [style]마이페이지 반응형 수정

* [style]툴팁컴포넌트

* [chore]포매팅

* [style] 마이페이지 mybar 카드 정렬 수정

* [chore]환경변수설정

* [chore]auth getAPI사용

* [chore]환경변수 재설정

Author: mtm-git1018

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'));
 

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;

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>
 

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>
   );
 }

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>

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' },