react(8) - 로그인 구현

src>main>java>data>controller

package data.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Service;

import data.dto.MemberDto;
import data.mapper.MemberMapper;
import lombok.AllArgsConstructor;

@Service
@AllArgsConstructor
public class MemberService implements MemberServiceInter {

private MemberMapper memberMapper;

@Override
public void insertMember(MemberDto dto) {
// TODO Auto-generated method stub
memberMapper.insertMember(dto);
}

@Override
public List<MemberDto> getAllMembers() {
// TODO Auto-generated method stub
return memberMapper.getAllMembers();
}

@Override
public int getSearchId(String myid) {
// TODO Auto-generated method stub
return memberMapper.getSearchId(myid);
}

@Override
public int getLogin(String myid, String mypass) {
Map<String, String> map=new HashMap<>();
map.put("myid", myid);
map.put("mypass", mypass);

return memberMapper.getLogin(map);
}



@Override
public String getName(String myid) {
// TODO Auto-generated method stub
return memberMapper.getName(myid);
}

@Override
public void deleteMember(int num) {
// TODO Auto-generated method stub
memberMapper.deleteMember(num);
}

}

 

 

src>java>main>dto

package data.dto;

import java.sql.Timestamp;

import org.apache.ibatis.type.Alias;

import com.fasterxml.jackson.annotation.JsonFormat;

import lombok.Data;

@Data
@Alias("MemberDto")
public class MemberDto {

private int num;
private String myname;
private String myid;
private String mypass;
private String myaddress;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "Asia/Seoul")
private Timestamp gaipday;
}

 

src>main>java>mapper

package data.mapper;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import data.dto.MemberDto;

@Mapper
public interface MemberMapper {
public void insertMember(MemberDto dto);
public List<MemberDto> getAllMembers();
public int getSearchId(String myid);
public int getLogin(Map<String, String> map);
public String getName(String myid);
public void deleteMember(int num);
}

 

src>main>java>data>service>MemberService

package data.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Service;

import data.dto.MemberDto;
import data.mapper.MemberMapper;
import lombok.AllArgsConstructor;

@Service
@AllArgsConstructor
public class MemberService implements MemberServiceInter {

private MemberMapper memberMapper;

@Override
public void insertMember(MemberDto dto) {
// TODO Auto-generated method stub
memberMapper.insertMember(dto);
}

@Override
public List<MemberDto> getAllMembers() {
// TODO Auto-generated method stub
return memberMapper.getAllMembers();
}

@Override
public int getSearchId(String myid) {
// TODO Auto-generated method stub
return memberMapper.getSearchId(myid);
}

@Override
public int getLogin(String myid, String mypass) {
Map<String, String> map=new HashMap<>();
map.put("myid", myid);
map.put("mypass", mypass);

return memberMapper.getLogin(map);
}



@Override
public String getName(String myid) {
// TODO Auto-generated method stub
return memberMapper.getName(myid);
}

@Override
public void deleteMember(int num) {
// TODO Auto-generated method stub
memberMapper.deleteMember(num);
}

}

 

 

src>main>java>data>service>MemberServiceInter

package data.service;

import data.dto.MemberDto;

import java.util.List;
import java.util.Map;


public interface MemberServiceInter {
public void insertMember(MemberDto dto);
public List<MemberDto> getAllMembers();
public int getSearchId(String myid);
public int getLogin(String myid,String mypass);
public String getName(String myid);
public void deleteMember(int num);
}

 

 

src>main>java>naver.cloud>NaverConfig

package naver.cloud;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

import lombok.Data;

@Configuration
@PropertySource("classpath:/naver.properties")
@ConfigurationProperties(prefix = "ncp")
@Data
public class NaverConfig {
//프로파티 파일에서 선언된 값 중에서
//ncp.* 이름으로 된 프로퍼티값을 받을 필드 선언
private String accessKey;//ncp.accessKey 를 받을 변수
private String secretKey;//ncp.secretKey 를 받을 변수
private String regionName;//ncp.regionName 를 받을 변수
private String endPoint;//ncp.endPoint 를 받을 변수

}

 

src>main>java>naver.cloud>NaverObjectStorageService

package naver.cloud;

import java.io.InputStream;
import java.util.UUID;

import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.amazonaws.auth.AWSStaticCredentialsProvider;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.client.builder.AwsClientBuilder;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3ClientBuilder;
import com.amazonaws.services.s3.model.CannedAccessControlList;
import com.amazonaws.services.s3.model.ObjectMetadata;
import com.amazonaws.services.s3.model.PutObjectRequest;

@Service
public class NcpObjectStorageService implements ObjectStorageService {

AmazonS3 s3;

public NcpObjectStorageService(NaverConfig naverConfig) {
System.out.println("NcpObjectStorageService 생성");
s3 = AmazonS3ClientBuilder.standard()
.withEndpointConfiguration(new AwsClientBuilder.EndpointConfiguration(
naverConfig.getEndPoint(), naverConfig.getRegionName()))
.withCredentials(new AWSStaticCredentialsProvider(new BasicAWSCredentials(
naverConfig.getAccessKey(), naverConfig.getSecretKey())))
.build();
}

@Override
public String uploadFile(String bucketName, String directoryPath, MultipartFile file) {
System.out.println("uploadFile="+file.getOriginalFilename());

if (file.isEmpty()) {
return null;
}

try (InputStream fileIn = file.getInputStream()) {
String filename = UUID.randomUUID().toString();

ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentType(file.getContentType());

PutObjectRequest objectRequest = new PutObjectRequest(
bucketName,
directoryPath +"/"+ filename,
fileIn,
objectMetadata).withCannedAcl(CannedAccessControlList.PublicRead);

s3.putObject(objectRequest);

//return s3.getUrl(bucketName, directoryPath + filename).toString();
return filename;

} catch (Exception e) {
throw new RuntimeException("파일 업로드 오류", e);
}
}

@Override
public void deleteFile(String bucketName, String directoryPath, String fileName) {
// TODO Auto-generated method stub
String path=directoryPath+"/"+fileName;
System.out.println("path="+path);
//해당 버킷에 파일이 존재하면 true 반환
boolean isfind=s3.doesObjectExist(bucketName, path);
System.out.println("isfind="+isfind);
//존재할경우 삭제
if(isfind) {
s3.deleteObject(bucketName, path);
System.out.println(path+":삭제완료!");
}
}
}

src>main>java>naver.cloud>NaverObjectService

package naver.cloud;

import org.springframework.web.multipart.MultipartFile;

public interface ObjectStorageService {
public String uploadFile(String bucketName,String directoryPath,MultipartFile file);
public void deleteFile(String bucketName,String directoryPath,String fileName);
}

src>main>reactjs>src>components>index.js

export {default as Home} from './Home';
export {default as Menu} from './Menu';

src>main>reactjs>src>components>Menu.js

import React from 'react';
import '../App.css';
import { NavLink } from 'react-router-dom';

function Menu(props) {
return (
<ul className='menu'>
<li>
<NavLink to={"/"}>Home</NavLink>
</li>
<li>
<NavLink to={"/member/form"}>회원가입</NavLink>
</li>
<li>
<NavLink to={"/member/list"}>회원목록</NavLink>
</li>
<li>
<NavLink to={"/board/list"}>게시판</NavLink>
</li>

{
sessionStorage.loginok==null || sessionStorage.loginok==='no'?
<li>
<NavLink to={"/login"}>로그인</NavLink>
</li>:
<div>
<li style={{width:'250px',backgroundColor:'darkcyan',color:'white',cursor:'pointer'}}
onClick={()=>{
sessionStorage.removeItem("loginok");
sessionStorage.removeItem("myid");
sessionStorage.removeItem("myname");
window.location.reload();//새로고침
}}>로그아웃
&nbsp;&nbsp;&nbsp;
<b style={{color:'yellow'}}>{sessionStorage.myname}({sessionStorage.myid})님</b>
</li>
</div>
}
</ul>
);
}

export default Menu;

src>main>reactjs>src>App.css

*{
font-family: 'Jua';
}

ul.menu{
list-style: none;
}

ul.menu li{
float: left;
width: 100px;
height: 50px;
line-height: 50px;
border: 1px solid black;
text-align: center;
font-size: 16px;
margin-right: 10px;
border-radius: 10px;
}

ul.menu li a{
text-decoration: none;
color: black;
cursor: pointer;
}

ul.menu li:hover{
background-color: darkcyan;
box-shadow: 5px 5px 5px gray;

}

ul.menu li a:hover{
color: aliceblue;
}

div.login{
margin:100px 100px;
border: 5px solid gray;
width:320px;
border-radius: 10px;
}

body{
padding-left:50px;
padding-top:30px;
}

src>main>reactjs>src>Root.js

import React from 'react';
import {BrowserRouter} from "react-router-dom";
import RouteMain from "./RouteMain";

function Root(props) {
return (
<div>
<BrowserRouter>
<RouteMain/>
</BrowserRouter>
</div>
);
}

export default Root;

src>main>reactjs>src>RouteMain.js

import React from 'react';
import {Route, Routes} from "react-router-dom";
import {Home, Menu} from "./components";
import {LoginForm, MemberForm, MemberList} from "./member";
import {BoardForm, BoardList} from "./board";
import errorimg from "./image/error404.png"

function RouteMain(props) {
return (
<div>
<Menu/>
<br style={{clear:'both'}}/><br/>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/login' element={<LoginForm/>}/>

<Route path='/member'>
<Route path='form' element={<MemberForm/>}/>
<Route path='list' element={<MemberList/>}/>
</Route>

<Route path='/board'>
<Route path='form' element={<BoardForm/>}/>
<Route path='list' element={<BoardList/>}/>
<Route path='list/:currentPage' element={<BoardList/>}/>
</Route>

<Route path='*' element={
<div>
<h1>잘못된 URL 주소입니다</h1>
<br/><br/>
<img alt='' src={errorimg}/>
</div>
}/>
</Routes>
</div>
);
}

export default RouteMain;

src>main>src>package.json

import React from 'react';
import {Route, Routes} from "react-router-dom";
import {Home, Menu} from "./components";
import {LoginForm, MemberForm, MemberList} from "./member";
import {BoardForm, BoardList} from "./board";
import errorimg from "./image/error404.png"

function RouteMain(props) {
return (
<div>
<Menu/>
<br style={{clear:'both'}}/><br/>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/login' element={<LoginForm/>}/>

<Route path='/member'>
<Route path='form' element={<MemberForm/>}/>
<Route path='list' element={<MemberList/>}/>
</Route>

<Route path='/board'>
<Route path='form' element={<BoardForm/>}/>
<Route path='list' element={<BoardList/>}/>
<Route path='list/:currentPage' element={<BoardList/>}/>
</Route>

<Route path='*' element={
<div>
<h1>잘못된 URL 주소입니다</h1>
<br/><br/>
<img alt='' src={errorimg}/>
</div>
}/>
</Routes>
</div>
);
}

export default RouteMain;

src>main>resources>mapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="data.mapper.MemberMapper">
<insert id="insertMember" parameterType="MemberDto">
insert into member values (null, #{myid}, #{myname}, #{mypass}, #{myaddress}, now())
</insert>
<select id="getAllMembers" resultType="MemberDto">
select * from member order by myid
</select>
<select id="getSearchId" parameterType="String" resultType="int">
select count(*) from member where myid=#{myid}
</select>
<select id="getLogin" parameterType="Map" resultType="int">
select count(*) from member where myid=#{myid} and mypass=#{mypass}
</select>
<select id="getName" parameterType="String" resultType="String">
select myname from member where myid=#{myid}
</select>
<delete id="deleteMember" parameterType="int">
delete from member where num=#{num}
</delete>

</mapper>

src>main>resources>application.yml

#port설정
server:
port: 9002

#mysql setting
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://db-h04lf-kr.vpc-pub-cdb.ntruss.com:3306/studydb?serverTimezone=Asia/Seoul
username: study
password: bit!@#123
servlet:
multipart:
max-file-size:
20MB
#mybatis
mybatis:
type-aliases-package: data.dto
mapper-locations:
- /mapper/**/*.xml

naver.properties

 

build.gradle

cloud.aws.stack.auto=false
cloud.aws.region.static=ap-northeast-2
ncp.accessKey=hBDqplNjbWT3DNMykgZG
ncp.secretKey=dw3EBLFpVrtMRtPAoVKSIVbcFQHc4xYNHhl0bXt5
ncp.regionName=kr-standard
ncp.endPoint=https://kr.object.ncloudstorage.com

Dockerfile

FROM openjdk:11

ARG JAR_FILE=build/libs/SpringReactProject-0.0.1-SNAPSHOT.jar

COPY ${JAR_FILE} app.jar

ENTRYPOINT [ "java", "-jar", "app.jar" ]