Feat/add type

.env.dev

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL=http://localhost:8080

.gitignore

@@ -10,7 +10,7 @@
 /coverage
 
 # next.js
-# /.next/
+/.next/
 /out/
 
 # production
@@ -37,4 +37,4 @@ yarn-error.log*
 next-env.d.ts
 
 /.next/
-.next
+.next

README.md

@@ -5,45 +5,9 @@ yarn install
 yarn dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-22/11/9
-
-### 버그
-
-- [x] 비딩 고치기!! (내경매, 참여경매 안되게)
-- [ ] 이미지 파일 첨부
-  - [x] 경매
-  - [ ] 회원가입
-- [x] 로그인 실패시 얼럿 나오면서 기존 화면 위로 밀리는 버그 수정
-  - [x] 로그인시 신규 모달 적용
-- [x] 모바일 헤더 수정 (검색 버튼 대체, 로그인시 노출 하는 버튼 정하기)
-- [x] 경매 만들기 뒤로가기 했을 경우 금속옵션과 이미지 validation 걸리는 이슈 수정
-- [x] 경매 만들기 pc 레이아웃 수정
-- [x] 비밀번호 변경하기 페이지 텍스트 수정
-- [x] 이메탈 로고 정렬, 마우스 호버시 cursor
-- [x] 비로그인 상태로 protedced router url로 바로 접근했을경우 리다이렉트
-
-### 요구사항
-
-- [x] 헤더 메뉴들을 아이콘으로 전환
-- [ ] 시세 최근 값을 메인 페이지에 노출, 클릭 후 시계열 데이터 볼 수 있도록 전환
-- [ ] 금속 옵션 유저가 생성할 수 있도록 처리
-- [x] 경매 호스트 이름 비노출 처리
-- [ ] 알람 클릭시 드롭다운으로 해당 경매건 카드 노출
-  - [x] collapse ui
-  - [ ] 알림에서 card api 가져오기 (백엔드 상의 필요)
-- [x] 경매 박스 디자인 수정
-- [x] footer
-- [ ] 필터링 기능
-
-### 개선
-
-- [x] 모달, 다이얼로그 컴포넌트
-- [x] 비로그인 상태로 글쓰기 선택시, 로그인 페이지로 이동 여부 노출
-- [ ] 비딩 ui/ux (시간되면)
-
-### 배포
-
-- [ ] ec2에 yarn, node, pm2 설치
-- [ ] nginx reverse proxy 사용하기
+- axios 안됨
+- 새로고침 안되게?
+- 기본 홈 화면 로딩 안됨
+- documnet 타이틀 이동
+- 이슈 확인
+- 

components/add/AddTemplate.tsx

@@ -12,8 +12,12 @@ interface Props {
 }
 
 function AddTemplate({ children, title, buttonText, handleSubmit, onSubmit }: Props) {
+  const checkKeyDown = (e) => {
+      if (e.code === 'Enter') e.preventDefault();
+  };
+
   return (
-    <StyledForm onSubmit={handleSubmit(onSubmit)}>
+    <StyledForm onSubmit={handleSubmit(onSubmit)} onKeyDown={(e) => checkKeyDown(e)}>
       <Title>{title}</Title>
       <Content>{children}</Content>
       <Button styleType="primary">{buttonText}</Button>

components/auth/SignUpForm.tsx

@@ -29,36 +29,44 @@ type User = {
   businessName: string;
 };
 
-function SignUpForm({ mode }: Props) {
+function SignUpForm() {
   const router = useRouter();
   const [user, setUser] = useAtom(userAtom);
   const isModifyMode = !!user;
 
-  const getUser = async () => {
-    const user = await checkIsLoggedIn();
-    setUser(user);
-  };
-
-  useEffect(() => {
-    getUser();
-    reset();
-  }, []);
-
   const {
     register: registerHookForm,
     handleSubmit,
     getValues,
-    reset,
     control,
+    reset,
     formState: { errors },
-  } = useForm();
+  } = useForm({});
+
+  useEffect(() => {
+    reset({
+      email: user?.personal?.email,
+      name: user?.personal?.name,
+      businessType: user?.business?.businessType,
+      businessName: user?.business?.businessName,
+      representative: user?.business?.representative,
+      registrationNumber: user?.business?.registrationNumber,
+      bank: user?.account?.bank,
+      accountNumber: user?.account?.accountNumber,
+      accountHolder: user?.account?.accountHolder,
+    });
+  }, [user]);
+
+  const getUser = async () => {
+    const user = await checkIsLoggedIn();
+    setUser(user);
+  };
 
   const { passwordPlaceholder, buttonText, question, actionLink, actionText } =
     AUTH_DESCRIPTIONS[isModifyMode ? 'modify' : 'register'];
 
   const { mutate: mutateRegisterImage } = useMutation(registerImage, {
     onSuccess: async ({ imageUrl }: { imageUrl: string }) => {
-      console.log('s3 사업자등록증 업로드 완료: ', imageUrl);
     },
     onError: (e: any) => {
       Swal.fire('회원가입 실패', e.response.data.message, 'error');
@@ -67,22 +75,22 @@ function SignUpForm({ mode }: Props) {
 
   const { mutate: mutateRegister } = useRegister({
     onSuccess: () => {
-      Swal.fire('회원가입 성공!', '회원 가입을 환영합니다!', 'success');
+      Swal.fire('회원가입 성공', '회원 가입을 환영합니다.', 'success');
       router.replace('/');
     },
     onError: (e: any) => {
-      Swal.fire('가입 실패!', e.response.data.message, 'error');
+      Swal.fire('가입 실패', e.response.data.message, 'error');
     },
   });
 
   const { mutate: mutateModifyUser } = useModifyUser({
     onSuccess: () => {
-      Swal.fire('수정 성공!', '회원정보가 수정되었습니다.', 'success');
+      Swal.fire('수정 성공', '회원정보가 수정되었습니다.', 'success');
       getUser();
       router.replace('/');
     },
     onError: (e: any) => {
-      Swal.fire('수정 실패!', e.response.data.message, 'error');
+      Swal.fire('수정 실패', e.response.data.message, 'error');
     },
   });
 
@@ -124,24 +132,20 @@ function SignUpForm({ mode }: Props) {
       mutateRegisterImage(licenceImageFile, {
         onSuccess: ({ imageUrl }) => {
           mutateRegister({
-            business: { ...business, licenceImageUrl: imageUrl, test: 'test' },
+            business: { ...business, licenceImageUrl: imageUrl },
             personal,
             account,
-            isEnabled: 'Y',
           });
         },
       });
     } else {
-      const personalUpdateCommand = {
-        name,
-      };
       const params = {
         data: {
-          business,
-          personalUpdateCommand,
-          accountUpdateCommand: account,
-          isEnabled: 'Y',
-          inDeleted: 'Y',
+          ...business,
+          name,
+          ...account,
+          isEnabled: user.isEnabled,
+          isDeleted: user.isDeleted,
         },
         id: user.id,
       };
@@ -157,15 +161,14 @@ function SignUpForm({ mode }: Props) {
     <StyledForm onSubmit={handleSubmit(onSubmit)}>
       <Wrapper>
         <h2>계정 정보</h2>
-
         <LabelInput
           label="이메일"
           type="email"
           defaultValue={isModifyMode ? user?.personal.email : ''}
           readOnly={!!isModifyMode}
           errorMessage={errors?.email?.message?.toString()}
           {...registerHookForm('email', {
-            required: '필수',
+            required: '필수 입력',
             pattern: { value: email, message: '이메일 형식이 아닙니다.' },
           })}
         />
@@ -204,15 +207,15 @@ function SignUpForm({ mode }: Props) {
         <h2>회사 정보</h2>
         <Controller
           name="businessType"
-          defaultValue={'PERSONAL'}
+          defaultValue={isModifyMode ? user?.business?.businessType : ''}
           control={control}
           rules={{ required: '필수 입력' }}
           render={({ field }) => (
             <LabelSelect
               label="계정유형"
               options={[
                 { label: '개인사업자', value: 'PERSONAL' },
-                { label: '법인사업자', value: 'CORPORATION' },
+                { label: '법인사업자', value: 'CORPORATE' },
               ]}
               {...field}
               errorMessage={errors.businessType?.message?.toString()}

components/base/GlobalFooter.tsx

@@ -17,23 +17,12 @@ function GlobalFooter() {
         </FirstRow>
         <SecondRowColumn1></SecondRowColumn1>
         <ConpanyInfo>
-          <p>
-            TrillionsLab Co., Ltd. | CEO: Thomas Kang | 개인정보책임관리자: 홍길동 | 사업자번호:
-            352-87-01712
-          </p>
-          <p>
-            통신판매업번호: 제 2017-서울강남-00000호 | 주소: 3F, Worldcup Buk-ro 6 Gil 82, Mapo-gu,
-            Seoul, South Korea
-          </p>
-          <p>
-            <>
-              고객센터:
-              <a href={`mailto:www.naver.com`}>CEO@trillionslab.com </a> | 마케팅:
-              <a href={`mailto:www.naver.com`}>CEO@trillionslab.com</a>
-            </>
-          </p>
-          <p>대표번호: 010 - xxxx - xxx | 운영시간: 오전 9시 ~ 오후 6시</p>
-          <p>COPYRIGHT © 2022 TrillionsLab Co., Ltd. ALL RIGHTS RESERVED.</p>
+          <p>TrillionsLab Co., Ltd. | CEO: Thomas Kang | 개인정보책임관리자: 강현웅</p>
+          <p>통신판매업번호: 2020-서울강남-02462</p>
+          <p>주소: 3F, Worldcup Buk-ro 6 Gil 82, Mapo-gu, Seoul, South Korea</p>
+          <p>대표번호: 010 - 3149 - 9242</p>
+          <p>운영시간: 오전 9시 ~ 오후 6시</p>
+          <p>COPYRIGHT © 2023 TrillionsLab Co., Ltd. ALL RIGHTS RESERVED.</p>
         </ConpanyInfo>
       </Wrapper>
     </Container>

components/base/MobileHeader.tsx

@@ -1,23 +1,62 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import styled from 'styled-components';
 import { colors } from '@/lib/colors';
 import { media } from '@/lib/media';
 import { useRouter } from 'next/router';
+import { userAtom } from '@/store';
+import { useAtom } from 'jotai';
+import {checkIsLoggedIn} from "@/lib/protectedRotue";
+import {removeStorageItem} from "@/lib/local-storage";
 
 // Todo: svg 컴포넌트 로고로 바꿀 경우 React.ReactNode 로 타입 바꾸기
 interface Props {
   title?: string;
   headerLeft?: React.ReactNode;
-  headerRight?: React.ReactNode;
+  loginHeaderRight?: React.ReactNode;
+  loginOutHeaderRight?: React.ReactNode;
+  registerHeaderRight?: React.ReactNode;
 }
 
-function MobileHeader({ title = 'EMETAL', headerLeft, headerRight }: Props) {
+function MobileHeader({ title = 'EMETAL', headerLeft, loginHeaderRight, loginOutHeaderRight, registerHeaderRight }: Props) {
   const router = useRouter();
+  const [user, setUser] = useAtom(userAtom);
+  const getUser = async () => {
+    const user = await checkIsLoggedIn();
+    setUser(user);
+  };
+
+  useEffect(() => {
+    if (!user) {
+      getUser();
+    }
+  }, []);
+
+  const removeToken = () => {
+    removeStorageItem('accessToken');
+    setUser(null);
+    router.replace('/');
+  };
+
+  const login = () => {
+    return (
+        <SecondHeaderSide position="right">{loginHeaderRight}</SecondHeaderSide>
+    );
+  };
+
+  const logout = () => {
+    return (
+        <span>
+          <FirstHeaderSide position="right" onClick={removeToken}>{loginOutHeaderRight}</FirstHeaderSide>
+          <SecondHeaderSide position="right">{registerHeaderRight}</SecondHeaderSide>
+        </span>
+    );
+  };
+
   return (
     <Block>
       {headerLeft && <HeaderSide position="left">{headerLeft}</HeaderSide>}
       <Title>{title}</Title>
-      {headerRight && <HeaderSide position="right">{headerRight}</HeaderSide>}
+      {!user ? login() : logout()}
     </Block>
   );
 }
@@ -32,6 +71,26 @@ const HeaderSide = styled.div<{ position: 'left' | 'right' }>`
   height: 100%;
 `;
 
+const FirstHeaderSide = styled.div<{ position: 'left' | 'right' }>`
+  position: absolute;
+  ${(props) => props.position} : 16px;
+  display: flex;
+  align-items: center;
+  right: 48px;
+  top: 0;
+  height: 100%;
+`;
+
+const SecondHeaderSide = styled.div<{ position: 'left' | 'right' }>`
+  position: absolute;
+  ${(props) => props.position} : 16px;
+  display: flex;
+  align-items: center;
+  right: 16px;
+  top: 0;
+  height: 100%;
+`;
+
 const Block = styled.header`
   position: relative;
   height: 56px;

components/base/TopHeader.tsx

@@ -22,6 +22,11 @@ function TopHeader() {
     if (!user) {
       getUser();
     }
+
+    // 로그인 안되었을시 홈 화면 보여주지 않고 홈 화면 보여주고 싶을 경우
+    // if (!user) {
+    //   router.push('/login');
+    // }
   }, []);
 
   const removeToken = () => {

components/charts/ChartCarousel.tsx

@@ -27,7 +27,7 @@ function ChartCarousel() {
   };
 
   const onClickCard = (id) => {
-    router.push('/chart?id=' + id);
+    // router.push('/chart?id=' + id);
   };
 
   return (