Skip to content

Commit ca4a05e

Browse files
Leewonchan14Leewonchan14
committed
[feat] api 키 마이페이지에서 입력 받을수 있게 구현
1 parent d9212fb commit ca4a05e

File tree

8 files changed

+171
-86
lines changed

8 files changed

+171
-86
lines changed

‎src/App.js

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import Surveyresult from "./pages/Survey/SurveyResult.js";
2424
import BeforeGame from "./pages/gamePages/BeforeGame";
2525
import Gymnastics from "./pages/Gym/Gymnastics";
2626
import GymnasticsVideo from "./pages/Gym/GymnasticsVideo";
27-
import MyPage from "./pages/MyPage";
27+
import MyPage from "./pages/MyPages/MyPage";
2828
import CenterMap from "./pages/CenterPages/CenterMap";
2929
import PrevSurveyResult from "./pages/Survey/PrevSurveyResult";
3030
import SurveyError from "./pages/Survey/SurveyError";
@@ -34,11 +34,19 @@ import Login from "./pages/Login";
3434
import Signup from "./pages/Signup";
3535
import useAutoLogin from "./hooks/useAutoLogin";
3636
import Explain from "./pages/Keyword/Explain.js";
37-
import UserUpdate from "./pages/UserUpdate.js";
38-
import DiaryManagement from "./pages/DiaryManagement.js";
37+
import UserUpdate, {
38+
USER_UPDATE_PAGE_PATH,
39+
} from "./pages/MyPages/UserUpdate.js";
40+
import DiaryManagement, {
41+
DIARY_MANAGEMENT_PAGE_PATH,
42+
} from "./pages/MyPages/DiaryManagement.js";
3943
import HelpForAi from "./pages/ImageDiary/HelpForAi.js";
4044
import ShowAiResult from "./pages/ImageDiary/ShowAiResult.js";
4145
import Keyword from "./pages/Keyword/Keyword.js";
46+
import {
47+
API_KEY_INPUT_PAGE_PATH,
48+
APIKeyInput,
49+
} from "./pages/MyPages/APIKeyInput";
4250

4351
function App() {
4452
let { loading } = useAutoLogin();
@@ -83,12 +91,17 @@ function App() {
8391
<Route exact path={"/centermap"} element={<CenterMap />} />
8492
<Route exact path={"/explain"} element={<Explain />} />
8593
<Route exact path={"/keyword"} element={<Keyword />} />
86-
<Route exact path={"/userupdate"} element={<UserUpdate />} />
94+
<Route exact path={USER_UPDATE_PAGE_PATH} element={<UserUpdate />} />
8795
<Route
8896
exact
89-
path={"/diarymanagement"}
97+
path={DIARY_MANAGEMENT_PAGE_PATH}
9098
element={<DiaryManagement />}
9199
/>
100+
<Route
101+
exact
102+
path={API_KEY_INPUT_PAGE_PATH}
103+
element={<APIKeyInput />}
104+
/>
92105
<Route
93106
exact
94107
path={"/prevsurveyresult"}

‎src/component/MyPageList.js renamed to ‎src/component/MyPageItem.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const MyPageList = ({ src, text, onClick }) => {
1+
const MyPageItem = ({ src, text, onClick }) => {
22
return (
33
<div
44
onClick={onClick}
@@ -9,4 +9,4 @@ const MyPageList = ({ src, text, onClick }) => {
99
</div>
1010
);
1111
};
12-
export default MyPageList;
12+
export default MyPageItem;

‎src/pages/ImageDiary/HelpForAi.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import imgController from "../../api/img.controller";
55
import SimpleImageSlider from "react-simple-image-slider";
66
import Modal from "../../component/Modal";
77
import Loading from "../../component/Loading";
8+
import { useRecoilState, useRecoilValue } from "recoil";
9+
import { apiKeyStore } from "../../recoil/apiKeyStore";
810

911
const HelpForAi = () => {
1012
const location = useLocation();
@@ -13,6 +15,8 @@ const HelpForAi = () => {
1315
// AI가 생성한 이미지
1416
const [aiImages, setAiImages] = useState([]);
1517
const [isLoading, setIsLoading] = useState(false);
18+
const apiKeyState = useRecoilValue(apiKeyStore);
19+
1620
const getImageForAI = async () => {
1721
// keyword가 "자유롭게 그려주세요"이거나, prompt가 keyword를 포함하는 경우
1822
if (
@@ -22,7 +26,7 @@ const HelpForAi = () => {
2226
try {
2327
setIsLoading(true);
2428
const res = await imgController.generateImage({
25-
password: "password",
29+
password: apiKeyState.apiKey,
2630
prompt: prompt,
2731
n: 3,
2832
});

‎src/pages/MyPages/APIKeyInput.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { useRecoilState } from "recoil";
2+
import { apiKeyStore } from "../../recoil/apiKeyStore";
3+
4+
export const API_KEY_INPUT_PAGE_PATH = "/mypage/apikey";
5+
6+
export const APIKeyInput = () => {
7+
return (
8+
<div className={"flex flex-col justify-center items-center h-full"}>
9+
<div className={"flex flex-col gap-5"}>
10+
<h1 className={"text-3xl font-semibold"}>API KEY 입력하기</h1>
11+
<p className={"text-lg text-gray-500"}>
12+
API KEY를 입력하면, OpenAI 의 이미지 생성 API를 사용할 수 있습니다.
13+
</p>
14+
<APIKeyInputForm />
15+
</div>
16+
</div>
17+
);
18+
};
19+
20+
const APIKeyInputForm = () => {
21+
const [apiKeyState, setApiKeyState] = useRecoilState(apiKeyStore);
22+
23+
const handleInput = (e) => {
24+
setApiKeyState((preState) => {
25+
return {
26+
...preState,
27+
apiKey: e.target.value,
28+
};
29+
});
30+
};
31+
32+
return (
33+
<div className={"flex flex-col gap-2.5"}>
34+
<div className={"flex flex-col gap-1.5"}>
35+
<label htmlFor="apikey" className={"text-lg"}>
36+
API KEY
37+
</label>
38+
<input
39+
type="text"
40+
id="apikey"
41+
className={"border-2 rounded-lg p-1"}
42+
placeholder="API KEY를 입력해주세요."
43+
value={apiKeyState.apiKey}
44+
onChange={handleInput}
45+
/>
46+
</div>
47+
</div>
48+
);
49+
};

‎src/pages/DiaryManagement.js renamed to ‎src/pages/MyPages/DiaryManagement.js

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
11
import React, { useEffect, useState } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import { SET_PAGENAME } from "../redux/modules/PageName";
3+
import { SET_PAGENAME } from "../../redux/modules/PageName";
44
import { useNavigate } from "react-router-dom";
5-
import Button from "../component/Button";
6-
import diaryController from "../api/diary.controller";
5+
import Button from "../../component/Button";
6+
import diaryController from "../../api/diary.controller";
7+
8+
export const DIARY_MANAGEMENT_PAGE_PATH = "/diarymanagement";
9+
10+
const DiaryManagement = () => {
11+
const dispatch = useDispatch();
12+
const userInfo = useSelector((state) => state.UserInfo);
13+
const [diaries, setDiaries] = useState([]);
14+
15+
useEffect(() => {
16+
dispatch({ type: SET_PAGENAME, pageName: "일기 관리" });
17+
}, [dispatch]);
18+
19+
return (
20+
<div>
21+
<SearchDiary id={userInfo.userId} setDiaries={setDiaries} />
22+
<DiaryListCop diaryDates={diaries} />
23+
</div>
24+
);
25+
};
726

827
function DiaryListCop({ diaryDates }) {
928
const navigate = useNavigate();
@@ -138,21 +157,4 @@ function SearchDiary({ id, setDiaries }) {
138157
);
139158
}
140159

141-
const DiaryManagement = () => {
142-
const dispatch = useDispatch();
143-
const userInfo = useSelector((state) => state.UserInfo);
144-
const [diaries, setDiaries] = useState([]);
145-
146-
useEffect(() => {
147-
dispatch({ type: SET_PAGENAME, pageName: "일기 관리" });
148-
}, [dispatch]);
149-
150-
return (
151-
<div>
152-
<SearchDiary id={userInfo.userId} setDiaries={setDiaries} />
153-
<DiaryListCop diaryDates={diaries} />
154-
</div>
155-
);
156-
};
157-
158160
export default DiaryManagement;

‎src/pages/MyPage.js renamed to ‎src/pages/MyPages/MyPage.js

Lines changed: 61 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,53 @@
1-
import User from "../assets/user.png";
2-
import MyPageList from "../component/MyPageList";
3-
import Diary from "../assets/diary.png";
4-
import { useState } from "react";
1+
import User from "../../assets/user.png";
2+
import Left from "../../assets/left.png";
3+
import MyPageItem from "../../component/MyPageItem";
4+
import Diary from "../../assets/diary.png";
5+
import { useEffect, useState } from "react";
56
import { useDispatch, useSelector } from "react-redux";
6-
import { useEffect } from "react";
7-
import { SET_PAGENAME } from "../redux/modules/PageName";
7+
import { SET_PAGENAME } from "../../redux/modules/PageName";
88
import { useNavigate } from "react-router-dom";
9-
import { setFontSize } from "../redux/modules/fontSize";
9+
import { setFontSize } from "../../redux/modules/fontSize";
10+
import { USER_UPDATE_PAGE_PATH } from "./UserUpdate";
11+
import { DIARY_MANAGEMENT_PAGE_PATH } from "./DiaryManagement";
12+
import { API_KEY_INPUT_PAGE_PATH } from "./APIKeyInput";
1013

11-
const UserProfile = () => {
14+
const MyPage = () => {
15+
const dispatch = useDispatch();
1216
let navigate = useNavigate();
17+
useEffect(() => {
18+
dispatch({ type: SET_PAGENAME, pageName: "마이페이지" });
19+
}, []);
1320

14-
let userInfo = useSelector((state) => state.UserInfo);
15-
16-
const LogOutButton = () => {
17-
const logout = () => {
18-
localStorage.clear();
19-
navigate("/login");
20-
};
21+
return (
22+
<div className={"flex justify-start flex-col px-5 py-2.5 h-full"}>
23+
{/* 사진, 이름, 닉네임 */}
24+
<UserProfile />
2125

22-
return (
23-
<div className={"absolute right-2.5 top-2.5"}>
24-
<button
25-
onClick={logout}
26-
className={"font-bold border-2 rounded-lg p-1"}
27-
>
28-
로그아웃
29-
</button>
26+
{/* 마이페이지 리스트 */}
27+
<div className={"flex flex-col py-5 "}>
28+
<MyPageItem
29+
src={User}
30+
text="회원정보 수정"
31+
onClick={() => navigate(USER_UPDATE_PAGE_PATH)}
32+
/>
33+
<MyPageItem
34+
src={Left}
35+
text="API KEY 입력하기"
36+
onClick={() => navigate(API_KEY_INPUT_PAGE_PATH)}
37+
/>
38+
<MyPageItem
39+
src={Diary}
40+
text="일기 관리"
41+
onClick={() => navigate(DIARY_MANAGEMENT_PAGE_PATH)}
42+
/>
43+
<FontSizeToggleButton />
3044
</div>
31-
);
32-
};
45+
</div>
46+
);
47+
};
48+
49+
const UserProfile = () => {
50+
let userInfo = useSelector((state) => state.UserInfo);
3351

3452
return (
3553
<div
@@ -45,7 +63,24 @@ const UserProfile = () => {
4563
);
4664
};
4765

48-
const Toggle = () => {
66+
const LogOutButton = () => {
67+
let navigate = useNavigate();
68+
69+
const logout = () => {
70+
localStorage.clear();
71+
navigate("/login");
72+
};
73+
74+
return (
75+
<div className={"absolute right-2.5 top-2.5"}>
76+
<button onClick={logout} className={"font-bold border-2 rounded-lg p-1"}>
77+
로그아웃
78+
</button>
79+
</div>
80+
);
81+
};
82+
83+
const FontSizeToggleButton = () => {
4984
const dispatch = useDispatch();
5085
const currentFontSize = useSelector((state) => state.fontSize);
5186
const [isDrop, setIsDrop] = useState(false);
@@ -103,32 +138,4 @@ const Toggle = () => {
103138
);
104139
};
105140

106-
const MyPage = () => {
107-
const dispatch = useDispatch();
108-
let navigate = useNavigate();
109-
useEffect(() => {
110-
dispatch({ type: SET_PAGENAME, pageName: "마이페이지" });
111-
}, []);
112-
return (
113-
<div className={"flex justify-start flex-col px-5 py-2.5 h-full"}>
114-
{/* 사진, 이름, 닉네임 */}
115-
<UserProfile />
116-
117-
{/* 마이페이지 리스트 */}
118-
<div className={"flex flex-col py-5 "}>
119-
<MyPageList
120-
src={User}
121-
text="회원정보 수정"
122-
onClick={() => navigate("/userupdate")}
123-
/>
124-
<MyPageList
125-
src={Diary}
126-
text="일기 관리"
127-
onClick={() => navigate("/diarymanagement")}
128-
/>
129-
<Toggle />
130-
</div>
131-
</div>
132-
);
133-
};
134141
export default MyPage;

‎src/pages/UserUpdate.js renamed to ‎src/pages/MyPages/UserUpdate.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, { useEffect, useState } from "react";
2-
import UserController from "../api/users.controller";
2+
import UserController from "../../api/users.controller";
33
import { useForm } from "react-hook-form";
4-
import Button from "../component/Button";
5-
import Modal from "../component/Modal";
4+
import Button from "../../component/Button";
5+
import Modal from "../../component/Modal";
66
import { useNavigate } from "react-router-dom";
77
import { useDispatch, useSelector } from "react-redux";
8-
import { SET_PAGENAME } from "../redux/modules/PageName";
8+
import { SET_PAGENAME } from "../../redux/modules/PageName";
99
import axios from "axios";
1010

11+
export const USER_UPDATE_PAGE_PATH = "/userupdate";
12+
1113
const UserUpdate = () => {
1214
const dispatch = useDispatch();
1315
const userInfo = useSelector((state) => state.UserInfo);

‎src/recoil/apiKeyStore.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { atom } from "recoil";
2+
3+
export const apiKeyStore = atom({
4+
key: "apiKeyState",
5+
default: {
6+
apiKey: "",
7+
},
8+
});

0 commit comments

Comments
 (0)