Commit @d79a2988ae0920390fe2a70c39170099853e9bcc

kimgkdud898 2023-10-24

231024김하영

@d79a2988ae0920390fe2a70c39170099853e9bcc

d79a298

client/resources/jpg/join-bt.png (Binary) (added)

+++ client/resources/jpg/join-bt.png

Binary file is not shown

d79a298

client/resources/jpg/join-bt2.png (Binary) (added)

+++ client/resources/jpg/join-bt2.png

Binary file is not shown

33f982c

d79a298

client/views/pages/join/Join.vue

--- client/views/pages/join/Join.vue

+++ client/views/pages/join/Join.vue


 <template>
     <div class="w1400">
-        <div>
-            <section class="join-logo">
-                <h1>회원가입</h1>
-            </section>
+        <section class="join-logo">
+            <h1>회원가입</h1>
+        </section>
+        <section class="join-b">
+            <div class="join-b-button">
+                <input type="radio" id="one" v-model="selectedMembership" value="one">
+                <label for="one" class="radio-t t1">기관회원
+                    <img src="../../../resources/jpg/join-bt2.png" alt=""></label>
+                <input type="radio" id="two" v-model="selectedMembership" value="two">
+                <label for="two" class="radio-t t2">일반회원
+                    <img src="../../../resources/jpg/join-bt.png" alt=""></label>
 
-            <section class="join-sec1">
-                <div class="join-sec-sub">
-                    <span>아이디</span>
-                    <input type="text">
-                    <button>중복확인</button>
+            </div>
+        </section>
+        <div v-if="selectedMembership === 'one'">
+            <div class="login-info">
+                <div>
+                    <h3>회원정보</h3>
+                    <hr>
                 </div>
-            </section>
+                <section class="join-sec1 joinsub0">
+                    <div class="join-sec-sub ">
+                        <span>아이디</span>
+                    </div>
+                    <div>
+                        <input type="text" value="아이디를 입력하세요.">
+                    </div>
+                    <div>
+
+                        <button>중복확인</button>
+                    </div>
+                </section>
 
 
-            <section class="join-sec2">
-                <div class="join-sec-sub">
-                    <span>기관업체</span>
-                    <input type="text" value="기관 및 업체명을 입력하세요.">
+                <section class="join-sec2 joinsub">
+
+                    <div class="join-sec-sub">
+                        <span>기관업체</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text">
+
+                    </div>
+
+                </section>
+
+
+                <section class="join-sec3 joinsub">
+                    <div class="join-sec-sub">
+                        <span>비밀번호</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text">
+
+                    </div>
+                </section>
+
+
+                <section class="join-sec4 joinsub">
+                    <div class="join-sec-sub">
+                        <span>비밀번호 확인</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text">
+
+                    </div>
+                </section>
+
+
+                <section class="join-sec5 joinsub">
+                    <div class="join-sec-sub">
+                        <span>담당자명</span>
+                    </div>
+                    <div>
+                        <input type="text">
+
+                    </div>
+                </section>
+
+
+                <section class="join-sec6">
+                    <div class="join-sec-sub">
+                        <span>이메일</span>
+                    </div>
+                    <div>
+                        <input type="text" name="email_id" id="email_id">
+                    </div>
+                    <div>@</div>
+                    <div>
+                        <input type="text" name="email_dns" id="email_dns">
+                    </div>
+                    <div>
+                        <select name="email_sel" id="email_sel">
+                            <option value="">직접 입력</option>
+                            <option value="naver.com">naver</option>
+                            <option value="hanmail.net">daum</option>
+                            <option value="gmail.com">google</option>
+                        </select>
+                    </div>
+
+                </section>
+            </div>
+            <div class="login-info2">
+                <div>
+                    <h3>회사소개</h3>
+                    <hr>
                 </div>
-            </section>
+                <div class="login-info-grid">
+                    <div class="login-info-grid-1">
+                        <section class="join-sec0">
+                            <div>
+                                <p>logo</p>
+                            </div>
+                        </section>
+                    </div>
+
+                    <div class="login-info-grid-2">
+                        <section class="join-sec1 joinsub0-1">
+                            <div class="join-sec-sub ">
+                                <span>회사명</span>
+                            </div>
+                            <div>
+                                <input type="text" value="회사명을 입력해주세요.">
+                            </div>
+
+                        </section>
 
 
-            <section class="join-sec3">
-                <div class="join-sec-sub">
-                    <span>비밀번호</span>
-                    <input type="text">
+                        <section class="join-sec2 joinsub">
+
+                            <div class="join-sec-sub">
+                                <span>우리회사 키워드</span>
+                            </div>
+                            <div class="join-sub-input">
+                                <input type="text">
+
+                            </div>
+
+                        </section>
+
+
+                        <section class="join-sec3 joinsub j-s-3">
+                            <div class="join-sec-sub">
+                                <span>회사소개글</span>
+                            </div>
+                            <div class="join-sub-input">
+                                <input type="text">
+
+                            </div>
+                        </section>
+
+
+                        <section class="join-sec4 joinsub">
+                            <div class="join-sec-sub">
+                                <span>회사소개서 <br> 첨부파일</span>
+                            </div>
+                            <div class="join-sub-input">
+                                <input type="file">
+
+                            </div>
+                        </section>
+                    </div>
                 </div>
-            </section>
+                <div class="login-info">
+                    <div>
+                        <h3>회원정보</h3>
+                        <hr>
+                    </div>
+                    <section class="join-sec1 joinsub0">
+                        <div class="join-sec-sub ">
+                            <span>아이디</span>
+                        </div>
+                        <div>
+                            <input type="text" value="아이디를 입력하세요.">
+                        </div>
+                        <div>
+
+                            <button>중복확인</button>
+                        </div>
+                    </section>
 
 
-            <section class="join-sec4">
-                <div class="join-sec-sub">
-                    <span>비밀번호 확인</span>
-                    <input type="text">
+                    <section class="join-sec2 joinsub">
+
+                        <div class="join-sec-sub">
+                            <span>기관업체</span>
+                        </div>
+                        <div class="join-sub-input">
+                            <input type="text">
+
+                        </div>
+
+                    </section>
+
+
+                    <section class="join-sec3 joinsub">
+                        <div class="join-sec-sub">
+                            <span>비밀번호</span>
+                        </div>
+                        <div class="join-sub-input">
+                            <input type="text">
+
+                        </div>
+                    </section>
+
+
+                    <section class="join-sec4 joinsub">
+                        <div class="join-sec-sub">
+                            <span>비밀번호 확인</span>
+                        </div>
+                        <div class="join-sub-input">
+                            <input type="text">
+
+                        </div>
+                    </section>
+
+
+                    <section class="join-sec5 joinsub">
+                        <div class="join-sec-sub">
+                            <span>담당자명</span>
+                        </div>
+                        <div>
+                            <input type="text">
+
+                        </div>
+                    </section>
+
+
+                    <section class="join-sec6">
+                        <div class="join-sec-sub">
+                            <span>이메일</span>
+                        </div>
+                        <div>
+                            <input type="text" name="email_id" id="email_id">
+                        </div>
+                        <div>@</div>
+                        <div>
+                            <input type="text" name="email_dns" id="email_dns">
+                        </div>
+                        <div>
+                            <select name="email_sel" id="email_sel">
+                                <option value="">직접 입력</option>
+                                <option value="naver.com">naver</option>
+                                <option value="hanmail.net">daum</option>
+                                <option value="gmail.com">google</option>
+                            </select>
+                        </div>
+
+                    </section>
                 </div>
-            </section>
 
-
-            <section class="join-sec5">
-                <div class="join-sec-sub">
-                    <span>담당자명</span>
-                    <input type="text">
+            </div>
+        </div>
+        <div v-if="selectedMembership === 'two'">
+            <div class="login-info">
+                <div>
+                    <h3>회원정보</h3>
+                    <hr>
                 </div>
-            </section>
+                <section class="join-sec1 joinsub0">
+                    <div class="join-sec-sub ">
+                        <span>아이디</span>
+                    </div>
+                    <div>
+                        <input type="text" value="아이디를 입력하세요.">
+                    </div>
+                    <div>
+
+                        <button>중복확인</button>
+                    </div>
+                </section>
 
 
-            <section class="join-sec6">
-                <div class="join-sec-sub">
-                    <label for="email_id">이메일</label>
-                    <input type="text" name="email_id" id="email_id"> @
-                    <input type="text" name="email_dns" id="email_dns">
-                    <select name="email_sel" id="email_sel">
-                        <option value="">직접 입력</option>
-                        <option value="naver.com">NAVER</option>
-                        <option value="hanmail.net">DAUM</option>
-                        <option value="gmail.com">GOOGLE</option>
-                    </select>
-                </div>
-            </section>
+                <section class="join-sec2 joinsub">
+
+                    <div class="join-sec-sub">
+                        <span>기관업체</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text">
+
+                    </div>
+
+                </section>
+
+
+                <section class="join-sec3 joinsub">
+                    <div class="join-sec-sub">
+                        <span>비밀번호</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text">
+
+                    </div>
+                </section>
+
+
+                <section class="join-sec4 joinsub">
+                    <div class="join-sec-sub">
+                        <span>비밀번호 확인</span>
+                    </div>
+                    <div class="join-sub-input">
+                        <input type="text">
+
+                    </div>
+                </section>
+
+
+                <section class="join-sec5 joinsub">
+                    <div class="join-sec-sub">
+                        <span>담당자명</span>
+                    </div>
+                    <div>
+                        <input type="text">
+
+                    </div>
+                </section>
+
+
+                <section class="join-sec6">
+                    <div class="join-sec-sub">
+                        <span>이메일</span>
+                    </div>
+                    <div>
+                        <input type="text" name="email_id" id="email_id">
+                    </div>
+                    <div>@</div>
+                    <div>
+                        <input type="text" name="email_dns" id="email_dns">
+                    </div>
+                    <div>
+                        <select name="email_sel" id="email_sel">
+                            <option value="">직접 입력</option>
+                            <option value="naver.com">naver</option>
+                            <option value="hanmail.net">daum</option>
+                            <option value="gmail.com">google</option>
+                        </select>
+                    </div>
+
+                </section>
+            </div>
         </div>
 
 
 
         <!---------------------------------------------------------------------------------------------------------------->
 
-        <div>
-            <section class="join-sec">
-                <div class="join-sec-a">
-                    <h1>회사소개</h1>
-                </div>
+
+
+        <div class="join-w1400">
+
+            <section class="join-email-bt">
+                <input type="checkbox">
+                <span>E-mail 구독서비스를 신청하시겠습니까?</span>
             </section>
 
-            <section class="join-sec-a-1">
-                <span>회사명</span>
-                <input type="text">
-            </section>
-            <section class="join-sec-a-1">
-                <span>우리회사 키워드</span>
-                <input type="text">
-            </section>
-            <section class="join-sec-a-1">
-                <span>회사 소개글</span>
-                <input type="text">
+            <section class="join-end-bt">
+                <button>이전</button>
+
+                <button>회원가입</button>
             </section>
         </div>
+
     </div>
 </template>
 
 <script>
+
+
 export default {
     data() {
         return {
+            selectedMembership: 'one'
         }
     },
     methods: {

 }
 </script>
 
+<style scoped>
+.join-b {
+    width: 100%;
+
+    /* border: 1px solid red; */
+}
+
+.join-logo {
+    padding: 6rem;
+}
+
+.join-logo h1 {
+    font-family: SBaggroM;
+    color: #0e0077;
+    font-size: 4rem;
+}
+
+.join-b-button {
+    width: 50%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin: 0 auto;
+    gap: 6rem;
+    flex-direction: row;
+    /* padding: 9rem; */
+}
+
+.join-b-button input[type="radio"] {
+    display: none;
+}
+
+.join-b-button button {
+    height: 20rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    border-radius: 2rem;
+    text-align: center;
+    box-shadow: 2px 2px 5px #86868644;
+    /* padding: 1rem; */
+}
+
+.join-b-button button p {
+    padding: 3rem 0 0;
+    /* padding: 3rem 0rem 1rem 3rem; */
+    font-size: 3rem;
+    font-family: SBaggroM;
+    color: #014099;
+
+}
+
+.join-b-button button img {
+    width: 200px;
+    height: 100px;
+    text-align: center;
+    margin: 0 auto;
+    /* border: 1px solid red; */
+    background-position: center;
+}
+
+
+.background {
+    background-color: #000000;
+}
+
+.join-b-button button:nth-child(1).background {
+    background-color: #000000;
+}
+
+
+.light {
+    z-index: 1;
+    background-color: #ff0000;
+}
+
+.join-b-button button:nth-child(2) {
+    background-color: #e6fff1;
+}
+
+.join-b-button button:nth-child(2) img {
+    width: 100px;
+}
+
+.join-b-button button:nth-child(2) p {
+    color: #0e5e2e;
+}
+
+.radio-t {
+    padding: 3rem;
+    height: 25rem;
+    font-size: 3rem;
+    border-radius: 2rem;
+    font-family: SBaggroM;
+    margin: 0 auto;
+    box-shadow: 2px 2px 5px #33333330;
+    text-align: center;
+}
+
+.t1 {
+    padding: 6rem 0;
+    color: #014099;
+    background-color: #e2ecfc;
+}
+
+.t1 img {
+    padding: 1rem;
+    width: 90%;
+    margin: 0 auto;
+}
+
+.t2 img {
+    padding: 1rem;
+    width: 50%;
+    margin: 0 auto;
+
+}
+
+.t2 {
+    padding: 6rem 0;
+    color: #0e5e2e;
+    background-color: #e6fff1;
+}
+
+/* 공통요소-------------------------------------------------------------------------*/
+hr {
+    margin: 1rem 0 3rem 0;
+    border: 1px solid #cbcbcb;
+}
+
+section div span {
+    font-size: 1.5rem;
+    font-family: "Pretendard-Regular";
+
+    float: left;
+    color: #3f87f7;
+    padding: 1rem 5rem 1rem 5rem;
+}
+
+section div input {
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid #cbcbcb;
+    color: #cbcbcb;
+    border-radius: 0.5rem;
+}
+
+section div button {
+    width: 100%;
+    padding: 1rem;
+    cursor: pointer;
+    border-radius: 0.5rem;
+}
+
+section div select {
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid #cbcbcb;
+    border-radius: 0.5rem;
+    color: #6b6b6b;
+    font-family: "Pretendard-Regular";
+
+}
+
+
+/* -------------------------------------------------------------------------------- */
+
+
+
+
+
+
+.login-info,
+.login-info2 {
+    width: 50%;
+    margin: 0 auto;
+
+}
+
+.login-info2 {
+    display: block;
+}
+
+.login-info2.Chacked {
+    display: none;
+}
+
+.login-info h3,
+.login-info2 h3 {
+    color: #0e0077;
+
+    font-size: 2rem;
+    font-family: "Pretendard-Regular";
+
+    padding: 3rem 1rem 1rem 1rem;
+}
+
+.joinsub0 {
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 200px 2fr 1fr;
+    gap: 1rem;
+}
+
+.j-s-3 {
+    display: grid;
+    grid-template-rows: 30rem;
+}
+
+.j-s-3 input {
+    height: 100%;
+}
+
+.join-sec1 button {
+    font-size: 1.5rem;
+    color: white;
+    font-family: "Pretendard-Regular";
+
+    background-color: #3f87f7;
+}
+
+.joinsub {
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 200px 2fr;
+    gap: 1rem;
+}
+
+.join-sec6 {
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 200px 1fr 10px 1fr 1fr;
+    gap: 1rem;
+}
+
+.join-sec6 div:nth-child(3) {
+    padding: 1rem 0;
+    font-size: 1.5rem;
+    font-family: "Pretendard-Regular";
+
+}
+
+.login-info-grid {
+    display: grid;
+    grid-template-columns: 100px 1fr;
+
+}
+
+.join-sec0 {
+    display: grid;
+    padding: 2rem;
+    grid-row: 1 / span 3;
+
+}
+
+.join-sec0 div p {
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    border-radius: 50%;
+    text-align: center;
+    color: #333;
+    font-size: 2.5rem;
+    font-family: "Pretendard-Regular";
+    background-color: #b5b5b5;
+    /* border: 1px solid red; */
+    box-shadow: 2px 2px 5px #33333328;
+}
+
+.joinsub0-1 {
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 200px 2fr;
+
+}
+
+.join-w1400 {
+    width: 50%;
+    margin: 0 auto;
+
+}
+
+.join-email-bt {
+    font-size: 1.6rem;
+    padding: 3rem 3rem 3rem 0rem;
+}
+
+.join-email-bt input[type=checkbox] {
+    margin: 1rem;
+    /* border: 1px solid red; */
+    transform: scale(1.5);
+}
+
+.join-email-bt span {
+    color: #898989;
+    font-family: "Pretendard-Regular";
+
+}
+
+.join-end-bt {
+    display: grid;
+    grid-template-columns: 25% 73%;
+    gap: 1rem;
+    padding: 6rem 0rem 6rem 0rem;
+}
+
+.join-end-bt button {
+    padding: 2rem;
+    cursor: pointer;
+    border-radius: 1.2rem;
+    font-size: 1.5rem;
+    font-family: "Pretendard-Regular";
+
+}
+
+.join-end-bt button:nth-child(2) {
+    background-color: #3f87f7;
+    color: white;
+
+
+}
+</style>

33f982c

d79a298

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


                     </span>
                 </div>
                 <div class="login-checkbox-b">
-                    <button>아이디 찾기</button>
-                    <button>비밀번호찾기</button>
-                    <button>회원가입</button>
+                    <button class="login-bu-after">아이디 찾기</button>
+                    <button class="login-bu-after">비밀번호찾기</button>
+                    <router-link to="/Join.page">
+                        <button>회원가입</button>
+                    </router-link>
                 </div>
             </section>
             <section class="login-button">

 
 .login-checkbox-i span {
     font-size: 1.5rem;
+    font-family: "Pretendard-Regular";
+
 }
 
 .login-checkbox-b {

     font-family: "Pretendard-Regular";
     font-weight: 500;
     font-size: 1.5rem;
+    cursor: pointer;
     background-color: #06396d00;
 }
 

     position: relative;
 }
 
-.login-checkbox-b button:nth-child(1)::after,
-.login-checkbox-b button:nth-child(2)::after {
+.login-bu-after::after,
+.login-bu-after::after {
     content: 'ㅣ';
     float: right;
     display: block;

     background-color: #3f87f7;
     color: white;
     font-size: 1.7rem;
+    font-family: "Pretendard-Regular";
     border-radius: 1.2rem;
     cursor: pointer;
 }

33f982c

d79a298

package-lock.json

--- package-lock.json

+++ package-lock.json


 {
-  "name": "keris-web",
+  "name": "KERIS",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

Add a comment

Open 0
Closed 0

List

...	...	@@ -27,9 +27,11 @@
27	27	</span>
28	28	</div>
29	29	<div class="login-checkbox-b">
30		- <button>아이디 찾기</button>
31		- <button>비밀번호찾기</button>
32		- <button>회원가입</button>
	30	+ <button class="login-bu-after">아이디 찾기</button>
	31	+ <button class="login-bu-after">비밀번호찾기</button>
	32	+ <router-link to="/Join.page">
	33	+ <button>회원가입</button>
	34	+ </router-link>
33	35	</div>
34	36	</section>
35	37	<section class="login-button">
...	...	@@ -140,6 +142,8 @@
140	142
141	143	.login-checkbox-i span {
142	144	font-size: 1.5rem;
	145	+ font-family: "Pretendard-Regular";
	146	+
143	147	}
144	148
145	149	.login-checkbox-b {
...	...	@@ -153,6 +157,7 @@
153	157	font-family: "Pretendard-Regular";
154	158	font-weight: 500;
155	159	font-size: 1.5rem;
	160	+ cursor: pointer;
156	161	background-color: #06396d00;
157	162	}
158	163
...	...	@@ -160,8 +165,8 @@
160	165	position: relative;
161	166	}
162	167
163		-.login-checkbox-b button:nth-child(1)::after,
164		-.login-checkbox-b button:nth-child(2)::after {
	168	+.login-bu-after::after,
	169	+.login-bu-after::after {
165	170	content: 'ㅣ';
166	171	float: right;
167	172	display: block;
...	...	@@ -179,6 +184,7 @@
179	184	background-color: #3f87f7;
180	185	color: white;
181	186	font-size: 1.7rem;
	187	+ font-family: "Pretendard-Regular";
182	188	border-radius: 1.2rem;
183	189	cursor: pointer;
184	190	}

...	...	@@ -1,97 +1,378 @@
1	1	<template>
2	2	<div class="w1400">
3		- <div>
4		- <section class="join-logo">
5		- <h1>회원가입</h1>
6		- </section>
	3	+ <section class="join-logo">
	4	+ <h1>회원가입</h1>
	5	+ </section>
	6	+ <section class="join-b">
	7	+ <div class="join-b-button">
	8	+ <input type="radio" id="one" v-model="selectedMembership" value="one">
	9	+ <label for="one" class="radio-t t1">기관회원
	10	+ <img src="../../../resources/jpg/join-bt2.png" alt=""></label>
	11	+ <input type="radio" id="two" v-model="selectedMembership" value="two">
	12	+ <label for="two" class="radio-t t2">일반회원
	13	+ <img src="../../../resources/jpg/join-bt.png" alt=""></label>
7	14
8		- <section class="join-sec1">
9		- <div class="join-sec-sub">
10		- <span>아이디</span>
11		- <input type="text">
12		- <button>중복확인</button>
	15	+ </div>
	16	+ </section>
	17	+ <div v-if="selectedMembership === 'one'">
	18	+ <div class="login-info">
	19	+ <div>
	20	+ <h3>회원정보</h3>
	21	+ <hr>
13	22	</div>
14		- </section>
	23	+ <section class="join-sec1 joinsub0">
	24	+ <div class="join-sec-sub ">
	25	+ <span>아이디</span>
	26	+ </div>
	27	+ <div>
	28	+ <input type="text" value="아이디를 입력하세요.">
	29	+ </div>
	30	+ <div>
	31	+
	32	+ <button>중복확인</button>
	33	+ </div>
	34	+ </section>
15	35
16	36
17		- <section class="join-sec2">
18		- <div class="join-sec-sub">
19		- <span>기관업체</span>
20		- <input type="text" value="기관 및 업체명을 입력하세요.">
	37	+ <section class="join-sec2 joinsub">
	38	+
	39	+ <div class="join-sec-sub">
	40	+ <span>기관업체</span>
	41	+ </div>
	42	+ <div class="join-sub-input">
	43	+ <input type="text">
	44	+
	45	+ </div>
	46	+
	47	+ </section>
	48	+
	49	+
	50	+ <section class="join-sec3 joinsub">
	51	+ <div class="join-sec-sub">
	52	+ <span>비밀번호</span>
	53	+ </div>
	54	+ <div class="join-sub-input">
	55	+ <input type="text">
	56	+
	57	+ </div>
	58	+ </section>
	59	+
	60	+
	61	+ <section class="join-sec4 joinsub">
	62	+ <div class="join-sec-sub">
	63	+ <span>비밀번호 확인</span>
	64	+ </div>
	65	+ <div class="join-sub-input">
	66	+ <input type="text">
	67	+
	68	+ </div>
	69	+ </section>
	70	+
	71	+
	72	+ <section class="join-sec5 joinsub">
	73	+ <div class="join-sec-sub">
	74	+ <span>담당자명</span>
	75	+ </div>
	76	+ <div>
	77	+ <input type="text">
	78	+
	79	+ </div>
	80	+ </section>
	81	+
	82	+
	83	+ <section class="join-sec6">
	84	+ <div class="join-sec-sub">
	85	+ <span>이메일</span>
	86	+ </div>
	87	+ <div>
	88	+ <input type="text" name="email_id" id="email_id">
	89	+ </div>
	90	+ <div>@</div>
	91	+ <div>
	92	+ <input type="text" name="email_dns" id="email_dns">
	93	+ </div>
	94	+ <div>
	95	+ <select name="email_sel" id="email_sel">
	96	+ <option value="">직접 입력</option>
	97	+ <option value="naver.com">naver</option>
	98	+ <option value="hanmail.net">daum</option>
	99	+ <option value="gmail.com">google</option>
	100	+ </select>
	101	+ </div>
	102	+
	103	+ </section>
	104	+ </div>
	105	+ <div class="login-info2">
	106	+ <div>
	107	+ <h3>회사소개</h3>
	108	+ <hr>
21	109	</div>
22		- </section>
	110	+ <div class="login-info-grid">
	111	+ <div class="login-info-grid-1">
	112	+ <section class="join-sec0">
	113	+ <div>
	114	+ <p>logo</p>
	115	+ </div>
	116	+ </section>
	117	+ </div>
	118	+
	119	+ <div class="login-info-grid-2">
	120	+ <section class="join-sec1 joinsub0-1">
	121	+ <div class="join-sec-sub ">
	122	+ <span>회사명</span>
	123	+ </div>
	124	+ <div>
	125	+ <input type="text" value="회사명을 입력해주세요.">
	126	+ </div>
	127	+
	128	+ </section>
23	129
24	130
25		- <section class="join-sec3">
26		- <div class="join-sec-sub">
27		- <span>비밀번호</span>
28		- <input type="text">
	131	+ <section class="join-sec2 joinsub">
	132	+
	133	+ <div class="join-sec-sub">
	134	+ <span>우리회사 키워드</span>
	135	+ </div>
	136	+ <div class="join-sub-input">
	137	+ <input type="text">
	138	+
	139	+ </div>
	140	+
	141	+ </section>
	142	+
	143	+
	144	+ <section class="join-sec3 joinsub j-s-3">
	145	+ <div class="join-sec-sub">
	146	+ <span>회사소개글</span>
	147	+ </div>
	148	+ <div class="join-sub-input">
	149	+ <input type="text">
	150	+
	151	+ </div>
	152	+ </section>
	153	+
	154	+
	155	+ <section class="join-sec4 joinsub">
	156	+ <div class="join-sec-sub">
	157	+ <span>회사소개서 <br> 첨부파일</span>
	158	+ </div>
	159	+ <div class="join-sub-input">
	160	+ <input type="file">
	161	+
	162	+ </div>
	163	+ </section>
	164	+ </div>
29	165	</div>
30		- </section>
	166	+ <div class="login-info">
	167	+ <div>
	168	+ <h3>회원정보</h3>
	169	+ <hr>
	170	+ </div>
	171	+ <section class="join-sec1 joinsub0">
	172	+ <div class="join-sec-sub ">
	173	+ <span>아이디</span>
	174	+ </div>
	175	+ <div>
	176	+ <input type="text" value="아이디를 입력하세요.">
	177	+ </div>
	178	+ <div>
	179	+
	180	+ <button>중복확인</button>
	181	+ </div>
	182	+ </section>
31	183
32	184
33		- <section class="join-sec4">
34		- <div class="join-sec-sub">
35		- <span>비밀번호 확인</span>
36		- <input type="text">
	185	+ <section class="join-sec2 joinsub">
	186	+
	187	+ <div class="join-sec-sub">
	188	+ <span>기관업체</span>
	189	+ </div>
	190	+ <div class="join-sub-input">
	191	+ <input type="text">
	192	+
	193	+ </div>
	194	+
	195	+ </section>
	196	+
	197	+
	198	+ <section class="join-sec3 joinsub">
	199	+ <div class="join-sec-sub">
	200	+ <span>비밀번호</span>
	201	+ </div>
	202	+ <div class="join-sub-input">
	203	+ <input type="text">
	204	+
	205	+ </div>
	206	+ </section>
	207	+
	208	+
	209	+ <section class="join-sec4 joinsub">
	210	+ <div class="join-sec-sub">
	211	+ <span>비밀번호 확인</span>
	212	+ </div>
	213	+ <div class="join-sub-input">
	214	+ <input type="text">
	215	+
	216	+ </div>
	217	+ </section>
	218	+
	219	+
	220	+ <section class="join-sec5 joinsub">
	221	+ <div class="join-sec-sub">
	222	+ <span>담당자명</span>
	223	+ </div>
	224	+ <div>
	225	+ <input type="text">
	226	+
	227	+ </div>
	228	+ </section>
	229	+
	230	+
	231	+ <section class="join-sec6">
	232	+ <div class="join-sec-sub">
	233	+ <span>이메일</span>
	234	+ </div>
	235	+ <div>
	236	+ <input type="text" name="email_id" id="email_id">
	237	+ </div>
	238	+ <div>@</div>
	239	+ <div>
	240	+ <input type="text" name="email_dns" id="email_dns">
	241	+ </div>
	242	+ <div>
	243	+ <select name="email_sel" id="email_sel">
	244	+ <option value="">직접 입력</option>
	245	+ <option value="naver.com">naver</option>
	246	+ <option value="hanmail.net">daum</option>
	247	+ <option value="gmail.com">google</option>
	248	+ </select>
	249	+ </div>
	250	+
	251	+ </section>
37	252	</div>
38		- </section>
39	253
40		-
41		- <section class="join-sec5">
42		- <div class="join-sec-sub">
43		- <span>담당자명</span>
44		- <input type="text">
	254	+ </div>
	255	+ </div>
	256	+ <div v-if="selectedMembership === 'two'">
	257	+ <div class="login-info">
	258	+ <div>
	259	+ <h3>회원정보</h3>
	260	+ <hr>
45	261	</div>
46		- </section>
	262	+ <section class="join-sec1 joinsub0">
	263	+ <div class="join-sec-sub ">
	264	+ <span>아이디</span>
	265	+ </div>
	266	+ <div>
	267	+ <input type="text" value="아이디를 입력하세요.">
	268	+ </div>
	269	+ <div>
	270	+
	271	+ <button>중복확인</button>
	272	+ </div>
	273	+ </section>
47	274
48	275
49		- <section class="join-sec6">
50		- <div class="join-sec-sub">
51		- <label for="email_id">이메일</label>
52		- <input type="text" name="email_id" id="email_id"> @
53		- <input type="text" name="email_dns" id="email_dns">
54		- <select name="email_sel" id="email_sel">
55		- <option value="">직접 입력</option>
56		- <option value="naver.com">NAVER</option>
57		- <option value="hanmail.net">DAUM</option>
58		- <option value="gmail.com">GOOGLE</option>
59		- </select>
60		- </div>
61		- </section>
	276	+ <section class="join-sec2 joinsub">
	277	+
	278	+ <div class="join-sec-sub">
	279	+ <span>기관업체</span>
	280	+ </div>
	281	+ <div class="join-sub-input">
	282	+ <input type="text">
	283	+
	284	+ </div>
	285	+
	286	+ </section>
	287	+
	288	+
	289	+ <section class="join-sec3 joinsub">
	290	+ <div class="join-sec-sub">
	291	+ <span>비밀번호</span>
	292	+ </div>
	293	+ <div class="join-sub-input">
	294	+ <input type="text">
	295	+
	296	+ </div>
	297	+ </section>
	298	+
	299	+
	300	+ <section class="join-sec4 joinsub">
	301	+ <div class="join-sec-sub">
	302	+ <span>비밀번호 확인</span>
	303	+ </div>
	304	+ <div class="join-sub-input">
	305	+ <input type="text">
	306	+
	307	+ </div>
	308	+ </section>
	309	+
	310	+
	311	+ <section class="join-sec5 joinsub">
	312	+ <div class="join-sec-sub">
	313	+ <span>담당자명</span>
	314	+ </div>
	315	+ <div>
	316	+ <input type="text">
	317	+
	318	+ </div>
	319	+ </section>
	320	+
	321	+
	322	+ <section class="join-sec6">
	323	+ <div class="join-sec-sub">
	324	+ <span>이메일</span>
	325	+ </div>
	326	+ <div>
	327	+ <input type="text" name="email_id" id="email_id">
	328	+ </div>
	329	+ <div>@</div>
	330	+ <div>
	331	+ <input type="text" name="email_dns" id="email_dns">
	332	+ </div>
	333	+ <div>
	334	+ <select name="email_sel" id="email_sel">
	335	+ <option value="">직접 입력</option>
	336	+ <option value="naver.com">naver</option>
	337	+ <option value="hanmail.net">daum</option>
	338	+ <option value="gmail.com">google</option>
	339	+ </select>
	340	+ </div>
	341	+
	342	+ </section>
	343	+ </div>
62	344	</div>
63	345
64	346
65	347
66	348	<!---------------------------------------------------------------------------------------------------------------->
67	349
68		- <div>
69		- <section class="join-sec">
70		- <div class="join-sec-a">
71		- <h1>회사소개</h1>
72		- </div>
	350	+
	351	+
	352	+ <div class="join-w1400">
	353	+
	354	+ <section class="join-email-bt">
	355	+ <input type="checkbox">
	356	+ <span>E-mail 구독서비스를 신청하시겠습니까?</span>
73	357	</section>
74	358
75		- <section class="join-sec-a-1">
76		- <span>회사명</span>
77		- <input type="text">
78		- </section>
79		- <section class="join-sec-a-1">
80		- <span>우리회사 키워드</span>
81		- <input type="text">
82		- </section>
83		- <section class="join-sec-a-1">
84		- <span>회사 소개글</span>
85		- <input type="text">
	359	+ <section class="join-end-bt">
	360	+ <button>이전</button>
	361	+
	362	+ <button>회원가입</button>
86	363	</section>
87	364	</div>
	365	+
88	366	</div>
89	367	</template>
90	368
91	369	<script>
	370	+
	371	+
92	372	export default {
93	373	data() {
94	374	return {
	375	+ selectedMembership: 'one'
95	376	}
96	377	},
97	378	methods: {
...	...	@@ -109,3 +390,323 @@
109	390	}
110	391	</script>
111	392
	393	+<style scoped>
	394	+.join-b {
	395	+ width: 100%;
	396	+
	397	+ /* border: 1px solid red; */
	398	+}
	399	+
	400	+.join-logo {
	401	+ padding: 6rem;
	402	+}
	403	+
	404	+.join-logo h1 {
	405	+ font-family: SBaggroM;
	406	+ color: #0e0077;
	407	+ font-size: 4rem;
	408	+}
	409	+
	410	+.join-b-button {
	411	+ width: 50%;
	412	+ display: grid;
	413	+ grid-template-columns: 1fr 1fr;
	414	+ margin: 0 auto;
	415	+ gap: 6rem;
	416	+ flex-direction: row;
	417	+ /* padding: 9rem; */
	418	+}
	419	+
	420	+.join-b-button input[type="radio"] {
	421	+ display: none;
	422	+}
	423	+
	424	+.join-b-button button {
	425	+ height: 20rem;
	426	+ display: grid;
	427	+ grid-template-columns: 1fr;
	428	+ border-radius: 2rem;
	429	+ text-align: center;
	430	+ box-shadow: 2px 2px 5px #86868644;
	431	+ /* padding: 1rem; */
	432	+}
	433	+
	434	+.join-b-button button p {
	435	+ padding: 3rem 0 0;
	436	+ /* padding: 3rem 0rem 1rem 3rem; */
	437	+ font-size: 3rem;
	438	+ font-family: SBaggroM;
	439	+ color: #014099;
	440	+
	441	+}
	442	+
	443	+.join-b-button button img {
	444	+ width: 200px;
	445	+ height: 100px;
	446	+ text-align: center;
	447	+ margin: 0 auto;
	448	+ /* border: 1px solid red; */
	449	+ background-position: center;
	450	+}
	451	+
	452	+
	453	+.background {
	454	+ background-color: #000000;
	455	+}
	456	+
	457	+.join-b-button button:nth-child(1).background {
	458	+ background-color: #000000;
	459	+}
	460	+
	461	+
	462	+.light {
	463	+ z-index: 1;
	464	+ background-color: #ff0000;
	465	+}
	466	+
	467	+.join-b-button button:nth-child(2) {
	468	+ background-color: #e6fff1;
	469	+}
	470	+
	471	+.join-b-button button:nth-child(2) img {
	472	+ width: 100px;
	473	+}
	474	+
	475	+.join-b-button button:nth-child(2) p {
	476	+ color: #0e5e2e;
	477	+}
	478	+
	479	+.radio-t {
	480	+ padding: 3rem;
	481	+ height: 25rem;
	482	+ font-size: 3rem;
	483	+ border-radius: 2rem;
	484	+ font-family: SBaggroM;
	485	+ margin: 0 auto;
	486	+ box-shadow: 2px 2px 5px #33333330;
	487	+ text-align: center;
	488	+}
	489	+
	490	+.t1 {
	491	+ padding: 6rem 0;
	492	+ color: #014099;
	493	+ background-color: #e2ecfc;
	494	+}
	495	+
	496	+.t1 img {
	497	+ padding: 1rem;
	498	+ width: 90%;
	499	+ margin: 0 auto;
	500	+}
	501	+
	502	+.t2 img {
	503	+ padding: 1rem;
	504	+ width: 50%;
	505	+ margin: 0 auto;
	506	+
	507	+}
	508	+
	509	+.t2 {
	510	+ padding: 6rem 0;
	511	+ color: #0e5e2e;
	512	+ background-color: #e6fff1;
	513	+}
	514	+
	515	+/* 공통요소-------------------------------------------------------------------------*/
	516	+hr {
	517	+ margin: 1rem 0 3rem 0;
	518	+ border: 1px solid #cbcbcb;
	519	+}
	520	+
	521	+section div span {
	522	+ font-size: 1.5rem;
	523	+ font-family: "Pretendard-Regular";
	524	+
	525	+ float: left;
	526	+ color: #3f87f7;
	527	+ padding: 1rem 5rem 1rem 5rem;
	528	+}
	529	+
	530	+section div input {
	531	+ width: 100%;
	532	+ padding: 1rem;
	533	+ border: 1px solid #cbcbcb;
	534	+ color: #cbcbcb;
	535	+ border-radius: 0.5rem;
	536	+}
	537	+
	538	+section div button {
	539	+ width: 100%;
	540	+ padding: 1rem;
	541	+ cursor: pointer;
	542	+ border-radius: 0.5rem;
	543	+}
	544	+
	545	+section div select {
	546	+ width: 100%;
	547	+ padding: 1rem;
	548	+ border: 1px solid #cbcbcb;
	549	+ border-radius: 0.5rem;
	550	+ color: #6b6b6b;
	551	+ font-family: "Pretendard-Regular";
	552	+
	553	+}
	554	+
	555	+
	556	+/* -------------------------------------------------------------------------------- */
	557	+
	558	+
	559	+
	560	+
	561	+
	562	+
	563	+.login-info,
	564	+.login-info2 {
	565	+ width: 50%;
	566	+ margin: 0 auto;
	567	+
	568	+}
	569	+
	570	+.login-info2 {
	571	+ display: block;
	572	+}
	573	+
	574	+.login-info2.Chacked {
	575	+ display: none;
	576	+}
	577	+
	578	+.login-info h3,
	579	+.login-info2 h3 {
	580	+ color: #0e0077;
	581	+
	582	+ font-size: 2rem;
	583	+ font-family: "Pretendard-Regular";
	584	+
	585	+ padding: 3rem 1rem 1rem 1rem;
	586	+}
	587	+
	588	+.joinsub0 {
	589	+ padding: 1rem;
	590	+ display: grid;
	591	+ grid-template-columns: 200px 2fr 1fr;
	592	+ gap: 1rem;
	593	+}
	594	+
	595	+.j-s-3 {
	596	+ display: grid;
	597	+ grid-template-rows: 30rem;
	598	+}
	599	+
	600	+.j-s-3 input {
	601	+ height: 100%;
	602	+}
	603	+
	604	+.join-sec1 button {
	605	+ font-size: 1.5rem;
	606	+ color: white;
	607	+ font-family: "Pretendard-Regular";
	608	+
	609	+ background-color: #3f87f7;
	610	+}
	611	+
	612	+.joinsub {
	613	+ padding: 1rem;
	614	+ display: grid;
	615	+ grid-template-columns: 200px 2fr;
	616	+ gap: 1rem;
	617	+}
	618	+
	619	+.join-sec6 {
	620	+ padding: 1rem;
	621	+ display: grid;
	622	+ grid-template-columns: 200px 1fr 10px 1fr 1fr;
	623	+ gap: 1rem;
	624	+}
	625	+
	626	+.join-sec6 div:nth-child(3) {
	627	+ padding: 1rem 0;
	628	+ font-size: 1.5rem;
	629	+ font-family: "Pretendard-Regular";
	630	+
	631	+}
	632	+
	633	+.login-info-grid {
	634	+ display: grid;
	635	+ grid-template-columns: 100px 1fr;
	636	+
	637	+}
	638	+
	639	+.join-sec0 {
	640	+ display: grid;
	641	+ padding: 2rem;
	642	+ grid-row: 1 / span 3;
	643	+
	644	+}
	645	+
	646	+.join-sec0 div p {
	647	+ width: 100px;
	648	+ height: 100px;
	649	+ line-height: 100px;
	650	+ border-radius: 50%;
	651	+ text-align: center;
	652	+ color: #333;
	653	+ font-size: 2.5rem;
	654	+ font-family: "Pretendard-Regular";
	655	+ background-color: #b5b5b5;
	656	+ /* border: 1px solid red; */
	657	+ box-shadow: 2px 2px 5px #33333328;
	658	+}
	659	+
	660	+.joinsub0-1 {
	661	+ padding: 1rem;
	662	+ display: grid;
	663	+ grid-template-columns: 200px 2fr;
	664	+
	665	+}
	666	+
	667	+.join-w1400 {
	668	+ width: 50%;
	669	+ margin: 0 auto;
	670	+
	671	+}
	672	+
	673	+.join-email-bt {
	674	+ font-size: 1.6rem;
	675	+ padding: 3rem 3rem 3rem 0rem;
	676	+}
	677	+
	678	+.join-email-bt input[type=checkbox] {
	679	+ margin: 1rem;
	680	+ /* border: 1px solid red; */
	681	+ transform: scale(1.5);
	682	+}
	683	+
	684	+.join-email-bt span {
	685	+ color: #898989;
	686	+ font-family: "Pretendard-Regular";
	687	+
	688	+}
	689	+
	690	+.join-end-bt {
	691	+ display: grid;
	692	+ grid-template-columns: 25% 73%;
	693	+ gap: 1rem;
	694	+ padding: 6rem 0rem 6rem 0rem;
	695	+}
	696	+
	697	+.join-end-bt button {
	698	+ padding: 2rem;
	699	+ cursor: pointer;
	700	+ border-radius: 1.2rem;
	701	+ font-size: 1.5rem;
	702	+ font-family: "Pretendard-Regular";
	703	+
	704	+}
	705	+
	706	+.join-end-bt button:nth-child(2) {
	707	+ background-color: #3f87f7;
	708	+ color: white;
	709	+
	710	+
	711	+}
	712	+</style> (No newline at end of file)

...	...	@@ -1,5 +1,5 @@
1	1	{
2		- "name": "keris-web",
	2	+ "name": "KERIS",
3	3	"lockfileVersion": 3,
4	4	"requires": true,
5	5	"packages": {

Delete comment