[Spring 지하철 경로 조회 - 1,2단계] 다니(이다은) 미션 제출합니다.

README.md

@@ -38,6 +38,22 @@ npm run serve
 ```
 <br>
 
+## 요구사항
+
+> 1단계
+
+- [x] JWT 라이브러리를 활용하여 액세스 토큰 발급 기능을 구현하기
+- [x] 프론트엔드 코드 중 API를 호출하는 부분을 구현하여 기능이 잘 동작하도록 완성하기
+<br>
+
+> 2단계
+
+- [x] 발급한 토큰을 이용하여 로그인이 필요한 기능(회원 정보 수정/삭제) 요청 시 포함하여 보내기
+- [x] 이를 이용하여 기능이 동작하도록 리팩터링 하기
+- [x] 프론트엔드 코드 중 API를 호출하는 부분을 구현하여 기능이 잘 동작하도록 완성하기
+
+<br>
+
 ## ✏️ Code Review Process
 [텍스트와 이미지로 살펴보는 온라인 코드 리뷰 과정](https://github.com/next-step/nextstep-docs/tree/master/codereview)
 

build.gradle

@@ -17,6 +17,7 @@ dependencies {
 	// spring
 	implementation 'org.springframework.boot:spring-boot-starter-web'
 	implementation 'org.springframework.boot:spring-boot-starter-jdbc'
+	implementation 'org.springframework.boot:spring-boot-starter-validation'
 
 	// handlebars
 	implementation 'pl.allegro.tech.boot:handlebars-spring-boot-starter:0.3.0'

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

frontend/src/pages/member/JoinPage.vue

@@ -94,9 +94,20 @@ export default {
         return;
       }
       try {
-        // TODO member를 생성하는 API를 추가해주세요.
-        // const { email, age, password } = this.member;
-        // await fetch("/join", { email, age, password })
+        // member를 생성하는 API를 추가해주세요.
+        const { email, age, password } = this.member;
+        let data = {
+          email: email,
+          age: age,
+          password: password
+        }
+        await fetch("/api/members", {
+          method: 'POST',
+          body: JSON.stringify(data),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        });
         this.showSnackbar(SNACKBAR_MESSAGES.COMMON.SUCCESS);
         await this.$router.replace(`/login`);
       } catch (e) {

frontend/src/pages/member/LoginPage.vue

@@ -73,12 +73,38 @@ export default {
         return;
       }
       try {
-        // TODO login API를 작성해주세요.
-        // const { email, password } = this.member;
-        // const data = await fetch("/login")
-        // TODO member 데이터를 불러와 주세요.
-        // const member = wait fetch("/members/me")
-        // this.setMember(member);
+        // login API를 작성해주세요.
+        const { email, password } = this.member;
+        let tokenResponse = await fetch("/api/login/token", {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            email: email,
+            password: password
+          })
+        });
+        if (!tokenResponse.ok) {
+          throw new Error(`${tokenResponse.status}`);
+        }
+        let token = await tokenResponse.json();
+        localStorage.setItem("token", token.accessToken);
+
+        // member 데이터를 불러와 주세요.
+        let memberResponse = await fetch("/api/members/me", {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token.accessToken
+          }
+        });
+        if (!memberResponse.ok) {
+          throw new Error(`${memberResponse.status}`);
+        }
+        let member = await memberResponse.json();
+        this.setMember(member);
+
         await this.$router.replace(`/`);
         this.showSnackbar(SNACKBAR_MESSAGES.LOGIN.SUCCESS);
       } catch (e) {

frontend/src/pages/member/MyPage.vue

@@ -64,9 +64,16 @@ export default {
         return;
       }
       try {
-        // TODO 유저를 삭제하는 API를 추가해주세요
-        // await fetch("/api/users/{this.member.id}")
+        // 유저를 삭제하는 API를 추가해주세요
+        await fetch("/api/members/me", {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + localStorage.getItem("token")
+          }
+        });
         this.setMember(null);
+
         this.showSnackbar(SNACKBAR_MESSAGES.MEMBER.DELETE.SUCCESS);
         await this.$router.replace("/");
       } catch (e) {

frontend/src/pages/member/MyPageEdit.vue

@@ -9,48 +9,48 @@
           <v-card-text class="px-4 pt-4 pb-0">
             <div class="d-flex">
               <v-text-field
-                color="grey darken-1"
-                label="이메일을 입력해주세요."
-                v-model="editingMember.email"
-                prepend-inner-icon="mdi-email"
-                dense
-                outlined
-                :rules="rules.member.email"
+                  color="grey darken-1"
+                  label="이메일을 입력해주세요."
+                  v-model="editingMember.email"
+                  prepend-inner-icon="mdi-email"
+                  dense
+                  outlined
+                  :rules="rules.member.email"
               ></v-text-field>
             </div>
             <div class="d-flex mt-2">
               <v-text-field
-                color="grey darken-1"
-                label="나이를 입력해주세요."
-                v-model="editingMember.age"
-                prepend-inner-icon="mdi-account"
-                dense
-                outlined
-                :rules="rules.member.age"
+                  color="grey darken-1"
+                  label="나이를 입력해주세요."
+                  v-model="editingMember.age"
+                  prepend-inner-icon="mdi-account"
+                  dense
+                  outlined
+                  :rules="rules.member.age"
               ></v-text-field>
             </div>
             <div class="d-flex mt-2">
               <v-text-field
-                color="grey darken-1"
-                label="비밀번호를 입력해주세요."
-                v-model="editingMember.password"
-                prepend-inner-icon="mdi-lock"
-                type="password"
-                dense
-                outlined
-                :rules="rules.member.password"
+                  color="grey darken-1"
+                  label="비밀번호를 입력해주세요."
+                  v-model="editingMember.password"
+                  prepend-inner-icon="mdi-lock"
+                  type="password"
+                  dense
+                  outlined
+                  :rules="rules.member.password"
               ></v-text-field>
             </div>
             <div class="d-flex mt-2">
               <v-text-field
-                color="grey darken-1"
-                label="비밀번호를 한번 더 입력해주세요."
-                type="password"
-                prepend-inner-icon="mdi-lock"
-                dense
-                outlined
-                v-model="editingMember.confirmPassword"
-                :rules="[
+                  color="grey darken-1"
+                  label="비밀번호를 한번 더 입력해주세요."
+                  type="password"
+                  prepend-inner-icon="mdi-lock"
+                  dense
+                  outlined
+                  v-model="editingMember.confirmPassword"
+                  :rules="[
                   (editingMember.password &&
                     editingMember.password === editingMember.confirmPassword) ||
                     '비밀번호가 일치하지 않습니다.',
@@ -64,10 +64,10 @@
               취소
             </v-btn>
             <v-btn
-              @click.prevent="onEditMember"
-              :disabled="!valid"
-              color="amber"
-              depressed
+                @click.prevent="onEditMember"
+                :disabled="!valid"
+                color="amber"
+                depressed
             >
               확인
             </v-btn>
@@ -79,9 +79,9 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from "vuex";
-import { SET_MEMBER, SHOW_SNACKBAR } from "../../store/shared/mutationTypes";
-import { SNACKBAR_MESSAGES } from "../../utils/constants";
+import {mapGetters, mapMutations} from "vuex";
+import {SET_MEMBER, SHOW_SNACKBAR} from "../../store/shared/mutationTypes";
+import {SNACKBAR_MESSAGES} from "../../utils/constants";
 import validator from "../../utils/validator";
 
 export default {
@@ -90,7 +90,7 @@ export default {
     ...mapGetters(["member"]),
   },
   created() {
-    const { email, age } = this.member;
+    const {email, age} = this.member;
     this.editingMember = {
       email,
       age,
@@ -105,9 +105,22 @@ export default {
     },
     async onEditMember() {
       try {
-        // TODO member 정보를 update하는 API를 추가해주세요
-        // const { email, age, password } = this.editingMember;
-        // await fetch("/api/users/{this.member.id}", { email, age, password })
+        // member 정보를 update하는 API를 추가해주세요
+        const {email, age, password} = this.editingMember;
+        await fetch("/api/members/me", {
+          method: 'PUT',
+          body: JSON.stringify({
+            email: email,
+            age: age,
+            password: password
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + localStorage.getItem("token")
+          }
+        });
+        this.setMember(this.editingMember);
+
         this.showSnackbar(SNACKBAR_MESSAGES.MEMBER.EDIT.SUCCESS);
         await this.$router.replace("/mypage");
       } catch (e) {
@@ -120,7 +133,7 @@ export default {
     return {
       editingMember: {},
       valid: false,
-      rules: { ...validator },
+      rules: {...validator},
     };
   },
 };

frontend/src/pages/station/StationPage.vue

@@ -66,7 +66,7 @@ export default {
   },
   async created() {
     // TODO 초기 역 데이터를 불러오는 API를 추가해주세요.
-    const response = await fetch("/api/stations");
+    const response = await fetch("http://localhost:8080/stations");
     if (!response.ok) {
       throw new Error(`${response.status}`);
     }
@@ -84,7 +84,7 @@ export default {
       }
       try {
         // TODO 역을 추가하는 API Sample
-        const response = await fetch("/api/stations", {
+        const response = await fetch("http://localhost:8080/stations", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -113,7 +113,7 @@ export default {
     async onDeleteStation(stationId) {
       try {
         // TODO 역을 삭제하는 API를 추가해주세요.
-        // await fetch("/api/stations/{id}");
+        // await fetch("http://localhost:8080/stations/{id}");
         const idx = this.stations.findIndex(
           (station) => station.id === stationId
         );

frontend/vue.config.js

@@ -1,5 +1,13 @@
+const path = require('path');
 module.exports = {
-  transpileDependencies: [
-    'vuetify'
-  ]
-}
+  outputDir: path.resolve(__dirname, '../src/main/resources/static/'),
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        ws: true,
+        changeOrigin: true,
+      },
+    },
+  },
+};

src/main/java/wooteco/subway/DataLoader.java

@@ -15,10 +15,10 @@
 @Component
 @Profile("!test")
 public class DataLoader implements CommandLineRunner {
-    private StationDao stationDao;
-    private LineDao lineDao;
-    private SectionDao sectionDao;
-    private MemberDao memberDao;
+    private final StationDao stationDao;
+    private final LineDao lineDao;
+    private final SectionDao sectionDao;
+    private final MemberDao memberDao;
 
     public DataLoader(StationDao stationDao, LineDao lineDao, SectionDao sectionDao, MemberDao memberDao) {
         this.stationDao = stationDao;

src/main/java/wooteco/subway/SubwayApplication.java

@@ -6,8 +6,8 @@
 @SpringBootApplication
 public class SubwayApplication {
 
-	public static void main(String[] args) {
-		SpringApplication.run(SubwayApplication.class, args);
-	}
+    public static void main(String[] args) {
+        SpringApplication.run(SubwayApplication.class, args);
+    }
 
 }

src/main/java/wooteco/subway/WebConfig.java

@@ -0,0 +1,13 @@
+package wooteco.subway;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**").allowedMethods("*").allowedOriginPatterns("*");
+    }
+}