Skip to content

Commit

Permalink
Design: 플러그인 페이지 모바일 기반 뷰
Browse files Browse the repository at this point in the history
  • Loading branch information
@whateveriiwant
whateveriiwant committed Oct 13, 2023
1 parent da93c39 commit ae937cd
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 133 deletions.
12 changes: 6 additions & 6 deletions front/src/pages/PlugIn/UsrOffline.tsx
View file
Expand Up @@ -3,24 +3,24 @@ import { Link } from "react-router-dom";

const UsrOffline = () => {
return (
<div className="w-full h-[100vh] flex flex-col px-10">
<div className="w-full h-full flex mt-[100px] flex-col pb-[20px]">
<div className="flex flex-row items-center justify-center">
<div className="w-full h-[100vh] flex flex-col px-9 md:px-10">
<div className="w-full h-full flex mt-[50px] md:mt-[100px] flex-col pb-[20px]">
<div className="flex flex-col items-center justify-center md:flex-row">
<img
src={plugin1}
alt="디스코드 연동 예시 이미지"
className="md:w-[30rem] lg:w-[35rem] xl:w-[40rem]"
/>
<div className="flex flex-col items-start justify-center ml-[50px] h-full">
<p className="text-4xl font-bold leading-normal font-main">
<div className="flex flex-col items-start justify-center md:ml-[50px] h-full">
<p className="text-3xl font-bold leading-normal md:text-4xl font-main">
지금 번역한 메시지, <br />
모두에게 공유하고 싶다면?
</p>
<p className="text-xl leading-normal text-gray-400 font-main mt-[20px]">
HandTalker로 번역한 메시지를 <br /> 여러 서비스로 전송해보세요.
</p>
<Link to="/login">
<button className="flex flex-row justify-center items-center bg-main-2 w-[300px] h-[50px] text-xl text-white font-main mt-[20px] rounded-lg">
<button className="flex flex-row justify-center items-center bg-main-2 w-[250px] h-[48px] md:w-[300px] md:h-[50px] text-xl text-white font-main mt-[20px] rounded-lg">
로그인하고 사용해보기
</button>
</Link>
Expand Down
230 changes: 121 additions & 109 deletions front/src/pages/PlugIn/UsrOnline.tsx
View file
Expand Up @@ -20,119 +20,131 @@ const UsrOnline = () => {
{openModal && <Modal onOpenModal={onModalAlert} />}

<div className="h-full flex flex-col items-center justify-center md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
<div className="flex flex-row h-[320px] items-center justify-center w-full mb-[50px]">
<div className="w-[301px] h-[320px] mt-[50px] border border-[#5865F2] flex flex-col items-center justify-center rounded-xl ">
<img
src={discord_blue}
alt="디스코드 로고"
className="w-auto h-[67px] mt-[10px]"
/>
<p className="font-main text-lg text-[#5865F2] mt-[40px] text-center">
Discord에서 HandTalker로 <br />
번역한 메시지를 전송해보세요
</p>
<button
onClick={onModalAlert}
className="w-[230px] h-[50px] mt-[20px] text-[#5865F2] font-main text-xl border border-[#5865F2] rounded-xl hover:bg-[#5865F2] hover:text-white hover:drop-shadow-xl transition-colors duration-200"
>
연결하기
</button>
<div className="flex flex-col md:flex-row h-[320px] items-center justify-center w-full mb-[50px]">
<div className="flex flex-row items-center justify-center">
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-[50px] border border-[#5865F2] flex flex-col items-center justify-center rounded-xl ">
<img
src={discord_blue}
alt="디스코드 로고"
className="w-auto h-[40px] md:h-[67px] mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#5865F2] mt-[40px] text-center">
Discord에서 HandTalker로 <br />
번역한 메시지를 전송해보세요
</p>
<button
onClick={onModalAlert}
className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#5865F2] font-main text-xl border border-[#5865F2] rounded-xl hover:bg-[#5865F2] hover:text-white hover:drop-shadow-xl transition-colors duration-200"
>
연결하기
</button>
</div>
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-[50px] ml-8 md:ml-[50px] border border-[#03CF5D] flex flex-col items-center justify-center rounded-xl ">
<img
src={naver}
alt="로고"
className="w-auto h-[40px] md:h-[67px] mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#03CF5D] mt-[40px] text-center">
네이버에서 HandTalker로 <br />
번역한 메시지를 검색해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#03CF5D] font-main text-xl border border-[#03CF5D] rounded-lg md:rounded-xl hover:bg-[#03CF5D] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
</div>
<div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#03CF5D] flex flex-col items-center justify-center rounded-xl ">
<img src={naver} alt="로고" className="w-auto h-[67px] mt-[10px]" />
<p className="font-main text-lg text-[#03CF5D] mt-[40px] text-center">
네이버에서 HandTalker로 <br />
번역한 메시지를 검색해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#03CF5D] font-main text-xl border border-[#03CF5D] rounded-xl hover:bg-[#03CF5D] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#4888F4] flex flex-col items-center justify-center rounded-xl ">
<img
src={google}
alt="로고"
className="w-auto h-[67px] mt-[10px]"
/>
<p className="font-main text-lg text-[#4888F4] mt-[40px] text-center">
Google에서 HandTalker로 <br />
번역한 메시지를 검색해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#4888F4] font-main text-xl border border-[#4888F4] rounded-xl hover:bg-[#4888F4] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#381c1e] flex flex-col items-center justify-center rounded-xl ">
<img
src={kakaotalk}
alt="로고"
className="w-auto h-[67px] scale-150 mt-[10px]"
/>
<p className="font-main text-lg text-[#381c1e] mt-[40px] text-center">
카카오톡에서 HandTalker로 <br />
번역한 메시지를 전송해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#381c1e] font-main text-xl border border-[#381c1e] rounded-xl hover:bg-[#381E1F] hover:text-[#FEE800] hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
<div className="flex flex-row items-center justify-center mt-8 md:mt-0">
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] md:ml-[50px] border border-[#4888F4] flex flex-col items-center justify-center rounded-xl ">
<img
src={google}
alt="로고"
className="w-auto h-[40px] md:h-[67px] mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#4888F4] mt-[40px] text-center">
Google에서 HandTalker로 <br />
번역한 메시지를 검색해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#4888F4] font-main text-xl border border-[#4888F4] rounded-xl hover:bg-[#4888F4] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] ml-8 md:ml-[50px] border border-[#381c1e] flex flex-col items-center justify-center rounded-xl ">
<img
src={kakaotalk}
alt="로고"
className="w-auto h-[40px] md:h-[67px] scale-150 mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#381c1e] mt-[40px] text-center">
카카오톡에서 HandTalker로 <br />
번역한 메시지를 전송해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#381c1e] font-main text-xl border border-[#381c1e] rounded-xl hover:bg-[#381E1F] hover:text-[#FEE800] hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
</div>
</div>
<div className="flex flex-row h-[320px] items-center justify-center w-full">
<div className="w-[301px] h-[320px] mt-[50px] border border-[#E83B6F] flex flex-col items-center justify-center rounded-xl ">
<img
src={instagram}
alt="로고"
className="w-auto h-[67px] mt-[10px] scale-125"
/>
<p className="font-main text-lg text-[#E83B6F] mt-[40px] text-center">
Instagram에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#E83B6F] font-main text-xl border border-[#E83B6F] rounded-xl hover:bg-[#E83B6F] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#3B589E] flex flex-col items-center justify-center rounded-xl ">
<img
src={facebook}
alt="로고"
className="w-auto h-[67px] mt-[10px] scale-125"
/>
<p className="font-main text-lg text-[#3B589E] mt-[40px] text-center">
Facebook에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#3B589E] font-main text-xl border border-[#3B589E] rounded-xl hover:bg-[#3B589E] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#4A98EA] flex flex-col items-center justify-center rounded-xl ">
<img
src={twitter}
alt="로고"
className="w-auto h-[67px] mt-[10px] scale-125"
/>
<p className="font-main text-lg text-[#4A98EA] mt-[40px] text-center">
Twitter에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#4A98EA] font-main text-xl border border-[#4A98EA] rounded-xl hover:bg-[#4A98EA] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
<div className="flex flex-col md:flex-row h-[320px] items-center justify-center w-full">
<div className="flex flex-row items-center justify-center md:flex-col">
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] border border-[#E83B6F] flex flex-col items-center justify-center rounded-xl ">
<img
src={instagram}
alt="로고"
className="w-auto h-[40px] md:h-[67px] scale-125 mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#E83B6F] mt-[40px] text-center">
Instagram에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#E83B6F] font-main text-xl border border-[#E83B6F] rounded-xl hover:bg-[#E83B6F] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] ml-8 md:ml-[50px] border border-[#3B589E] flex flex-col items-center justify-center rounded-xl ">
<img
src={facebook}
alt="로고"
className="w-auto h-[40px] md:h-[67px] scale-125 mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#3B589E] mt-[40px] text-center">
Facebook에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#3B589E] font-main text-xl border border-[#3B589E] rounded-xl hover:bg-[#3B589E] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
</div>
<div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#0041FF] flex flex-col items-center justify-center rounded-xl ">
<img
src={devocean}
alt="로고"
className="w-auto h-[67px] scale-125 mt-[10px]"
/>
<p className="font-main text-lg text-[#0041FF] mt-[40px] text-center">
데보션에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[230px] h-[50px] mt-[20px] text-[#0041FF] font-main text-xl border border-[#0041FF] rounded-xl hover:bg-[#0041FF] hover:text-[#ffffff] hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
<div className="flex flex-row items-center justify-center md:flex-col">
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-8 md:mt-[50px] md:ml-[50px] border border-[#4A98EA] flex flex-col items-center justify-center rounded-xl ">
<img
src={twitter}
alt="로고"
className="w-auto h-[40px] md:h-[67px] scale-125 mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#4A98EA] mt-[40px] text-center">
Twitter에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#4A98EA] font-main text-xl border border-[#4A98EA] rounded-xl hover:bg-[#4A98EA] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
<div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-8 md:mt-[50px] ml-8 md:ml-[50px] border border-[#0041FF] flex flex-col items-center justify-center rounded-xl ">
<img
src={devocean}
alt="로고"
className="w-auto h-[40px] md:h-[67px] scale-150 mt-[10px]"
/>
<p className="hidden md:block font-main text-lg text-[#0041FF] mt-[40px] text-center">
데보션에서 HandTalker로 <br />
번역한 메시지를 공유해보세요
</p>
<button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#0041FF] font-main text-xl border border-[#0041FF] rounded-xl hover:bg-[#0041FF] hover:text-[#ffffff] hover:drop-shadow-xl transition-colors duration-200">
연결하기
</button>
</div>
</div>
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions front/src/pages/PlugIn/modal/MPage1.tsx
View file
Expand Up @@ -2,9 +2,13 @@ import discord from "../../../assets/images/discord_screenshot.png";

const MPage1 = () => {
return (
<div className="flex flex-col items-center justify-center w-[730px] h-[520px]">
<img src={discord} alt="디스코드 화면" className="w-auto h-[430px]" />
<p className="text-xl font-main">
<div className="flex flex-col items-center justify-center w-[18rem] h-[25rem] md:w-[730px] md:h-[520px]">
<img
src={discord}
alt="디스코드 화면"
className="w-auto h-[12rem] md:h-[430px]"
/>
<p className="text-lg md:text-xl font-main">
1. 디스코드 데스크톱 애플리케이션을 실행해주세요.
</p>
</div>
Expand Down
26 changes: 19 additions & 7 deletions front/src/pages/PlugIn/modal/MPage2.tsx
View file
Expand Up @@ -4,23 +4,35 @@ import page2_2 from "../../../assets/images/plugin/page2-2.png";

const MPage2 = () => {
return (
<div className="flex flex-col items-center justify-center w-[730px] h-[520px]">
<div className="flex flex-row items-center justify-center pb-5 space-x-3">
<img src={page2_1} alt="디스코드 화면" className="h-[260px]" />
<img src={page2_2} alt="디스코드 화면" className="h-[260px]" />
<div className="flex flex-col items-center justify-center w-[18rem] h-[25rem] md:w-[730px] md:h-[520px]">
<div className="flex flex-row items-center justify-start pb-5 space-x-3 overflow-scroll md:justify-center">
<img
src={page2_1}
alt="디스코드 화면"
className="w-auto h-[10rem] md:h-[260px]"
/>
<img
src={page2_2}
alt="디스코드 화면"
className="w-auto h-[10rem] md:h-[260px]"
/>
</div>

<a
href="https://discord.com/api/oauth2/authorize?client_id=1139091593282981888&permissions=8&scope=bot%20applications.commands"
target="_blank"
rel="noreferrer"
>
<button className="flex flex-row justify-center items-center rounded-xl scale-90 w-[300px] h-[50px] bg-[#5865f2] text-white font-main text-xl">
<img src={discord} alt="discord" className="w-[50px] mr-[5px]" />
<button className="flex flex-row justify-center items-center rounded-xl scale-90 w-[250px] h-[48px] md:w-[300px] md:h-[50px] bg-[#5865f2] text-white font-main text-xl">
<img
src={discord}
alt="discord"
className="w-[40px] md:w-[50px] mr-[5px]"
/>
디스코드 봇 추가
</button>
</a>
<p className="pt-5 text-xl leading-loose text-center font-main">
<p className="pt-5 text-lg leading-normal text-center md:leading-loose md:text-xl font-main">
2. 위 버튼을 클릭하여 서버에 봇을 추가해주세요. <br />봇 추가를 위해서는
서버 관리자 권한이 필요합니다. <br />
봇을 추가하기 위해 사진과 같이 권한 설정을 해주세요.
Expand Down
6 changes: 3 additions & 3 deletions front/src/pages/PlugIn/modal/MPage3.tsx
View file
Expand Up @@ -2,10 +2,10 @@ import page3 from "../../../assets/images/plugin/page3.png";

const MPage3 = () => {
return (
<div className="flex flex-col items-center justify-center w-[730px] h-[520px]">
<img src={page3} alt="page3" className="w-[600px] mb-2" />
<div className="flex flex-col items-center justify-center w-[18rem] h-[25rem] md:w-[730px] md:h-[520px]">
<img src={page3} alt="page3" className="w-[400px] md:w-[600px] mb-2" />

<p className="pt-5 text-xl leading-loose text-center font-main">
<p className="pt-5 text-lg leading-normal text-center md:text-xl md:leading-loose font-main">
3. 성공적으로 봇이 추가되었는지 확인해주세요.
</p>
</div>
Expand Down

0 comments on commit ae937cd

Please sign in to comment.