Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 버튼 경로 지정 #51

Merged
merged 2 commits into from
Aug 6, 2024
Merged

feat: 버튼 경로 지정 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67c4054
feat: shareUrl 경로 지정
juiuj Aug 6, 2024
08fe58e
feat: 버튼 경로 지정
juiuj Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import CodeInput from 'pages/CodeInput';
import Loading from 'pages/Loading';
import ReportFrame from 'components/comonents/frame/ReportFrame';
import StartInfo from 'pages/StartInfo';
import ShareUrlPtn from 'components/login/ShareUrlPtn';

function App() {
return (
Expand All @@ -42,7 +43,6 @@ function App() {
{/* 기본 화면프레임 */}
<Route path="/" element={<IntroFrame />}>
<Route path="/" element={<Start />} /> {/* 시작 화면 */}

<Route path="/feselftest" element={<FeSelfTest />} />
<Route path="/selftest" element={<SelfTest />} />
<Route path="/selftest2" element={<SelfTest2 />} />
Expand All @@ -55,11 +55,10 @@ function App() {
<Route path="/selftest9" element={<SelfTest9 />} />
<Route path="/selftest10" element={<SelfTest10 />} />
<Route path="/userInfo" element={<UserInfo />} />

<Route path="/shareptn" element={<ShareUrlPtn />} />
<Route path="/code-input" element={<CodeInput />} />
<Route path="/loading" element={<Loading />} />
<Route path="/startInfo" element={<StartInfo/>} />

<Route path="/startInfo" element={<StartInfo />} />
</Route>

<Route path="/" element={<Frame />}>
Expand All @@ -77,10 +76,9 @@ function App() {
<Route path="/" element={<TestFrame />}>
<Route path="/symptomTest" element={<SymptomTest />} />
</Route>
<Route path="/" element={<ReportFrame/>}>
<Route path="/" element={<ReportFrame />}>
<Route path="/report/:id" element={<ReportDetail />} />
</Route>

</Routes>
</BrowserRouter>
</CookiesProvider>
Expand Down
10 changes: 5 additions & 5 deletions src/components/login/LoginButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import login_kakao from 'assets/images/login_kakao.svg';
import Cookies from 'js-cookie';

const CLIENT_ID = process.env.REACT_APP_REST_API_KEY;
const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;
Expand All @@ -12,10 +11,10 @@ const LoginButton = () => {

// 인가 요청 URL 생성
const authUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&state=${state}`;
console.log("CLIENT_ID = ", CLIENT_ID);
console.log("REDIRECT_URI = ", REDIRECT_URI);
console.log("authUrl = ", authUrl);
console.log("state = ", state);
console.log('CLIENT_ID = ', CLIENT_ID);
console.log('REDIRECT_URI = ', REDIRECT_URI);
console.log('authUrl = ', authUrl);
console.log('state = ', state);
// 인가 URL로 리다이렉트
window.location.href = authUrl;
};
Expand All @@ -31,6 +30,7 @@ const LoginButton = () => {
marginBottom: '25px',
border: 'none',
borderRadius: '13px',
cursor: 'pointer',
}}
>
<img
Expand Down
15 changes: 10 additions & 5 deletions src/components/login/ShareUrlPtn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
ConnectHeader,
Wrapper,
UrlWrapper,
ConnectContainer,
// Container,
} from 'styles/login/SharePtn-styled';
import ShareLink from 'hooks/login/ShareLink';
import img_urlCopyBtn from 'assets/images/url_copy_btn.svg';
Expand Down Expand Up @@ -65,6 +67,7 @@ function ShareUrlPtn() {
<br />
<span>짝꿍에게 공유</span>해보아요
</Title>

<ConnectWrapper>
<ConnectHeader>
<ConnectTitle>짝꿍에게 전달하기</ConnectTitle>
Expand All @@ -75,10 +78,11 @@ function ShareUrlPtn() {
</ConnectHeader>
<UrlWrapper>
홈페이지 주소: {homeUrl}
<br />인증 코드: {id}
<br />
인증 코드: {id}
</UrlWrapper>
</ConnectWrapper>
<ConnectWrapper>
<ConnectContainer>
<ConnectHeader>
<ConnectTitle>인증코드 입력하기</ConnectTitle>
<ConnectDesc>
Expand All @@ -90,15 +94,16 @@ function ShareUrlPtn() {
src={img_codeInsetBtn}
onClick={() => navigate('/code-input')}
></ConnectBtn>
</ConnectWrapper>
</ConnectContainer>
<Link to="/home">
<CloseBtn>닫고 홈화면으로 돌아가기</CloseBtn>
</Link>
<ShareLink

{/* <ShareLink
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="카카오톡에서 붙여넣기하여 짝꿍과 함께하세요!"
/>
/> */}
</Wrapper>
</>
);
Expand Down
13 changes: 7 additions & 6 deletions src/pages/StartInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@
import ServiceDesc from 'components/login/ServiceDesc';
import { LoginDesc } from 'styles/login/ServiceDesc-styled';
import React from 'react';
import { Link } from 'react-router-dom';
import {
CloseBtn,
ConnectBtn,
} from 'styles/login/SharePtn-styled';
import { Link, useNavigate } from 'react-router-dom';
import { CloseBtn, ConnectBtn } from 'styles/login/SharePtn-styled';

const StartInfo = () => {
// const navigate = useNavigate();

return (
<>
<ServiceDesc />
<ConnectBtn>짝꿍과 연동하기</ConnectBtn>
<Link to="/shareptn">
<ConnectBtn>짝꿍과 연동하기</ConnectBtn>
</Link>
<Link to="/home">
<CloseBtn>닫고 홈화면으로 돌아가기</CloseBtn>
</Link>
Expand Down
65 changes: 47 additions & 18 deletions src/styles/login/SharePtn-styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,24 +47,27 @@ export const CloseBtn = styled.div`
background: #f5f5f5;
color: #5643d1;
border: 1px solid #5643d1;
margin-left: 52px;
/* margin-left: 52px; */
margin-top: 25px;
`;

export const ConnectWrapper = styled.div`
width: 496px;
height: 126px;
min-height: 200px; /* Increase the minimum height */
border-radius: 30px;
background: #ebecee;
padding: 20px 30px;
margin-left: 52px;
/* margin-left: 52px; */
margin-bottom: 39px;
display: flex;
justify-content: space-between;
flex-direction: column;
/* justify-content: space-between;
align-items: center; */
`;

export const ConnectHeader = styled.div`
display: block;
margin-bottom: auto; /* Push UrlWrapper to the bottom */
`;

export const ConnectTitle = styled.div`
Expand All @@ -79,10 +82,6 @@ export const ConnectDesc = styled.div`
margin-bottom: 15px;
`;

// export const ConnectBtn = styled.img`
// cursor: pointer;
// `;

export const CodeTitle = styled.div`
font-size: 40px;
font-weight: 600;
Expand All @@ -100,7 +99,7 @@ export const CodeDesc = styled.div`

export const CodeInputBox = styled.input`
width: 494px;
margin-left: 52px;
/* margin-left: 52px; */
text-align: left;
margin-top: 48px;
border: none;
Expand All @@ -119,6 +118,10 @@ export const CodeInputBox = styled.input`
export const Wrapper = styled.div`
width: fit-content;
margin: 0 auto;

align-items: center;
display: flex;
flex-direction: column;
`;

export const NextBtn = styled.div`
Expand All @@ -131,12 +134,12 @@ export const NextBtn = styled.div`
font-weight: 600;
padding: 23px 0px;
width: 496px;
margin-left: 52px;
/* margin-left: 52px; */
position: absolute;
bottom: 66px;
`;

export const ConnectBtn = styled.div`
export const ConnectBtn = styled.img`
cursor: pointer;
border-radius: 13px;
background: #9180ff;
Expand All @@ -145,9 +148,10 @@ export const ConnectBtn = styled.div`
font-size: 25px;
font-weight: 600;
padding: 23px 0px;
width: 496px;
margin-left: 52px;

width: 83px;
height: 86px;
display: flex;
/* margin-left: 52px; */
bottom: 66px;
`;

Expand All @@ -157,14 +161,39 @@ export const IntroWrapper = styled.div`

export const UrlWrapper = styled.div`
color: #5b5b5b;
/* display: flex; */
justify-content: center;
text-align: center;
font-size: 17px;
font-weight: 500;
border-radius: 8px;
background: #fff;
width: 426px;
height: 124px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 21px;
height: fit-content;
padding: 20px;

margin-top: auto; /* Push UrlWrapper to the bottom */
`;

export const ConnectContainer = styled.div`
display: flex;
flex-direction: row;

gap: 20px; /* Optional: Adjust the spacing between items */

width: 496px;

border-radius: 30px;
background: #ebecee;
padding: 20px 30px;
/* margin-left: 52px; */
margin-bottom: 39px;
display: flex;
/* flex-direction: column; */
`;

// export const Container = styled.div`
// align-items: center;
// display: flex;
// flex-direction: column;
// `;
Loading