강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Back-end

カカオ、Google SNSログイン(springboot3, vue3)

Spring Bootを活用してカカオ、Googleログインを実装します。JWTトークンベースのログインが実装されます。Vue 3を通じて簡単な画面を構成します。

（4.9）受講レビュー 34件

受講生 257名

難易度 初級

受講期間 無制限

OAuth
OAuth
oauth2
oauth2
JWT
JWT
Spring Boot
Spring Boot
Vue.js
Vue.js
OAuth
OAuth
oauth2
oauth2
JWT
JWT
Spring Boot
Spring Boot
Vue.js
Vue.js

学習した受講者のレビュー

4.9

5.0

cksdnddlek99

95% 受講後に作成

ソーシャルログインの責任分担について悩んでいましたが、講義で明確に教えてくださってとても良かったです。 質の良い講義を制作してくださってありがとうございます。

5.0

김경환

100% 受講後に作成

豊富な学習資料と質の高い講義、大変勉強になりました。 ソーシャルログイン認証の過程で、単純な検索だけでは理解に苦しんでいた最中、私が知りたかったソーシャルログインのすべてを教えてくれるこの講義を見つけたおかげで、時間が経つのも忘れて受講しました :D

5.0

몽몽

95% 受講後に作成

ソーシャルログインを実装しようと、あちこちのブログを探しながら無駄骨ばかり折っていましたが、OAuthが行われる流れに沿ってコードを作成してくださったので、とても理解しやすかったです。他の講義も受講したことがありますが、講義力とても素晴らしいです！

受講後に得られること

  • Spring Boot 3.xにおけるJWTトークンベースのログイン実装

  • OAuthベースの会員登録、ログイン

  • Googleログイン、カカオログインの実装とコンソール作業

1. 学習内容📕

  • Google/Kakao SNSログインの実装（フロント、バックエンド）


  • 2つの実装方式によるOAuthログイン

    • 方法1)フロントエンド(認可コード)、サーバー(アクセストークン、ユーザー情報)方式のSNSログイン

    • 方法2)springのoauth2-clientを活用したサーバー(認可コード、accessトークン、ユーザー情報)方式のsnsログイン


  • Google、Kakaoのコンソール作業から授業で一緒に行います

2. 技術スタックと注意事項 📢

  • バックエンド

    • Java 17, Spring Boot 3.4ベースのRESTful API開発、Spring Data JPA、JWTトークンログイン、MySQL

  • フロント

    • html/css/js, vue3, vuetify, vue-routerなどを活用

  • 注意事項

    • 上記の技術スタックに関する基礎知識があることが望ましいですが、理解が不足していても授業を進める上で大きな支障はありません。

    • 特に、vueパートは非常に少ないコード作成で済むため、無理なくついていくことができます。githubにコードも公開されていますので、手軽にコピペで授業を進めていただいても構いません。

    • カカオログインの変更事項)

3. 授業資料 📢

こんな方に
おすすめです

学習対象は
誰でしょう？

  • SNSログインを実装してみたい開発者

  • OAuthの実装経験はあるが、構造への理解が不足していた人

  • OAuth実装において、バックエンドの領域とフロントの領域の区分が気になっていた開発者

こんにちは
bradkimです。

インフラン認証

キャリア認証

3,805

受講生

406

受講レビュー

137

回答

4.9

講座評価

12

講座

💪💪💪実務と講義の経歴を兼ね備えた専門家 💪💪💪

こんにちは、金善国（キム・ソングク）です。延世大学を卒業し、大企業やスタートアップなどでソフトウェアエンジニアとして働いてきました。現在は企業研修やブートキャンプの専業講師として活動しています。実務経験と講義経験を兼ね備えた講師として、皆さんに必ず知っておくべき知識を中心に分かりやすくお伝えします。

プロフィール：https://www.linkedin.com/in/seongukkim

企業教育に関するお問い合わせ：ksg39412@naver.com

もっと見る

カリキュラム

全体

20件 ∙ (6時間 36分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

34件

4.9

34件の受講レビュー

  • vidkid님의 프로필 이미지
    vidkid

    受講レビュー 7

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    とても助かりました。 ありがとうございます〜

    • kukaeden님의 프로필 이미지
      kukaeden

      受講レビュー 531

      ∙

      平均評価 5.0

      5

      60% 受講後に作成

      Spring Boot 3.0でのSpring SecurityとOAuth設定について良く学びました！特にVue3画面についての説明もしていただいて、より興味を持って進めることができたと思います。良い講義をありがとうございます！

      • bigho982715님의 프로필 이미지
        bigho982715

        受講レビュー 24

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        ソーシャルログインとOAuth2は、Spring Securityのように複雑で膨大なものだろうという漠然とした不安があり、これまで手を出せずにいました。しかし、この講義を通じて、認可コード - アクセストークン - ユーザー情報へと続く一連のリクエストの流れを明確に実感することができました。 また、フロントエンドとバックエンド両方のコードを記述することで、各領域の責任範囲やセキュリティ上の問題点も確実に理解することができました。 この講義は、ソーシャルログインとJWTについて簡潔かつ密度の高い講義です。質の高い講義をありがとうございました。

        • bradkim
          知識共有者

          bigho98様、いつも丁寧な受講評をいただきありがとうございます！これからもより良い講義をお届けできるよう努めてまいります。

      • yoojinleedev2252님의 프로필 이미지
        yoojinleedev2252

        受講レビュー 21

        ∙

        平均評価 5.0

        5

        30% 受講後に作成

        完走するまでファイティング

        • wogusrla778193님의 프로필 이미지
          wogusrla778193

          受講レビュー 1

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          おかげでjwt + oauthログインまでの流れを理解するのにとても役立ちました!

          bradkimの他の講座

          知識共有者の他の講座を見てみましょう！

          LLMを活用したリアルタイムSQL生成(Text-To-SQL)講義サムネイル

          LLMを活用したリアルタイムSQL生成(Text-To-SQL)

          bradkim

          ユーザーの質問に対してリアルタイムでSQL文を生成し、照会を行うText-To-SQLシステムについて学ぶことができます。

          入門

          入門

          Python, Chatbot, FastAPI

          LLMを活用したリアルタイムSQL生成(Text-To-SQL)講義サムネイル

          LLMを活用したリアルタイムSQL生成(Text-To-SQL)

          bradkim

          チャットボットを作りながら学ぶAIエージェント開発のすべて（FastAPI、RAG、Vector、LangChain、sLLM/ファインチューニング）講義サムネイル

          チャットボットを作りながら学ぶAIエージェント開発のすべて（FastAPI、RAG、Vector、LangChain、sLLM/ファインチューニング）

          bradkim

          現時点で最も重要なAI関連技術を網羅したRAG、VectorDB、LangChain、OpenAI、sLLM、ファインチューニングについて学びます。

          入門

          入門

          RAG, vector-database, FastAPI

          チャットボットを作りながら学ぶAIエージェント開発のすべて（FastAPI、RAG、Vector、LangChain、sLLM/ファインチューニング）講義サムネイル

          チャットボットを作りながら学ぶAIエージェント開発のすべて（FastAPI、RAG、Vector、LangChain、sLLM/ファインチューニング）

          bradkim

          EKSを活用したSpring運用サーバーのデプロイ（feat. DevOpsのすべて）講義サムネイル

          EKSを活用したSpring運用サーバーのデプロイ（feat. DevOpsのすべて）

          bradkim

          ドメインの購入およびEKSを活用したSpringBoot運用サーバーのデプロイ、Dockerの基礎、Kubernetesの基礎、AWSの基礎、GitHub Actionsを通じたCI/CD自動化、ArgoCD、Prometheus/Grafanaなど、DevOps全般について学びます。

          初級

          初級

          AWS, Docker, Kubernetes

          EKSを活用したSpring運用サーバーのデプロイ（feat. DevOpsのすべて）講義サムネイル

          EKSを活用したSpring運用サーバーのデプロイ（feat. DevOpsのすべて）

          bradkim

          実践活用のためのgit/github（feat.各種コンフリクト状況の解決）講義サムネイル

          実践活用のためのgit/github（feat.各種コンフリクト状況の解決）

          bradkim

          Git/GitHubの基礎的な知識から、実務で直面する様々な衝突（コンフリクト）状況に対する実践的な解決策と戦略までを学びます。

          入門

          入門

          Git, GitHub, gitlab

          実践活用のためのgit/github（feat.各種コンフリクト状況の解決）講義サムネイル

          実践活用のためのgit/github（feat.各種コンフリクト状況の解決）

          bradkim

          核心だけを素早く終わらせる実践カフカ(kafka)講義サムネイル

          核心だけを素早く終わらせる実践カフカ(kafka)

          bradkim

          SW開発者が知っておくべきKafka活用のための基礎・必須・実践知識を学びます。SpringBootを活用してKafkaと連携し、さまざまな実践状況に合わせたメッセージ送受信の実習を行います。

          入門

          入門

          Spring Boot, Kafka, MSA

          核心だけを素早く終わらせる実践カフカ(kafka)講義サムネイル

          核心だけを素早く終わらせる実践カフカ(kafka)

          bradkim

          開発者なら知っておくべき Linux (Ubuntu) 基本講義サムネイル

          開発者なら知っておくべき Linux (Ubuntu) 基本

          bradkim

          DevOpsやLinuxのエキスパートでなくても、開発者なら必ず知っておくべきLinuxの必須知識について学びます。ハンズオン形式で授業が進められます。

          入門

          入門

          Linux, ubuntu, Shell Script

          開発者なら知っておくべき Linux (Ubuntu) 基本講義サムネイル

          開発者なら知っておくべき Linux (Ubuntu) 基本

          bradkim

          開発者が知っておくべき Redis の基本講義サムネイル

          開発者が知っておくべき Redis の基本

          bradkim

          REDIS の基本的なデータ構造と REDIS の実務活用例を redis-cli (コマンド) 実習を通じて学びます。

          入門

          入門

          Redis, devops, database

          開発者が知っておくべき Redis の基本講義サムネイル

          開発者が知っておくべき Redis の基本

          bradkim

          Websocket/STOMP チャット サービス (spring、vue、redis)講義サムネイル

          Websocket/STOMP チャット サービス (spring、vue、redis)

          bradkim

          Websocket/stomp、springboot を活用してチャット サービスを開発します。比較的簡単なフレームワークである vue.js を使用して、簡単な画面も構成します。redis pub/sub を使用して、マルチ サーバー拡張性設計も構成します。

          初級

          初級

          websocket, pubsub, Spring Boot

          Websocket/STOMP チャット サービス (spring、vue、redis)講義サムネイル

          Websocket/STOMP チャット サービス (spring、vue、redis)

          bradkim

          スピーディーに学ぶSpring Cloud基礎(MSA)講義サムネイル

          スピーディーに学ぶSpring Cloud基礎(MSA)

          bradkim

          Spring Cloudを活用したMSAサーバー構成について学習します。

          初級

          初級

          Spring Cloud, MSA, eureka

          スピーディーに学ぶSpring Cloud基礎(MSA)講義サムネイル

          スピーディーに学ぶSpring Cloud基礎(MSA)

          bradkim

          MariaDB(MySQL)のすべて - 基本編講義サムネイル

          MariaDB(MySQL)のすべて - 基本編

          bradkim

          開発初心者、バックエンド開発者、SQLD試験準備受講生など、開発者なら知っておくべきMariaDB(MySQL)のすべてを学びます。授業は、実際にDBを構築する実習中心で進められます。

          入門

          入門

          MariaDB, MySQL

          MariaDB(MySQL)のすべて - 基本編講義サムネイル

          MariaDB(MySQL)のすべて - 基本編

          bradkim

          MariaDB(MySQL)のすべて - 深刻な編講義サムネイル

          MariaDB(MySQL)のすべて - 深刻な編

          bradkim

          開発初心者、バックエンド開発者、SQLD試験準備受講生など、開発者なら知っておくべきMariaDB(MySQL)のすべてを学びます。授業は、実際にDBを構築する実習中心で進められます。

          初級

          初級

          MariaDB, MySQL, sql-join

          MariaDB(MySQL)のすべて - 深刻な編講義サムネイル

          MariaDB(MySQL)のすべて - 深刻な編

          bradkim

          似ている講座

          同じ分野の他の講座を見てみましょう！

          Vue 3 を始める講義サムネイル

          Vue 3 を始める

          captain

          Vue.jsの最新バージョンVue 3を始める方のための講座です。Vue.jsの動作原理から実務開発を行う際に知っておくべき基本概念を学びましょう。

          初級

          初級

          Vue.js, Vue 3, JavaScript

          Vue 3 を始める講義サムネイル

          Vue 3 を始める

          captain

          GitHub Copilotで体験するバイブコーディング(feat. Java, Spring)講義サムネイル

          GitHub Copilotで体験するバイブコーディング(feat. Java, Spring)

          codebridge

          企業で現役エンジニアが活用するCopilot！ Copilot活用のコツからユニットテスト、API統合テストまでバイブコーディングで！ 現場のノウハウで10倍速いディレクターへと飛躍しましょう。

          入門

          入門

          Java, Spring, Spring Boot

          GitHub Copilotで体験するバイブコーディング(feat. Java, Spring)講義サムネイル

          GitHub Copilotで体験するバイブコーディング(feat. Java, Spring)

          codebridge

          ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)講義サムネイル

          ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)

          hodolman888675

          単にアプリケーションを 1 つ作成するだけではありません。Spring Boot を活用したバックエンドから Vue.js モダン フロントエンド スタックを連携したサービスの完成まで、A から Z までご紹介します。

          中級以上

          中級以上

          Spring Boot, JPA, AWS

          ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)講義サムネイル

          ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)

          hodolman888675

          Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで講義サムネイル

          Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで

          sir24is

          様々な通信技法について学び、その違いを理解することで、最も適切な通信方法を選択し実装する能力を身につけることができます。

          入門

          入門

          JavaScript, React, Java

          Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで講義サムネイル

          Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで

          sir24is

          プロジェクトで学ぶVue.js 3講義サムネイル

          プロジェクトで学ぶVue.js 3

          kossiecoder

          Vue.js 3の使い方を学び、プロジェクトに適用しながら習得するのに役立ちます。

          初級

          初級

          Vue.js, Vuex, Web Application

          プロジェクトで学ぶVue.js 3講義サムネイル

          プロジェクトで学ぶVue.js 3

          kossiecoder

          Vue 3 中級 - Composition API講義サムネイル

          Vue 3 中級 - Composition API

          captain

          Vue 2と最新のVue 3の両方で使用できるVue Composition APIを最も簡単かつ正確に学べる講座!

          中級以上

          中級以上

          Vue 3, Vue.js

          Vue 3 中級 - Composition API講義サムネイル

          Vue 3 中級 - Composition API

          captain

          最新のSpring AIの基礎からMCPまで講義サムネイル

          最新のSpring AIの基礎からMCPまで

          tootoo

          Spring BootとReactを使用している開発者、そして企業環境でAIシステムの導入を検討している開発者の方々に、Spring AIを強くお勧めします。 本コースでは、単なるライブラリの紹介にとどまらず、Spring AIの核心概念と内部構造を理解した上で、多様な実習例を通じて直接実装しながら実務への適用能力を強化します。 Spring AI 1.1.xバージョンを基準に説明し、今後のバージョンアップにも対応できるよう、継続的な技術サポートと拡張の方向性を共に提示します。 また、MCP（Model Context Protocol）を活用してドメイン間のコンテキスト統合や分散環境でのAI連携、そしてエンタープライズ環境に適したAIアーキテクチャ設計を実現することで、Spring AI技術の活用価値を一段と高めます。 企業環境で実際に導入可能なAIシステムの構築を目標に、理論と実習をバランスよく扱う実践中心のガイドとなるでしょう。

          初級

          初級

          Spring Boot, ChatGPT, RAG

          最新のSpring AIの基礎からMCPまで講義サムネイル

          最新のSpring AIの基礎からMCPまで

          tootoo

          本当のjOOQ！ Type Safe SQL with Java講義サムネイル

          本当のjOOQ！ Type Safe SQL with Java

          sdm32851630

          jOOQでType SafeしたSQLの強力さを体験してください！

          中級以上

          中級以上

          Java, jooq, SQL

          本当のjOOQ！ Type Safe SQL with Java講義サムネイル

          本当のjOOQ！ Type Safe SQL with Java

          sdm32851630

          Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する講義サムネイル

          Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

          neneee

          Spring Boot + React.js ログイン（+ソーシャル）サービスを理解するとは、 JWTベース認証およびソーシャルログイン(Kakao/Google)を含む実践型ログインシステムを直接実装しながら、 フロントエンドとバックエンドの認証フローを深く理解できるように設計された講座です。 フロントエンドはReact.js、バックエンドはSpring Bootをベースに構成されており、実際のサービス環境で使われる Access Token + Refresh Token方式、HttpOnly Cookie、Reduxを活用したユーザー状態管理、 Roleベース権限処理、ソーシャルログイン連携まで一つずつ実践しながら習得できます。

          初級

          初級

          React, Node.js, REST API

          Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する講義サムネイル

          Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

          neneee

          SpringBootでのWebSocket、STOMP講義サムネイル

          SpringBootでのWebSocket、STOMP

          Hello World

          1時間だけ投資すれば、SpringBootでWebSocket、STOMP関連の核心事項をすべて学ぶことができます。

          初級

          初級

          Spring Boot, stomp-websocket, Java

          SpringBootでのWebSocket、STOMP講義サムネイル

          SpringBootでのWebSocket、STOMP

          Hello World

          実務にすぐ適用するSpring AI：Springサービスにチャットボット・RAG・MCPを導入する講義サムネイル

          実務にすぐ適用するSpring AI：Springサービスにチャットボット・RAG・MCPを導入する

          synee

          自分のSpringプロジェクトに今すぐAIを取り入れたい開発者のための、最も確実な実践ガイド！ 単なるLLM APIの呼び出しを超え、RAGやMCPを活用して実際のビジネスロジックに即座に適用可能な、実務レベルのAI環境を完璧に学びます。

          入門

          入門

          Spring Boot, Elasticsearch, vector-database

          実務にすぐ適用するSpring AI：Springサービスにチャットボット・RAG・MCPを導入する講義サムネイル

          実務にすぐ適用するSpring AI：Springサービスにチャットボット・RAG・MCPを導入する

          synee

          最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理講義サムネイル

          最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

          gymcoding

          "Vue 3 完全マスター" 後続の講義で最新の Vue 3 バージョンのプロジェクト設定と最新のスペックを習得する講義です。

          初級

          初級

          Vue.js, Vue 3, TailwindCSS

          最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理講義サムネイル

          最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

          gymcoding

          Websocket/STOMP チャット サービス (spring、vue、redis)講義サムネイル

          Websocket/STOMP チャット サービス (spring、vue、redis)

          bradkim

          Websocket/stomp、springboot を活用してチャット サービスを開発します。比較的簡単なフレームワークである vue.js を使用して、簡単な画面も構成します。redis pub/sub を使用して、マルチ サーバー拡張性設計も構成します。

          初級

          初級

          websocket, pubsub, Spring Boot

          Websocket/STOMP チャット サービス (spring、vue、redis)講義サムネイル

          Websocket/STOMP チャット サービス (spring、vue、redis)

          bradkim

          誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成講義サムネイル

          誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成

          Neo

          誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作り Springbootでサーバーを開発し、ReactNativeで自分だけの掲示板を作ってみましょう!!

          初級

          初級

          JavaScript, React Native, Java

          誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成講義サムネイル

          誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成

          Neo

          誰よりも早く学ぶSpringboot + React RestAPI掲示板作り講義サムネイル

          誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

          Neo

          誰よりも早く学ぶSpringboot + React RestAPI掲示板作り Springbootでサーバーを開発し、Reactで自分だけの掲示板を作ってみましょう!!

          初級

          初級

          React, Java, Kotlin

          誰よりも早く学ぶSpringboot + React RestAPI掲示板作り講義サムネイル

          誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

          Neo

          [Season 1] Spring AI 実践：プレミアム予約AIエージェント開発講義サムネイル

          [Season 1] Spring AI 実践：プレミアム予約AIエージェント開発

          bitcocom

          Spring AI + JPA + MySQLを活用した「自律行動型」プレミアム予約エージェントのバックエンド開発 チャットボットを超えてエージェントへ：Tool Callingとプロンプトエンジニアリングの定石

          初級

          初級

          Java, Spring Boot, backend

          [Season 1] Spring AI 実践：プレミアム予約AIエージェント開発講義サムネイル

          [Season 1] Spring AI 実践：プレミアム予約AIエージェント開発

          bitcocom

          核心だけを素早く終わらせる実践カフカ(kafka)講義サムネイル

          核心だけを素早く終わらせる実践カフカ(kafka)

          bradkim

          SW開発者が知っておくべきKafka活用のための基礎・必須・実践知識を学びます。SpringBootを活用してKafkaと連携し、さまざまな実践状況に合わせたメッセージ送受信の実習を行います。

          入門

          入門

          Spring Boot, Kafka, MSA

          核心だけを素早く終わらせる実践カフカ(kafka)講義サムネイル

          核心だけを素早く終わらせる実践カフカ(kafka)

          bradkim

          1時間でチキンコンボ代で学ぶサーバーデプロイ講義サムネイル

          1時間でチキンコンボ代で学ぶサーバーデプロイ

          Neo

          チキンコンボの値段でSpring Bootを 手動デプロイ -> Dockerでデプロイ -> Github Action CI/CD の順にデプロイ過程を学びます!

          初級

          初級

          AWS, Docker, Spring Boot

          1時間でチキンコンボ代で学ぶサーバーデプロイ講義サムネイル

          1時間でチキンコンボ代で学ぶサーバーデプロイ

          Neo

          実践ですぐに使えるElasticsearch入門（検索最適化編）講義サムネイル

          実践ですぐに使えるElasticsearch入門（検索最適化編）

          jscode

          非専門家の方でも簡単に理解でき、実務ですぐに活用できる「Elasticsearch入門」講座を作ってみました！

          初級

          初級

          Spring Boot, Elasticsearch, devops

          実践ですぐに使えるElasticsearch入門（検索最適化編）講義サムネイル

          実践ですぐに使えるElasticsearch入門（検索最適化編）

          jscode

          SpringAI + Reactで作る自分だけの感情日記サービス講義サムネイル

          SpringAI + Reactで作る自分だけの感情日記サービス

          Neo

          SpringAI + Reactで作る自分だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です！

          初級

          初級

          React, Kotlin, Spring Boot

          SpringAI + Reactで作る自分だけの感情日記サービス講義サムネイル

          SpringAI + Reactで作る自分だけの感情日記サービス

          Neo

          期間限定セール、あと06:52:10日で終了

          ￥31

          28%

          ￥7,236