배포1 언어

.env.development

@@ -1,6 +1,5 @@
  
-BASE_URL=https://uie.kr
-# BASE_URL=http://localhost:5100
+BASE_URL=http://localhost:5100
 STRIPE_PUBLIC_KEY=
 STRIPE_SECRET_KEY=
 PAYPAL_CLIENT_ID=

src/app/(user)/auth/login/page.jsx

@@ -6,8 +6,6 @@ import { Card, Stack, Container, Typography } from '@mui/material';
 // components
 import LoginMain from 'src/components/_main/auth/login';
 
-import { lang } from 'src/components/lang/kr';
-
 export default function Login() {
 
   return (
@@ -23,12 +21,6 @@ export default function Login() {
             p: 3
           }}
         >
-          <Stack mb={5}>
-            <Typography textAlign="center" variant="h4" component="h1" gutterBottom>
-              {lang.login}
-            </Typography>
-          </Stack>
-
           <LoginMain />
         </Card>
       </Container>

src/app/(user)/auth/register/page.jsx

@@ -8,12 +8,14 @@ import { useEffect, useState } from 'react';
 import { Card, Container, Typography } from '@mui/material';
 // components
 import RegisterMain from 'src/components/_main/auth/register';
-import { lang } from 'src/components/lang/kr';
+import { lang, langen, langjp } from 'src/components/lang/kr';
+import getCookies from 'src/components/lang/langUtil';
 
 // Next.js navigation API
 import { useSearchParams } from 'next/navigation';
 
 export default function Register() {
+  const langIs = getCookies('lang');
   const searchParams = useSearchParams(); // Next.js navigation API
   const [segmentTitle, setSegmentTitle] = useState('');
 
@@ -22,9 +24,9 @@ export default function Register() {
     console.log('Redirect Param:', redirectParam);
 
     if (redirectParam === '/create-shop') {
-      setSegmentTitle(lang.seller);
+      setSegmentTitle(({ kr: lang, en: langen, jp: langjp }[langIs] || lang).seller);
     } else {
-      setSegmentTitle(lang.buyer);
+      setSegmentTitle(({ kr: lang, en: langen, jp: langjp }[langIs] || lang).buyer);
     }
   }, [searchParams]);
 
@@ -43,7 +45,8 @@ export default function Register() {
             }}
           >
             <Typography variant="h4" component="h1" gutterBottom textAlign="center">
-              {segmentTitle} {lang['Create your account']}
+              {segmentTitle}
+              {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['Create your account']}
             </Typography>
             <RegisterMain />
           </Card>

src/components/_main/home/featured/index.jsx

@@ -12,8 +12,10 @@ import { useQuery } from 'react-query';
 import ProductsCarousel from 'src/components/carousels/gridSlider';
 // icons
 import { IoIosArrowForward } from 'react-icons/io';
-import { lang } from 'src/components/lang/kr';
+import { lang, langen, langjp } from 'src/components/lang/kr';
+import getCookies from 'src/components/lang/langUtil';
 export default function Index() {
+  const langIs = getCookies('lang');
   const { data, isLoading } = useQuery(['featured-products'], () => api.getFeaturedProducts());
   return (
     <Box>
@@ -25,7 +27,7 @@ export default function Index() {
       >
         <Box>
           <Typography variant="h2" color="text.primary" mt={{ xs: 4, md: 8 }}>
-            {lang['Products']}
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['Products']}
           </Typography>
         </Box>
         <Button
@@ -42,13 +44,14 @@ export default function Index() {
           component={NextLink}
           href={`/products?featured=true`}
         >
-          {lang['View More']}
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['View More']}
         </Button>
       </Stack>
 
       {!isLoading && !Boolean(data?.data.length) ? (
         <Typography variant="h3" color="error.main" textAlign="center">
-          {lang['Products not found']}
+          
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['Products not found']}
         </Typography>
       ) : (
         <ProductsCarousel data={data?.data || []} isLoading={isLoading} />
@@ -68,7 +71,7 @@ export default function Index() {
         // href={`/categories`}
         href={`/products?featured=true`}
       >
-        {lang['View More']}
+        {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['View More']}
       </Button>
     </Box>
   );

src/components/_main/home/shop/index.jsx

@@ -10,10 +10,12 @@ import { Typography, Grid, Box, Stack, Paper, Button } from '@mui/material';
 import { IoIosArrowForward } from 'react-icons/io';
 // component
 // import ShopCard from 'src/components/cards/shop';
-import { lang } from 'src/components/lang/kr';
 import ShopComponent from 'src/app/(user)/shops/page';
+import { lang, langen, langjp } from 'src/components/lang/kr';
+import getCookies from 'src/components/lang/langUtil';
 
 export default function ShopComponent2() {
+  const langIs = getCookies('lang');
   const { shops = [], isLoading } = useSelector(({ shops }) => shops);
 
   return (
@@ -27,7 +29,7 @@ export default function ShopComponent2() {
       >
         <Box width="100%">
           <Typography variant="h2" color="text.primary" mt={{ xs: 4, md: 8 }} textAlign="left">
-            {lang['Best Shops']}
+            {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['Best Shops']}
           </Typography>
         </Box>
         <Button
@@ -44,7 +46,7 @@ export default function ShopComponent2() {
           component={NextLink}
           href={`/shops`}
         >
-          {lang['View More']}
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['View More']}
         </Button>
       </Stack>
 
@@ -57,7 +59,7 @@ export default function ShopComponent2() {
 
           {!isLoading && !Boolean(shops?.length) && (
             <Typography variant="h3" color="error.main" textAlign="center">
-              Shop not found
+              {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['Shop not found']}
             </Typography>
           )}
         </Grid>
@@ -76,7 +78,7 @@ export default function ShopComponent2() {
           component={NextLink}
           href={`/shops`}
         >
-          {lang['View More']}
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['View More']}
         </Button>
       </Box>
     </Paper>

src/components/customElements.jsx

@@ -0,0 +1,15 @@
+export const Row = styled('div', {
+    name: 'MuiRowBlock',
+    slot: 'root'
+  })(() => ({
+    display: 'flex',
+    flexDirection: 'row'
+  }));
+  
+export const Col = styled('div', {
+name: 'MuiColumnBlock',
+slot: 'root'
+})(() => ({
+display: 'flex',
+flexDirection: 'column'
+}));

src/components/forms/login.jsx

@@ -6,8 +6,6 @@ import RouterLink from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { useRouter } from 'next-nprogress-bar';
 import toast from 'react-hot-toast';
-import { lang, langen, langjp } from '../lang/kr';
-import getCookies from '../lang/langUtil'
 // formik
 import { useFormik, Form, FormikProvider } from 'formik';
 // cookies
@@ -30,13 +28,14 @@ import {
   FormControl,
   FormControlLabel,
   Select,
-  MenuItem,
-  InputLabel
+  MenuItem
 } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // icons
 import { MdOutlineVisibility, MdLock, MdOutlineVisibilityOff } from 'react-icons/md';
 import { IoMdMail } from 'react-icons/io';
+import { lang, langen, langjp } from '../lang/kr';
+import getCookies from '../lang/langUtil';
 
 
 
@@ -95,9 +94,14 @@ export default function LoginForm() {
   
   return (
     <>
+      <Stack mb={5}>
+        <Typography textAlign="center" variant="h4" component="h1" textTransform="uppercase" gutterBottom>
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).login}
+        </Typography>
+      </Stack>
       <FormControl fullWidth sx={{ mb: '10px' }}>
         <Typography variant="overline" color="text.primary" htmlFor="email" component={'label'}>
-              Select Language
+          {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)["Select Language"]}
         </Typography>
         <Select
           onChange={(e) => setLangState(e.target.value)}

src/components/forms/register.jsx

@@ -29,9 +29,11 @@ import { MdLocalPhone } from 'react-icons/md';
 import { FaTransgender } from 'react-icons/fa6';
 // hooks
 import { createCookies } from 'src/hooks/cookies';
-import { lang } from '../lang/kr';
+import { lang, langen, langjp } from 'src/components/lang/kr';
+import getCookies from 'src/components/lang/langUtil';
 
 export default function RegisterForm() {
+  const langIs = getCookies('lang');
   const router = useRouter();
   const searchParam = useSearchParams();
   const redirect = searchParam.get('redirect');
@@ -87,7 +89,8 @@ export default function RegisterForm() {
           <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
             <Stack gap={0.5} width={1}>
               <Typography variant="overline" color="text.primary" htmlFor="firstName" component={'label'}>
-                {lang['First Name']}
+                {({ kr: lang, en: langen, jp: langjp }[langIs] || lang)['First Name']}
+
               </Typography>
               <TextField
                 id="firstName"
@@ -108,7 +111,7 @@ export default function RegisterForm() {
           </Stack>
           <Stack gap={0.5} width={1}>
             <Typography variant="overline" color="text.primary" htmlFor="email" component={'label'}>
-              {lang.Email}
+            {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).email}
             </Typography>
             <TextField
               id="email"
@@ -129,7 +132,7 @@ export default function RegisterForm() {
           </Stack>
           <Stack gap={0.5} width={1}>
             <Typography variant="overline" color="text.primary" htmlFor="password" component={'label'}>
-              {lang.Password}
+              {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).Password}
             </Typography>
             <TextField
               id="password"
@@ -157,7 +160,7 @@ export default function RegisterForm() {
           </Stack>
 
           <LoadingButton fullWidth size="large" type="submit" variant="contained" loading={loading}>
-            {lang.Register}
+            {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).Register}
           </LoadingButton>
         </Stack>
 
@@ -166,7 +169,7 @@ export default function RegisterForm() {
             href={`/auth/login${router.query?.redirect ? '?redirect=' + router.query?.redirect : ''}`}
             component={RouterLink}
           >
-            {lang.login}
+            {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).login}
           </Link>
         </Typography>
         {/* <Typography variant="body2" align="center" color="text.secondary" mt={2}>

src/components/lang/kr.js

@@ -20,7 +20,9 @@ export const lang = {
   Products: '상품',
   'seller': '셀러',
   'buyer': '바이어',
-  'Register':'가입'
+  'Register': '가입',
+  'Select Language': '언어를 선택해주세요',
+  'Shop not found' : '상점이 준비되지 않았습니다'
 };
 
 
@@ -44,7 +46,9 @@ export const langjp = {
   'Products not found': '商品が見つかりませんでした',
   Products: '商品',
   seller: '販売者',
-  buyer: '購入者'
+  buyer: '購入者',
+  'Select Language': '言語を選択してください',
+  'Shop not found' : 'ストアが準備されていません'
 };
 
 export const langen = {
@@ -69,4 +73,6 @@ export const langen = {
   Products: 'Products',
   'seller': 'seller',
   'buyer': 'buyer',
+  'Select Language': 'Select Language',
+  'Shop not found' : 'Shop not found'
 };

src/components/lang/langUtil.js

@@ -1,4 +1,3 @@
-import { lang, langen, langjp } from '../lang/kr';
 
 export default function getCookies(name) {
     const cookies = document.cookie

src/components/logo.jsx

@@ -9,16 +9,19 @@ export const Logo = () => {
   return (
     <Box
       sx={{
+        display: 'flex',
+        alignItems:'center',
         cursor: 'pointer',
         width: 150,
         height: 'auto',
         '> img': {
-          width: '100%'
+          height:36,
+          width: 'auto'
         }
       }}
       onClick={() => push('/')}
     >
-      <img src="/PICSHOP_LOGO.png" alt="logo" />
+      <img src="/ui_1920.png" alt="logo"/>
     </Box>
   );
 };

src/components/select/userSelect/index.jsx

@@ -14,13 +14,16 @@ import { UserList } from 'src/components/lists';
 import BlurImageAvatar from 'src/components/avatar';
 // redux
 import { useSelector } from 'react-redux';
-import { lang } from 'src/components/lang/kr';
+
+import { lang, langen, langjp } from 'src/components/lang/kr';
+import getCookies from 'src/components/lang/langUtil';
 
 function getKeyByValue(object, value) {
   return Object.keys(object).find((key) => object[key] === value);
 }
 
 export default function UserSelect({ isAdmin }) {
+  const langIs = getCookies('lang');
   const { user, isAuthenticated } = useSelector(({ user }) => user);
   const router = useRouter();
   const pathname = usePathname();
@@ -57,7 +60,7 @@ export default function UserSelect({ isAdmin }) {
             component={Link}
             fontSize={14}
           >
-            {lang.login}
+            {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).login}
           </Typography>
           <Divider orientation="vertical" flexItem />
           <Typography
@@ -67,7 +70,7 @@ export default function UserSelect({ isAdmin }) {
             href={`/auth/register${isAuthPath || isHomePath ? '' : `?redirect=${pathname}`}`}
             fontSize={14}
           >
-            {lang.Register}
+            {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).Register}
           </Typography>
         </Stack>
       ) : (
@@ -103,7 +106,7 @@ export default function UserSelect({ isAdmin }) {
                 }
               }}
             >
-              Hi, {isAuthenticated && user.firstName + ' ' + user.lastName}{' '}
+              {isAuthenticated && user.firstName + ' ' + user.lastName}{' '}
               <KeyboardArrowDownRoundedIcon sx={{ fontSize: 18 }} />
             </Typography>
           )}

src/layout/_main/topbar/index.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import dynamic from 'next/dynamic';
 import NextLink from 'next/link';
 import { useSelector } from 'react-redux';
-import { lang } from 'src/components/lang/kr';
+import { lang, langen, langjp } from 'src/components/lang/kr';
+import getCookies from '../../../components/lang/langUtil'
 
 // mui
 import { Toolbar, Container, Stack, useTheme, Link, Divider, Skeleton } from '@mui/material';
@@ -22,6 +23,7 @@ const UserSelect = dynamic(() => import('src/components/select/userSelect'), {
 });
 
 export default function UserTopbar() {
+  const langIs = getCookies('lang');
   const theme = useTheme();
   const { user, isAuthenticated } = useSelector(({ user }) => user);
 
@@ -50,7 +52,7 @@ export default function UserTopbar() {
                   href={isAuthenticated ? '/create-shop' : '/auth/register?redirect=/create-shop'}
                   sx={{ color: 'text.primary', fontSize: 14 }}
                 >
-                  {lang.seller}
+                  {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).seller}
                 </Link>
               </>
             )
@@ -62,7 +64,7 @@ export default function UserTopbar() {
                 href={isAuthenticated ? '/create-shop' : '/auth/register?redirect=/create-shop'}
                 sx={{ color: 'text.primary', fontSize: 14 }}
                 >
-                {lang.seller}
+                  {({ kr: lang, en: langen, jp: langjp }[langIs] || lang).seller}
               </Link>
             </>
           )}