Skip to content

Commit d015863

Browse files
hyuke81hyuke81
authored
refactor: document.cookie로 쿠키 가져오는 코드 삭제
2 parents 33ed3e3 + c7ed1da commit d015863

File tree

5 files changed

+331
-71
lines changed

5 files changed

+331
-71
lines changed

‎src/components/BotAi/BotStep1.jsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/** @jsxImportSource @emotion/react */
2+
import { useState } from 'react';
3+
4+
import gptIcon from '../../assets/icons/gpt-black.png';
5+
import arrowIcon from '../../assets/icons/right.svg';
6+
import {
7+
pageStyle,
8+
textContainerStyle,
9+
titleStyle,
10+
descriptionStyle,
11+
containerStyle,
12+
gptContainerStyle,
13+
gptButtonStyle,
14+
gptIconStyle,
15+
gptTextStyle,
16+
inputContainerStyle,
17+
inputLabelStyle,
18+
inputStyle,
19+
buttonContainerStyle,
20+
prevTextStyle,
21+
nextButtonStyle,
22+
buttonTextStyle,
23+
arrowIconStyle
24+
} from './BotStep1.styles';
25+
26+
const BotStep1 = ({ onNext, onPrev }) => {
27+
const [selectedGPT, setSelectedGPT] = useState(null);
28+
const [apiKey, setApiKey] = useState('');
29+
30+
const GPTMODELS = [
31+
{ id: 1, name: 'GPT-4o' },
32+
{ id: 2, name: 'GPT-4o mini' },
33+
{ id: 3, name: 'GPT-4' },
34+
{ id: 4, name: 'GPT-4-turbo' },
35+
{ id: 5, name: 'GPT-3.5-turbo' },
36+
];
37+
38+
return (
39+
<div css={pageStyle}>
40+
<div css={textContainerStyle}>
41+
<h1 css={titleStyle}>봇 추가하기</h1>
42+
<p css={descriptionStyle}>
43+
클릭 몇 번이면 당신에게 필요한 봇이 완성돼요<br />
44+
아래의 단계에 따라 당신만의 봇을 만들어보세요!
45+
</p>
46+
</div>
47+
48+
<div css={containerStyle}>
49+
<div css={gptContainerStyle}>
50+
{GPTMODELS.map((model) => (
51+
<div
52+
key={model.id}
53+
css={gptButtonStyle(selectedGPT === model.id)}
54+
onClick={() => setSelectedGPT(model.id)}
55+
>
56+
<img src={gptIcon} alt={model.name} css={gptIconStyle} />
57+
<span css={gptTextStyle}>{model.name}</span>
58+
</div>
59+
))}
60+
</div>
61+
62+
{/* API Key 입력 필드 */}
63+
<div css={inputContainerStyle}>
64+
<p css={inputLabelStyle}>OpenAI API Key가 있으신가요?</p>
65+
<input
66+
type="text"
67+
placeholder="API Key 입력"
68+
value={apiKey}
69+
onChange={(e) => setApiKey(e.target.value)}
70+
css={inputStyle}
71+
/>
72+
</div>
73+
74+
{/* 버튼 컨테이너 */}
75+
<div css={buttonContainerStyle}>
76+
<span css={prevTextStyle} onClick={onPrev}>이전 페이지로</span>
77+
<button css={nextButtonStyle} onClick={onNext} disabled={!selectedGPT}>
78+
<span css={buttonTextStyle}>다음 단계로</span>
79+
<img src={arrowIcon} alt="Next" css={arrowIconStyle} />
80+
</button>
81+
</div>
82+
</div>
83+
</div>
84+
);
85+
};
86+
87+
export default BotStep1;

‎src/components/BotAi/BotStep1.styles.js‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
/** @jsxImportSource @emotion/react */
2+
import { css } from '@emotion/react';
3+
4+
export const pageStyle = css`
5+
background: #fbfbfb;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
margin-top: 50px;
10+
11+
@media (max-width: 768px) {
12+
margin-top: 30px;
13+
}
14+
`;
15+
16+
export const textContainerStyle = css`
17+
display: flex;
18+
flex-direction: column;
19+
align-items: flex-start;
20+
width: 86%;
21+
22+
@media (max-width: 768px) {
23+
width: 90%;
24+
}
25+
`;
26+
27+
export const titleStyle = css`
28+
color: #000;
29+
font-size: 36px;
30+
font-weight: 700;
31+
margin-bottom: 19px;
32+
33+
@media (max-width: 768px) {
34+
font-size: 28px;
35+
text-align: center;
36+
}
37+
`;
38+
39+
export const descriptionStyle = css`
40+
color: #252525;
41+
font-size: 16px;
42+
font-weight: 600;
43+
margin-bottom: 20px;
44+
line-height: 1.3;
45+
46+
@media (max-width: 768px) {
47+
font-size: 14px;
48+
text-align: center;
49+
}
50+
`;
51+
52+
export const containerStyle = css`
53+
width: 83%;
54+
border-radius: 10px;
55+
border: 1px solid #d6d6d6;
56+
background: #fff;
57+
padding: 20px;
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
margin-top: 20px;
62+
63+
@media (max-width: 768px) {
64+
width: 95%;
65+
padding: 15px;
66+
}
67+
`;
68+
69+
export const gptContainerStyle = css`
70+
width: 100%;
71+
background: #fff;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
gap: 20px;
76+
padding: 10px;
77+
margin-top: 10px;
78+
flex-wrap: wrap;
79+
80+
@media (max-width: 768px) {
81+
gap: 10px;
82+
}
83+
`;
84+
85+
export const gptButtonStyle = (isSelected) => css`
86+
width: ${isSelected ? '125px' : '100px'};
87+
height: ${isSelected ? '145px' : '100px'};
88+
border-radius: 10px;
89+
background: ${isSelected ? 'rgba(217, 217, 217, 0.40)' : '#fff'};
90+
display: flex;
91+
flex-direction: column;
92+
align-items: center;
93+
justify-content: center;
94+
cursor: pointer;
95+
transition: all 0.2s ease-in-out;
96+
padding: 10px;
97+
98+
@media (max-width: 768px) {
99+
width: ${isSelected ? '110px' : '90px'};
100+
height: ${isSelected ? '130px' : '90px'};
101+
}
102+
`;
103+
104+
export const gptIconStyle = css`
105+
width: 100px;
106+
height: 100px;
107+
108+
@media (max-width: 768px) {
109+
width: 80px;
110+
height: 80px;
111+
}
112+
`;
113+
114+
export const gptTextStyle = css`
115+
margin-top: 5px;
116+
font-size: 14px;
117+
font-weight: 600;
118+
color: #000;
119+
120+
@media (max-width: 768px) {
121+
font-size: 12px;
122+
}
123+
`;
124+
125+
export const inputContainerStyle = css`
126+
width: 60%;
127+
margin-top: 40px;
128+
display: flex;
129+
flex-direction: column;
130+
align-items: flex-start;
131+
132+
@media (max-width: 768px) {
133+
width: 80%;
134+
margin-top: 20px;
135+
}
136+
`;
137+
138+
export const inputLabelStyle = css`
139+
font-size: 14px;
140+
font-weight: 600;
141+
color: #333;
142+
margin-bottom: 5px;
143+
144+
@media (max-width: 768px) {
145+
font-size: 12px;
146+
}
147+
`;
148+
149+
export const inputStyle = css`
150+
width: 100%;
151+
height: 20px;
152+
padding: 10px;
153+
border: 1px solid #ccc;
154+
border-radius: 5px;
155+
font-size: 14px;
156+
157+
@media (max-width: 768px) {
158+
height: 35px;
159+
font-size: 12px;
160+
}
161+
`;
162+
163+
export const buttonContainerStyle = css`
164+
display: flex;
165+
justify-content: center;
166+
align-items: center;
167+
gap: 15px;
168+
width: 100%;
169+
margin-top: 20px;
170+
171+
@media (max-width: 768px) {
172+
flex-direction: column;
173+
gap: 10px;
174+
}
175+
`;
176+
177+
export const prevTextStyle = css`
178+
font-size: 14px;
179+
font-weight: 600;
180+
color: #666;
181+
cursor: pointer;
182+
183+
@media (max-width: 768px) {
184+
font-size: 12px;
185+
}
186+
`;
187+
188+
export const nextButtonStyle = css`
189+
width: 120px;
190+
height: 36px;
191+
border-radius: 30px;
192+
background: #F1502F;
193+
display: flex;
194+
align-items: center;
195+
justify-content: center;
196+
border: none;
197+
cursor: pointer;
198+
&:disabled {
199+
background: #ccc;
200+
cursor: not-allowed;
201+
}
202+
&:hover {
203+
background: #d9442a;
204+
}
205+
206+
@media (max-width: 768px) {
207+
width: 100px;
208+
height: 32px;
209+
}
210+
`;
211+
212+
export const buttonTextStyle = css`
213+
color: #FFF;
214+
font-size: 14px;
215+
font-weight: 600;
216+
217+
@media (max-width: 768px) {
218+
font-size: 12px;
219+
}
220+
`;
221+
222+
export const arrowIconStyle = css`
223+
width: 14px;
224+
height: 14px;
225+
margin-left: 5px;
226+
227+
@media (max-width: 768px) {
228+
width: 12px;
229+
height: 12px;
230+
}
231+
`;

‎src/components/Header/Header.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,15 @@ const Header = ({ onButtonClick = () => {} }) => {
7676

7777
const handleLogout = async () => {
7878
try {
79-
const cookies = document.cookie.split('; ').find(row => row.startsWith('refreshToken='));
8079
await axios.post(
8180
'https://www.branchify.site/api/user/logout',
82-
{},
81+
{},
8382
{ withCredentials: true }
8483
);
85-
84+
8685
localStorage.removeItem('access_token');
8786
dispatch(setIsLoggedIn(false));
88-
87+
8988
navigate('/');
9089
window.location.reload();
9190
} catch (error) {

0 commit comments

Comments
 (0)