[Team#05] [FE] 3주차 PR (#47)

* #chore: 불필요한 주석 제거

* #26 feat: Context와 useAuth 커스텀 훅을 이용한 로그인 라우팅 기능 구현

* #26 chore: handleLogin 함수 간단히 수정

* #26 chore: axios 설치 및 인스턴스 생성

* #26 feat: useRefreshToken 커스텀 훅 추가

* #26 feat: useAxiosPrivate 훅 추가 및 로그아웃 기능 추가

* #26 feat: signup 기능 추가

* #26 chore: 간단한 코드 수정

* #26 chore: 안 쓰는 import 삭제

* #26 feat: TextInput 컴포넌트에 type prop 추가

- 비밀번호를 입력받는 경우에는 type="password"로 설정해야 하므로
TextInput 컴포넌트에 type prop을 추가

* #26 feat: 로그인 시 userName을 응답으로 받아오도록 추가하고 관련 코드 수정

* #26 fix: CORS 문제 해결중

* #26 chore: axios baseURL 원래대로 수정

* #26 feat: Context와 useAuth 커스텀 훅을 이용한 로그인 라우팅 기능 구현

* #26 chore: handleLogin 함수 간단히 수정

* #26 chore: axios 설치 및 인스턴스 생성

* #26 feat: useRefreshToken 커스텀 훅 추가

* #26 feat: useAxiosPrivate 훅 추가 및 로그아웃 기능 추가

* #26 feat: signup 기능 추가

* #26 chore: 간단한 코드 수정

* #26 chore: 안 쓰는 import 삭제

* #26 feat: TextInput 컴포넌트에 type prop 추가

- 비밀번호를 입력받는 경우에는 type="password"로 설정해야 하므로
TextInput 컴포넌트에 type prop을 추가

* #26 feat: 로그인 시 userName을 응답으로 받아오도록 추가하고 관련 코드 수정

* #26 fix: CORS 문제 해결중

* #26 chore: axios baseURL 원래대로 수정

* #26 fix: vite cofig 파일에 proxy 설정 추가해서 CORS 오류 해결

* #26 fix: api 명세서에 맞게 바뀐 부분 수정

* #26 feat: 바뀐 로그아웃 api 명세에 맞게 요청과 AuthContext 수정

- 더 이상 AuthContext에 유저 비밀번호를 저장하지 않음
- 더 이상 로그아웃 요청에 유저 이메일과 비밀번호를 보내지 않음

* #26 feat: 로그인 페이지 이메일, 비밀번호 입력 인풋에 대한 유효성 검사 추가

- 로그인 버튼 활성화, 비활성화 기능 추가 필요

* #26 feat: GitHub OAuth 로그인 기능 구현 및 Callback 페이지 생성

* #chore: MSW 서비스워커 설정 수정

* #49 feat: Options 페이지 레이아웃 작업 시작 및 tab 레이아웃 구성

* #49 chore 구조수정

* #53 refactor: CommentElements 컴포넌트에서 리뷰어 피드백 반영

* #26 feat: 버튼 컴포넌트에서 ghost 버튼일 때 selected 스타일 추가

- ghost 버튼일 때 selected 스타일 추가
- selected를 props를 받으면 글자랑 아이콘색, 폰트 굵기 변경

* #50 refactor: 기존 TextInput 컴포넌트 props, state 수정

* #50 feat: 아이디, 비밀번호 검증 기능 추가

- Login 페이지 컴포넌트에서 input 값을 상태로 관리하도록 변경
- 적합한 형식의 아이디와 비밀번호가 입력되어야 버튼이 활성화되는 기능 추가

* chore: labels, milestones 이름, url 수정

* feat: issue 목록 레이아웃

* #chore: 배포시 필요한 환경변수 파일을 위해서 .gitignore 수정

* feat: options 내부 labels 컴포넌트 작업 및 자잘한 수정

* feat: 라벨 페이지에서 이슈목록을 조회하는 get 요청에 대한 mockData 설정 추가

* refactor: useAxiosPrivate 조건 수정 및 Options 페이지에서 활용하도록 변경

* chore: components 디렉토리 구조 변경

* chore: .env 파일 gitignore에 다시 추가

* chore: 이름수정

* refactor: ColorCodeInput 내부 구조 수정 defaultValue -> value로 변경

* hotfix: 버튼 컴포넌트 누락된 selected 스타일 추가

---------

Co-authored-by: Cat Hanbit <[email protected]>

frontend/.gitignore

@@ -22,5 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-.env

frontend/package.json

@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/uuid": "^9.0.2",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",
-    "styled-components": "^6.0.5"
+    "styled-components": "^6.0.5",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.tsx

@@ -7,7 +7,7 @@ import { Routes, Route } from 'react-router-dom';
 import Components from './pages/Components';
 import Login from './pages/Login';
 import Register from './pages/Register';
-import Main from './pages/Main';
+import Callback from './pages/GitHubCallback';
 import AddIssue from './pages/AddIssue';
 
 import LogoDarkLarge from './asset/logo/logo_dark_large.svg';
@@ -16,6 +16,9 @@ import LogoLightLarge from './asset/logo/logo_light_large.svg';
 import LogoLightMedium from './asset/logo/logo_light_medium.svg';
 import { AppContext } from './main';
 import RequireAuth from './routes/RequireAuth';
+import Options from './pages/Options';
+import Main from './pages/Main';
+import Issues from './pages/Issues';
 
 function App() {
   const [isLight, setIsLight] = useState<boolean>(true);
@@ -39,10 +42,12 @@ function App() {
       <GlobalStyle />
       <Routes>
         {/* public routes */}
+        <Route path="/Options" element={<Options />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="/component" element={<Components />} />
-
+        <Route path="/callback" element={<Callback />} />
+        <Route path="/issues" element={<Issues />} />
         {/* protected routes */}
         <Route element={<RequireAuth />}>
           <Route path="/" element={<Main />} />

frontend/src/components/Layout.tsx

@@ -0,0 +1,11 @@
+import { styled } from 'styled-components';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Container>{children}</Container>;
+}
+
+const Container = styled.div`
+  padding: 0 80px;
+  max-width: 1280px;
+  margin: auto;
+`;

frontend/src/components/common/ColorCodeInput.tsx

@@ -4,41 +4,42 @@ import { useState } from 'react';
 
 export default function ColorCodeInput({ label }: { label: string }) {
   const [colorCode, setColorCode] = useState<string>(getRandomColor());
-  const [key, setKey] = useState<number>(Date.now());
+  const [inputValue, setInputValue] = useState<string>(colorCode);
+  const [isInvalid, setIsInvalid] = useState<boolean>(false);
 
   const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const form = e.target as typeof e.target & {
-      'color-code': { value: string };
-    };
-    const colorCode = form['color-code'].value;
-    if (isValidColorCode(colorCode)) {
-      setColorCode(colorCode);
+    if (isValidColorCode(inputValue)) {
+      setColorCode(inputValue);
+    } else {
+      setIsInvalid(true);
     }
-  }
+  };
 
-  const refresh = () => {
-    setKey(Date.now());
-  }
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    if (isInvalid && isValidColorCode(e.target.value)) {
+      setIsInvalid(false);
+    }
+  };
 
   const refreshBtnHandler = () => {
-    setColorCode(getRandomColor());
-    refresh();
+    const newRandomColor = getRandomColor();
+    setColorCode(newRandomColor);
+    setInputValue(newRandomColor);
   };
 
   return (
     <Container onSubmit={submitHandler}>
       <Label htmlFor="color-code">{label}</Label>
       <TypingStates>
         <input
-          key={key}
           type="text"
           id="color-code"
           name="color-code"
-          defaultValue={colorCode}
+          value={inputValue}
+          onChange={handleInputChange}
           pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
-          onInvalid={refresh}
-          onBlur={refresh}
           required
         />
       </TypingStates>

frontend/src/components/common/CommentElements.tsx

@@ -36,9 +36,11 @@ export default function Comment(props: CommentProps) {
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (isEdit) {
-      setTextValue(e.target.value);
+    if (!isEdit) {
+      return;
     }
+    setTextValue(e.target.value);
+
     return;
   };
 
@@ -72,12 +74,13 @@ export default function Comment(props: CommentProps) {
         </InfoRight>
       </Header>
       <Body>
-        {!isEdit && <TextBox>{textValue}</TextBox>}
-        {isEdit && (
+        {isEdit ? (
           <TextArea
             $isEdit={isEdit}
             value={textValue}
             onChange={handleChange}></TextArea>
+        ) : (
+          <TextBox>{textValue}</TextBox>
         )}
       </Body>
       {isEdit && (