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

Feature/soohyeon #2

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Feature/soohyeon #2

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
74cf097
화면테스트용 수정
Hsoohyeon Oct 16, 2023
d9aa4cc
test1
Hsoohyeon Oct 16, 2023
14657fc
회원가입 완료페이지추가
Hsoohyeon Oct 18, 2023
7e876e9
10월18일코드리뷰 반영
Hsoohyeon Oct 18, 2023
6e90e65
필수 페이지 제작 및 기능 구현
Hsoohyeon Oct 19, 2023
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
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@

---

Front : 김개발, 코드킴
Front : 최민지 황수현
Back : 유진서, 김문영, 노범석
Binary file added public/images/Back_arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/Logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/Select_arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/banner-square.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions public/images/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index.html 파일은 수정될 필요가 없어보입니다!
처음 clone 받았을때의 버전으로 돌려주세요.
추가적으로 지금 index.html파일의 위치가 public 폴더에 images폴더내부에 위치하고있네요! 위치수정이 필요할 것 같습니다

Binary file added public/images/logo_wecode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 12 additions & 4 deletions src/Router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import KimCodeLogin from './pages/KimCode/Login/Login';
import KimCodeMain from './pages/KimCode/Main/Main';
// import KimCodeLogin from './pages/KimCode/Login/Login';
// import KimCodeMain from './pages/KimCode/Main/Main';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

예시로 존재하던 코드는 이제 삭제해주세요!


import Login from './pages/Hwangsoohyeon/Login/Login';
import Join from './pages/Hwangsoohyeon/Join/Join';
import Join_ok from './pages/Hwangsoohyeon/Join/Join_ok';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트 이름은 대문자로 시작하고 camelCase로 작성하는것 지켜주세요~

Suggested change
import Join_ok from './pages/Hwangsoohyeon/Join/Join_ok';
import JoinOk from './pages/Hwangsoohyeon/Join/JoinOk';


const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/kimcode-login" element={<KimCodeLogin />} />
<Route path="/kimcode-main" element={<KimCodeMain />} />
{/* <Route path="/kimcode-login" element={<KimCodeLogin />} />
<Route path="/kimcode-main" element={<KimCodeMain />} /> */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

마찬가지입니다~ 주석은 삭제해주세요

<Route path="/" element={<Login />} />
<Route path="/Login" element={<Login />} />
<Route path="/join" element={<Join />} />
<Route path="/join_ok" element={<Join_ok />} />
</Routes>
</BrowserRouter>
);
Expand Down
141 changes: 141 additions & 0 deletions src/pages/Hwangsoohyeon/Join/Join.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React, { useState } from 'react';
import './Join.scss';
import { useNavigate } from 'react-router-dom';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import 순서 컨벤션 가이드 다시 알려드리겠습니다!!

  1. 모듈
  2. 컴포넌트
  3. css파일
    순서 생각해서 수정해주세요!
Suggested change
import React, { useState } from 'react';
import './Join.scss';
import { useNavigate } from 'react-router-dom';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Join.scss';


const Join = () => {
const navigate = useNavigate();
const [inputid, setinputid] = useState('');
const [inputpw, setinputpw] = useState('');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

camelCase신경써주세요!

Suggested change
const [inputid, setinputid] = useState('');
const [inputpw, setinputpw] = useState('');
const [inputId, setInputId] = useState('');
const [inputPw, setInputPw] = useState('');


const goToJoin_ok = () => {
navigate('/Join_ok');
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

camelCase와 snake_case 혼용하는경우는 피해주시면 좋겠습니다~


const goToLogin = () => {
navigate('/Login');
};

const saveUserId = (e) => {
setinputid(e.target.value);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래와같이 value를 구조분해할당해서 사용할 수 있습니다

Suggested change
const saveUserId = (e) => {
setinputid(e.target.value);
const saveUserId = (e) => {
const { value } = e.target
setinputid(value);

console.log(inputid);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

테스트가 끝난 console.log는 모두 삭제해주세요

};

const saveUserPw = (e) => {
setinputpw(e.target.value);
console.log(inputpw);
};

const able = inputid.indexOf('@', '.') !== -1 && inputpw.length >= 10;

return (
<div>
<div className="Back">
<div className="Backicon">
<img
className="Back_arrow"
src="./images/Back_arrow.png"
alt="Back_arrow"
onClick={goToLogin}
/>
</div>
<header>뒤로</header>
</div>
<div className="Join1">
<div className="info">
{/* <div>회원가입페이지</div> */}
<h1>회원가입</h1>

<div className="info1">
<div className="info_label">
<h2>기본정보</h2>
<label>필수사항</label>
</div>
<input
type="text"
placeholder="이메일"
onChange={saveUserId}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹은 onChange에 연결된 실행함수에 e.target.value를 직접 넘겨주는 방식도 생각해볼 수 있습니다

Suggested change
onChange={saveUserId}
onChange={(e)=>saveUserId(e.target.value)}

value={inputid}
/>
<input
type="password"
placeholder="비밀번호"
onChange={saveUserPw}
value={inputpw}
/>
<input
type="password"
placeholder="비밀번호 확인"
onChange={saveUserPw}
value={inputpw}
/>
</div>

<div className="info2">
<div className="info_label">
<h2>닉네임과 프로필이미지</h2>
<label>선택 사항</label>
</div>
<input type="text" placeholder="닉네임" />
<input type="file" />
</div>

<div className="info3">
<div className="info_label">
<h2>전화번호</h2>
<label>선택 사항</label>
</div>
<div className="phone">
<select name="phone_number" className="phoneNumber">
<option value="010" selected="selected">
010
</option>
<option value="011">011</option>
<option value="070">070</option>
</select>
<input type="tel" placeholder="휴대폰번호를 입력해주세요." />
</div>
</div>

<div className="info4">
<div className="info_label">
<h2>생일</h2>
<label>선택 사항</label>
</div>
<div className="birth">
<select name="birth_year" className="birthYear">
<option value="">년도</option>
<option value="1988년" selected="selected">
1988년
</option>
<option value="1989년">1989년</option>
<option value="1990년">1990년</option>
</select>
<select name="birth_month" className="birthMonth">
<option value="">월</option>
<option value="1월" selected="selected">
1월
</option>
<option value="2월">2월</option>
<option value="3월">3월</option>
</select>
<select name="birth_day" className="birthDay">
<option value="">일</option>
<option value="1일" selected="selected">
1일
</option>
<option value="2일">2일</option>
<option value="3일">3일</option>
</select>
</div>
</div>

<button disabled={!able} className="JoinBtn" onClick={goToJoin_ok}>
회원가입
</button>
</div>
</div>
</div>
);
};

export default Join;
183 changes: 183 additions & 0 deletions src/pages/Hwangsoohyeon/Join/Join.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
* {
box-sizing: border-box;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체 태그에대한 css는 특정파일에 위치하기보단 common.scss파일과같은 전역파일에 작성하는것이 더 좋습니다


select {
color: #999;
font-size: 16px;
font-weight: 400;
border-radius: 6px;
border: 1px solid #e0e0e0;
background-color: #fff;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적으로 nesting구조가 이뤄져있지 않다보니 태그를 선택해서 styling하면 의도하지 않은 태그도 해당 속성을 가질 수 있습니다.
scss를 사용하고있는만큼 nesting과 className을 활용한 styling 진행해주세요


label {
font-size: 12px;
font-weight: 400;
}

input {
display: flex;
padding: 19px 0px 15px 16px;
align-items: center;
width: 100%;
border-radius: 6px;
border: 1px solid #e0e0e0;
margin-top: 8px;
&::placeholder {
font-size: 16px;
font-weight: 400;
}
}

h2 {
font-size: 16px;
font-weight: 400;
color: black;
width: 147px;
height: 22px;
padding-bottom: 0%;
}

.Back {
display: flex;
width: 100%;
height: 56px;
// padding: 8px 497px 8px 0px;
align-items: center;
margin: 24px 0px 0px;

.Back_arrow {
width: 40px;
height: 40px;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적으로 className작성하실 때 camelCase 꼭 지켜주세요

header {
font-size: 20px;
font-style: normal;
font-weight: 400;
width: 35px;
height: 28px;
}
}

.Join1 {
width: 100%;
height: calc(100vh - 74px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

.info {
width: 100%;
padding: 0px 24px 0px 24px;

h1 {
font-size: 24px;
font-weight: 800;
width: 84px;
height: 17px;
}

.info1 {
margin-top: 24px;
.info_label {
color: red;
display: flex;
justify-content: space-between;
}
}
.info2 {
margin-top: 24px;
input {
display: flex;
padding: 19px 0px 15px 16px;
align-items: center;
width: 100%;
}
.info_label {
color: #999;
display: flex;
justify-content: space-between;
}
}
.info3 {
margin-top: 24px;
.phone {
display: flex;
justify-content: space-between;
input {
width: 100%;
display: flex;
padding: 19px 0px 15px 16px;
align-items: center;
margin-left: 8px;
}
}
.phoneNumber {
display: flex;
width: 136px;
padding: 16px 14px 15px 16px;
margin-top: 8px;
justify-content: center;
align-items: flex-end;
}
.info_label {
color: #999;
display: flex;
justify-content: space-between;
}
}
.info4 {
margin-top: 24px;
.birth {
width: 100%;
height: 56px;
display: flex;
align-items: flex-start;

.birthYear {
display: flex;
width: 136px;
padding: 16px 14px 15px 16px;
justify-content: center;
align-items: flex-end;
}

.birthMonth {
width: 100%;
display: flex;
padding: 16px 14px 15px 16px;
justify-content: center;
align-items: flex-end;
margin-left: 8px;
margin-right: 8px;
}

.birthDay {
width: 100%;
display: flex;
padding: 16px 14px 15px 16px;
justify-content: center;
align-items: flex-end;
margin-right: 8px;
}
}
.info_label {
color: #999;
display: flex;
justify-content: space-between;
}
}
}
.JoinBtn {
font-size: 18px;
color: white;
width: 100%;
height: 56px;
background-color: #2d71f7;
border-radius: 6px;
margin-top: 24px;
margin-bottom: 40px;
}
}
Loading