diff --git a/README.md b/README.md
new file mode 100644
index 00000000..54108844
--- /dev/null
+++ b/README.md
@@ -0,0 +1,92 @@
+# 📖 하루스터디([haru-study.com](haru-study.com))
+
+### 시스템 구성도
+![image](https://github.com/woowacourse-teams/2023-haru-study/assets/77962265/15963d75-ca21-4662-8a60-8381cab0523b)
+
+
+### 팀 구성
+<table>
+  <tr>
+    <td align="center" width="140px">
+      <p>Backend</p>
+    </td>
+    <td align="center" width="140px">
+      <p>Backend</p>
+    </td>
+    <td align="center" width="140px">
+      <p>Backend</p>
+    </td>
+    <td align="center" width="140px">
+      <p>Backend</p>
+    </td>
+    <td align="center" width="140px">
+      <p>Frontend</p>
+    </td>
+    <td align="center" width="140px">
+      <p>Frontend</p>
+    </td>
+    <td align="center" width="140px">
+      <p>Frontend</p>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/78679830?v=4" alt="테오(최우성) 프로필" />
+    </td>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/35948985?v=4" alt="마코(이규성) 프로필" />
+    </td>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/77962265?v=4" alt="모디(전제희) 프로필" />
+    </td>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/31722737?v=4" alt="히이로(문제웅) 프로필" />
+    </td>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/78894403?v=4" alt="엽토(김건엽) 프로필" />
+    </td>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/57981252?v=4" alt="노아(김홍동) 프로필" />
+    </td>
+    <td align="center" width="120px">
+        <img src="https://avatars.githubusercontent.com/u/73513965?v=4" alt="룩소(우정균) 프로필" />
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/woosung1223" target="_blank">
+        테오(최우성)
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/aak2075" target="_blank">
+        마코(이규성)
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/jaehee329" target="_blank">
+        모디(전제희)
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/MoonJeWoong" target="_blank">
+        히이로(문제웅) 
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/yeopto" target="_blank">
+        엽토(김건엽)
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/nlom0218" target="_blank">
+        노아(김홍동)
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/woo-jk" target="_blank">
+        룩소(우정균)
+      </a>
+    </td>
+  </tr>
+</table>
diff --git a/backend/build.gradle b/backend/build.gradle
index 3bb619ab..210b3ea7 100644
--- a/backend/build.gradle
+++ b/backend/build.gradle
@@ -26,10 +26,10 @@ dependencies {
 	implementation 'org.springframework.boot:spring-boot-starter-web'
 	implementation 'org.springframework.boot:spring-boot-starter-validation'
 	implementation 'org.springframework.boot:spring-boot-starter-webflux'
+	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
 
 	implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.1.0'
 
-
 	implementation 'org.springframework.boot:spring-boot-starter-actuator'
 	implementation 'io.micrometer:micrometer-registry-prometheus'
 
diff --git a/backend/src/main/java/harustudy/backend/HaruStudyApplication.java b/backend/src/main/java/harustudy/backend/HaruStudyApplication.java
index f23d3627..a2e7da38 100644
--- a/backend/src/main/java/harustudy/backend/HaruStudyApplication.java
+++ b/backend/src/main/java/harustudy/backend/HaruStudyApplication.java
@@ -3,7 +3,9 @@
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.data.jpa.repository.config.EnableJpaAuditing;
+import org.springframework.scheduling.annotation.EnableScheduling;
 
+@EnableScheduling
 @EnableJpaAuditing
 @SpringBootApplication
 public class HaruStudyApplication {
diff --git a/backend/src/main/java/harustudy/backend/auth/AuthArgumentResolver.java b/backend/src/main/java/harustudy/backend/auth/AuthArgumentResolver.java
index 0294c100..3207f66c 100644
--- a/backend/src/main/java/harustudy/backend/auth/AuthArgumentResolver.java
+++ b/backend/src/main/java/harustudy/backend/auth/AuthArgumentResolver.java
@@ -2,7 +2,7 @@
 
 import harustudy.backend.auth.dto.AuthMember;
 import harustudy.backend.auth.service.AuthService;
-import java.util.Objects;
+import harustudy.backend.auth.util.BearerAuthorizationParser;
 import lombok.RequiredArgsConstructor;
 import org.springframework.core.MethodParameter;
 import org.springframework.http.HttpHeaders;
@@ -16,10 +16,10 @@
 @Component
 public class AuthArgumentResolver implements HandlerMethodArgumentResolver {
 
-    private static final int ACCESS_TOKEN_LOCATION = 1;
-
     private final AuthService authService;
 
+    private final BearerAuthorizationParser bearerAuthorizationParser;
+
     @Override
     public boolean supportsParameter(MethodParameter parameter) {
         return parameter.hasParameterAnnotation(Authenticated.class);
@@ -29,8 +29,7 @@ public boolean supportsParameter(MethodParameter parameter) {
     public AuthMember resolveArgument(MethodParameter parameter, ModelAndViewContainer mavContainer,
                                       NativeWebRequest webRequest, WebDataBinderFactory binderFactory) {
         String authorizationHeader = webRequest.getHeader(HttpHeaders.AUTHORIZATION);
-        Objects.requireNonNull(authorizationHeader);
-        String accessToken = authorizationHeader.split(" ")[ACCESS_TOKEN_LOCATION];
+        String accessToken = bearerAuthorizationParser.parse(authorizationHeader);
         long memberId = Long.parseLong(authService.parseMemberId(accessToken));
         return new AuthMember(memberId);
     }
diff --git a/backend/src/main/java/harustudy/backend/auth/AuthInterceptor.java b/backend/src/main/java/harustudy/backend/auth/AuthInterceptor.java
index b862ff21..e3d5e7cc 100644
--- a/backend/src/main/java/harustudy/backend/auth/AuthInterceptor.java
+++ b/backend/src/main/java/harustudy/backend/auth/AuthInterceptor.java
@@ -1,7 +1,7 @@
 package harustudy.backend.auth;
 
-import harustudy.backend.auth.exception.InvalidAuthorizationHeaderException;
 import harustudy.backend.auth.service.AuthService;
+import harustudy.backend.auth.util.BearerAuthorizationParser;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 import lombok.RequiredArgsConstructor;
@@ -15,6 +15,7 @@
 public class AuthInterceptor implements HandlerInterceptor {
 
     private final AuthService authService;
+    private final BearerAuthorizationParser bearerAuthorizationParser;
 
     @Override
     public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
@@ -23,12 +24,7 @@ public boolean preHandle(HttpServletRequest request, HttpServletResponse respons
             return true;
         }
         String authorizationHeader = request.getHeader(HttpHeaders.AUTHORIZATION);
-        String[] splitAuthorizationHeader = authorizationHeader.split(" ");
-        if (splitAuthorizationHeader.length != 2 ||
-                !splitAuthorizationHeader[0].equals("Bearer")) {
-            throw new InvalidAuthorizationHeaderException();
-        }
-        String accessToken = authorizationHeader.split(" ")[1];
+        String accessToken = bearerAuthorizationParser.parse(authorizationHeader);
         authService.validateAccessToken(accessToken);
         return HandlerInterceptor.super.preHandle(request, response, handler);
     }
diff --git a/backend/src/main/java/harustudy/backend/auth/controller/AuthController.java b/backend/src/main/java/harustudy/backend/auth/controller/AuthController.java
index f3f2c863..07173edd 100644
--- a/backend/src/main/java/harustudy/backend/auth/controller/AuthController.java
+++ b/backend/src/main/java/harustudy/backend/auth/controller/AuthController.java
@@ -2,8 +2,9 @@
 
 import harustudy.backend.auth.dto.OauthLoginRequest;
 import harustudy.backend.auth.dto.TokenResponse;
-import harustudy.backend.auth.exception.RefreshTokenCookieNotExistsException;
+import harustudy.backend.auth.exception.RefreshTokenNotExistsException;
 import harustudy.backend.auth.service.AuthService;
+import harustudy.backend.auth.service.OauthLoginFacade;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 import jakarta.servlet.http.Cookie;
@@ -15,61 +16,63 @@
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 @Tag(name = "인증 관련 기능")
 @RequiredArgsConstructor
-@RequestMapping("api/auth")
 @RestController
 public class AuthController {
 
     @Value("${refresh-token.expire-length}")
     private Long refreshTokenExpireLength;
 
+    private final OauthLoginFacade oauthLoginFacade;
     private final AuthService authService;
 
+    @Operation(summary = "비회원 로그인 요청")
+    @PostMapping("/api/auth/guest")
+    public ResponseEntity<TokenResponse> guestLogin() {
+        TokenResponse tokenResponse = authService.guestLogin();
+        return ResponseEntity.ok(tokenResponse);
+    }
+
     @Operation(summary = "소셜 로그인 요청")
-    @PostMapping("/login")
+    @PostMapping("/api/auth/login")
     public ResponseEntity<TokenResponse> oauthLogin(
             HttpServletResponse httpServletResponse,
             @RequestBody OauthLoginRequest request
     ) {
-        TokenResponse tokenResponse = authService.oauthLogin(request);
-        Cookie cookie = new Cookie("refreshToken", tokenResponse.refreshToken().toString());
-        cookie.setMaxAge(refreshTokenExpireLength.intValue());
-        cookie.setPath("/");
+        TokenResponse tokenResponse = oauthLoginFacade.oauthLogin(request);
+        Cookie cookie = setUpRefreshTokenCookie(tokenResponse);
         httpServletResponse.addCookie(cookie);
         return ResponseEntity.ok(tokenResponse);
     }
 
-    @Operation(summary = "비회원 로그인 요청")
-    @PostMapping("/guest")
-    public ResponseEntity<TokenResponse> guestLogin() {
-        TokenResponse tokenResponse = authService.guestLogin();
-        return ResponseEntity.ok(tokenResponse);
-    }
-
     @Operation(summary = "access 토큰, refresh 토큰 갱신")
-    @PostMapping("/refresh")
+    @PostMapping("/api/auth/refresh")
     public ResponseEntity<TokenResponse> refresh(
             HttpServletRequest httpServletRequest,
             HttpServletResponse httpServletResponse
     ) {
         String refreshToken = extractRefreshTokenFromCookie(httpServletRequest);
         TokenResponse tokenResponse = authService.refresh(refreshToken);
-        Cookie cookie = new Cookie("refreshToken", tokenResponse.refreshToken().toString());
-        cookie.setMaxAge(refreshTokenExpireLength.intValue());
-        cookie.setPath("/");
+        Cookie cookie = setUpRefreshTokenCookie(tokenResponse);
         httpServletResponse.addCookie(cookie);
         return ResponseEntity.ok(tokenResponse);
     }
 
+    private Cookie setUpRefreshTokenCookie(TokenResponse tokenResponse) {
+        Cookie cookie = new Cookie("refreshToken", tokenResponse.refreshToken().toString());
+        cookie.setMaxAge(refreshTokenExpireLength.intValue() / 1000);
+        cookie.setPath("/");
+        return cookie;
+    }
+
     private String extractRefreshTokenFromCookie(HttpServletRequest httpServletRequest) {
         return Arrays.stream(httpServletRequest.getCookies())
                 .filter(cookie -> cookie.getName().equals("refreshToken"))
                 .map(Cookie::getValue)
                 .findAny()
-                .orElseThrow(RefreshTokenCookieNotExistsException::new);
+                .orElseThrow(RefreshTokenNotExistsException::new);
     }
 }
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/AuthorizationException.java b/backend/src/main/java/harustudy/backend/auth/exception/AuthorizationException.java
index d3013a52..46adac69 100644
--- a/backend/src/main/java/harustudy/backend/auth/exception/AuthorizationException.java
+++ b/backend/src/main/java/harustudy/backend/auth/exception/AuthorizationException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.auth.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class AuthorizationException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/InvalidAccessTokenException.java b/backend/src/main/java/harustudy/backend/auth/exception/InvalidAccessTokenException.java
index 82f2bc93..a9e45543 100644
--- a/backend/src/main/java/harustudy/backend/auth/exception/InvalidAccessTokenException.java
+++ b/backend/src/main/java/harustudy/backend/auth/exception/InvalidAccessTokenException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.auth.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class InvalidAccessTokenException extends
         HaruStudyException {
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/InvalidAuthorizationHeaderException.java b/backend/src/main/java/harustudy/backend/auth/exception/InvalidAuthorizationHeaderException.java
index 036d9ca4..ab2b8ba1 100644
--- a/backend/src/main/java/harustudy/backend/auth/exception/InvalidAuthorizationHeaderException.java
+++ b/backend/src/main/java/harustudy/backend/auth/exception/InvalidAuthorizationHeaderException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.auth.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class InvalidAuthorizationHeaderException extends
         HaruStudyException {
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/InvalidProviderNameException.java b/backend/src/main/java/harustudy/backend/auth/exception/InvalidProviderNameException.java
index 0408caf8..617aa00b 100644
--- a/backend/src/main/java/harustudy/backend/auth/exception/InvalidProviderNameException.java
+++ b/backend/src/main/java/harustudy/backend/auth/exception/InvalidProviderNameException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.auth.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class InvalidProviderNameException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/InvalidRefreshTokenException.java b/backend/src/main/java/harustudy/backend/auth/exception/InvalidRefreshTokenException.java
index cee73292..0c4a18c0 100644
--- a/backend/src/main/java/harustudy/backend/auth/exception/InvalidRefreshTokenException.java
+++ b/backend/src/main/java/harustudy/backend/auth/exception/InvalidRefreshTokenException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.auth.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class InvalidRefreshTokenException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenCookieNotExistsException.java b/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenCookieNotExistsException.java
deleted file mode 100644
index 5d2e1183..00000000
--- a/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenCookieNotExistsException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.auth.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class RefreshTokenCookieNotExistsException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenExpiredException.java b/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenExpiredException.java
index bdf594e1..1eff6eae 100644
--- a/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenExpiredException.java
+++ b/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenExpiredException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.auth.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class RefreshTokenExpiredException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenNotExistsException.java b/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenNotExistsException.java
new file mode 100644
index 00000000..d7bffb9e
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/auth/exception/RefreshTokenNotExistsException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.auth.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class RefreshTokenNotExistsException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/auth/service/AuthService.java b/backend/src/main/java/harustudy/backend/auth/service/AuthService.java
index 408b6107..502edf1e 100644
--- a/backend/src/main/java/harustudy/backend/auth/service/AuthService.java
+++ b/backend/src/main/java/harustudy/backend/auth/service/AuthService.java
@@ -1,24 +1,18 @@
 package harustudy.backend.auth.service;
 
-import harustudy.backend.auth.config.OauthProperties;
-import harustudy.backend.auth.config.OauthProperty;
 import harustudy.backend.auth.config.TokenConfig;
 import harustudy.backend.auth.domain.RefreshToken;
 import harustudy.backend.auth.dto.OauthLoginRequest;
-import harustudy.backend.auth.dto.OauthTokenResponse;
 import harustudy.backend.auth.dto.TokenResponse;
 import harustudy.backend.auth.dto.UserInfo;
 import harustudy.backend.auth.exception.InvalidAccessTokenException;
 import harustudy.backend.auth.exception.InvalidRefreshTokenException;
-import harustudy.backend.auth.infrastructure.GoogleOauthClient;
 import harustudy.backend.auth.repository.RefreshTokenRepository;
 import harustudy.backend.auth.util.JwtTokenProvider;
-import harustudy.backend.auth.util.OauthUserInfoExtractor;
 import harustudy.backend.member.domain.LoginType;
 import harustudy.backend.member.domain.Member;
 import harustudy.backend.member.repository.MemberRepository;
 import io.jsonwebtoken.JwtException;
-import java.util.Map;
 import java.util.UUID;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
@@ -29,29 +23,18 @@
 @Service
 public class AuthService {
 
-    private final OauthProperties oauthProperties;
-    private final GoogleOauthClient googleOauthClient;
     private final JwtTokenProvider jwtTokenProvider;
     private final TokenConfig tokenConfig;
     private final MemberRepository memberRepository;
     private final RefreshTokenRepository refreshTokenRepository;
 
-    public TokenResponse oauthLogin(OauthLoginRequest request) {
-        UserInfo userInfo = requestUserInfo(request.oauthProvider(), request.code());
-        Member member = saveOrUpdateMember(request.oauthProvider(), userInfo); // TODO: 트랜잭션 분리
+    public TokenResponse userLogin(OauthLoginRequest request, UserInfo userInfo) {
+        Member member = saveOrUpdateMember(request.oauthProvider(), userInfo);
         String accessToken = generateAccessToken(member.getId());
         RefreshToken refreshToken = saveRefreshTokenOf(member);
         return TokenResponse.forLoggedIn(accessToken, refreshToken);
     }
 
-    private UserInfo requestUserInfo(String oauthProvider, String code) {
-        OauthProperty oauthProperty = oauthProperties.get(oauthProvider);
-        OauthTokenResponse oauthToken = googleOauthClient.requestOauthToken(code, oauthProperty);
-        Map<String, Object> oauthUserInfo =
-                googleOauthClient.requestOauthUserInfo(oauthProperty, oauthToken.accessToken());
-        return OauthUserInfoExtractor.extract(oauthProvider, oauthUserInfo);
-    }
-
     private Member saveOrUpdateMember(String oauthProvider, UserInfo userInfo) {
         Member member = memberRepository.findByEmail(userInfo.email())
                 .map(entity -> entity.updateUserInfo(userInfo.name(), userInfo.email(), userInfo.imageUrl()))
diff --git a/backend/src/main/java/harustudy/backend/auth/service/OauthLoginFacade.java b/backend/src/main/java/harustudy/backend/auth/service/OauthLoginFacade.java
new file mode 100644
index 00000000..5a1607e0
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/auth/service/OauthLoginFacade.java
@@ -0,0 +1,35 @@
+package harustudy.backend.auth.service;
+
+import harustudy.backend.auth.config.OauthProperties;
+import harustudy.backend.auth.config.OauthProperty;
+import harustudy.backend.auth.dto.OauthLoginRequest;
+import harustudy.backend.auth.dto.OauthTokenResponse;
+import harustudy.backend.auth.dto.TokenResponse;
+import harustudy.backend.auth.dto.UserInfo;
+import harustudy.backend.auth.infrastructure.GoogleOauthClient;
+import harustudy.backend.auth.util.OauthUserInfoExtractor;
+import java.util.Map;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Component;
+
+@RequiredArgsConstructor
+@Component
+public class OauthLoginFacade {
+
+    private final OauthProperties oauthProperties;
+    private final GoogleOauthClient googleOauthClient;
+    private final AuthService authService;
+
+    public TokenResponse oauthLogin(OauthLoginRequest request) {
+        UserInfo userInfo = requestUserInfo(request.oauthProvider(), request.code());
+        return authService.userLogin(request, userInfo);
+    }
+
+    private UserInfo requestUserInfo(String oauthProvider, String code) {
+        OauthProperty oauthProperty = oauthProperties.get(oauthProvider);
+        OauthTokenResponse oauthToken = googleOauthClient.requestOauthToken(code, oauthProperty);
+        Map<String, Object> oauthUserInfo =
+                googleOauthClient.requestOauthUserInfo(oauthProperty, oauthToken.accessToken());
+        return OauthUserInfoExtractor.extract(oauthProvider, oauthUserInfo);
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/auth/util/BearerAuthorizationParser.java b/backend/src/main/java/harustudy/backend/auth/util/BearerAuthorizationParser.java
new file mode 100644
index 00000000..97825ddf
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/auth/util/BearerAuthorizationParser.java
@@ -0,0 +1,30 @@
+package harustudy.backend.auth.util;
+
+import harustudy.backend.auth.exception.InvalidAuthorizationHeaderException;
+import java.util.Objects;
+import org.springframework.stereotype.Component;
+
+@Component
+public class BearerAuthorizationParser {
+
+    private static final String TOKEN_TYPE = "Bearer";
+    private static final int TOKEN_TYPE_LOCATION = 0;
+    private static final int ACCESS_TOKEN_LOCATION = 1;
+    private static final int HEADER_SIZE = 2;
+
+    public String parse(String authorizationHeader) {
+        validateIsNonNull(authorizationHeader);
+        String[] split = authorizationHeader.split(" ");
+        if (split.length != HEADER_SIZE || !split[TOKEN_TYPE_LOCATION].equals(TOKEN_TYPE)) {
+            throw new InvalidAuthorizationHeaderException();
+        }
+        return split[ACCESS_TOKEN_LOCATION];
+    }
+
+    private void validateIsNonNull(String authorizationHeader) {
+        if (Objects.isNull(authorizationHeader)) {
+            throw new InvalidAuthorizationHeaderException();
+        }
+    }
+}
+
diff --git a/backend/src/main/java/harustudy/backend/common/CachingFilter.java b/backend/src/main/java/harustudy/backend/common/CachingFilter.java
index 77833a66..b0f0befe 100644
--- a/backend/src/main/java/harustudy/backend/common/CachingFilter.java
+++ b/backend/src/main/java/harustudy/backend/common/CachingFilter.java
@@ -5,12 +5,10 @@
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 import java.io.IOException;
-import org.springframework.stereotype.Component;
 import org.springframework.web.filter.OncePerRequestFilter;
 import org.springframework.web.util.ContentCachingRequestWrapper;
 import org.springframework.web.util.ContentCachingResponseWrapper;
 
-@Component
 public class CachingFilter extends OncePerRequestFilter {
 
     @Override
diff --git a/backend/src/main/java/harustudy/backend/common/SwaggerExceptionResponse.java b/backend/src/main/java/harustudy/backend/common/SwaggerExceptionResponse.java
deleted file mode 100644
index 973f095a..00000000
--- a/backend/src/main/java/harustudy/backend/common/SwaggerExceptionResponse.java
+++ /dev/null
@@ -1,13 +0,0 @@
-package harustudy.backend.common;
-
-import java.lang.annotation.ElementType;
-import java.lang.annotation.Retention;
-import java.lang.annotation.RetentionPolicy;
-import java.lang.annotation.Target;
-
-@Target(ElementType.METHOD)
-@Retention(RetentionPolicy.RUNTIME)
-public @interface SwaggerExceptionResponse {
-
-    Class<? extends HaruStudyException>[] value();
-}
\ No newline at end of file
diff --git a/backend/src/main/java/harustudy/backend/common/exception/ErrorCodeView.java b/backend/src/main/java/harustudy/backend/common/exception/ErrorCodeView.java
new file mode 100644
index 00000000..0d06f0ab
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/common/exception/ErrorCodeView.java
@@ -0,0 +1,17 @@
+package harustudy.backend.common.exception;
+
+import java.util.List;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class ErrorCodeView {
+
+    @GetMapping("/api/error-code")
+    public String errorCodeView(Model model) {
+        List<ExceptionSituation> exceptionSituations = ExceptionMapper.getExceptionSituations();
+        model.addAttribute("exceptionSituations", exceptionSituations);
+        return "error-code";
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/common/ExceptionAdvice.java b/backend/src/main/java/harustudy/backend/common/exception/ExceptionAdvice.java
similarity index 96%
rename from backend/src/main/java/harustudy/backend/common/ExceptionAdvice.java
rename to backend/src/main/java/harustudy/backend/common/exception/ExceptionAdvice.java
index 7e50c7d6..c0d80105 100644
--- a/backend/src/main/java/harustudy/backend/common/ExceptionAdvice.java
+++ b/backend/src/main/java/harustudy/backend/common/exception/ExceptionAdvice.java
@@ -1,4 +1,4 @@
-package harustudy.backend.common;
+package harustudy.backend.common.exception;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
diff --git a/backend/src/main/java/harustudy/backend/common/ExceptionMapper.java b/backend/src/main/java/harustudy/backend/common/exception/ExceptionMapper.java
similarity index 74%
rename from backend/src/main/java/harustudy/backend/common/ExceptionMapper.java
rename to backend/src/main/java/harustudy/backend/common/exception/ExceptionMapper.java
index fc2173a1..89196f77 100644
--- a/backend/src/main/java/harustudy/backend/common/ExceptionMapper.java
+++ b/backend/src/main/java/harustudy/backend/common/exception/ExceptionMapper.java
@@ -1,40 +1,36 @@
-package harustudy.backend.common;
+package harustudy.backend.common.exception;
 
 import static org.springframework.http.HttpStatus.BAD_REQUEST;
 import static org.springframework.http.HttpStatus.FORBIDDEN;
 import static org.springframework.http.HttpStatus.NOT_FOUND;
 import static org.springframework.http.HttpStatus.UNAUTHORIZED;
 
-import harustudy.backend.auth.exception.AuthorizationException;
-import harustudy.backend.auth.exception.InvalidAccessTokenException;
-import harustudy.backend.auth.exception.InvalidAuthorizationHeaderException;
-import harustudy.backend.auth.exception.InvalidProviderNameException;
-import harustudy.backend.auth.exception.InvalidRefreshTokenException;
-import harustudy.backend.auth.exception.RefreshTokenExpiredException;
+import harustudy.backend.auth.exception.*;
 import harustudy.backend.content.exception.PomodoroContentNotFoundException;
 import harustudy.backend.member.exception.MemberNotFoundException;
 import harustudy.backend.progress.exception.NicknameLengthException;
 import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
 import harustudy.backend.progress.exception.PomodoroProgressStatusException;
-import harustudy.backend.progress.exception.ProgressNotBelongToRoomException;
-import harustudy.backend.room.exception.ParticipantCodeExpiredException;
-import harustudy.backend.room.exception.ParticipantCodeNotFoundException;
-import harustudy.backend.room.exception.PomodoroRoomNameLengthException;
-import harustudy.backend.room.exception.PomodoroTimePerCycleException;
-import harustudy.backend.room.exception.PomodoroTotalCycleException;
-import harustudy.backend.room.exception.RoomNotFoundException;
-import java.util.HashMap;
+import harustudy.backend.progress.exception.ProgressNotBelongToStudyException;
+import harustudy.backend.study.exception.ParticipantCodeExpiredException;
+import harustudy.backend.study.exception.ParticipantCodeNotFoundException;
+import harustudy.backend.study.exception.PomodoroStudyNameLengthException;
+import harustudy.backend.study.exception.PomodoroTimePerCycleException;
+import harustudy.backend.study.exception.PomodoroTotalCycleException;
+import harustudy.backend.study.exception.StudyNotFoundException;
+import java.util.LinkedHashMap;
+import java.util.List;
 import java.util.Map;
 
 public class ExceptionMapper {
 
-    private static final Map<Class<? extends Exception>, ExceptionSituation> mapper = new HashMap<>();
+    private static final Map<Class<? extends Exception>, ExceptionSituation> mapper = new LinkedHashMap<>();
 
     static {
         setUpMemberException();
         setUpPomodoroContentException();
         setUpPomodoroProgressException();
-        setUpRoomException();
+        setUpStudyException();
         setUpAuthenticationException();
         setUpAuthorizationException();
     }
@@ -54,20 +50,20 @@ private static void setUpPomodoroProgressException() {
                 ExceptionSituation.of("해당 스터디에 참여한 상태가 아닙니다.", NOT_FOUND, 1201));
         mapper.put(PomodoroProgressStatusException.class,
                 ExceptionSituation.of("스터디 진행 상태가 적절하지 않습니다.", BAD_REQUEST, 1202));
-        mapper.put(ProgressNotBelongToRoomException.class,
+        mapper.put(ProgressNotBelongToStudyException.class,
                 ExceptionSituation.of("해당 스터디에 참여한 기록이 없습니다.", BAD_REQUEST, 1203));
         mapper.put(NicknameLengthException.class,
                 ExceptionSituation.of("닉네임 길이가 유효하지 않습니다.", BAD_REQUEST, 1204));
     }
 
-    private static void setUpRoomException() {
+    private static void setUpStudyException() {
         mapper.put(ParticipantCodeNotFoundException.class,
-                ExceptionSituation.of("해당하는 참여코드가 없습니다.", NOT_FOUND, 1300));
+                ExceptionSituation.of("참여 코드가 만료되었거나 존재하지 않습니다.", NOT_FOUND, 1300));
         mapper.put(ParticipantCodeExpiredException.class,
                 ExceptionSituation.of("만료된 참여코드입니다.", BAD_REQUEST, 1301));
-        mapper.put(RoomNotFoundException.class,
+        mapper.put(StudyNotFoundException.class,
                 ExceptionSituation.of("해당하는 스터디가 없습니다.", NOT_FOUND, 1302));
-        mapper.put(PomodoroRoomNameLengthException.class,
+        mapper.put(PomodoroStudyNameLengthException.class,
                 ExceptionSituation.of("스터디 이름의 길이가 적절하지 않습니다.", BAD_REQUEST, 1304));
         mapper.put(PomodoroTimePerCycleException.class,
                 ExceptionSituation.of("시간 당 사이클 횟수가 적절하지 않습니다.", BAD_REQUEST, 1305));
@@ -86,6 +82,8 @@ private static void setUpAuthenticationException() {
                 ExceptionSituation.of("유효하지 않은 액세스 토큰입니다", UNAUTHORIZED, 1403));
         mapper.put(InvalidAuthorizationHeaderException.class,
                 ExceptionSituation.of("유효하지 않은 인증 헤더 형식입니다.", BAD_REQUEST, 1404));
+        mapper.put(RefreshTokenNotExistsException.class,
+                ExceptionSituation.of("갱신 토큰이 존재하지 않습니다.", BAD_REQUEST, 1405));
     }
 
     private static void setUpAuthorizationException() {
@@ -96,4 +94,10 @@ private static void setUpAuthorizationException() {
     public static ExceptionSituation getSituationOf(Exception exception) {
         return mapper.get(exception.getClass());
     }
+
+    public static List<ExceptionSituation> getExceptionSituations() {
+        return mapper.values()
+                .stream()
+                .toList();
+    }
 }
diff --git a/backend/src/main/java/harustudy/backend/common/ExceptionResponse.java b/backend/src/main/java/harustudy/backend/common/exception/ExceptionResponse.java
similarity index 89%
rename from backend/src/main/java/harustudy/backend/common/ExceptionResponse.java
rename to backend/src/main/java/harustudy/backend/common/exception/ExceptionResponse.java
index e0d6125a..8e1457f0 100644
--- a/backend/src/main/java/harustudy/backend/common/ExceptionResponse.java
+++ b/backend/src/main/java/harustudy/backend/common/exception/ExceptionResponse.java
@@ -1,4 +1,4 @@
-package harustudy.backend.common;
+package harustudy.backend.common.exception;
 
 import com.fasterxml.jackson.annotation.JsonInclude;
 
diff --git a/backend/src/main/java/harustudy/backend/common/ExceptionSituation.java b/backend/src/main/java/harustudy/backend/common/exception/ExceptionSituation.java
similarity index 78%
rename from backend/src/main/java/harustudy/backend/common/ExceptionSituation.java
rename to backend/src/main/java/harustudy/backend/common/exception/ExceptionSituation.java
index 77c07014..033dbe3c 100644
--- a/backend/src/main/java/harustudy/backend/common/ExceptionSituation.java
+++ b/backend/src/main/java/harustudy/backend/common/exception/ExceptionSituation.java
@@ -1,4 +1,4 @@
-package harustudy.backend.common;
+package harustudy.backend.common.exception;
 
 import lombok.Getter;
 import org.springframework.http.HttpStatus;
@@ -16,10 +16,6 @@ private ExceptionSituation(String message, HttpStatus statusCode, Integer errorC
         this.errorCode = errorCode;
     }
 
-    public static ExceptionSituation of(String message, HttpStatus statusCode) {
-        return of(message, statusCode, null);
-    }
-
     public static ExceptionSituation of(String message, HttpStatus statusCode, Integer errorCode) {
         return new ExceptionSituation(message, statusCode, errorCode);
     }
diff --git a/backend/src/main/java/harustudy/backend/common/HaruStudyException.java b/backend/src/main/java/harustudy/backend/common/exception/HaruStudyException.java
similarity index 58%
rename from backend/src/main/java/harustudy/backend/common/HaruStudyException.java
rename to backend/src/main/java/harustudy/backend/common/exception/HaruStudyException.java
index cadf5f33..cb745a33 100644
--- a/backend/src/main/java/harustudy/backend/common/HaruStudyException.java
+++ b/backend/src/main/java/harustudy/backend/common/exception/HaruStudyException.java
@@ -1,4 +1,4 @@
-package harustudy.backend.common;
+package harustudy.backend.common.exception;
 
 public class HaruStudyException extends RuntimeException {
 
diff --git a/backend/src/main/java/harustudy/backend/config/BeanConfig.java b/backend/src/main/java/harustudy/backend/config/BeanConfig.java
index 05f849f7..d1ec9568 100644
--- a/backend/src/main/java/harustudy/backend/config/BeanConfig.java
+++ b/backend/src/main/java/harustudy/backend/config/BeanConfig.java
@@ -1,7 +1,7 @@
 package harustudy.backend.config;
 
-import harustudy.backend.room.domain.CodeGenerationStrategy;
-import harustudy.backend.room.domain.GenerationStrategy;
+import harustudy.backend.participantcode.domain.CodeGenerationStrategy;
+import harustudy.backend.participantcode.domain.GenerationStrategy;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 
diff --git a/backend/src/main/java/harustudy/backend/config/FilterConfig.java b/backend/src/main/java/harustudy/backend/config/FilterConfig.java
new file mode 100644
index 00000000..453fcf26
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/config/FilterConfig.java
@@ -0,0 +1,20 @@
+package harustudy.backend.config;
+
+import harustudy.backend.common.CachingFilter;
+import org.springframework.boot.web.servlet.FilterRegistrationBean;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class FilterConfig {
+
+    @Bean
+    public FilterRegistrationBean<CachingFilter> contentCachingFilter(){
+        FilterRegistrationBean<CachingFilter> registrationBean = new FilterRegistrationBean<>();
+        registrationBean.setFilter(new CachingFilter());
+        registrationBean.addUrlPatterns("/api/studies/*", "/api/temp/*", "/api/auth/*", "/api/me/*");
+        registrationBean.setOrder(1);
+        registrationBean.setName("CachingFilter");
+        return registrationBean;
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/config/WebMvcConfig.java b/backend/src/main/java/harustudy/backend/config/WebMvcConfig.java
index 17db8334..1d322b72 100644
--- a/backend/src/main/java/harustudy/backend/config/WebMvcConfig.java
+++ b/backend/src/main/java/harustudy/backend/config/WebMvcConfig.java
@@ -3,15 +3,19 @@
 import harustudy.backend.auth.AuthArgumentResolver;
 import harustudy.backend.auth.AuthInterceptor;
 import harustudy.backend.common.LoggingInterceptor;
-import java.util.List;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.http.CacheControl;
 import org.springframework.web.method.support.HandlerMethodArgumentResolver;
 import org.springframework.web.servlet.config.annotation.CorsRegistry;
 import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
+import java.time.Duration;
+import java.util.List;
+
 @Configuration
 @RequiredArgsConstructor
 public class WebMvcConfig implements WebMvcConfigurer {
@@ -26,11 +30,15 @@ public class WebMvcConfig implements WebMvcConfigurer {
     @Override
     public void addInterceptors(InterceptorRegistry registry) {
         registry.addInterceptor(loggingInterceptor)
-                .addPathPatterns("/api/**");
+                .addPathPatterns("/api/**")
+                .excludePathPatterns("/api/error-code")
+                .excludePathPatterns("/api/resources/**");
 
         registry.addInterceptor(authInterceptor)
                 .addPathPatterns("/api/**")
-                .excludePathPatterns("/api/auth/**");
+                .excludePathPatterns("/api/auth/**")
+                .excludePathPatterns("/api/error-code")
+                .excludePathPatterns("/api/resources/**");
     }
 
     @Override
@@ -41,6 +49,14 @@ public void addCorsMappings(CorsRegistry registry) {
                 .allowCredentials(true);
     }
 
+    @Override
+    public void addResourceHandlers(ResourceHandlerRegistry registry) {
+        registry.addResourceHandler("/api/resources/**")
+                .addResourceLocations("classpath:/static/")
+                .setUseLastModified(true)
+                .setCacheControl(CacheControl.maxAge(Duration.ofDays(365)).cachePublic());
+    }
+
     @Override
     public void addArgumentResolvers(List<HandlerMethodArgumentResolver> resolvers) {
         resolvers.add(authArgumentResolver);
diff --git a/backend/src/main/java/harustudy/backend/config/swagger/SwaggerConfig.java b/backend/src/main/java/harustudy/backend/config/swagger/SwaggerConfig.java
deleted file mode 100644
index 5159f177..00000000
--- a/backend/src/main/java/harustudy/backend/config/swagger/SwaggerConfig.java
+++ /dev/null
@@ -1,91 +0,0 @@
-package harustudy.backend.config.swagger;
-
-import harustudy.backend.common.ExceptionMapper;
-import harustudy.backend.common.ExceptionSituation;
-import harustudy.backend.common.HaruStudyException;
-import harustudy.backend.common.SwaggerExceptionResponse;
-import io.swagger.v3.oas.models.Operation;
-import io.swagger.v3.oas.models.media.Content;
-import io.swagger.v3.oas.models.media.MediaType;
-import io.swagger.v3.oas.models.media.ObjectSchema;
-import io.swagger.v3.oas.models.media.StringSchema;
-import io.swagger.v3.oas.models.responses.ApiResponse;
-import io.swagger.v3.oas.models.responses.ApiResponses;
-import java.lang.reflect.Constructor;
-import java.util.Arrays;
-import java.util.Objects;
-import java.util.Optional;
-import org.springdoc.core.customizers.OperationCustomizer;
-import org.springframework.context.annotation.Bean;
-import org.springframework.context.annotation.Configuration;
-import org.springframework.web.method.HandlerMethod;
-
-@Configuration
-public class SwaggerConfig {
-
-    @Bean
-    public OperationCustomizer customize() {
-        return (Operation operation, HandlerMethod handlerMethod) -> {
-            SwaggerExceptionResponse exceptionResponse = handlerMethod.getMethodAnnotation(
-                    SwaggerExceptionResponse.class);
-
-            if (!Objects.isNull(exceptionResponse)) {
-                Class<? extends HaruStudyException>[] exceptionClasses = exceptionResponse.value();
-                ApiResponses responses = operation.getResponses();
-                setUpApiResponses(exceptionClasses, responses);
-            }
-            return operation;
-        };
-    }
-
-    private void setUpApiResponses(Class<? extends HaruStudyException>[] exceptionClasses,
-            ApiResponses responses) {
-        Arrays.stream(exceptionClasses)
-                .forEach(exceptionClass -> setApiResponseFrom(exceptionClass, responses));
-    }
-
-    private void setApiResponseFrom(Class<? extends HaruStudyException> exceptionClass,
-            ApiResponses responses) {
-        HaruStudyException exception = extractExceptionFrom(exceptionClass);
-        ApiResponse apiResponse = setupApiResponse(exception);
-        responses.addApiResponse(removePostfix(exceptionClass), apiResponse);
-    }
-
-
-    private HaruStudyException extractExceptionFrom(
-            Class<? extends HaruStudyException> exceptionClass) {
-        try {
-            Constructor<? extends HaruStudyException> constructor = exceptionClass.getConstructor();
-            return constructor.newInstance();
-        } catch (Exception e) {
-            throw new RuntimeException(e);
-        }
-    }
-
-    private ApiResponse setupApiResponse(HaruStudyException exception) {
-        ObjectSchema objectSchema = setupObjectSchema(exception);
-        MediaType mediaType = new MediaType().schema(objectSchema);
-        Content content = new Content().addMediaType("application/json", mediaType);
-
-        ExceptionSituation situation = ExceptionMapper.getSituationOf(exception);
-        ApiResponse apiResponse = new ApiResponse();
-        apiResponse.setContent(content);
-        apiResponse.description(situation.getStatusCode().toString());
-        return apiResponse;
-    }
-
-    private ObjectSchema setupObjectSchema(HaruStudyException exception) {
-        ExceptionSituation situation = ExceptionMapper.getSituationOf(exception);
-        ObjectSchema responseObject = new ObjectSchema();
-        responseObject.addProperty("message", new StringSchema().example(situation.getMessage()));
-        Optional.ofNullable(situation.getErrorCode())
-                .ifPresent(code -> responseObject.addProperty("code",
-                        new StringSchema().example(code)));
-        return responseObject;
-    }
-
-    private String removePostfix(Class<? extends HaruStudyException> exceptionClass) {
-        String exceptionClassName = exceptionClass.getSimpleName();
-        return exceptionClassName.substring(0, exceptionClassName.indexOf("Exception"));
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/content/controller/PomodoroContentController.java b/backend/src/main/java/harustudy/backend/content/controller/PomodoroContentController.java
index 1560c4a6..c62c9b85 100644
--- a/backend/src/main/java/harustudy/backend/content/controller/PomodoroContentController.java
+++ b/backend/src/main/java/harustudy/backend/content/controller/PomodoroContentController.java
@@ -1,24 +1,21 @@
 package harustudy.backend.content.controller;
 
-import harustudy.backend.auth.dto.AuthMember;
 import harustudy.backend.auth.Authenticated;
-import harustudy.backend.auth.exception.AuthorizationException;
-import harustudy.backend.common.SwaggerExceptionResponse;
+import harustudy.backend.auth.dto.AuthMember;
 import harustudy.backend.content.dto.PomodoroContentsResponse;
 import harustudy.backend.content.dto.WritePlanRequest;
 import harustudy.backend.content.dto.WriteRetrospectRequest;
-import harustudy.backend.content.exception.PomodoroContentNotFoundException;
 import harustudy.backend.content.service.PomodoroContentService;
-import harustudy.backend.member.exception.MemberNotFoundException;
-import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
-import harustudy.backend.progress.exception.PomodoroProgressStatusException;
-import harustudy.backend.progress.exception.ProgressNotBelongToRoomException;
-import harustudy.backend.room.exception.RoomNotFoundException;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.*;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
 
 @Tag(name = "컨텐츠 관련 기능")
 @RequiredArgsConstructor
@@ -27,13 +24,6 @@ public class PomodoroContentController {
 
     private final PomodoroContentService pomodoroContentService;
 
-    @SwaggerExceptionResponse({
-            RoomNotFoundException.class,
-            MemberNotFoundException.class,
-            AuthorizationException.class,
-            PomodoroProgressNotFoundException.class,
-            PomodoroContentNotFoundException.class
-    })
     @Operation(summary = "필터링 조건으로 멤버 컨텐츠 조회")
     @GetMapping("/api/studies/{studyId}/contents")
     public ResponseEntity<PomodoroContentsResponse> findMemberContentsWithFilter(
@@ -46,13 +36,6 @@ public ResponseEntity<PomodoroContentsResponse> findMemberContentsWithFilter(
         return ResponseEntity.ok(response);
     }
 
-    @SwaggerExceptionResponse({
-            RoomNotFoundException.class,
-            MemberNotFoundException.class,
-            AuthorizationException.class,
-            PomodoroProgressNotFoundException.class,
-            ProgressNotBelongToRoomException.class
-    })
     @Operation(summary = "스터디 계획 작성")
     @PostMapping("/api/studies/{studyId}/contents/write-plan")
     public ResponseEntity<Void> writePlan(
@@ -64,14 +47,6 @@ public ResponseEntity<Void> writePlan(
         return ResponseEntity.ok().build();
     }
 
-    @SwaggerExceptionResponse({
-            MemberNotFoundException.class,
-            RoomNotFoundException.class,
-            PomodoroProgressNotFoundException.class,
-            AuthorizationException.class,
-            PomodoroProgressStatusException.class,
-            PomodoroContentNotFoundException.class
-    })
     @Operation(summary = "스터디 회고 작성")
     @PostMapping("/api/studies/{studyId}/contents/write-retrospect")
     public ResponseEntity<Void> writeRetrospect(
diff --git a/backend/src/main/java/harustudy/backend/content/exception/PomodoroContentNotFoundException.java b/backend/src/main/java/harustudy/backend/content/exception/PomodoroContentNotFoundException.java
index 1df8f5a0..54edb13b 100644
--- a/backend/src/main/java/harustudy/backend/content/exception/PomodoroContentNotFoundException.java
+++ b/backend/src/main/java/harustudy/backend/content/exception/PomodoroContentNotFoundException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.content.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class PomodoroContentNotFoundException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/content/service/PomodoroContentService.java b/backend/src/main/java/harustudy/backend/content/service/PomodoroContentService.java
index bf60d5ff..f2659e6f 100644
--- a/backend/src/main/java/harustudy/backend/content/service/PomodoroContentService.java
+++ b/backend/src/main/java/harustudy/backend/content/service/PomodoroContentService.java
@@ -14,11 +14,11 @@
 import harustudy.backend.progress.domain.PomodoroProgress;
 import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
 import harustudy.backend.progress.exception.PomodoroProgressStatusException;
-import harustudy.backend.progress.exception.ProgressNotBelongToRoomException;
+import harustudy.backend.progress.exception.ProgressNotBelongToStudyException;
 import harustudy.backend.progress.repository.PomodoroProgressRepository;
-import harustudy.backend.room.domain.PomodoroRoom;
-import harustudy.backend.room.exception.RoomNotFoundException;
-import harustudy.backend.room.repository.PomodoroRoomRepository;
+import harustudy.backend.study.domain.PomodoroStudy;
+import harustudy.backend.study.exception.StudyNotFoundException;
+import harustudy.backend.study.repository.PomodoroStudyRepository;
 import jakarta.annotation.Nullable;
 import java.util.List;
 import java.util.Objects;
@@ -31,16 +31,17 @@
 @Service
 public class PomodoroContentService {
 
-    private final PomodoroRoomRepository pomodoroRoomRepository;
+    private final PomodoroStudyRepository pomodoroStudyRepository;
     private final MemberRepository memberRepository;
     private final PomodoroProgressRepository pomodoroProgressRepository;
     private final PomodoroContentRepository pomodoroContentRepository;
 
+    @Transactional(readOnly = true)
     public PomodoroContentsResponse findContentsWithFilter(
-            AuthMember authMember, Long roomId, Long progressId, @Nullable Integer cycle
+            AuthMember authMember, Long studyId, Long progressId, @Nullable Integer cycle
     ) {
         List<PomodoroProgress> pomodoroProgresses = getProgressesIfAuthorized(
-                authMember, roomId);
+                authMember, studyId);
         PomodoroProgress pomodoroProgress = filterSingleProgressById(
                 pomodoroProgresses, progressId);
 
@@ -51,11 +52,11 @@ public PomodoroContentsResponse findContentsWithFilter(
         return getPomodoroContentsResponseWithCycleFilter(pomodoroContents, cycle);
     }
 
-    private List<PomodoroProgress> getProgressesIfAuthorized(AuthMember authMember, Long roomId) {
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findById(roomId)
-                .orElseThrow(RoomNotFoundException::new);
-        List<PomodoroProgress> pomodoroProgresses = pomodoroProgressRepository.findAllByPomodoroRoomFetchMember(
-                pomodoroRoom);
+    private List<PomodoroProgress> getProgressesIfAuthorized(AuthMember authMember, Long studyId) {
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findById(studyId)
+                .orElseThrow(StudyNotFoundException::new);
+        List<PomodoroProgress> pomodoroProgresses = pomodoroProgressRepository.findAllByPomodoroStudyFetchMember(
+                pomodoroStudy);
         Member member = memberRepository.findByIdIfExists(authMember.id());
         if (isProgressNotRelatedToMember(pomodoroProgresses, member)) {
             throw new AuthorizationException();
@@ -93,27 +94,27 @@ private PomodoroContentsResponse getPomodoroContentsResponseWithCycleFilter(
         return PomodoroContentsResponse.from(pomodoroContentResponses);
     }
 
-    public void writePlan(AuthMember authMember, Long roomId, WritePlanRequest request) {
+    public void writePlan(AuthMember authMember, Long studyId, WritePlanRequest request) {
         Member member = memberRepository.findByIdIfExists(authMember.id());
-        PomodoroProgress pomodoroProgress = findPomodoroProgressFrom(roomId, request.progressId());
+        PomodoroProgress pomodoroProgress = findPomodoroProgressFrom(studyId, request.progressId());
         validateMemberOwnsProgress(member, pomodoroProgress);
         validateProgressIsPlanning(pomodoroProgress);
         PomodoroContent recentContent = findContentWithSameCycle(pomodoroProgress);
         recentContent.changePlan(request.plan());
     }
 
-    private PomodoroProgress findPomodoroProgressFrom(Long roomId, Long progressId) {
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findById(roomId)
-                .orElseThrow(RoomNotFoundException::new);
+    private PomodoroProgress findPomodoroProgressFrom(Long studyId, Long progressId) {
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findById(studyId)
+                .orElseThrow(StudyNotFoundException::new);
         PomodoroProgress pomodoroProgress = pomodoroProgressRepository.findById(progressId)
                 .orElseThrow(PomodoroProgressNotFoundException::new);
-        validateProgressBelongsToRoom(pomodoroRoom, pomodoroProgress);
+        validateProgressBelongsToStudy(pomodoroStudy, pomodoroProgress);
         return pomodoroProgress;
     }
 
-    private void validateProgressBelongsToRoom(PomodoroRoom pomodoroRoom, PomodoroProgress pomodoroProgress) {
-        if (!pomodoroProgress.isProgressOf(pomodoroRoom)) {
-            throw new ProgressNotBelongToRoomException();
+    private void validateProgressBelongsToStudy(PomodoroStudy pomodoroStudy, PomodoroProgress pomodoroProgress) {
+        if (!pomodoroProgress.isProgressOf(pomodoroStudy)) {
+            throw new ProgressNotBelongToStudyException();
         }
     }
 
@@ -133,9 +134,9 @@ private PomodoroContent findContentWithSameCycle(PomodoroProgress pomodoroProgre
                 .orElseThrow(PomodoroContentNotFoundException::new);
     }
 
-    public void writeRetrospect(AuthMember authMember, Long roomId, WriteRetrospectRequest request) {
+    public void writeRetrospect(AuthMember authMember, Long studyId, WriteRetrospectRequest request) {
         Member member = memberRepository.findByIdIfExists(authMember.id());
-        PomodoroProgress pomodoroProgress = findPomodoroProgressFrom(roomId, request.progressId());
+        PomodoroProgress pomodoroProgress = findPomodoroProgressFrom(studyId, request.progressId());
         validateMemberOwnsProgress(member, pomodoroProgress);
         validateProgressIsRetrospect(pomodoroProgress);
         PomodoroContent recentContent = findContentWithSameCycle(pomodoroProgress);
diff --git a/backend/src/main/java/harustudy/backend/member/controller/MemberController.java b/backend/src/main/java/harustudy/backend/member/controller/MemberController.java
index 836c3876..8cef13ca 100644
--- a/backend/src/main/java/harustudy/backend/member/controller/MemberController.java
+++ b/backend/src/main/java/harustudy/backend/member/controller/MemberController.java
@@ -2,9 +2,7 @@
 
 import harustudy.backend.auth.Authenticated;
 import harustudy.backend.auth.dto.AuthMember;
-import harustudy.backend.common.SwaggerExceptionResponse;
 import harustudy.backend.member.dto.MemberResponse;
-import harustudy.backend.member.exception.MemberNotFoundException;
 import harustudy.backend.member.service.MemberService;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
@@ -20,15 +18,12 @@ public class MemberController {
 
     private final MemberService memberService;
 
-    @SwaggerExceptionResponse({
-            MemberNotFoundException.class
-    })
     @Operation(summary = "멤버 Oauth 프로필 정보 조회")
     @GetMapping("/api/me")
     public ResponseEntity<MemberResponse> findOauthProfile(
             @Authenticated AuthMember authMember
     ) {
-        MemberResponse response = memberService.findOauthProfile(authMember);
+        MemberResponse response = memberService.findMemberProfile(authMember);
         return ResponseEntity.ok(response);
     }
 }
diff --git a/backend/src/main/java/harustudy/backend/member/exception/MemberNotFoundException.java b/backend/src/main/java/harustudy/backend/member/exception/MemberNotFoundException.java
index 6d772c13..7778b08d 100644
--- a/backend/src/main/java/harustudy/backend/member/exception/MemberNotFoundException.java
+++ b/backend/src/main/java/harustudy/backend/member/exception/MemberNotFoundException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.member.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class MemberNotFoundException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/member/service/MemberService.java b/backend/src/main/java/harustudy/backend/member/service/MemberService.java
index fbd8a9fb..9e861c83 100644
--- a/backend/src/main/java/harustudy/backend/member/service/MemberService.java
+++ b/backend/src/main/java/harustudy/backend/member/service/MemberService.java
@@ -10,13 +10,13 @@
 import org.springframework.transaction.annotation.Transactional;
 
 @RequiredArgsConstructor
-@Transactional
+@Transactional(readOnly = true)
 @Service
 public class MemberService {
 
     private final MemberRepository memberRepository;
 
-    public MemberResponse findOauthProfile(AuthMember authMember) {
+    public MemberResponse findMemberProfile(AuthMember authMember) {
         Member authorizedMember = memberRepository.findById(authMember.id())
                 .orElseThrow(MemberNotFoundException::new);
 
diff --git a/backend/src/main/java/harustudy/backend/room/domain/CodeGenerationStrategy.java b/backend/src/main/java/harustudy/backend/participantcode/domain/CodeGenerationStrategy.java
similarity index 66%
rename from backend/src/main/java/harustudy/backend/room/domain/CodeGenerationStrategy.java
rename to backend/src/main/java/harustudy/backend/participantcode/domain/CodeGenerationStrategy.java
index 894b8441..ad73be1c 100644
--- a/backend/src/main/java/harustudy/backend/room/domain/CodeGenerationStrategy.java
+++ b/backend/src/main/java/harustudy/backend/participantcode/domain/CodeGenerationStrategy.java
@@ -1,4 +1,6 @@
-package harustudy.backend.room.domain;
+package harustudy.backend.participantcode.domain;
+
+import java.time.LocalDateTime;
 
 public class CodeGenerationStrategy implements GenerationStrategy {
 
@@ -12,4 +14,9 @@ public String generate() {
         }
         return sb.toString();
     }
+
+    @Override
+    public LocalDateTime getCreatedDate() {
+        return LocalDateTime.now();
+    }
 }
diff --git a/backend/src/main/java/harustudy/backend/participantcode/domain/GenerationStrategy.java b/backend/src/main/java/harustudy/backend/participantcode/domain/GenerationStrategy.java
new file mode 100644
index 00000000..6005a731
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/participantcode/domain/GenerationStrategy.java
@@ -0,0 +1,10 @@
+package harustudy.backend.participantcode.domain;
+
+import java.time.LocalDateTime;
+
+public interface GenerationStrategy {
+
+    String generate();
+
+    LocalDateTime getCreatedDate();
+}
diff --git a/backend/src/main/java/harustudy/backend/room/domain/ParticipantCode.java b/backend/src/main/java/harustudy/backend/participantcode/domain/ParticipantCode.java
similarity index 53%
rename from backend/src/main/java/harustudy/backend/room/domain/ParticipantCode.java
rename to backend/src/main/java/harustudy/backend/participantcode/domain/ParticipantCode.java
index 80f6ef9c..90ee32e2 100644
--- a/backend/src/main/java/harustudy/backend/room/domain/ParticipantCode.java
+++ b/backend/src/main/java/harustudy/backend/participantcode/domain/ParticipantCode.java
@@ -1,7 +1,16 @@
-package harustudy.backend.room.domain;
+package harustudy.backend.participantcode.domain;
 
 import harustudy.backend.common.BaseTimeEntity;
-import jakarta.persistence.*;
+import harustudy.backend.study.domain.PomodoroStudy;
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.OneToOne;
+import jakarta.persistence.Transient;
 import lombok.AccessLevel;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
@@ -15,18 +24,22 @@ public class ParticipantCode extends BaseTimeEntity {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "study_id")
+    private PomodoroStudy pomodoroStudy;
+
     @Column(unique = true, length = 6)
     private String code;
 
     @Transient
     private GenerationStrategy generationStrategy;
 
-    public ParticipantCode(GenerationStrategy generationStrategy) {
+    public ParticipantCode(PomodoroStudy pomodoroStudy, GenerationStrategy generationStrategy) {
+        this.pomodoroStudy = pomodoroStudy;
         this.generationStrategy = generationStrategy;
         this.code = generationStrategy.generate();
     }
 
-    // TODO: 참여코드 생성에 대한 충돌 문제 개선
     public void regenerate() {
         String generated = code;
         while (code.equals(generated)) {
diff --git a/backend/src/main/java/harustudy/backend/participantcode/repository/ParticipantCodeRepository.java b/backend/src/main/java/harustudy/backend/participantcode/repository/ParticipantCodeRepository.java
new file mode 100644
index 00000000..3277a791
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/participantcode/repository/ParticipantCodeRepository.java
@@ -0,0 +1,10 @@
+package harustudy.backend.participantcode.repository;
+
+import harustudy.backend.participantcode.domain.ParticipantCode;
+import java.util.Optional;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface ParticipantCodeRepository extends JpaRepository<ParticipantCode, Long> {
+
+    Optional<ParticipantCode> findByCode(String code);
+}
diff --git a/backend/src/main/java/harustudy/backend/progress/controller/PomodoroProgressController.java b/backend/src/main/java/harustudy/backend/progress/controller/PomodoroProgressController.java
index 40f6c861..40300aca 100644
--- a/backend/src/main/java/harustudy/backend/progress/controller/PomodoroProgressController.java
+++ b/backend/src/main/java/harustudy/backend/progress/controller/PomodoroProgressController.java
@@ -2,21 +2,13 @@
 
 import harustudy.backend.auth.Authenticated;
 import harustudy.backend.auth.dto.AuthMember;
-import harustudy.backend.auth.exception.AuthorizationException;
-import harustudy.backend.common.SwaggerExceptionResponse;
-import harustudy.backend.member.exception.MemberNotFoundException;
 import harustudy.backend.progress.dto.ParticipateStudyRequest;
 import harustudy.backend.progress.dto.PomodoroProgressResponse;
 import harustudy.backend.progress.dto.PomodoroProgressesResponse;
-import harustudy.backend.progress.exception.NicknameLengthException;
-import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
-import harustudy.backend.progress.exception.ProgressNotBelongToRoomException;
 import harustudy.backend.progress.service.PomodoroProgressService;
-import harustudy.backend.room.exception.RoomNotFoundException;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.responses.ApiResponse;
 import io.swagger.v3.oas.annotations.tags.Tag;
-import java.net.URI;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.DeleteMapping;
@@ -27,6 +19,8 @@
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.net.URI;
+
 @Tag(name = "진행 관련 기능")
 @RequiredArgsConstructor
 @RestController
@@ -34,13 +28,6 @@ public class PomodoroProgressController {
 
     private final PomodoroProgressService pomodoroProgressService;
 
-    @SwaggerExceptionResponse({
-            MemberNotFoundException.class,
-            RoomNotFoundException.class,
-            PomodoroProgressNotFoundException.class,
-            AuthorizationException.class,
-            ProgressNotBelongToRoomException.class
-    })
     @Operation(summary = "단일 스터디 진행도 조회")
     @GetMapping("/api/studies/{studyId}/progresses/{progressId}")
     public ResponseEntity<PomodoroProgressResponse> findPomodoroProgress(
@@ -53,12 +40,6 @@ public ResponseEntity<PomodoroProgressResponse> findPomodoroProgress(
         return ResponseEntity.ok(response);
     }
 
-    @SwaggerExceptionResponse({
-            RoomNotFoundException.class,
-            MemberNotFoundException.class,
-            PomodoroProgressNotFoundException.class,
-            AuthorizationException.class
-    })
     @Operation(summary = "필터링 조건으로 스터디 진행도 조회")
     @GetMapping("/api/studies/{studyId}/progresses")
     public ResponseEntity<PomodoroProgressesResponse> findPomodoroProgressesWithFilter(
@@ -71,13 +52,19 @@ public ResponseEntity<PomodoroProgressesResponse> findPomodoroProgressesWithFilt
         return ResponseEntity.ok(response);
     }
 
-    @SwaggerExceptionResponse({
-            MemberNotFoundException.class,
-            PomodoroProgressNotFoundException.class,
-            RoomNotFoundException.class,
-            AuthorizationException.class,
-            ProgressNotBelongToRoomException.class
-    })
+    @Operation(summary = "필터링 조건으로 스터디 진행도 조회(임시)")
+    @GetMapping("/api/temp/studies/{studyId}/progresses")
+    public ResponseEntity<PomodoroProgressesResponse> findPomodoroProgressesWithFilterTemp(
+            @Authenticated AuthMember authMember,
+            @PathVariable Long studyId,
+            @RequestParam(required = false) Long memberId
+    ) {
+        PomodoroProgressesResponse response =
+                pomodoroProgressService.tempFindPomodoroProgressWithFilter(authMember, studyId, memberId);
+        return ResponseEntity.ok(response);
+    }
+
+
     @Operation(summary = "다음 스터디 단계로 이동")
     @ApiResponse(responseCode = "204")
     @PostMapping("/api/studies/{studyId}/progresses/{progressId}/next-step")
@@ -90,12 +77,6 @@ public ResponseEntity<Void> proceed(
         return ResponseEntity.noContent().build();
     }
 
-    @SwaggerExceptionResponse({
-            MemberNotFoundException.class,
-            RoomNotFoundException.class,
-            AuthorizationException.class,
-            NicknameLengthException.class
-    })
     @Operation(summary = "스터디 참여")
     @ApiResponse(responseCode = "201")
     @PostMapping("/api/studies/{studyId}/progresses")
@@ -109,13 +90,6 @@ public ResponseEntity<Void> participate(
                 URI.create("/api/studies/" + studyId + "/progresses/" + progressId)).build();
     }
 
-    @SwaggerExceptionResponse({
-            RoomNotFoundException.class,
-            MemberNotFoundException.class,
-            AuthorizationException.class,
-            PomodoroProgressNotFoundException.class,
-            ProgressNotBelongToRoomException.class
-    })
     @Operation(summary = "스터디 진행도 삭제")
     @ApiResponse(responseCode = "204")
     @DeleteMapping("/api/studies/{studyId}/progresses/{progressId}")
diff --git a/backend/src/main/java/harustudy/backend/progress/domain/PomodoroProgress.java b/backend/src/main/java/harustudy/backend/progress/domain/PomodoroProgress.java
index 73e71bd6..bb25342c 100644
--- a/backend/src/main/java/harustudy/backend/progress/domain/PomodoroProgress.java
+++ b/backend/src/main/java/harustudy/backend/progress/domain/PomodoroProgress.java
@@ -4,7 +4,7 @@
 import harustudy.backend.content.domain.PomodoroContent;
 import harustudy.backend.member.domain.Member;
 import harustudy.backend.progress.exception.NicknameLengthException;
-import harustudy.backend.room.domain.PomodoroRoom;
+import harustudy.backend.study.domain.PomodoroStudy;
 import jakarta.persistence.CascadeType;
 import jakarta.persistence.Entity;
 import jakarta.persistence.EnumType;
@@ -34,8 +34,8 @@ public class PomodoroProgress extends BaseTimeEntity {
     private Long id;
 
     @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "pomodoro_room_id")
-    private PomodoroRoom pomodoroRoom;
+    @JoinColumn(name = "pomodoro_study_id")
+    private PomodoroStudy pomodoroStudy;
 
     @ManyToOne(fetch = FetchType.LAZY)
     @JoinColumn(name = "member_id")
@@ -52,8 +52,8 @@ public class PomodoroProgress extends BaseTimeEntity {
     @Enumerated(value = EnumType.STRING)
     private PomodoroStatus pomodoroStatus;
 
-    public PomodoroProgress(PomodoroRoom pomodoroRoom, Member member, String nickname) {
-        this.pomodoroRoom = pomodoroRoom;
+    public PomodoroProgress(PomodoroStudy pomodoroStudy, Member member, String nickname) {
+        this.pomodoroStudy = pomodoroStudy;
         this.member = member;
         this.nickname = nickname;
         this.currentCycle = 1;
@@ -78,7 +78,7 @@ public void generateContents(int totalCycle) {
     public void proceed() {
         // TODO: 서비스로 뺄지 말지(일관성을 위해)
         if (pomodoroStatus.equals(PomodoroStatus.RETROSPECT)) {
-            if (currentCycle.equals(pomodoroRoom.getTotalCycle())) {
+            if (currentCycle.equals(pomodoroStudy.getTotalCycle())) {
                 pomodoroStatus = PomodoroStatus.DONE;
                 return;
             }
@@ -87,8 +87,8 @@ public void proceed() {
         pomodoroStatus = pomodoroStatus.getNext();
     }
 
-    public boolean isProgressOf(PomodoroRoom pomodoroRoom) {
-        return this.pomodoroRoom.getId().equals(pomodoroRoom.getId());
+    public boolean isProgressOf(PomodoroStudy pomodoroStudy) {
+        return this.pomodoroStudy.getId().equals(pomodoroStudy.getId());
     }
 
     public boolean isOwnedBy(Member member) {
@@ -111,7 +111,7 @@ public boolean isNotRetrospect() {
         return pomodoroStatus != PomodoroStatus.RETROSPECT;
     }
 
-    public boolean isNotIncludedIn(PomodoroRoom other) {
-        return !pomodoroRoom.getId().equals(other.getId());
+    public boolean isNotIncludedIn(PomodoroStudy other) {
+        return !pomodoroStudy.getId().equals(other.getId());
     }
 }
diff --git a/backend/src/main/java/harustudy/backend/progress/exception/NicknameLengthException.java b/backend/src/main/java/harustudy/backend/progress/exception/NicknameLengthException.java
index 67a2bef7..814720a7 100644
--- a/backend/src/main/java/harustudy/backend/progress/exception/NicknameLengthException.java
+++ b/backend/src/main/java/harustudy/backend/progress/exception/NicknameLengthException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.progress.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class NicknameLengthException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressNotFoundException.java b/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressNotFoundException.java
index 5136e6cf..b8f3a9c4 100644
--- a/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressNotFoundException.java
+++ b/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressNotFoundException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.progress.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class PomodoroProgressNotFoundException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressStatusException.java b/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressStatusException.java
index 9f238756..748ba56c 100644
--- a/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressStatusException.java
+++ b/backend/src/main/java/harustudy/backend/progress/exception/PomodoroProgressStatusException.java
@@ -1,6 +1,6 @@
 package harustudy.backend.progress.exception;
 
-import harustudy.backend.common.HaruStudyException;
+import harustudy.backend.common.exception.HaruStudyException;
 
 public class PomodoroProgressStatusException extends HaruStudyException {
 
diff --git a/backend/src/main/java/harustudy/backend/progress/exception/ProgressNotBelongToRoomException.java b/backend/src/main/java/harustudy/backend/progress/exception/ProgressNotBelongToRoomException.java
deleted file mode 100644
index 64e8772d..00000000
--- a/backend/src/main/java/harustudy/backend/progress/exception/ProgressNotBelongToRoomException.java
+++ /dev/null
@@ -1,6 +0,0 @@
-package harustudy.backend.progress.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class ProgressNotBelongToRoomException extends HaruStudyException {
-}
diff --git a/backend/src/main/java/harustudy/backend/progress/exception/ProgressNotBelongToStudyException.java b/backend/src/main/java/harustudy/backend/progress/exception/ProgressNotBelongToStudyException.java
new file mode 100644
index 00000000..5a39261e
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/progress/exception/ProgressNotBelongToStudyException.java
@@ -0,0 +1,6 @@
+package harustudy.backend.progress.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class ProgressNotBelongToStudyException extends HaruStudyException {
+}
diff --git a/backend/src/main/java/harustudy/backend/progress/repository/PomodoroProgressRepository.java b/backend/src/main/java/harustudy/backend/progress/repository/PomodoroProgressRepository.java
index 32bfec27..a20e89e9 100644
--- a/backend/src/main/java/harustudy/backend/progress/repository/PomodoroProgressRepository.java
+++ b/backend/src/main/java/harustudy/backend/progress/repository/PomodoroProgressRepository.java
@@ -3,7 +3,7 @@
 import harustudy.backend.member.domain.Member;
 import harustudy.backend.progress.domain.PomodoroProgress;
 import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
-import harustudy.backend.room.domain.PomodoroRoom;
+import harustudy.backend.study.domain.PomodoroStudy;
 import java.util.List;
 import java.util.Optional;
 import org.springframework.data.jpa.repository.JpaRepository;
@@ -12,17 +12,17 @@
 
 public interface PomodoroProgressRepository extends JpaRepository<PomodoroProgress, Long> {
 
-    Optional<PomodoroProgress> findByPomodoroRoomAndMember(PomodoroRoom pomodoroRoom,
+    Optional<PomodoroProgress> findByPomodoroStudyAndMember(PomodoroStudy pomodoroStudy,
             Member member);
 
-    @Query("select p from PomodoroProgress p join fetch p.member where p.pomodoroRoom = :pomodoroRoom")
-    List<PomodoroProgress> findAllByPomodoroRoomFetchMember(
-            @Param("pomodoroRoom") PomodoroRoom pomodoroRoom);
+    @Query("select p from PomodoroProgress p join fetch p.member where p.pomodoroStudy = :pomodoroStudy")
+    List<PomodoroProgress> findAllByPomodoroStudyFetchMember(
+            @Param("pomodoroStudy") PomodoroStudy pomodoroStudy);
 
 
     List<PomodoroProgress> findByMember(Member member);
 
-    List<PomodoroProgress> findByPomodoroRoom(PomodoroRoom pomodoroRoom);
+    List<PomodoroProgress> findByPomodoroStudy(PomodoroStudy pomodoroStudy);
 
     default PomodoroProgress findByIdIfExists(Long id) {
         return findById(id)
diff --git a/backend/src/main/java/harustudy/backend/progress/service/PomodoroProgressService.java b/backend/src/main/java/harustudy/backend/progress/service/PomodoroProgressService.java
index 052ca228..6143385a 100644
--- a/backend/src/main/java/harustudy/backend/progress/service/PomodoroProgressService.java
+++ b/backend/src/main/java/harustudy/backend/progress/service/PomodoroProgressService.java
@@ -9,72 +9,96 @@
 import harustudy.backend.progress.dto.PomodoroProgressResponse;
 import harustudy.backend.progress.dto.PomodoroProgressesResponse;
 import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
-import harustudy.backend.progress.exception.ProgressNotBelongToRoomException;
+import harustudy.backend.progress.exception.ProgressNotBelongToStudyException;
 import harustudy.backend.progress.repository.PomodoroProgressRepository;
-import harustudy.backend.room.domain.PomodoroRoom;
-import harustudy.backend.room.repository.PomodoroRoomRepository;
+import harustudy.backend.study.domain.PomodoroStudy;
+import harustudy.backend.study.repository.PomodoroStudyRepository;
 import jakarta.annotation.Nullable;
 import java.util.List;
 import java.util.Objects;
-import java.util.stream.Collectors;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
-@Service
 @RequiredArgsConstructor
 @Transactional
+@Service
 public class PomodoroProgressService {
 
     private final MemberRepository memberRepository;
     private final PomodoroProgressRepository pomodoroProgressRepository;
-    private final PomodoroRoomRepository pomodoroRoomRepository;
+    private final PomodoroStudyRepository pomodoroStudyRepository;
 
+    @Transactional(readOnly = true)
     public PomodoroProgressResponse findPomodoroProgress(
             AuthMember authMember, Long studyId, Long progressId
     ) {
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findByIdIfExists(studyId);
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findByIdIfExists(studyId);
         PomodoroProgress pomodoroProgress = pomodoroProgressRepository.findByIdIfExists(progressId);
-        validateProgressIsRelatedWith(pomodoroProgress, authMember, pomodoroRoom);
+        validateProgressIsRelatedWith(pomodoroProgress, authMember, pomodoroStudy);
         return PomodoroProgressResponse.from(pomodoroProgress);
     }
 
+    // TODO: 임시용이므로 이후에 제거
+    public PomodoroProgressesResponse tempFindPomodoroProgressWithFilter(
+            AuthMember authMember, Long studyId, Long memberId
+    ) {
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findByIdIfExists(studyId);
+        if (Objects.isNull(memberId)) {
+            validateEverParticipated(authMember, pomodoroStudy);
+            return getPomodoroProgressesResponseWithoutMemberFilter(pomodoroStudy);
+        }
+        Member member = memberRepository.findByIdIfExists(memberId);
+        validateIsSameMemberId(authMember, memberId);
+        return tempGetPomodoroProgressesResponseWithMemberFilter(pomodoroStudy, member);
+    }
+
+    // TODO: 임시용이므로 이후에 제거
+    private PomodoroProgressesResponse tempGetPomodoroProgressesResponseWithMemberFilter(
+            PomodoroStudy pomodoroStudy, Member member) {
+        return pomodoroProgressRepository.findByPomodoroStudyAndMember(pomodoroStudy, member)
+                .map(PomodoroProgressResponse::from)
+                .map(response -> PomodoroProgressesResponse.from(List.of(response)))
+                .orElseGet(() -> PomodoroProgressesResponse.from(null));
+    }
+
     // TODO: 동적쿼리로 변경(memberId 유무에 따른 분기처리)
+    @Transactional(readOnly = true)
     public PomodoroProgressesResponse findPomodoroProgressWithFilter(
             AuthMember authMember, Long studyId, @Nullable Long memberId
     ) {
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findByIdIfExists(studyId);
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findByIdIfExists(studyId);
         if (Objects.isNull(memberId)) {
-            validateEverParticipated(authMember, pomodoroRoom);
-            return getPomodoroProgressesResponseWithoutMemberFilter(pomodoroRoom);
+            validateEverParticipated(authMember, pomodoroStudy);
+            return getPomodoroProgressesResponseWithoutMemberFilter(pomodoroStudy);
         }
         Member member = memberRepository.findByIdIfExists(memberId);
         validateIsSameMemberId(authMember, memberId);
-        return getPomodoroProgressesResponseWithMemberFilter(pomodoroRoom, member);
+        return getPomodoroProgressesResponseWithMemberFilter(pomodoroStudy, member);
     }
 
-    private void validateEverParticipated(AuthMember authMember, PomodoroRoom pomodoroRoom) {
+    private void validateEverParticipated(AuthMember authMember, PomodoroStudy pomodoroStudy) {
         Member member = memberRepository.findByIdIfExists(authMember.id());
-        pomodoroProgressRepository.findByPomodoroRoomAndMember(pomodoroRoom, member)
+        pomodoroProgressRepository.findByPomodoroStudyAndMember(pomodoroStudy, member)
                 .orElseThrow(AuthorizationException::new);
     }
 
     private PomodoroProgressesResponse getPomodoroProgressesResponseWithoutMemberFilter(
-            PomodoroRoom pomodoroRoom
+            PomodoroStudy pomodoroStudy
     ) {
         List<PomodoroProgressResponse> responses =
-                pomodoroProgressRepository.findByPomodoroRoom(pomodoroRoom)
+                pomodoroProgressRepository.findByPomodoroStudy(pomodoroStudy)
                         .stream()
                         .map(PomodoroProgressResponse::from)
-                        .collect(Collectors.toList());
+                        .toList();
         return PomodoroProgressesResponse.from(responses);
     }
 
     private PomodoroProgressesResponse getPomodoroProgressesResponseWithMemberFilter(
-            PomodoroRoom pomodoroRoom, Member member
+            PomodoroStudy pomodoroStudy, Member member
     ) {
         PomodoroProgressResponse response =
-                pomodoroProgressRepository.findByPomodoroRoomAndMember(pomodoroRoom, member)
+                pomodoroProgressRepository.findByPomodoroStudyAndMember(pomodoroStudy, member)
                         .map(PomodoroProgressResponse::from)
                         .orElseThrow(PomodoroProgressNotFoundException::new);
         return PomodoroProgressesResponse.from(List.of(response));
@@ -82,18 +106,19 @@ private PomodoroProgressesResponse getPomodoroProgressesResponseWithMemberFilter
 
     public void proceed(AuthMember authMember, Long studyId, Long progressId) {
         PomodoroProgress pomodoroProgress = pomodoroProgressRepository.findByIdIfExists(progressId);
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findByIdIfExists(studyId);
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findByIdIfExists(studyId);
 
-        validateProgressIsRelatedWith(pomodoroProgress, authMember, pomodoroRoom);
+        validateProgressIsRelatedWith(pomodoroProgress, authMember, pomodoroStudy);
         pomodoroProgress.proceed();
     }
 
-    public Long participateStudy(AuthMember authMember, Long studyId, ParticipateStudyRequest request) {
+    public Long participateStudy(AuthMember authMember, Long studyId,
+            ParticipateStudyRequest request) {
         Member member = memberRepository.findByIdIfExists(request.memberId());
         validateIsSameMemberId(authMember, request.memberId());
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findByIdIfExists(studyId);
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, request.nickname());
-        pomodoroProgress.generateContents(pomodoroRoom.getTotalCycle());
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findByIdIfExists(studyId);
+        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, request.nickname());
+        pomodoroProgress.generateContents(pomodoroStudy.getTotalCycle());
         PomodoroProgress saved = pomodoroProgressRepository.save(pomodoroProgress);
         return saved.getId();
     }
@@ -105,10 +130,10 @@ private void validateIsSameMemberId(AuthMember authMember, Long memberId) {
     }
 
     private void validateProgressIsRelatedWith(
-            PomodoroProgress pomodoroProgress, AuthMember authMember, PomodoroRoom pomodoroRoom
+            PomodoroProgress pomodoroProgress, AuthMember authMember, PomodoroStudy pomodoroStudy
     ) {
         validateMemberOwns(pomodoroProgress, authMember);
-        validateProgressIsIncludedIn(pomodoroRoom, pomodoroProgress);
+        validateProgressIsIncludedIn(pomodoroStudy, pomodoroProgress);
     }
 
     private void validateMemberOwns(PomodoroProgress pomodoroProgress, AuthMember authMember) {
@@ -118,18 +143,18 @@ private void validateMemberOwns(PomodoroProgress pomodoroProgress, AuthMember au
         }
     }
 
-    private void validateProgressIsIncludedIn(PomodoroRoom pomodoroRoom,
+    private void validateProgressIsIncludedIn(PomodoroStudy pomodoroStudy,
             PomodoroProgress pomodoroProgress) {
-        if (pomodoroProgress.isNotIncludedIn(pomodoroRoom)) {
-            throw new ProgressNotBelongToRoomException();
+        if (pomodoroProgress.isNotIncludedIn(pomodoroStudy)) {
+            throw new ProgressNotBelongToStudyException();
         }
     }
 
     public void deleteProgress(AuthMember authMember, Long studyId, Long progressId) {
-        PomodoroRoom pomodoroRoom = pomodoroRoomRepository.findByIdIfExists(studyId);
-        validateEverParticipated(authMember, pomodoroRoom);
+        PomodoroStudy pomodoroStudy = pomodoroStudyRepository.findByIdIfExists(studyId);
+        validateEverParticipated(authMember, pomodoroStudy);
         PomodoroProgress pomodoroProgress = pomodoroProgressRepository.findByIdIfExists(progressId);
-        validateProgressIsRelatedWith(pomodoroProgress, authMember, pomodoroRoom);
+        validateProgressIsRelatedWith(pomodoroProgress, authMember, pomodoroStudy);
         pomodoroProgressRepository.delete(pomodoroProgress);
     }
 }
diff --git a/backend/src/main/java/harustudy/backend/room/controller/PomodoroRoomController.java b/backend/src/main/java/harustudy/backend/room/controller/PomodoroRoomController.java
deleted file mode 100644
index 96b53de4..00000000
--- a/backend/src/main/java/harustudy/backend/room/controller/PomodoroRoomController.java
+++ /dev/null
@@ -1,83 +0,0 @@
-package harustudy.backend.room.controller;
-
-import harustudy.backend.auth.Authenticated;
-import harustudy.backend.auth.dto.AuthMember;
-import harustudy.backend.common.SwaggerExceptionResponse;
-import harustudy.backend.member.exception.MemberNotFoundException;
-import harustudy.backend.room.dto.CreatePomodoroRoomRequest;
-import harustudy.backend.room.dto.CreatePomodoroRoomResponse;
-import harustudy.backend.room.dto.PomodoroRoomResponse;
-import harustudy.backend.room.dto.PomodoroRoomsResponse;
-import harustudy.backend.room.exception.ParticipantCodeNotFoundException;
-import harustudy.backend.room.exception.PomodoroRoomNameLengthException;
-import harustudy.backend.room.exception.PomodoroTimePerCycleException;
-import harustudy.backend.room.exception.PomodoroTotalCycleException;
-import harustudy.backend.room.exception.RoomNotFoundException;
-import harustudy.backend.room.service.PomodoroRoomService;
-import io.swagger.v3.oas.annotations.Operation;
-import io.swagger.v3.oas.annotations.responses.ApiResponse;
-import io.swagger.v3.oas.annotations.tags.Tag;
-import java.net.URI;
-import lombok.RequiredArgsConstructor;
-import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.RestController;
-
-@Tag(name = "스터디 관련 기능")
-@RequiredArgsConstructor
-@RestController
-public class PomodoroRoomController {
-
-    private final PomodoroRoomService pomodoroRoomService;
-
-    @SwaggerExceptionResponse({
-            RoomNotFoundException.class
-    })
-    @Operation(summary = "단일 스터디 정보 조회")
-    @GetMapping("/api/studies/{studyId}")
-    public ResponseEntity<PomodoroRoomResponse> findStudy(
-            @Authenticated AuthMember authMember,
-            @PathVariable Long studyId
-    ) {
-        PomodoroRoomResponse response = pomodoroRoomService.findPomodoroRoom(studyId);
-        return ResponseEntity.ok(response);
-    }
-
-    @SwaggerExceptionResponse({
-            ParticipantCodeNotFoundException.class,
-            RoomNotFoundException.class,
-            MemberNotFoundException.class,
-            })
-    @Operation(summary = "필터링 조건으로 스터디 조회")
-    @GetMapping("/api/studies")
-    public ResponseEntity<PomodoroRoomsResponse> findStudiesWithFilter(
-            @Authenticated AuthMember authMember,
-            @RequestParam(required = false) Long memberId,
-            @RequestParam(required = false) String participantCode
-    ) {
-        PomodoroRoomsResponse response = pomodoroRoomService.findPomodoroRoomWithFilter(
-                memberId, participantCode);
-        return ResponseEntity.ok(response);
-    }
-
-    @SwaggerExceptionResponse({
-            PomodoroRoomNameLengthException.class,
-            PomodoroTotalCycleException.class,
-            PomodoroTimePerCycleException.class
-    })
-    @Operation(summary = "스터디 생성")
-    @ApiResponse(responseCode = "201")
-    @PostMapping("/api/studies")
-    public ResponseEntity<CreatePomodoroRoomResponse> createStudy(
-            @Authenticated AuthMember authMember,
-            @RequestBody CreatePomodoroRoomRequest request
-    ) {
-        CreatePomodoroRoomResponse response = pomodoroRoomService.createPomodoroRoom(request);
-        return ResponseEntity.created(URI.create("/api/studies/" + response.studyId()))
-                .body(response);
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/room/domain/GenerationStrategy.java b/backend/src/main/java/harustudy/backend/room/domain/GenerationStrategy.java
deleted file mode 100644
index cf4182ed..00000000
--- a/backend/src/main/java/harustudy/backend/room/domain/GenerationStrategy.java
+++ /dev/null
@@ -1,6 +0,0 @@
-package harustudy.backend.room.domain;
-
-public interface GenerationStrategy {
-
-    String generate();
-}
diff --git a/backend/src/main/java/harustudy/backend/room/dto/CreatePomodoroRoomResponse.java b/backend/src/main/java/harustudy/backend/room/dto/CreatePomodoroRoomResponse.java
deleted file mode 100644
index df86d163..00000000
--- a/backend/src/main/java/harustudy/backend/room/dto/CreatePomodoroRoomResponse.java
+++ /dev/null
@@ -1,13 +0,0 @@
-package harustudy.backend.room.dto;
-
-import com.fasterxml.jackson.annotation.JsonIgnore;
-import harustudy.backend.room.domain.ParticipantCode;
-import harustudy.backend.room.domain.PomodoroRoom;
-
-public record CreatePomodoroRoomResponse(@JsonIgnore Long studyId, String participantCode) {
-
-    public static CreatePomodoroRoomResponse from(PomodoroRoom savedRoom,
-            ParticipantCode participantCode) {
-        return new CreatePomodoroRoomResponse(savedRoom.getId(), participantCode.getCode());
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/room/dto/PomodoroRoomResponse.java b/backend/src/main/java/harustudy/backend/room/dto/PomodoroRoomResponse.java
deleted file mode 100644
index 552a3e2c..00000000
--- a/backend/src/main/java/harustudy/backend/room/dto/PomodoroRoomResponse.java
+++ /dev/null
@@ -1,14 +0,0 @@
-package harustudy.backend.room.dto;
-
-import harustudy.backend.room.domain.PomodoroRoom;
-import java.time.LocalDateTime;
-
-public record PomodoroRoomResponse(Long studyId, String name, Integer totalCycle,
-                                   Integer timePerCycle, LocalDateTime createdDateTime) {
-
-    public static PomodoroRoomResponse from(PomodoroRoom pomodoroRoom) {
-        return new PomodoroRoomResponse(pomodoroRoom.getId(), pomodoroRoom.getName(),
-                pomodoroRoom.getTotalCycle(), pomodoroRoom.getTimePerCycle(),
-                pomodoroRoom.getCreatedDate());
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/room/dto/PomodoroRoomsResponse.java b/backend/src/main/java/harustudy/backend/room/dto/PomodoroRoomsResponse.java
deleted file mode 100644
index fbc93625..00000000
--- a/backend/src/main/java/harustudy/backend/room/dto/PomodoroRoomsResponse.java
+++ /dev/null
@@ -1,13 +0,0 @@
-package harustudy.backend.room.dto;
-
-import harustudy.backend.room.domain.PomodoroRoom;
-import java.util.List;
-
-public record PomodoroRoomsResponse(List<PomodoroRoomResponse> studies) {
-
-    public static PomodoroRoomsResponse from(List<PomodoroRoom> pomodoroRooms) {
-        return new PomodoroRoomsResponse(pomodoroRooms.stream()
-                .map(PomodoroRoomResponse::from)
-                .toList());
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/room/exception/ParticipantCodeExpiredException.java b/backend/src/main/java/harustudy/backend/room/exception/ParticipantCodeExpiredException.java
deleted file mode 100644
index 090c85c6..00000000
--- a/backend/src/main/java/harustudy/backend/room/exception/ParticipantCodeExpiredException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.room.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class ParticipantCodeExpiredException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/room/exception/ParticipantCodeNotFoundException.java b/backend/src/main/java/harustudy/backend/room/exception/ParticipantCodeNotFoundException.java
deleted file mode 100644
index 1533baab..00000000
--- a/backend/src/main/java/harustudy/backend/room/exception/ParticipantCodeNotFoundException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.room.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class ParticipantCodeNotFoundException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/room/exception/PomodoroRoomNameLengthException.java b/backend/src/main/java/harustudy/backend/room/exception/PomodoroRoomNameLengthException.java
deleted file mode 100644
index 4e5f80d0..00000000
--- a/backend/src/main/java/harustudy/backend/room/exception/PomodoroRoomNameLengthException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.room.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class PomodoroRoomNameLengthException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/room/exception/PomodoroTimePerCycleException.java b/backend/src/main/java/harustudy/backend/room/exception/PomodoroTimePerCycleException.java
deleted file mode 100644
index 07fc82c3..00000000
--- a/backend/src/main/java/harustudy/backend/room/exception/PomodoroTimePerCycleException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.room.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class PomodoroTimePerCycleException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/room/exception/PomodoroTotalCycleException.java b/backend/src/main/java/harustudy/backend/room/exception/PomodoroTotalCycleException.java
deleted file mode 100644
index 549d2187..00000000
--- a/backend/src/main/java/harustudy/backend/room/exception/PomodoroTotalCycleException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.room.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class PomodoroTotalCycleException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/room/exception/RoomNotFoundException.java b/backend/src/main/java/harustudy/backend/room/exception/RoomNotFoundException.java
deleted file mode 100644
index ea3b3d6c..00000000
--- a/backend/src/main/java/harustudy/backend/room/exception/RoomNotFoundException.java
+++ /dev/null
@@ -1,7 +0,0 @@
-package harustudy.backend.room.exception;
-
-import harustudy.backend.common.HaruStudyException;
-
-public class RoomNotFoundException extends HaruStudyException {
-
-}
diff --git a/backend/src/main/java/harustudy/backend/room/repository/ParticipantCodeRepository.java b/backend/src/main/java/harustudy/backend/room/repository/ParticipantCodeRepository.java
deleted file mode 100644
index 094c1f4e..00000000
--- a/backend/src/main/java/harustudy/backend/room/repository/ParticipantCodeRepository.java
+++ /dev/null
@@ -1,11 +0,0 @@
-package harustudy.backend.room.repository;
-
-import harustudy.backend.room.domain.ParticipantCode;
-import java.util.Optional;
-import org.springframework.data.jpa.repository.JpaRepository;
-import org.springframework.data.repository.query.Param;
-
-public interface ParticipantCodeRepository extends JpaRepository<ParticipantCode, Long> {
-
-    Optional<ParticipantCode> findByCode(@Param("code") String code);
-}
diff --git a/backend/src/main/java/harustudy/backend/room/repository/PomodoroRoomRepository.java b/backend/src/main/java/harustudy/backend/room/repository/PomodoroRoomRepository.java
deleted file mode 100644
index d6b88fdb..00000000
--- a/backend/src/main/java/harustudy/backend/room/repository/PomodoroRoomRepository.java
+++ /dev/null
@@ -1,19 +0,0 @@
-package harustudy.backend.room.repository;
-
-import harustudy.backend.room.domain.ParticipantCode;
-import harustudy.backend.room.domain.PomodoroRoom;
-import java.util.List;
-import harustudy.backend.room.exception.RoomNotFoundException;
-import java.util.Optional;
-import org.springframework.data.jpa.repository.JpaRepository;
-
-public interface PomodoroRoomRepository extends JpaRepository<PomodoroRoom, Long> {
-    
-    // TODO: Optional로 변경
-    List<PomodoroRoom> findByParticipantCode(ParticipantCode participantCode);
-  
-    default PomodoroRoom findByIdIfExists(Long id) {
-        return findById(id)
-                .orElseThrow(RoomNotFoundException::new);
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/room/service/PomodoroRoomService.java b/backend/src/main/java/harustudy/backend/room/service/PomodoroRoomService.java
deleted file mode 100644
index 1691cf70..00000000
--- a/backend/src/main/java/harustudy/backend/room/service/PomodoroRoomService.java
+++ /dev/null
@@ -1,103 +0,0 @@
-package harustudy.backend.room.service;
-
-import harustudy.backend.member.domain.Member;
-import harustudy.backend.member.exception.MemberNotFoundException;
-import harustudy.backend.member.repository.MemberRepository;
-import harustudy.backend.progress.domain.PomodoroProgress;
-import harustudy.backend.progress.repository.PomodoroProgressRepository;
-import harustudy.backend.room.domain.GenerationStrategy;
-import harustudy.backend.room.domain.ParticipantCode;
-import harustudy.backend.room.domain.PomodoroRoom;
-import harustudy.backend.room.dto.CreatePomodoroRoomRequest;
-import harustudy.backend.room.dto.CreatePomodoroRoomResponse;
-import harustudy.backend.room.dto.PomodoroRoomResponse;
-import harustudy.backend.room.dto.PomodoroRoomsResponse;
-import harustudy.backend.room.exception.ParticipantCodeNotFoundException;
-import harustudy.backend.room.exception.RoomNotFoundException;
-import harustudy.backend.room.repository.ParticipantCodeRepository;
-import harustudy.backend.room.repository.PomodoroRoomRepository;
-import java.util.List;
-import java.util.Objects;
-import lombok.RequiredArgsConstructor;
-import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
-
-@RequiredArgsConstructor
-@Transactional
-@Service
-public class PomodoroRoomService {
-
-    private final PomodoroRoomRepository pomodoroRoomRepository;
-    private final PomodoroProgressRepository pomodoroProgressRepository;
-    private final ParticipantCodeRepository participantCodeRepository;
-    private final MemberRepository memberRepository;
-    private final GenerationStrategy generationStrategy;
-
-    public PomodoroRoomResponse findPomodoroRoom(Long roomId) {
-        return PomodoroRoomResponse.from(pomodoroRoomRepository.findById(roomId)
-                .orElseThrow(RoomNotFoundException::new));
-    }
-
-    public PomodoroRoomsResponse findPomodoroRoomWithFilter(Long memberId, String code) {
-        if (Objects.nonNull(code)) {
-            ParticipantCode participantCode = participantCodeRepository.findByCode(code)
-                    .orElseThrow(ParticipantCodeNotFoundException::new);
-            List<PomodoroRoom> pomodoroRooms = pomodoroRoomRepository.findByParticipantCode(
-                    participantCode);
-            validateIsPresent(pomodoroRooms);
-
-            return PomodoroRoomsResponse.from(pomodoroRooms);
-        }
-        if (Objects.nonNull(memberId)) {
-            return findPomodoroRoomByMemberId(memberId);
-        }
-
-        return PomodoroRoomsResponse.from(pomodoroRoomRepository.findAll());
-    }
-
-    private void validateIsPresent(List<PomodoroRoom> pomodoroRooms) {
-        if (pomodoroRooms.isEmpty()) {
-            throw new RoomNotFoundException();
-        }
-    }
-
-    private PomodoroRoomsResponse findPomodoroRoomByMemberId(Long memberId) {
-        Member member = memberRepository.findById(memberId)
-                .orElseThrow(MemberNotFoundException::new);
-        List<PomodoroProgress> pomodoroProgresses = pomodoroProgressRepository.findByMember(member);
-
-        List<PomodoroRoom> pomodoroRooms = mapToPomodoroRooms(pomodoroProgresses);
-
-        return PomodoroRoomsResponse.from(pomodoroRooms);
-    }
-
-    private List<PomodoroRoom> mapToPomodoroRooms(List<PomodoroProgress> pomodoroProgresses) {
-        return pomodoroProgresses.stream()
-                .map(PomodoroProgress::getPomodoroRoom)
-                .toList();
-    }
-
-    public CreatePomodoroRoomResponse createPomodoroRoom(CreatePomodoroRoomRequest request) {
-        ParticipantCode participantCode = regenerateUniqueCode();
-        participantCodeRepository.save(participantCode);
-
-        PomodoroRoom pomodoroRoom = new PomodoroRoom(request.name(), request.totalCycle(),
-                request.timePerCycle(), participantCode);
-        PomodoroRoom savedRoom = pomodoroRoomRepository.save(pomodoroRoom);
-
-        return CreatePomodoroRoomResponse.from(savedRoom, participantCode);
-    }
-
-    private ParticipantCode regenerateUniqueCode() {
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
-        while (isParticipantCodePresent(participantCode)) {
-            participantCode.regenerate();
-        }
-        return participantCode;
-    }
-
-    private boolean isParticipantCodePresent(ParticipantCode participantCode) {
-        return participantCodeRepository.findByCode(participantCode.getCode())
-                .isPresent();
-    }
-}
diff --git a/backend/src/main/java/harustudy/backend/study/controller/PomodoroStudyController.java b/backend/src/main/java/harustudy/backend/study/controller/PomodoroStudyController.java
new file mode 100644
index 00000000..64f6d122
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/controller/PomodoroStudyController.java
@@ -0,0 +1,58 @@
+package harustudy.backend.study.controller;
+
+import harustudy.backend.auth.Authenticated;
+import harustudy.backend.auth.dto.AuthMember;
+import harustudy.backend.study.dto.CreatePomodoroStudyRequest;
+import harustudy.backend.study.dto.CreatePomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudiesResponse;
+import harustudy.backend.study.service.PomodoroStudyService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import java.net.URI;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+@Tag(name = "스터디 관련 기능")
+@RequiredArgsConstructor
+@RestController
+public class PomodoroStudyController {
+
+    private final PomodoroStudyService pomodoroStudyService;
+
+    @Operation(summary = "단일 스터디 정보 조회")
+    @GetMapping("/api/studies/{studyId}")
+    public ResponseEntity<PomodoroStudyResponse> findStudy(
+            @Authenticated AuthMember authMember,
+            @PathVariable Long studyId
+    ) {
+        PomodoroStudyResponse response = pomodoroStudyService.findPomodoroStudy(studyId);
+        return ResponseEntity.ok(response);
+    }
+
+    @Operation(summary = "필터링 조건으로 스터디 조회")
+    @GetMapping("/api/studies")
+    public ResponseEntity<PomodoroStudiesResponse> findStudiesWithFilter(
+            @Authenticated AuthMember authMember,
+            @RequestParam(required = false) Long memberId,
+            @RequestParam(required = false) String participantCode
+    ) {
+        PomodoroStudiesResponse response = pomodoroStudyService.findPomodoroStudyWithFilter(
+                memberId, participantCode);
+        return ResponseEntity.ok(response);
+    }
+
+    @Operation(summary = "스터디 생성")
+    @ApiResponse(responseCode = "201")
+    @PostMapping("/api/studies")
+    public ResponseEntity<CreatePomodoroStudyResponse> createStudy(
+            @Authenticated AuthMember authMember,
+            @RequestBody CreatePomodoroStudyRequest request
+    ) {
+        CreatePomodoroStudyResponse response = pomodoroStudyService.createPomodoroStudy(request);
+        return ResponseEntity.created(URI.create("/api/studies/" + response.studyId()))
+                .body(response);
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/room/domain/PomodoroRoom.java b/backend/src/main/java/harustudy/backend/study/domain/PomodoroStudy.java
similarity index 71%
rename from backend/src/main/java/harustudy/backend/room/domain/PomodoroRoom.java
rename to backend/src/main/java/harustudy/backend/study/domain/PomodoroStudy.java
index 323e899d..f4eb826b 100644
--- a/backend/src/main/java/harustudy/backend/room/domain/PomodoroRoom.java
+++ b/backend/src/main/java/harustudy/backend/study/domain/PomodoroStudy.java
@@ -1,19 +1,16 @@
-package harustudy.backend.room.domain;
+package harustudy.backend.study.domain;
 
 import harustudy.backend.common.BaseTimeEntity;
 import harustudy.backend.progress.domain.PomodoroProgress;
-import harustudy.backend.room.exception.PomodoroRoomNameLengthException;
-import harustudy.backend.room.exception.PomodoroTimePerCycleException;
-import harustudy.backend.room.exception.PomodoroTotalCycleException;
+import harustudy.backend.study.exception.PomodoroStudyNameLengthException;
+import harustudy.backend.study.exception.PomodoroTimePerCycleException;
+import harustudy.backend.study.exception.PomodoroTotalCycleException;
 import jakarta.persistence.Column;
 import jakarta.persistence.Entity;
-import jakarta.persistence.FetchType;
 import jakarta.persistence.GeneratedValue;
 import jakarta.persistence.GenerationType;
 import jakarta.persistence.Id;
-import jakarta.persistence.JoinColumn;
 import jakarta.persistence.OneToMany;
-import jakarta.persistence.OneToOne;
 import jakarta.validation.constraints.NotNull;
 import java.util.ArrayList;
 import java.util.List;
@@ -24,7 +21,7 @@
 @Getter
 @NoArgsConstructor(access = AccessLevel.PROTECTED)
 @Entity
-public class PomodoroRoom extends BaseTimeEntity {
+public class PomodoroStudy extends BaseTimeEntity {
 
     private static final int MIN_NAME_LENGTH = 1;
     private static final int MAX_NAME_LENGTH = 10;
@@ -39,10 +36,6 @@ public class PomodoroRoom extends BaseTimeEntity {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
-    @OneToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "participant_code_id")
-    private ParticipantCode participantCode;
-
     @NotNull
     @Column(length = 10)
     private String name;
@@ -53,16 +46,15 @@ public class PomodoroRoom extends BaseTimeEntity {
     @NotNull
     private Integer timePerCycle;
 
-    @OneToMany(mappedBy = "pomodoroRoom")
+    @OneToMany(mappedBy = "pomodoroStudy")
     private List<PomodoroProgress> pomodoroProgresses = new ArrayList<>();
 
-    public PomodoroRoom(@NotNull String name, @NotNull Integer totalCycle,
-                        @NotNull Integer timePerCycle, @NotNull ParticipantCode participantCode) {
+    public PomodoroStudy(@NotNull String name, @NotNull Integer totalCycle,
+            @NotNull Integer timePerCycle) {
         validate(name, totalCycle, timePerCycle);
         this.totalCycle = totalCycle;
         this.timePerCycle = timePerCycle;
         this.name = name;
-        this.participantCode = participantCode;
     }
 
     private void validate(String name, Integer totalCycle, Integer timePerCycle) {
@@ -73,7 +65,7 @@ private void validate(String name, Integer totalCycle, Integer timePerCycle) {
 
     private void validateName(String name) {
         if (name.length() < MIN_NAME_LENGTH || name.length() > MAX_NAME_LENGTH) {
-            throw new PomodoroRoomNameLengthException();
+            throw new PomodoroStudyNameLengthException();
         }
     }
 
diff --git a/backend/src/main/java/harustudy/backend/room/dto/CreatePomodoroRoomRequest.java b/backend/src/main/java/harustudy/backend/study/dto/CreatePomodoroStudyRequest.java
similarity index 72%
rename from backend/src/main/java/harustudy/backend/room/dto/CreatePomodoroRoomRequest.java
rename to backend/src/main/java/harustudy/backend/study/dto/CreatePomodoroStudyRequest.java
index ce1da4a1..228d822e 100644
--- a/backend/src/main/java/harustudy/backend/room/dto/CreatePomodoroRoomRequest.java
+++ b/backend/src/main/java/harustudy/backend/study/dto/CreatePomodoroStudyRequest.java
@@ -1,9 +1,9 @@
-package harustudy.backend.room.dto;
+package harustudy.backend.study.dto;
 
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.NotNull;
 
-public record CreatePomodoroRoomRequest(
+public record CreatePomodoroStudyRequest(
         @NotBlank String name,
         @NotNull Integer totalCycle,
         @NotNull Integer timePerCycle
diff --git a/backend/src/main/java/harustudy/backend/study/dto/CreatePomodoroStudyResponse.java b/backend/src/main/java/harustudy/backend/study/dto/CreatePomodoroStudyResponse.java
new file mode 100644
index 00000000..d3ae4a57
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/dto/CreatePomodoroStudyResponse.java
@@ -0,0 +1,13 @@
+package harustudy.backend.study.dto;
+
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import harustudy.backend.participantcode.domain.ParticipantCode;
+import harustudy.backend.study.domain.PomodoroStudy;
+
+public record CreatePomodoroStudyResponse(@JsonIgnore Long studyId, String participantCode) {
+
+    public static CreatePomodoroStudyResponse from(PomodoroStudy savedStudy,
+            ParticipantCode participantCode) {
+        return new CreatePomodoroStudyResponse(savedStudy.getId(), participantCode.getCode());
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/study/dto/PomodoroStudiesResponse.java b/backend/src/main/java/harustudy/backend/study/dto/PomodoroStudiesResponse.java
new file mode 100644
index 00000000..a8c13ba0
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/dto/PomodoroStudiesResponse.java
@@ -0,0 +1,13 @@
+package harustudy.backend.study.dto;
+
+import harustudy.backend.study.domain.PomodoroStudy;
+import java.util.List;
+
+public record PomodoroStudiesResponse(List<PomodoroStudyResponse> studies) {
+
+    public static PomodoroStudiesResponse from(List<PomodoroStudy> pomodoroStudies) {
+        return new PomodoroStudiesResponse(pomodoroStudies.stream()
+                .map(PomodoroStudyResponse::from)
+                .toList());
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/study/dto/PomodoroStudyResponse.java b/backend/src/main/java/harustudy/backend/study/dto/PomodoroStudyResponse.java
new file mode 100644
index 00000000..9f7de432
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/dto/PomodoroStudyResponse.java
@@ -0,0 +1,14 @@
+package harustudy.backend.study.dto;
+
+import harustudy.backend.study.domain.PomodoroStudy;
+import java.time.LocalDateTime;
+
+public record PomodoroStudyResponse(Long studyId, String name, Integer totalCycle,
+                                    Integer timePerCycle, LocalDateTime createdDateTime) {
+
+    public static PomodoroStudyResponse from(PomodoroStudy pomodoroStudy) {
+        return new PomodoroStudyResponse(pomodoroStudy.getId(), pomodoroStudy.getName(),
+                pomodoroStudy.getTotalCycle(), pomodoroStudy.getTimePerCycle(),
+                pomodoroStudy.getCreatedDate());
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/study/exception/ParticipantCodeExpiredException.java b/backend/src/main/java/harustudy/backend/study/exception/ParticipantCodeExpiredException.java
new file mode 100644
index 00000000..482f635d
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/exception/ParticipantCodeExpiredException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.study.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class ParticipantCodeExpiredException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/study/exception/ParticipantCodeNotFoundException.java b/backend/src/main/java/harustudy/backend/study/exception/ParticipantCodeNotFoundException.java
new file mode 100644
index 00000000..e92ca89a
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/exception/ParticipantCodeNotFoundException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.study.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class ParticipantCodeNotFoundException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/study/exception/PomodoroStudyNameLengthException.java b/backend/src/main/java/harustudy/backend/study/exception/PomodoroStudyNameLengthException.java
new file mode 100644
index 00000000..8475feb8
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/exception/PomodoroStudyNameLengthException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.study.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class PomodoroStudyNameLengthException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/study/exception/PomodoroTimePerCycleException.java b/backend/src/main/java/harustudy/backend/study/exception/PomodoroTimePerCycleException.java
new file mode 100644
index 00000000..50286723
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/exception/PomodoroTimePerCycleException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.study.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class PomodoroTimePerCycleException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/study/exception/PomodoroTotalCycleException.java b/backend/src/main/java/harustudy/backend/study/exception/PomodoroTotalCycleException.java
new file mode 100644
index 00000000..3107245c
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/exception/PomodoroTotalCycleException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.study.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class PomodoroTotalCycleException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/study/exception/StudyNotFoundException.java b/backend/src/main/java/harustudy/backend/study/exception/StudyNotFoundException.java
new file mode 100644
index 00000000..078b9a1b
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/exception/StudyNotFoundException.java
@@ -0,0 +1,7 @@
+package harustudy.backend.study.exception;
+
+import harustudy.backend.common.exception.HaruStudyException;
+
+public class StudyNotFoundException extends HaruStudyException {
+
+}
diff --git a/backend/src/main/java/harustudy/backend/study/repository/PomodoroStudyRepository.java b/backend/src/main/java/harustudy/backend/study/repository/PomodoroStudyRepository.java
new file mode 100644
index 00000000..19fc24c1
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/repository/PomodoroStudyRepository.java
@@ -0,0 +1,13 @@
+package harustudy.backend.study.repository;
+
+import harustudy.backend.study.domain.PomodoroStudy;
+import harustudy.backend.study.exception.StudyNotFoundException;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface PomodoroStudyRepository extends JpaRepository<PomodoroStudy, Long> {
+  
+    default PomodoroStudy findByIdIfExists(Long id) {
+        return findById(id)
+                .orElseThrow(StudyNotFoundException::new);
+    }
+}
diff --git a/backend/src/main/java/harustudy/backend/study/service/PomodoroStudyService.java b/backend/src/main/java/harustudy/backend/study/service/PomodoroStudyService.java
new file mode 100644
index 00000000..f3910fd0
--- /dev/null
+++ b/backend/src/main/java/harustudy/backend/study/service/PomodoroStudyService.java
@@ -0,0 +1,96 @@
+package harustudy.backend.study.service;
+
+import harustudy.backend.member.domain.Member;
+import harustudy.backend.member.exception.MemberNotFoundException;
+import harustudy.backend.member.repository.MemberRepository;
+import harustudy.backend.participantcode.domain.GenerationStrategy;
+import harustudy.backend.participantcode.domain.ParticipantCode;
+import harustudy.backend.participantcode.repository.ParticipantCodeRepository;
+import harustudy.backend.progress.domain.PomodoroProgress;
+import harustudy.backend.progress.repository.PomodoroProgressRepository;
+import harustudy.backend.study.domain.PomodoroStudy;
+import harustudy.backend.study.dto.CreatePomodoroStudyRequest;
+import harustudy.backend.study.dto.CreatePomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudiesResponse;
+import harustudy.backend.study.exception.ParticipantCodeNotFoundException;
+import harustudy.backend.study.exception.StudyNotFoundException;
+import harustudy.backend.study.repository.PomodoroStudyRepository;
+import java.util.List;
+import java.util.Objects;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@RequiredArgsConstructor
+@Transactional
+@Service
+public class PomodoroStudyService {
+
+    private final PomodoroStudyRepository pomodoroStudyRepository;
+    private final PomodoroProgressRepository pomodoroProgressRepository;
+    private final MemberRepository memberRepository;
+    private final GenerationStrategy generationStrategy;
+    private final ParticipantCodeRepository participantCodeRepository;
+
+    @Transactional(readOnly = true)
+    public PomodoroStudyResponse findPomodoroStudy(Long studyId) {
+        return PomodoroStudyResponse.from(pomodoroStudyRepository.findById(studyId)
+                .orElseThrow(StudyNotFoundException::new));
+    }
+
+    @Transactional(readOnly = true)
+    public PomodoroStudiesResponse findPomodoroStudyWithFilter(Long memberId, String code) {
+        if (Objects.nonNull(code)) {
+            ParticipantCode participantCode = participantCodeRepository.findByCode(code)
+                    .orElseThrow(ParticipantCodeNotFoundException::new);
+            PomodoroStudy pomodoroStudy = participantCode.getPomodoroStudy();
+            return PomodoroStudiesResponse.from(List.of(pomodoroStudy));
+        }
+        if (Objects.nonNull(memberId)) {
+            return findPomodoroStudyByMemberId(memberId);
+        }
+
+        return PomodoroStudiesResponse.from(pomodoroStudyRepository.findAll());
+    }
+
+    private PomodoroStudiesResponse findPomodoroStudyByMemberId(Long memberId) {
+        Member member = memberRepository.findById(memberId)
+                .orElseThrow(MemberNotFoundException::new);
+        List<PomodoroProgress> pomodoroProgresses = pomodoroProgressRepository.findByMember(member);
+
+        List<PomodoroStudy> pomodoroStudies = mapToPomodoroStudies(pomodoroProgresses);
+
+        return PomodoroStudiesResponse.from(pomodoroStudies);
+    }
+
+    private List<PomodoroStudy> mapToPomodoroStudies(List<PomodoroProgress> pomodoroProgresses) {
+        return pomodoroProgresses.stream()
+                .map(PomodoroProgress::getPomodoroStudy)
+                .toList();
+    }
+
+    public CreatePomodoroStudyResponse createPomodoroStudy(CreatePomodoroStudyRequest request) {
+        PomodoroStudy pomodoroStudy = new PomodoroStudy(request.name(), request.totalCycle(),
+                request.timePerCycle());
+        PomodoroStudy savedStudy = pomodoroStudyRepository.save(pomodoroStudy);
+
+        ParticipantCode participantCode = generateUniqueCode(pomodoroStudy);
+        participantCodeRepository.save(participantCode);
+
+        return CreatePomodoroStudyResponse.from(savedStudy, participantCode);
+    }
+
+    private ParticipantCode generateUniqueCode(PomodoroStudy pomodoroStudy) {
+        ParticipantCode participantCode = new ParticipantCode(pomodoroStudy, generationStrategy);
+        while (isParticipantCodePresent(participantCode)) {
+            participantCode.regenerate();
+        }
+        return participantCode;
+    }
+
+    private boolean isParticipantCodePresent(ParticipantCode participantCode) {
+        return participantCodeRepository.findByCode(participantCode.getCode())
+                .isPresent();
+    }
+}
diff --git a/backend/src/main/resources/application-develop.yml b/backend/src/main/resources/application-develop.yml
index ef4884ad..45fc0389 100644
--- a/backend/src/main/resources/application-develop.yml
+++ b/backend/src/main/resources/application-develop.yml
@@ -5,6 +5,7 @@ spring:
     properties:
       hibernate:
         dialect: org.hibernate.dialect.MySQL8Dialect
+    open-in-view: false
 
   flyway:
     enabled: false
diff --git a/backend/src/main/resources/application-production.yml b/backend/src/main/resources/application-production.yml
index b8f7aa42..460ccf7a 100644
--- a/backend/src/main/resources/application-production.yml
+++ b/backend/src/main/resources/application-production.yml
@@ -5,6 +5,7 @@ spring:
     properties:
       hibernate:
         dialect: org.hibernate.dialect.MySQL8Dialect
+    open-in-view: false
 
   flyway:
     enabled: false
diff --git a/backend/src/main/resources/application.yml b/backend/src/main/resources/application.yml
index e529fca4..581ca020 100644
--- a/backend/src/main/resources/application.yml
+++ b/backend/src/main/resources/application.yml
@@ -1,11 +1,11 @@
 spring:
   jpa:
-    hibernate:
-      ddl-auto: create-drop
     properties:
       hibernate:
+        ddl-auto: create-drop
         format_sql: true
     show-sql: true
+    open-in-view: false
 
   datasource:
     url: jdbc:h2:mem:testdb;MODE=MySQL
@@ -17,5 +17,8 @@ spring:
     console:
       enabled: true
 
+  flyway:
+    enabled: false
+
   config:
     import: classpath:/submodule/application-auth-develop.yml
diff --git a/backend/src/main/resources/static/error-code.css b/backend/src/main/resources/static/error-code.css
new file mode 100644
index 00000000..9f71e096
--- /dev/null
+++ b/backend/src/main/resources/static/error-code.css
@@ -0,0 +1,82 @@
+body {
+    padding:1.5em;
+    background: #f5f5f5
+}
+
+table {
+    border: 1px #a39485 solid;
+    font-size: .9em;
+    box-shadow: 0 2px 5px rgba(0,0,0,.25);
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+th {
+    text-align: left;
+}
+
+thead {
+    font-weight: bold;
+    color: #fff;
+    background: rgb(59, 130, 246);
+}
+
+td, th {
+    padding: 1em .5em;
+    vertical-align: middle;
+    text-align: center;
+}
+
+td {
+    border-bottom: 1px solid rgba(0,0,0,.1);
+    background: #fff;
+}
+
+a {
+    color: #73685d;
+}
+
+@media all and (max-width: 768px) {
+
+    table, thead, tbody, th, td, tr {
+        display: block;
+    }
+
+    th {
+        text-align: right;
+    }
+
+    table {
+        position: relative;
+        padding-bottom: 0;
+        border: none;
+        box-shadow: 0 0 10px rgba(0,0,0,.2);
+    }
+
+    thead {
+        float: left;
+        white-space: nowrap;
+    }
+
+    tbody {
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+        white-space: nowrap;
+    }
+
+    tr {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    th {
+        border-bottom: 1px solid #a39485;
+    }
+
+    td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+}
diff --git a/backend/src/main/resources/templates/error-code.html b/backend/src/main/resources/templates/error-code.html
new file mode 100644
index 00000000..33762b8e
--- /dev/null
+++ b/backend/src/main/resources/templates/error-code.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>에러 코드 명세</title>
+    <link th:href="@{/api/resources/error-code.css}" rel="stylesheet" />
+</head>
+
+<body>
+<table>
+    <thead>
+    <tr>
+        <th>에러코드</th>
+        <th>상태코드</th>
+        <th>예외 메세지</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr th:each="each : ${exceptionSituations}">
+        <td><span th:text="${each.getErrorCode()}"></span></td>
+        <td><span th:text="${each.getStatusCode()}"></span></td>
+        <td><span th:text="${each.getMessage()}"></span></td>
+    </tr>
+    </tbody>
+</table>
+</body>
+</html>
diff --git a/backend/src/test/java/harustudy/backend/acceptance/AcceptanceTest.java b/backend/src/test/java/harustudy/backend/acceptance/AcceptanceTest.java
index f665e810..92632a50 100644
--- a/backend/src/test/java/harustudy/backend/acceptance/AcceptanceTest.java
+++ b/backend/src/test/java/harustudy/backend/acceptance/AcceptanceTest.java
@@ -1,124 +1,268 @@
-//package harustudy.backend.acceptance;
-//
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
-//import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-//
-//import com.fasterxml.jackson.databind.ObjectMapper;
-//import harustudy.backend.content.domain.PomodoroContent;
-//import harustudy.backend.content.repository.PomodoroContentRepository;
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.progress.domain.PomodoroStatus;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import jakarta.persistence.EntityManager;
-//import jakarta.persistence.PersistenceContext;
-//import java.util.List;
-//import java.util.Map;
-//import org.assertj.core.api.SoftAssertions;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.beans.factory.annotation.Autowired;
-//import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
-//import org.springframework.boot.test.context.SpringBootTest;
-//import org.springframework.http.MediaType;
-//import org.springframework.test.web.servlet.MockMvc;
-//import org.springframework.test.web.servlet.setup.MockMvcBuilders;
-//import org.springframework.transaction.annotation.Transactional;
-//import org.springframework.web.context.WebApplicationContext;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//@SpringBootTest
-//@AutoConfigureMockMvc
-//@Transactional
-//public class AcceptanceTest {
-//
-//    @PersistenceContext
-//    private EntityManager entityManager;
-//    @Autowired
-//    private ObjectMapper objectMapper;
-//    @Autowired
-//    private PomodoroContentRepository pomodoroContentRepository;
-//    @Autowired
-//    private MockMvc mockMvc;
-//
-//    @Autowired
-//    private WebApplicationContext webApplicationContext;
-//
-//    @BeforeEach
-//    void setUp() {
-//        this.mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
-//    }
-//
-//    @Test
-//    void 스터디를_진행한다() throws Exception {
-//        Long 스터디_아이디 = 스터디를_개설한다();
-//        Long 멤버_아이디 = 스터디에_참여한다(스터디_아이디);
-//        스터디_계획을_작성한다(스터디_아이디, 멤버_아이디);
-//        스터디_상태를_진행에서_회고로_넘긴다(스터디_아이디, 멤버_아이디);
-//        스터디_회고를_작성한다(스터디_아이디, 멤버_아이디);
-//    }
-//
-//    private Long 스터디를_개설한다() {
-//        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        entityManager.persist(participantCode);
-//        PomodoroRoom pomodoroRoom = new PomodoroRoom("studyName", 1, 20, participantCode);
-//        entityManager.persist(pomodoroRoom);
-//        return pomodoroRoom.getId();
-//    }
-//
-//    private Long 스터디에_참여한다(Long studyId) {
-//        // TODO: 스터디 참여 기능 생성되면 대체
-//        PomodoroRoom pomodoroRoom = entityManager.find(PomodoroRoom.class, studyId);
-//        Member member = new Member("nickname");
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1,
-//                PomodoroStatus.PLANNING);
-//        PomodoroContent pomodoroRecord = new PomodoroContent(pomodoroProgress, 1);
-//        entityManager.persist(member);
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroRecord);
-//        return member.getId();
-//    }
-//
-//    private void 스터디_계획을_작성한다(Long studyId, Long memberId) throws Exception {
-//        Map<String, String> plan = Map.of("plan", "test");
-//        String jsonRequest = objectMapper.writeValueAsString(plan);
-//
-//        mockMvc.perform(post("/api/studies/{studyId}/members/{memberId}/content/plans",
-//                        studyId, memberId)
-//                        .contentType(MediaType.APPLICATION_JSON)
-//                        .content(jsonRequest))
-//                .andExpect(status().isCreated());
-//    }
-//
-//    private void 스터디_상태를_진행에서_회고로_넘긴다(Long studyId, Long memberId) throws Exception {
-//        mockMvc.perform(post("/api/studies/{studyId}/members/{memberId}/next-step",
-//                        studyId, memberId))
-//                .andExpect(status().isOk());
-//    }
-//
-//    private void 스터디_회고를_작성한다(Long studyId, Long memberId) throws Exception {
-//        Map<String, String> retrospect = Map.of("retrospect", "test");
-//        String jsonRequest = objectMapper.writeValueAsString(retrospect);
-//
-//        mockMvc.perform(post("/api/studies/{studyId}/members/{memberId}/content/retrospects",
-//                        studyId, memberId)
-//                        .contentType(MediaType.APPLICATION_JSON)
-//                        .content(jsonRequest))
-//                .andExpect(status().isCreated());
-//
-//        List<PomodoroContent> pomodoroRecords = pomodoroContentRepository.findAll();
-//        SoftAssertions.assertSoftly(softly -> {
-//                    softly.assertThat(pomodoroRecords.size()).isOne();
-//                    softly.assertThat(pomodoroRecords.get(0).getPlan())
-//                            .containsAllEntriesOf(Map.of("plan", "test"));
-//                    softly.assertThat(pomodoroRecords.get(0).getRetrospect())
-//                            .containsAllEntriesOf(Map.of("retrospect", "test"));
-//                }
-//        );
-//    }
-//}
+package harustudy.backend.acceptance;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.BDDMockito.given;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import harustudy.backend.auth.config.OauthProperty;
+import harustudy.backend.auth.config.TokenConfig;
+import harustudy.backend.auth.dto.OauthLoginRequest;
+import harustudy.backend.auth.dto.OauthTokenResponse;
+import harustudy.backend.auth.dto.TokenResponse;
+import harustudy.backend.auth.infrastructure.GoogleOauthClient;
+import harustudy.backend.auth.util.JwtTokenProvider;
+import harustudy.backend.content.dto.WritePlanRequest;
+import harustudy.backend.content.dto.WriteRetrospectRequest;
+import harustudy.backend.integration.LoginResponse;
+import harustudy.backend.progress.dto.ParticipateStudyRequest;
+import harustudy.backend.progress.dto.PomodoroProgressesResponse;
+import harustudy.backend.study.dto.CreatePomodoroStudyRequest;
+import harustudy.backend.study.dto.CreatePomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudiesResponse;
+import jakarta.servlet.http.Cookie;
+import java.nio.charset.StandardCharsets;
+import java.util.List;
+import java.util.Map;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.MvcResult;
+import org.springframework.test.web.servlet.setup.MockMvcBuilders;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.context.WebApplicationContext;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@ExtendWith(MockitoExtension.class)
+@SpringBootTest
+@AutoConfigureMockMvc
+@Transactional
+class AcceptanceTest {
+
+    @MockBean
+    GoogleOauthClient googleOauthClient;
+
+    @Autowired
+    private ObjectMapper objectMapper;
+
+    @Autowired
+    private MockMvc mockMvc;
+
+    @Autowired
+    private JwtTokenProvider jwtTokenProvider;
+
+    @Autowired
+    private TokenConfig tokenConfig;
+
+    @Autowired
+    private WebApplicationContext webApplicationContext;
+
+    @BeforeEach
+    void setUp() {
+        this.mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
+    }
+
+    @Test
+    void 회원으로_스터디를_진행한다() throws Exception {
+        LoginResponse 로그인_정보 = 구글_로그인을_진행한다();
+        String 참여_코드 = 스터디를_개설한다(로그인_정보);
+        Long 스터디_아이디 = 스터디를_조회한다(로그인_정보, 참여_코드);
+        Long 진행도_아이디 = 스터디에_참여한다(로그인_정보, 스터디_아이디);
+        스터디_계획을_작성한다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_상태를_다음_단계로_넘긴다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_상태를_다음_단계로_넘긴다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_회고를_작성한다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_상태를_다음_단계로_넘긴다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_종료_후_결과_조회(로그인_정보, 스터디_아이디);
+    }
+
+    @Test
+    void 회원으로_진행했었던_스터디_목록을_조회한다() throws Exception {
+        회원으로_스터디를_진행한다();
+        회원으로_스터디를_진행한다();
+        LoginResponse 로그인_정보 = 구글_로그인을_진행한다();
+        List<PomodoroStudyResponse> 회원으로_완료한_스터디_목록 = 회원으로_진행했던_모든_스터디_목록을_조회한다(로그인_정보);
+        for (PomodoroStudyResponse 스터디_정보 : 회원으로_완료한_스터디_목록) {
+            스터디_종료_후_결과_조회(로그인_정보, 스터디_정보.studyId());
+        }
+    }
+
+    @Test
+    void 비회원으로_스터디를_진행한다() throws Exception {
+        LoginResponse 로그인_정보 = 비회원_로그인을_진행한다();
+        String 참여_코드 = 스터디를_개설한다(로그인_정보);
+        Long 스터디_아이디 = 스터디를_조회한다(로그인_정보, 참여_코드);
+        Long 진행도_아이디 = 스터디에_참여한다(로그인_정보, 스터디_아이디);
+        스터디_계획을_작성한다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_상태를_다음_단계로_넘긴다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_상태를_다음_단계로_넘긴다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_회고를_작성한다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_상태를_다음_단계로_넘긴다(로그인_정보, 스터디_아이디, 진행도_아이디);
+        스터디_종료_후_결과_조회(로그인_정보, 스터디_아이디);
+    }
+
+    private List<PomodoroStudyResponse> 회원으로_진행했던_모든_스터디_목록을_조회한다(LoginResponse 로그인_정보)
+            throws Exception {
+        long memberId = Long.parseLong(jwtTokenProvider
+                .parseSubject(로그인_정보.tokenResponse().accessToken(), tokenConfig.secretKey()));
+
+        MvcResult result = mockMvc.perform(
+                        get("/api/studies")
+                                .param("memberId", String.valueOf(memberId))
+                                .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        PomodoroStudiesResponse pomodoroStudiesResponse = objectMapper.readValue(jsonResponse,
+                PomodoroStudiesResponse.class);
+
+        return pomodoroStudiesResponse.studies();
+    }
+
+    private LoginResponse 비회원_로그인을_진행한다() throws Exception {
+        MvcResult result = mockMvc.perform(post("/api/auth/guest"))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        TokenResponse tokenResponse = objectMapper.readValue(jsonResponse, TokenResponse.class);
+        return new LoginResponse(tokenResponse, null);
+    }
+
+    public LoginResponse 구글_로그인을_진행한다() throws Exception {
+        OauthLoginRequest request = new OauthLoginRequest("google", "oauthLoginCode");
+        String jsonRequest = objectMapper.writeValueAsString(request);
+
+        given(googleOauthClient.requestOauthToken(any(String.class), any(OauthProperty.class)))
+                .willReturn(new OauthTokenResponse("mock-token-type", "mock-access-token",
+                        "mock-scope"));
+        given(googleOauthClient.requestOauthUserInfo(any(OauthProperty.class), any(String.class)))
+                .willReturn(Map.of("name", "mock-name", "email", "mock-email", "picture",
+                        "mock-picture"));
+
+        MvcResult result = mockMvc.perform(
+                        post("/api/auth/login")
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .content(jsonRequest))
+                .andReturn();
+
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        Cookie refreshToken = result.getResponse().getCookie("refreshToken");
+        TokenResponse tokenResponse = objectMapper.readValue(jsonResponse, TokenResponse.class);
+        return new LoginResponse(tokenResponse, refreshToken);
+    }
+
+    private String 스터디를_개설한다(LoginResponse 로그인_정보) throws Exception {
+        CreatePomodoroStudyRequest request = new CreatePomodoroStudyRequest("studyName", 1, 20);
+        String jsonRequest = objectMapper.writeValueAsString(request);
+        MvcResult result = mockMvc.perform(
+                        post("/api/studies")
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .content(jsonRequest)
+                                .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isCreated())
+                .andReturn();
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        CreatePomodoroStudyResponse response = objectMapper.readValue(jsonResponse,
+                CreatePomodoroStudyResponse.class);
+        return response.participantCode();
+    }
+
+    private Long 스터디를_조회한다(LoginResponse 로그인_정보, String 참여_코드) throws Exception {
+        MvcResult result = mockMvc.perform(
+                        get("/api/studies")
+                                .param("participantCode", 참여_코드)
+                                .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        PomodoroStudiesResponse responses = objectMapper.readValue(jsonResponse,
+                PomodoroStudiesResponse.class);
+        PomodoroStudyResponse response = responses.studies().get(0);
+        return response.studyId();
+    }
+
+    private Long 스터디에_참여한다(LoginResponse 로그인_정보, Long 스터디_아이디) throws Exception {
+        Long memberId = Long.valueOf(jwtTokenProvider
+                .parseSubject(로그인_정보.tokenResponse().accessToken(), tokenConfig.secretKey()));
+        ParticipateStudyRequest request = new ParticipateStudyRequest(memberId, "nickname");
+        String jsonRequest = objectMapper.writeValueAsString(request);
+
+        MvcResult result = mockMvc.perform(
+                        post("/api/studies/{studyId}/progresses", 스터디_아이디)
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .content(jsonRequest)
+                                .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isCreated())
+                .andReturn();
+
+        String location = result.getResponse().getHeader("Location");
+        String[] split = location.split("/");
+        String progressId = split[split.length - 1];
+
+        return Long.valueOf(progressId);
+    }
+
+    private void 스터디_계획을_작성한다(LoginResponse 로그인_정보, Long 스터디_아이디, Long 진행도_아이디) throws Exception {
+        WritePlanRequest request = new WritePlanRequest(진행도_아이디, Map.of("plan", "test"));
+        String jsonRequest = objectMapper.writeValueAsString(request);
+
+        mockMvc.perform(post("/api/studies/{studyId}/contents/write-plan",
+                        스터디_아이디)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(jsonRequest)
+                        .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isOk());
+    }
+
+    private void 스터디_상태를_다음_단계로_넘긴다(LoginResponse 로그인_정보, Long 스터디_아이디, Long 진행도_아이디)
+            throws Exception {
+        mockMvc.perform(post("/api/studies/{studyId}/progresses/{progressId}/next-step",
+                        스터디_아이디, 진행도_아이디)
+                        .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isNoContent());
+    }
+
+    private void 스터디_회고를_작성한다(LoginResponse 로그인_정보, Long 스터디_아이디, Long 진행도_아이디) throws Exception {
+        WriteRetrospectRequest request = new WriteRetrospectRequest(진행도_아이디,
+                Map.of("retrospect", "test"));
+        String jsonRequest = objectMapper.writeValueAsString(request);
+
+        mockMvc.perform(post("/api/studies/{studyId}/contents/write-retrospect",
+                        스터디_아이디)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(jsonRequest)
+                        .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isOk());
+    }
+
+    private void 스터디_종료_후_결과_조회(LoginResponse 로그인_정보, Long 스터디_아이디) throws Exception {
+        MvcResult result = mockMvc.perform(get("/api/studies/{studyId}/progresses", 스터디_아이디)
+                        .accept(MediaType.APPLICATION_JSON)
+                        .header(HttpHeaders.AUTHORIZATION, 로그인_정보.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        String response = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        PomodoroProgressesResponse jsonResponse = objectMapper.readValue(response,
+                PomodoroProgressesResponse.class);
+
+        assertThat(jsonResponse.progresses()).hasSize(1);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/auth/AuthArgumentResolverTest.java b/backend/src/test/java/harustudy/backend/auth/AuthArgumentResolverTest.java
new file mode 100644
index 00000000..bcc70182
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/auth/AuthArgumentResolverTest.java
@@ -0,0 +1,61 @@
+package harustudy.backend.auth;
+
+import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.BDDMockito.given;
+
+import harustudy.backend.auth.dto.AuthMember;
+import harustudy.backend.auth.service.AuthService;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.mockito.Mock;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.core.MethodParameter;
+import org.springframework.http.HttpHeaders;
+import org.springframework.mock.web.MockHttpServletRequest;
+import org.springframework.web.bind.support.WebDataBinderFactory;
+import org.springframework.web.context.request.NativeWebRequest;
+import org.springframework.web.context.request.ServletWebRequest;
+import org.springframework.web.method.support.ModelAndViewContainer;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@SpringBootTest
+class AuthArgumentResolverTest {
+
+    @Autowired
+    private AuthArgumentResolver authArgumentResolver;
+
+    @MockBean
+    private AuthService authService;
+
+    @Mock
+    private MethodParameter methodParameter;
+    @Mock
+    private ModelAndViewContainer modelAndViewContainer;
+    @Mock
+    private WebDataBinderFactory webDataBinderFactory;
+
+    @Test
+    void 액세스_토큰의_파싱된_아이디에_해당하는_인증_멤버가_반환된다() {
+        // given
+        String accessToken = "access-token";
+        String mockedAuthMemberId = "1";
+        MockHttpServletRequest request = new MockHttpServletRequest();
+        request.addHeader(HttpHeaders.AUTHORIZATION, "Bearer " + accessToken);
+        NativeWebRequest nativeWebRequest = new ServletWebRequest(request);
+
+        given(authService.parseMemberId(any(String.class)))
+                .willReturn(mockedAuthMemberId);
+
+        // when
+        AuthMember authMember = authArgumentResolver.resolveArgument(methodParameter,
+                modelAndViewContainer, nativeWebRequest, webDataBinderFactory);
+
+        // then
+        assertThat(authMember.id()).isEqualTo(Long.valueOf(mockedAuthMemberId));
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/auth/AuthInterceptorTest.java b/backend/src/test/java/harustudy/backend/auth/AuthInterceptorTest.java
new file mode 100644
index 00000000..9f1b428f
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/auth/AuthInterceptorTest.java
@@ -0,0 +1,64 @@
+package harustudy.backend.auth;
+
+import static org.assertj.core.api.AssertionsForClassTypes.assertThatCode;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.BDDMockito.then;
+import static org.mockito.BDDMockito.willDoNothing;
+import static org.mockito.Mockito.times;
+
+import harustudy.backend.auth.service.AuthService;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.http.HttpMethod;
+import org.springframework.mock.web.MockHttpServletRequest;
+import org.springframework.mock.web.MockHttpServletResponse;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@SpringBootTest
+class AuthInterceptorTest {
+
+    @Autowired
+    private AuthInterceptor authInterceptor;
+
+    @MockBean
+    private AuthService authService;
+
+    @Test
+    void preflight_요청시_예외를_던지지_않는다() {
+        // given
+        MockHttpServletRequest request = new MockHttpServletRequest();
+        MockHttpServletResponse response = new MockHttpServletResponse();
+        request.setMethod(HttpMethod.OPTIONS.name());
+        Object handler = new Object();
+
+        // when, then
+        assertThatCode(() -> authInterceptor.preHandle(request, response, handler))
+                .doesNotThrowAnyException();
+    }
+
+    @Test
+    void 액세스_토큰_검증을_수행한다() throws Exception {
+        // given
+        MockHttpServletRequest request = new MockHttpServletRequest();
+        MockHttpServletResponse response = new MockHttpServletResponse();
+        Object handler = new Object();
+        request.addHeader("Authorization", "Bearer access-token");
+
+        willDoNothing()
+                .given(authService)
+                .validateAccessToken(any(String.class));
+
+        // when
+        authInterceptor.preHandle(request, response, handler);
+
+        // then
+        then(authService)
+                .should(times(1))
+                .validateAccessToken(any(String.class));
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/auth/service/AuthServiceTest.java b/backend/src/test/java/harustudy/backend/auth/service/AuthServiceTest.java
new file mode 100644
index 00000000..d27e556a
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/auth/service/AuthServiceTest.java
@@ -0,0 +1,112 @@
+package harustudy.backend.auth.service;
+
+import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
+import static org.assertj.core.api.SoftAssertions.assertSoftly;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.BDDMockito.given;
+
+import harustudy.backend.auth.config.OauthProperty;
+import harustudy.backend.auth.config.TokenConfig;
+import harustudy.backend.auth.domain.RefreshToken;
+import harustudy.backend.auth.dto.OauthLoginRequest;
+import harustudy.backend.auth.dto.OauthTokenResponse;
+import harustudy.backend.auth.dto.TokenResponse;
+import harustudy.backend.auth.dto.UserInfo;
+import harustudy.backend.auth.infrastructure.GoogleOauthClient;
+import harustudy.backend.member.domain.LoginType;
+import harustudy.backend.member.domain.Member;
+import jakarta.persistence.EntityManager;
+import jakarta.persistence.PersistenceContext;
+import java.util.Map;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.transaction.annotation.Transactional;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@Transactional
+@SpringBootTest
+class AuthServiceTest {
+
+    @Autowired
+    private OauthLoginFacade oauthLoginFacade;
+
+    @Autowired
+    private AuthService authService;
+
+    @Autowired
+    private TokenConfig tokenConfig;
+
+    @PersistenceContext
+    private EntityManager entityManager;
+
+    @MockBean
+    private GoogleOauthClient googleOauthClient;
+
+    @Test
+    void 구글_로그인시_멤버가_저장되고_멤버_아이디의_액세스_토큰과_갱신_토큰을_반환한다() {
+        // given
+        OauthLoginRequest request = new OauthLoginRequest("google", "google-code");
+        UserInfo userInfo = new UserInfo("test", "test@test.com", "test.png");
+
+        given(googleOauthClient.requestOauthToken(any(String.class), any(OauthProperty.class)))
+                .willReturn(new OauthTokenResponse("Bearer", "google-access-token", "scope"));
+        given(googleOauthClient.requestOauthUserInfo(any(OauthProperty.class), any(String.class)))
+                .willReturn(Map.of("name", userInfo.name(), "email", userInfo.email(), "picture",
+                        userInfo.imageUrl()));
+
+        // when
+        TokenResponse response = oauthLoginFacade.oauthLogin(request);
+
+        // then
+        String memberId = authService.parseMemberId(response.accessToken());
+        Member foundMember = entityManager.find(Member.class, memberId);
+
+        assertSoftly(softly -> {
+            softly.assertThat(response.accessToken()).isNotNull();
+            softly.assertThat(response.refreshToken()).isNotNull();
+            softly.assertThat(foundMember.getName()).isEqualTo(userInfo.name());
+            softly.assertThat(foundMember.getEmail()).isEqualTo(userInfo.email());
+            softly.assertThat(foundMember.getImageUrl()).isEqualTo(userInfo.imageUrl());
+            softly.assertThat(foundMember.getLoginType()).isEqualTo(LoginType.GOOGLE);
+        });
+    }
+
+    @Test
+    void 게스트_로그인시_멤버가_저장되고_멤버_아이디의_액세스_토큰을_반환한다() {
+        // when
+        TokenResponse response = authService.guestLogin();
+
+        // then
+        String memberId = authService.parseMemberId(response.accessToken());
+        Member foundMember = entityManager.find(Member.class, memberId);
+
+        assertSoftly(softly -> {
+            softly.assertThat(response.accessToken()).isNotNull();
+            softly.assertThat(foundMember).isNotNull();
+        });
+    }
+
+    @Test
+    void 갱신_토큰을_갱신한다() {
+        // given
+        Member member = new Member("test", "test@test.com", "test.png", LoginType.GOOGLE);
+        RefreshToken refreshToken = new RefreshToken(member,
+                tokenConfig.refreshTokenExpireLength());
+
+        entityManager.persist(member);
+        entityManager.persist(refreshToken);
+        entityManager.flush();
+        entityManager.clear();
+
+        // when
+        TokenResponse response = authService.refresh(refreshToken.getUuid().toString());
+
+        // then
+        assertThat(response.refreshToken()).isNotEqualTo(refreshToken.getUuid());
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/auth/util/BearerAuthorizationParserTest.java b/backend/src/test/java/harustudy/backend/auth/util/BearerAuthorizationParserTest.java
new file mode 100644
index 00000000..2c3a48f7
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/auth/util/BearerAuthorizationParserTest.java
@@ -0,0 +1,53 @@
+package harustudy.backend.auth.util;
+
+import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
+import static org.assertj.core.api.AssertionsForClassTypes.assertThatThrownBy;
+
+import harustudy.backend.auth.exception.InvalidAuthorizationHeaderException;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@SpringBootTest
+class BearerAuthorizationParserTest {
+
+    @Autowired
+    private BearerAuthorizationParser bearerAuthorizationParser;
+
+    @Test
+    void 인증_헤더에서_액세스_토큰을_파싱한다() {
+        // given
+        String tokenType = "Bearer";
+        String accessToken = "access-token";
+        String authorizationHeader = tokenType + " " + accessToken;
+
+        // when
+        String parsed = bearerAuthorizationParser.parse(authorizationHeader);
+
+        // then
+        assertThat(parsed).isEqualTo(accessToken);
+    }
+
+    @Test
+    void 인증_헤더가_없으면_예외를_던진다() {
+        // given, when, then
+        assertThatThrownBy(() -> bearerAuthorizationParser.parse(null))
+                .isInstanceOf(InvalidAuthorizationHeaderException.class);
+    }
+
+    @Test
+    void 인증_헤더의_형식이_올바르지_않으면_예외를_던진다() {
+        // given
+        String tokenType = "Basic";
+        String email = "haru-study@harustudy.com:harustudy";
+        String authorizationHeader = tokenType + " " + email;
+
+        // when, then
+        assertThatThrownBy(() -> bearerAuthorizationParser.parse(authorizationHeader))
+                .isInstanceOf(InvalidAuthorizationHeaderException.class);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/auth/util/JwtTokenProviderTest.java b/backend/src/test/java/harustudy/backend/auth/util/JwtTokenProviderTest.java
new file mode 100644
index 00000000..7e965f18
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/auth/util/JwtTokenProviderTest.java
@@ -0,0 +1,50 @@
+package harustudy.backend.auth.util;
+
+
+import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
+import static org.assertj.core.api.AssertionsForClassTypes.assertThatThrownBy;
+
+import harustudy.backend.auth.config.TokenConfig;
+import io.jsonwebtoken.JwtException;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@SpringBootTest
+class JwtTokenProviderTest {
+
+    @Autowired
+    private JwtTokenProvider jwtTokenProvider;
+
+    @Autowired
+    private TokenConfig tokenConfig;
+
+    @Test
+    void 액세스_토큰을_생성한다() {
+        // given
+        String subject = "1L";
+
+        // when
+        String accessToken = jwtTokenProvider.createAccessToken(subject,
+                tokenConfig.accessTokenExpireLength(), tokenConfig.secretKey());
+
+        // then
+        assertThat(jwtTokenProvider.parseSubject(accessToken, tokenConfig.secretKey())).isEqualTo(
+                subject);
+    }
+
+    @Test
+    void 올바르지_않은_액세스_토큰을_검증하면_예외를_던진다() {
+        // given
+        String invalidAccessToken = "invalid-access-token";
+
+        // when, then
+        assertThatThrownBy(() -> jwtTokenProvider.validateAccessToken(invalidAccessToken,
+                tokenConfig.secretKey()))
+                .isInstanceOf(JwtException.class);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/auth/util/OauthUserInfoExtractorTest.java b/backend/src/test/java/harustudy/backend/auth/util/OauthUserInfoExtractorTest.java
new file mode 100644
index 00000000..8bd158dd
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/auth/util/OauthUserInfoExtractorTest.java
@@ -0,0 +1,54 @@
+package harustudy.backend.auth.util;
+
+import static org.assertj.core.api.AssertionsForClassTypes.assertThatThrownBy;
+import static org.assertj.core.api.SoftAssertions.assertSoftly;
+
+import harustudy.backend.auth.dto.UserInfo;
+import harustudy.backend.auth.exception.InvalidProviderNameException;
+import java.util.Map;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+class OauthUserInfoExtractorTest {
+
+    @Test
+    void 구글_프로바이더의_사용자_정보를_추출한다() {
+        // given
+        String providerName = "google";
+        UserInfo userInfo = new UserInfo("test", "test@test.com", "test.png");
+        Map<String, Object> attributes = Map.of(
+                "name", userInfo.name(),
+                "email", userInfo.email(),
+                "picture", userInfo.imageUrl()
+        );
+
+        // when
+        UserInfo result = OauthUserInfoExtractor.extract(providerName, attributes);
+
+        // then
+        assertSoftly(softly -> {
+            softly.assertThat(result.name()).isEqualTo(userInfo.name());
+            softly.assertThat(result.email()).isEqualTo(userInfo.email());
+            softly.assertThat(result.imageUrl()).isEqualTo(userInfo.imageUrl());
+        });
+    }
+
+    @Test
+    void 올바르지_않은_프로바이더_이름은_예외를_던진다() {
+        // given
+        String providerName = "invalidProviderName";
+        UserInfo userInfo = new UserInfo("test", "test@test.com", "test.png");
+        Map<String, Object> attributes = Map.of(
+                "name", userInfo.name(),
+                "email", userInfo.email(),
+                "picture", userInfo.imageUrl()
+        );
+
+        // when, then
+        assertThatThrownBy(() -> OauthUserInfoExtractor.extract(providerName, attributes))
+                .isInstanceOf(InvalidProviderNameException.class);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/content/repository/PomodoroContentRepositoryTest.java b/backend/src/test/java/harustudy/backend/content/repository/PomodoroContentRepositoryTest.java
index 53d9cdd5..a3afad58 100644
--- a/backend/src/test/java/harustudy/backend/content/repository/PomodoroContentRepositoryTest.java
+++ b/backend/src/test/java/harustudy/backend/content/repository/PomodoroContentRepositoryTest.java
@@ -1,90 +1,88 @@
-//package harustudy.backend.content.repository;
-//
-//import static org.assertj.core.api.Assertions.assertThat;
-//
-//import harustudy.backend.content.domain.PomodoroContent;
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.progress.domain.PomodoroStatus;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import java.util.List;
-//import java.util.Map;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.beans.factory.annotation.Autowired;
-//import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
-//import org.springframework.boot.test.autoconfigure.orm.jpa.TestEntityManager;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//@DataJpaTest
-//class PomodoroContentRepositoryTest {
-//
-//    @Autowired
-//    private TestEntityManager testEntityManager;
-//    @Autowired
-//    private PomodoroContentRepository pomodoroContentRepository;
-//
-//    private PomodoroProgress pomodoroProgress;
-//
-//    @BeforeEach
-//    void setUp() {
-//        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        PomodoroRoom pomodoroRoom = new PomodoroRoom("roomName", 3, 20, participantCode);
-//        Member member = new Member("member");
-//        pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.STUDYING);
-//
-//        testEntityManager.persist(participantCode);
-//        testEntityManager.persist(pomodoroRoom);
-//        testEntityManager.persist(member);
-//        testEntityManager.persist(pomodoroProgress);
-//    }
-//
-//    @Test
-//    void 스터디_계획을_저장할_수_있다() {
-//        // given
-//        Map<String, String> plan = Map.of("completionCondition", "완료조건", "expectedProbability", "80%");
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        pomodoroContent.changePlan(plan);
-//
-//        // when
-//        testEntityManager.persist(pomodoroContent);
-//
-//        testEntityManager.flush();
-//        testEntityManager.clear();
-//
-//        List<PomodoroContent> found = pomodoroContentRepository.findByPomodoroProgress(pomodoroProgress);
-//
-//        // then
-//        assertThat(found.get(0).getPlan()).containsAllEntriesOf(plan);
-//        assertThat(found.get(0).getRetrospect()).isEmpty();
-//    }
-//
-//    @Test
-//    void 스터디_회고를_작성할_수_있다() {
-//        // given
-//        Map<String, String> plan = Map.of("completionCondition", "완료조건",
-//                "expectedProbability", "80%");
-//        Map<String, String> retrospect = Map.of("doneAsExpected", "예상했던 결과",
-//                "experiencedDifficulty", "겪었던 어려움");
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        pomodoroContent.changePlan(plan);
-//        pomodoroContent.changeRetrospect(retrospect);
-//
-//        // when
-//        testEntityManager.persist(pomodoroContent);
-//
-//        testEntityManager.flush();
-//        testEntityManager.clear();
-//
-//        List<PomodoroContent> found = pomodoroContentRepository.findByPomodoroProgress(pomodoroProgress);
-//        // then
-//
-//        assertThat(found.get(0).getPlan()).containsAllEntriesOf(plan);
-//        assertThat(found.get(0).getRetrospect()).containsAllEntriesOf(retrospect);
-//    }
-//}
+package harustudy.backend.content.repository;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import harustudy.backend.content.domain.PomodoroContent;
+import harustudy.backend.member.domain.LoginType;
+import harustudy.backend.member.domain.Member;
+import harustudy.backend.progress.domain.PomodoroProgress;
+import harustudy.backend.study.domain.PomodoroStudy;
+import java.util.List;
+import java.util.Map;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
+import org.springframework.boot.test.autoconfigure.orm.jpa.TestEntityManager;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@DataJpaTest
+class PomodoroContentRepositoryTest {
+
+    @Autowired
+    private TestEntityManager testEntityManager;
+
+    @Autowired
+    private PomodoroContentRepository pomodoroContentRepository;
+
+    private PomodoroProgress pomodoroProgress;
+
+    @BeforeEach
+    void setUp() {
+        PomodoroStudy pomodoroStudy = new PomodoroStudy("studyName", 3, 20);
+        Member member = new Member("member", "email", "imageUrl", LoginType.GUEST);
+        pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
+
+        testEntityManager.persist(pomodoroStudy);
+        testEntityManager.persist(member);
+        testEntityManager.persist(pomodoroProgress);
+    }
+
+    @Test
+    void 스터디_계획을_저장할_수_있다() {
+        // given
+        Map<String, String> plan = Map.of("completionCondition", "완료조건", "expectedProbability",
+                "80%");
+        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
+        pomodoroContent.changePlan(plan);
+        testEntityManager.persist(pomodoroContent);
+
+        testEntityManager.flush();
+        testEntityManager.clear();
+
+        // when
+        List<PomodoroContent> found = pomodoroContentRepository.findByPomodoroProgress(
+                pomodoroProgress);
+
+        // then
+        assertThat(found.get(0).getPlan()).containsAllEntriesOf(plan);
+        assertThat(found.get(0).getRetrospect()).isEmpty();
+    }
+
+    @Test
+    void 스터디_회고를_작성할_수_있다() {
+        // given
+        Map<String, String> plan = Map.of("completionCondition", "완료조건",
+                "expectedProbability", "80%");
+        Map<String, String> retrospect = Map.of("doneAsExpected", "예상했던 결과",
+                "experiencedDifficulty", "겪었던 어려움");
+        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
+        pomodoroContent.changePlan(plan);
+        pomodoroContent.changeRetrospect(retrospect);
+        testEntityManager.persist(pomodoroContent);
+
+        testEntityManager.flush();
+        testEntityManager.clear();
+
+        // when
+        List<PomodoroContent> found = pomodoroContentRepository.findByPomodoroProgress(
+                pomodoroProgress);
+
+        // then
+        assertThat(found.get(0).getPlan()).containsAllEntriesOf(plan);
+        assertThat(found.get(0).getRetrospect()).containsAllEntriesOf(retrospect);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/content/service/PomodoroContentServiceTest.java b/backend/src/test/java/harustudy/backend/content/service/PomodoroContentServiceTest.java
index 70b52f97..45d17a60 100644
--- a/backend/src/test/java/harustudy/backend/content/service/PomodoroContentServiceTest.java
+++ b/backend/src/test/java/harustudy/backend/content/service/PomodoroContentServiceTest.java
@@ -1,223 +1,236 @@
-//package harustudy.backend.content.service;
-//
-//import static org.assertj.core.api.Assertions.*;
-//
-//import harustudy.backend.content.domain.PomodoroContent;
-//import harustudy.backend.content.dto.PomodoroContentResponse;
-//import harustudy.backend.content.dto.PomodoroContentsResponse;
-//import harustudy.backend.content.dto.WritePlanRequest;
-//import harustudy.backend.content.dto.WriteRetrospectRequest;
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.member.exception.MemberNotFoundException;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.progress.domain.PomodoroStatus;
-//import harustudy.backend.progress.exception.PomodoroProgressStatusException;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import harustudy.backend.room.exception.RoomNotFoundException;
-//import jakarta.persistence.EntityManager;
-//import jakarta.persistence.PersistenceContext;
-//import java.util.List;
-//import java.util.Map;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.beans.factory.annotation.Autowired;
-//import org.springframework.boot.test.context.SpringBootTest;
-//import org.springframework.transaction.annotation.Transactional;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//@Transactional
-//@SpringBootTest
-//class PomodoroContentServiceTest {
-//
-//    @PersistenceContext
-//    private EntityManager entityManager;
-//    @Autowired
-//    private PomodoroContentServiceV2 pomodoroContentService;
-//
-//    private PomodoroRoom pomodoroRoom;
-//    private Member member;
-//
-//    @BeforeEach
-//    void setUp() {
-//        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        pomodoroRoom = new PomodoroRoom("roomName", 1, 20, participantCode);
-//        member = new Member("nickname");
-//
-//        entityManager.persist(participantCode);
-//        entityManager.persist(pomodoroRoom);
-//        entityManager.persist(member);
-//    }
-//
-//
-//    @Test
-//    void 계획_단계가_아닐_때_계획을_작성하려_하면_예외를_던진다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.RETROSPECT);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WritePlanRequest request = new WritePlanRequest(member.getId(), Map.of("plan", "abc"));
-//
-//        // when, then
-//        assertThatThrownBy(() -> pomodoroContentService.writePlan(pomodoroRoom.getId(), request))
-//                .isInstanceOf(PomodoroProgressStatusException.class);
-//    }
-//
-//
-//    @Test
-//    void 계획_단계에서는_계획을_작성할_수_있다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.PLANNING);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WritePlanRequest request = new WritePlanRequest(member.getId(), Map.of("plan", "abc"));
-//
-//        // when, then
-//        assertThatCode(() -> pomodoroContentService.writePlan(pomodoroRoom.getId(), request))
-//                .doesNotThrowAnyException();
-//    }
-//
-//    @Test
-//    void 계획이_작성되어_있지_않은_경우_회고를_작성하려_하면_예외를_던진다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.RETROSPECT);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WriteRetrospectRequest request = new WriteRetrospectRequest(member.getId(), Map.of("retrospect", "abc"));
-//
-//        // when, then
-//        assertThatThrownBy(() -> pomodoroContentService.writeRetrospect(pomodoroRoom.getId(), request))
-//                .isInstanceOf(PomodoroProgressStatusException.class);
-//    }
-//
-//    @Test
-//    void 회고_작성_단계가_아닐_때_회고를_작성하려_하면_예외를_던진다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.STUDYING);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WriteRetrospectRequest request = new WriteRetrospectRequest(member.getId(), Map.of("retrospect", "abc"));
-//
-//        // when, then
-//        assertThatThrownBy(() -> pomodoroContentService.writeRetrospect(pomodoroRoom.getId(), request))
-//                .isInstanceOf(PomodoroProgressStatusException.class);
-//    }
-//
-//    @Test
-//    void 회고_단계에서는_회고를_작성할_수_있다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.RETROSPECT);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        pomodoroContent.changePlan(Map.of("plan", "abc"));
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WriteRetrospectRequest request = new WriteRetrospectRequest(member.getId(), Map.of("retrospect", "abc"));
-//
-//        // when, then
-//        assertThatCode(() -> pomodoroContentService.writeRetrospect(pomodoroRoom.getId(), request))
-//                .doesNotThrowAnyException();
-//    }
-//
-//    @Test
-//    void 스터디에_참여한_스터디원의_특정_사이클의_콘텐츠를_조회할_수_있다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.DONE);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        Map<String, String> plan = Map.of("plan", "abc");
-//        Map<String, String> retrospect = Map.of("retrospect", "abc");
-//        pomodoroContent.changePlan(plan);
-//        pomodoroContent.changeRetrospect(retrospect);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        // when
-//        PomodoroContentsResponse pomodoroContentsResponse = pomodoroContentService.findMemberContentWithCycleFilter(
-//                pomodoroRoom.getId(), member.getId(), 1);
-//        PomodoroContentResponse expectedPomodoroContentResponse = new PomodoroContentResponse(1, plan,
-//                retrospect);
-//        List<PomodoroContentResponse> content = pomodoroContentsResponse.content();
-//
-//        // then
-//        assertThat(content).containsExactly(expectedPomodoroContentResponse);
-//    }
-//
-//    @Test
-//    void 스터디에_참여한_스터디원의_모든_사이클의_콘텐츠를_조회할_수_있다() {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 2, PomodoroStatus.DONE);
-//
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        Map<String, String> plan = Map.of("plan", "abc");
-//        Map<String, String> retrospect = Map.of("retrospect", "abc");
-//        pomodoroContent.changePlan(plan);
-//        pomodoroContent.changeRetrospect(retrospect);
-//
-//        PomodoroContent anotherPomodoroContent = new PomodoroContent(pomodoroProgress, 2);
-//        Map<String, String> anotherCyclePlan = Map.of("plan", "abc");
-//        Map<String, String> anotherCycleRetrospect = Map.of("retrospect", "abc");
-//        anotherPomodoroContent.changePlan(anotherCyclePlan);
-//        anotherPomodoroContent.changeRetrospect(anotherCycleRetrospect);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        entityManager.persist(anotherPomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        // when
-//        PomodoroContentsResponse pomodoroContentsResponse = pomodoroContentService.findMemberContentWithCycleFilter(
-//                pomodoroRoom.getId(), member.getId(), null);
-//
-//        List<PomodoroContentResponse> expectedPomodoroContentResponses = List.of(
-//                new PomodoroContentResponse(pomodoroContent.getCycle(), plan, retrospect),
-//                new PomodoroContentResponse(anotherPomodoroContent.getCycle(), anotherCyclePlan, anotherCycleRetrospect)
-//        );
-//        List<PomodoroContentResponse> content = pomodoroContentsResponse.content();
-//
-//        // then
-//        assertThat(content).isEqualTo(expectedPomodoroContentResponses);
-//    }
-//
-//    @Test
-//    void 스터디에_참여한_특정_스터디원의_콘텐츠를_조회시_스터디가_없으면_예외를_던진다() {
-//        // given, when, then
-//        assertThatThrownBy(() -> pomodoroContentService.findMemberContentWithCycleFilter(999L, member.getId(), null))
-//                .isInstanceOf(RoomNotFoundException.class);
-//    }
-//
-//    @Test
-//    void 스터디에_참여한_특정_스터디원의_콘텐츠를_조회_시_멤버가_없으면_예외를_던진다() {
-//        // given, when, then
-//        assertThatThrownBy(() -> pomodoroContentService.findMemberContentWithCycleFilter(pomodoroRoom.getId(), 999L, null))
-//                .isInstanceOf(MemberNotFoundException.class);
-//    }
-//
-//    void FLUSH_AND_CLEAR_CONTEXT() {
-//        entityManager.flush();
-//        entityManager.clear();
-//    }
-//}
+package harustudy.backend.content.service;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatCode;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+
+import harustudy.backend.auth.dto.AuthMember;
+import harustudy.backend.content.domain.PomodoroContent;
+import harustudy.backend.content.dto.PomodoroContentResponse;
+import harustudy.backend.content.dto.PomodoroContentsResponse;
+import harustudy.backend.content.dto.WritePlanRequest;
+import harustudy.backend.content.dto.WriteRetrospectRequest;
+import harustudy.backend.member.domain.LoginType;
+import harustudy.backend.member.domain.Member;
+import harustudy.backend.progress.domain.PomodoroProgress;
+import harustudy.backend.progress.exception.PomodoroProgressNotFoundException;
+import harustudy.backend.progress.exception.PomodoroProgressStatusException;
+import harustudy.backend.study.domain.PomodoroStudy;
+import harustudy.backend.study.exception.StudyNotFoundException;
+import jakarta.persistence.EntityManager;
+import jakarta.persistence.PersistenceContext;
+import java.util.List;
+import java.util.Map;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.transaction.annotation.Transactional;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@Transactional
+@SpringBootTest
+class PomodoroContentServiceTest {
+
+    @PersistenceContext
+    private EntityManager entityManager;
+    @Autowired
+    private PomodoroContentService pomodoroContentService;
+
+    private PomodoroStudy pomodoroStudy;
+    private Member member;
+    private PomodoroProgress pomodoroProgress;
+    private PomodoroContent pomodoroContent;
+
+    @BeforeEach
+    void setUp() {
+        pomodoroStudy = new PomodoroStudy("studyName", 1, 20);
+        member = new Member("nickname", "email", "imageUrl", LoginType.GUEST);
+        pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
+        pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
+
+        entityManager.persist(pomodoroStudy);
+        entityManager.persist(member);
+        entityManager.persist(pomodoroProgress);
+        entityManager.persist(pomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+    }
+
+    void FLUSH_AND_CLEAR_CONTEXT() {
+        entityManager.flush();
+        entityManager.clear();
+    }
+
+    @Test
+    void 계획_단계가_아닐_때_계획을_작성하려_하면_예외를_던진다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+
+        pomodoroProgress.proceed();
+        entityManager.merge(pomodoroProgress);
+
+        WritePlanRequest request = new WritePlanRequest(pomodoroProgress.getId(),
+                Map.of("plan", "abc"));
+
+        // when, then
+        assertThatThrownBy(
+                () -> pomodoroContentService.writePlan(authMember, pomodoroStudy.getId(), request))
+                .isInstanceOf(PomodoroProgressStatusException.class);
+    }
+
+    @Test
+    void 계획_단계에서는_계획을_작성할_수_있다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+        WritePlanRequest request = new WritePlanRequest(pomodoroProgress.getId(),
+                Map.of("plan", "abc"));
+
+        // when, then
+        assertThatCode(
+                () -> pomodoroContentService.writePlan(authMember, pomodoroStudy.getId(), request))
+                .doesNotThrowAnyException();
+    }
+
+    @Test
+    void 계획이_작성되어_있지_않은_경우_회고를_작성하려_하면_예외를_던진다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+        WriteRetrospectRequest request = new WriteRetrospectRequest(pomodoroProgress.getId(),
+                Map.of("retrospect", "abc"));
+
+        // when, then
+        assertThatThrownBy(
+                () -> pomodoroContentService.writeRetrospect(authMember, pomodoroStudy.getId(),
+                        request))
+                .isInstanceOf(PomodoroProgressStatusException.class);
+    }
+
+    @Test
+    void 회고_작성_단계가_아닐_때_회고를_작성하려_하면_예외를_던진다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+        WriteRetrospectRequest request = new WriteRetrospectRequest(pomodoroProgress.getId(),
+                Map.of("retrospect", "abc"));
+
+        // when, then
+        assertThatThrownBy(
+                () -> pomodoroContentService.writeRetrospect(authMember, pomodoroStudy.getId(),
+                        request))
+                .isInstanceOf(PomodoroProgressStatusException.class);
+    }
+
+    @Test
+    void 회고_단계에서는_회고를_작성할_수_있다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+        pomodoroContent.changePlan(Map.of("plan", "abc"));
+
+        pomodoroProgress.proceed();
+        pomodoroProgress.proceed();
+
+        entityManager.merge(pomodoroProgress);
+        entityManager.merge(pomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+
+        WriteRetrospectRequest request = new WriteRetrospectRequest(pomodoroProgress.getId(),
+                Map.of("retrospect", "abc"));
+
+        // when, then
+        assertThatCode(
+                () -> pomodoroContentService.writeRetrospect(authMember, pomodoroStudy.getId(),
+                        request))
+                .doesNotThrowAnyException();
+    }
+
+    @Test
+    void 스터디에_참여한_스터디원의_특정_사이클의_콘텐츠를_조회할_수_있다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+        Map<String, String> plan = Map.of("plan", "abc");
+        Map<String, String> retrospect = Map.of("retrospect", "abc");
+        pomodoroContent.changePlan(plan);
+        pomodoroContent.changeRetrospect(retrospect);
+
+        entityManager.merge(pomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+
+        // when
+        PomodoroContentsResponse pomodoroContentsResponse =
+                pomodoroContentService.findContentsWithFilter(authMember, pomodoroStudy.getId(),
+                        pomodoroProgress.getId(), 1);
+        PomodoroContentResponse expectedPomodoroContentResponse =
+                new PomodoroContentResponse(1, plan, retrospect);
+        List<PomodoroContentResponse> content = pomodoroContentsResponse.content();
+
+        // then
+        assertThat(content).containsExactly(expectedPomodoroContentResponse);
+    }
+
+    @Test
+    void 스터디에_참여한_스터디원의_모든_사이클의_콘텐츠를_조회할_수_있다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+
+        pomodoroProgress.proceed();
+        pomodoroProgress.proceed();
+        pomodoroProgress.proceed();
+        pomodoroProgress.proceed();
+
+        Map<String, String> plan = Map.of("plan", "abc");
+        Map<String, String> retrospect = Map.of("retrospect", "abc");
+        pomodoroContent.changePlan(plan);
+        pomodoroContent.changeRetrospect(retrospect);
+
+        PomodoroContent anotherPomodoroContent = new PomodoroContent(pomodoroProgress, 2);
+        Map<String, String> anotherCyclePlan = Map.of("plan", "abc");
+        Map<String, String> anotherCycleRetrospect = Map.of("retrospect", "abc");
+        anotherPomodoroContent.changePlan(anotherCyclePlan);
+        anotherPomodoroContent.changeRetrospect(anotherCycleRetrospect);
+
+        entityManager.merge(pomodoroProgress);
+        entityManager.merge(pomodoroContent);
+        entityManager.persist(anotherPomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+
+        // when
+        PomodoroContentsResponse pomodoroContentsResponse = pomodoroContentService.findContentsWithFilter(authMember,
+                pomodoroStudy.getId(), pomodoroProgress.getId(), null);
+
+        List<PomodoroContentResponse> expectedPomodoroContentResponses = List.of(
+                new PomodoroContentResponse(pomodoroContent.getCycle(), plan, retrospect),
+                new PomodoroContentResponse(anotherPomodoroContent.getCycle(), anotherCyclePlan,
+                        anotherCycleRetrospect)
+        );
+        List<PomodoroContentResponse> content = pomodoroContentsResponse.content();
+
+        // then
+        assertThat(content).isEqualTo(expectedPomodoroContentResponses);
+    }
+
+    @Test
+    void 스터디에_참여한_특정_스터디원의_콘텐츠를_조회시_스터디가_없으면_예외를_던진다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+
+        // when, then
+        assertThatThrownBy(
+                () -> pomodoroContentService.findContentsWithFilter(authMember, 999L,
+                        pomodoroProgress.getId(), null))
+                .isInstanceOf(StudyNotFoundException.class);
+    }
+
+    @Test
+    void 스터디에_참여한_특정_스터디원의_콘텐츠를_조회_시_진행도가_없으면_예외를_던진다() {
+        // given
+        AuthMember authMember = new AuthMember(member.getId());
+
+        // when, then
+        assertThatThrownBy(
+                () -> pomodoroContentService.findContentsWithFilter(authMember,
+                        pomodoroStudy.getId(), 999L, null))
+                .isInstanceOf(PomodoroProgressNotFoundException.class);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/AuthIntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/AuthIntegrationTest.java
new file mode 100644
index 00000000..722971b1
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/integration/AuthIntegrationTest.java
@@ -0,0 +1,90 @@
+package harustudy.backend.integration;
+
+import static org.assertj.core.api.SoftAssertions.assertSoftly;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import harustudy.backend.auth.dto.TokenResponse;
+import jakarta.servlet.http.Cookie;
+import java.nio.charset.StandardCharsets;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator;
+import org.junit.jupiter.api.Test;
+import org.springframework.http.MediaType;
+import org.springframework.mock.web.MockHttpServletResponse;
+import org.springframework.test.web.servlet.MvcResult;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
+class AuthIntegrationTest extends IntegrationTest {
+
+    @BeforeEach
+    void setUp() {
+        super.setUp();
+    }
+
+    @Test
+    void 구글_로그인을_한다() throws Exception {
+        // TODO : 실제 구글 id로 Oauth 기능 테스트하기
+        // given, when
+        LoginResponse response = 구글_로그인("member1");
+
+        // then
+        assertSoftly(softly -> {
+            softly.assertThat(response.tokenResponse().accessToken()).isNotNull();
+            softly.assertThat(response.cookie().getValue()).isNotNull();
+            softly.assertThat(response.cookie().getName()).isEqualTo("refreshToken");
+        });
+    }
+
+    @Test
+    void 비회원_로그인을_한다() throws Exception {
+        // given, when
+        MockHttpServletResponse response = mockMvc.perform(
+                        post("/api/auth/guest"))
+                .andExpect(status().isOk())
+                .andReturn()
+                .getResponse();
+
+        String jsonResponse = response.getContentAsString(StandardCharsets.UTF_8);
+        TokenResponse tokenResponse = objectMapper.readValue(jsonResponse, TokenResponse.class);
+
+        // then
+        assertSoftly(softly -> {
+            softly.assertThat(tokenResponse.accessToken()).isNotNull();
+            softly.assertThat(response.getCookie("refreshToken")).isNull();
+        });
+    }
+
+    @Test
+    void 액세스_토큰을_갱신한다() throws Exception {
+        // given
+        MemberDto memberDto1 = createMember("member1");
+
+        // access token을 재발급 하더라도 Date는 초 단위의 시간 정보를 담은 액세스 토큰을 생성하기 때문에
+        // 같은 access token이 만들어지는 문제가 있어서 갱신된다는 것을 검증하기 위해 사용
+        Thread.sleep(1000);
+
+        // when
+        MvcResult result = mockMvc.perform(
+                        post("/api/auth/refresh")
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .cookie(memberDto1.cookie()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        // then
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        Cookie refreshToken = result.getResponse().getCookie("refreshToken");
+        TokenResponse response = objectMapper.readValue(jsonResponse, TokenResponse.class);
+
+        assertSoftly(softly -> {
+            softly.assertThat(response.accessToken()).isNotNull();
+            softly.assertThat(response.accessToken()).isNotEqualTo(memberDto1.accessToken());
+            softly.assertThat(refreshToken).isNotNull();
+            softly.assertThat(refreshToken.getName()).isEqualTo("refreshToken");
+            softly.assertThat(refreshToken.getValue()).isNotEqualTo(memberDto1.cookie().getValue());
+        });
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/IntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/IntegrationTest.java
index 993bb811..626bcb87 100644
--- a/backend/src/test/java/harustudy/backend/integration/IntegrationTest.java
+++ b/backend/src/test/java/harustudy/backend/integration/IntegrationTest.java
@@ -1,42 +1,120 @@
-//package harustudy.backend.integration;
-//
-//import com.fasterxml.jackson.databind.ObjectMapper;
-//import jakarta.persistence.EntityManager;
-//import jakarta.persistence.PersistenceContext;
-//import org.springframework.beans.factory.annotation.Autowired;
-//import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
-//import org.springframework.boot.test.context.SpringBootTest;
-//import org.springframework.test.web.servlet.MockMvc;
-//import org.springframework.test.web.servlet.setup.MockMvcBuilders;
-//import org.springframework.transaction.annotation.Transactional;
-//import org.springframework.web.context.WebApplicationContext;
-//
-//@AutoConfigureMockMvc
-//@Transactional
-//@SpringBootTest
-//public class IntegrationTest {
-//
-//    @PersistenceContext
-//    protected EntityManager entityManager;
-//
-//    @Autowired
-//    protected ObjectMapper objectMapper;
-//
-//    protected MockMvc mockMvc;
-//
-//    @Autowired
-//    private WebApplicationContext webApplicationContext;
-//
-//    void setUp() {
-//        this.mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
-//    }
-//
-//    void FLUSH_AND_CLEAR_CONTEXT() {
-//        entityManager.flush();
-//        entityManager.clear();
-//    }
-//
-//    protected void setMockMvc() {
-//        this.mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
-//    }
-//}
+package harustudy.backend.integration;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.BDDMockito.given;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import harustudy.backend.auth.config.OauthProperty;
+import harustudy.backend.auth.config.TokenConfig;
+import harustudy.backend.auth.domain.RefreshToken;
+import harustudy.backend.auth.dto.OauthLoginRequest;
+import harustudy.backend.auth.dto.OauthTokenResponse;
+import harustudy.backend.auth.dto.TokenResponse;
+import harustudy.backend.auth.infrastructure.GoogleOauthClient;
+import harustudy.backend.auth.repository.RefreshTokenRepository;
+import harustudy.backend.auth.util.JwtTokenProvider;
+import harustudy.backend.member.domain.LoginType;
+import harustudy.backend.member.domain.Member;
+import jakarta.persistence.EntityManager;
+import jakarta.persistence.PersistenceContext;
+import jakarta.servlet.http.Cookie;
+import java.nio.charset.StandardCharsets;
+import java.util.Map;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.MvcResult;
+import org.springframework.test.web.servlet.setup.MockMvcBuilders;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.context.WebApplicationContext;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@AutoConfigureMockMvc
+@Transactional
+@SpringBootTest
+class IntegrationTest {
+
+    @PersistenceContext
+    protected EntityManager entityManager;
+
+    @Autowired
+    protected ObjectMapper objectMapper;
+
+    protected MockMvc mockMvc;
+
+    @Autowired
+    private WebApplicationContext webApplicationContext;
+
+    @Autowired
+    private JwtTokenProvider jwtTokenProvider;
+
+    @Autowired
+    private TokenConfig tokenConfig;
+
+    @MockBean
+    private GoogleOauthClient googleOauthClient;
+
+    @Autowired
+    private RefreshTokenRepository refreshTokenRepository;
+
+    void setUp() {
+        this.mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
+    }
+
+    void FLUSH_AND_CLEAR_CONTEXT() {
+        entityManager.flush();
+        entityManager.clear();
+    }
+
+    protected void setMockMvc() {
+        this.mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
+    }
+
+    public LoginResponse 구글_로그인(String name) throws Exception {
+        OauthLoginRequest request = new OauthLoginRequest("google", "oauthLoginCode");
+        String jsonRequest = objectMapper.writeValueAsString(request);
+
+        given(googleOauthClient.requestOauthToken(any(String.class), any(OauthProperty.class)))
+                .willReturn(new OauthTokenResponse("mock-token-type", "mock-access-token",
+                        "mock-scope"));
+        given(googleOauthClient.requestOauthUserInfo(any(OauthProperty.class), any(String.class)))
+                .willReturn(Map.of("name", name, "email", "mock-email", "picture", "mock-picture"));
+
+        MvcResult result = mockMvc.perform(
+                        post("/api/auth/login")
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .content(jsonRequest))
+                .andReturn();
+
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        Cookie refreshToken = result.getResponse().getCookie("refreshToken");
+        TokenResponse tokenResponse = objectMapper.readValue(jsonResponse, TokenResponse.class);
+        return new LoginResponse(tokenResponse, refreshToken);
+    }
+
+    private RefreshToken saveRefreshTokenOf(Member member) {
+        RefreshToken refreshToken = new RefreshToken(member,
+                tokenConfig.refreshTokenExpireLength());
+        entityManager.persist(refreshToken);
+        return refreshToken;
+    }
+
+    protected MemberDto createMember(String name) {
+        Member member = new Member(name, "email", "imageUrl", LoginType.GOOGLE);
+        entityManager.persist(member);
+        String accessToken = jwtTokenProvider.createAccessToken(String.valueOf(member.getId()),
+                tokenConfig.accessTokenExpireLength(), tokenConfig.secretKey());
+        RefreshToken refreshToken = new RefreshToken(member,
+                tokenConfig.refreshTokenExpireLength());
+        entityManager.persist(refreshToken);
+        Cookie cookie = new Cookie("refreshToken", refreshToken.getUuid().toString());
+        return new MemberDto(member, accessToken, cookie);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/LoginResponse.java b/backend/src/test/java/harustudy/backend/integration/LoginResponse.java
new file mode 100644
index 00000000..d7b603c8
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/integration/LoginResponse.java
@@ -0,0 +1,11 @@
+package harustudy.backend.integration;
+
+import harustudy.backend.auth.dto.TokenResponse;
+import jakarta.servlet.http.Cookie;
+
+public record LoginResponse(TokenResponse tokenResponse, Cookie cookie) {
+
+    public String createAuthorizationHeader() {
+        return "Bearer " + tokenResponse.accessToken();
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/MemberDto.java b/backend/src/test/java/harustudy/backend/integration/MemberDto.java
new file mode 100644
index 00000000..20878153
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/integration/MemberDto.java
@@ -0,0 +1,11 @@
+package harustudy.backend.integration;
+
+import harustudy.backend.member.domain.Member;
+import jakarta.servlet.http.Cookie;
+
+public record MemberDto(Member member, String accessToken, Cookie cookie) {
+
+    public String createAuthorizationHeader() {
+        return "Bearer " + accessToken();
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/MemberIntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/MemberIntegrationTest.java
index dc2ebd83..90a3fa07 100644
--- a/backend/src/test/java/harustudy/backend/integration/MemberIntegrationTest.java
+++ b/backend/src/test/java/harustudy/backend/integration/MemberIntegrationTest.java
@@ -1,140 +1,60 @@
-//package harustudy.backend.integration;
-//
-//import static org.assertj.core.api.Assertions.assertThat;
-//import static org.assertj.core.api.SoftAssertions.assertSoftly;
-//import static org.junit.jupiter.api.Assertions.assertAll;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
-//import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-//
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.member.dto.GuestRegisterRequest;
-//import harustudy.backend.member.dto.MemberResponseV2;
-//import harustudy.backend.member.dto.MembersResponseV2;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import jakarta.servlet.http.Cookie;
-//import java.nio.charset.StandardCharsets;
-//import java.util.List;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.http.MediaType;
-//import org.springframework.test.web.servlet.MvcResult;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//public class MemberIntegrationTest extends IntegrationTest {
-//
-//    private PomodoroRoom room;
-//    private Member member1;
-//    private Member member2;
-//
-//    @BeforeEach
-//    void setUp() {
-//        super.setUp();
-//
-//        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        room = new PomodoroRoom("roomName", 1, 20, participantCode);
-//
-//        member1 = new Member("member1");
-//        member2 = new Member("member2");
-//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(room, member1);
-//        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(room, member2);
-//
-//        entityManager.persist(participantCode);
-//        entityManager.persist(room);
-//        entityManager.persist(member1);
-//        entityManager.persist(member2);
-//        entityManager.persist(pomodoroProgress1);
-//        entityManager.persist(pomodoroProgress2);
-//    }
-//
-//    @Test
-//    void 멤버를_조회할_수_있다() throws Exception {
-//        // given
-//        MemberResponseV2 expected = new MemberResponseV2(member1.getId(), member1.getNickname());
-//
-//        // when
-//        MvcResult result = mockMvc.perform(
-//                        get("/api/v2/members/{memberId}", member1.getId()))
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        MemberResponseV2 response = objectMapper.readValue(jsonResponse, MemberResponseV2.class);
-//
-//        // then
-//        assertThat(response).isEqualTo(expected);
-//    }
-//
-//    @Test
-//    void 스터디에_참여한_멤버들을_조회할_수_있다() throws Exception {
-//        // given
-//        MemberResponseV2 expectedValue1 = new MemberResponseV2(member1.getId(),
-//                member1.getNickname());
-//        MemberResponseV2 expectedValue2 = new MemberResponseV2(member2.getId(),
-//                member2.getNickname());
-//        MembersResponseV2 expectedResponses = new MembersResponseV2(
-//                List.of(expectedValue1, expectedValue2));
-//
-//        // when
-//        MvcResult result = mockMvc.perform(
-//                        get("/api/v2/members")
-//                                .param("studyId", String.valueOf(room.getId())))
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        MembersResponseV2 response = objectMapper.readValue(jsonResponse, MembersResponseV2.class);
-//
-//        // then
-//        assertAll(
-//                () -> assertThat(response.members()).hasSize(2),
-//                () -> assertThat(response.members().get(0).nickname()).isEqualTo(
-//                        member1.getNickname()),
-//                () -> assertThat(response.members().get(1).nickname()).isEqualTo(
-//                        member2.getNickname())
-//        );
-//
-//        assertSoftly(softly -> {
-//            assertThat(response.members()).hasSize(2);
-//            assertThat(response.members().get(0).nickname()).isEqualTo(member1.getNickname());
-//            assertThat(response.members().get(1).nickname()).isEqualTo(member2.getNickname());
-//        });
-//    }
-//
-//    @Test
-//    void 스터디에_신규_멤버를_등록한다() throws Exception {
-//        // given
-//        GuestRegisterRequest request = new GuestRegisterRequest(room.getId(), "member3");
-//        String body = objectMapper.writeValueAsString(request);
-//
-//        // when
-//        MvcResult result = mockMvc.perform(
-//                        post("/api/v2/members/guest")
-//                                .contentType(MediaType.APPLICATION_JSON)
-//                                .content(body))
-//                .andExpect(status().isCreated())
-//                .andReturn();
-//
-//        String createdUri = result.getResponse().getHeader("Location");
-//        Cookie cookie = result.getResponse().getCookie("memberId");
-//
-//        // then
-//        assertAll(
-//                () -> assertThat(createdUri).contains("/api/v2/members/"),
-//                () -> assertThat(cookie).isNotNull(),
-//                () -> assertThat(cookie.getValue()).isNotNull()
-//        );
-//
-//        assertSoftly(softly -> {
-//            assertThat(createdUri).contains("/api/v2/members/");
-//            assertThat(cookie).isNotNull();
-//            assertThat(cookie.getValue()).isNotNull();
-//        });
-//    }
-//}
+package harustudy.backend.integration;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import harustudy.backend.member.dto.MemberResponse;
+import harustudy.backend.progress.domain.PomodoroProgress;
+import harustudy.backend.study.domain.PomodoroStudy;
+import java.nio.charset.StandardCharsets;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.http.HttpHeaders;
+import org.springframework.test.web.servlet.MvcResult;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+class MemberIntegrationTest extends IntegrationTest {
+
+    private PomodoroStudy study;
+    private MemberDto memberDto1;
+    private MemberDto memberDto2;
+
+    @BeforeEach
+    void setUp() {
+        super.setUp();
+
+        study = new PomodoroStudy("studyName", 1, 20);
+
+        memberDto1 = createMember("member1");
+        memberDto2 = createMember("member2");
+
+        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(study, memberDto1.member(),
+                "name1");
+        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(study, memberDto2.member(),
+                "name2");
+
+        entityManager.persist(study);
+        entityManager.persist(pomodoroProgress1);
+        entityManager.persist(pomodoroProgress2);
+    }
+
+    @Test
+    void 멤버를_조회할_수_있다() throws Exception {
+        // given, when
+        MvcResult result = mockMvc.perform(
+                        get("/api/me")
+                                .header(HttpHeaders.AUTHORIZATION, memberDto1.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        // then
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        MemberResponse response = objectMapper.readValue(jsonResponse, MemberResponse.class);
+
+        assertThat(response.memberId()).isEqualTo(memberDto1.member().getId());
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/PomodoroContentIntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/PomodoroContentIntegrationTest.java
index 25c179da..721337c3 100644
--- a/backend/src/test/java/harustudy/backend/integration/PomodoroContentIntegrationTest.java
+++ b/backend/src/test/java/harustudy/backend/integration/PomodoroContentIntegrationTest.java
@@ -1,170 +1,167 @@
-//package harustudy.backend.integration;
-//
-//
-//import static org.assertj.core.api.Assertions.assertThat;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
-//import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-//
-//import harustudy.backend.content.domain.PomodoroContent;
-//import harustudy.backend.content.dto.PomodoroContentResponse;
-//import harustudy.backend.content.dto.PomodoroContentsResponse;
-//import harustudy.backend.content.dto.WritePlanRequest;
-//import harustudy.backend.content.dto.WriteRetrospectRequest;
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.progress.domain.PomodoroStatus;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import java.nio.charset.StandardCharsets;
-//import java.util.List;
-//import java.util.Map;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.http.MediaType;
-//import org.springframework.test.web.servlet.MvcResult;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
-//public class PomodoroContentIntegrationTest extends IntegrationTest {
-//
-//    private PomodoroRoom pomodoroRoom;
-//    private Member member;
-//
-//    @BeforeEach
-//    void setUp() {
-//        super.setUp();
-//
-//        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        pomodoroRoom = new PomodoroRoom("roomName", 2, 20, participantCode);
-//        member = new Member("nickname");
-//
-//        entityManager.persist(participantCode);
-//        entityManager.persist(pomodoroRoom);
-//        entityManager.persist(member);
-//    }
-//
-//    @Test
-//    void 계획을_작성할_수_있다() throws Exception {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.PLANNING);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WritePlanRequest request = new WritePlanRequest(member.getId(), Map.of("plan", "test"));
-//        String body = objectMapper.writeValueAsString(request);
-//
-//        // when
-//        mockMvc.perform(
-//                        post("/api/v2/studies/{studyId}/contents/write-plan", pomodoroRoom.getId())
-//                                .contentType(MediaType.APPLICATION_JSON)
-//                                .content(body))
-//
-//                // then
-//                .andExpect(status().isOk());
-//    }
-//
-//    @Test
-//    void 회고를_작성할_수_있다() throws Exception {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.RETROSPECT);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        pomodoroContent.changePlan(Map.of("plan", "test"));
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        WriteRetrospectRequest request = new WriteRetrospectRequest(member.getId(), Map.of("retrospect", "test"));
-//        String body = objectMapper.writeValueAsString(request);
-//
-//        // when
-//        mockMvc.perform(
-//                        post("/api/v2/studies/{studyId}/contents/write-retrospect", pomodoroRoom.getId())
-//                                .contentType(MediaType.APPLICATION_JSON)
-//                                .content(body))
-//
-//                // then
-//                .andExpect(status().isOk());
-//    }
-//
-//    @Test
-//    void 특정_사이클의_계획_및_회고를_조회할_수_있다() throws Exception {
-//
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 1, PomodoroStatus.DONE);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        Map<String, String> plan = Map.of("plan", "test");
-//        Map<String, String> retrospect = Map.of("retrospect", "test");
-//        pomodoroContent.changePlan(plan);
-//        pomodoroContent.changeRetrospect(retrospect);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        // when
-//        MvcResult result = mockMvc.perform(
-//                        get("/api/v2/studies/{studyId}/contents", pomodoroRoom.getId())
-//                                .param("memberId", String.valueOf(member.getId()))
-//                                .param("cycle", String.valueOf(pomodoroContent.getCycle())))
-//
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        PomodoroContentsResponse response = objectMapper.readValue(jsonResponse, PomodoroContentsResponse.class);
-//        PomodoroContentsResponse expected = new PomodoroContentsResponse(List.of(
-//                new PomodoroContentResponse(pomodoroContent.getCycle(), plan, retrospect)
-//        ));
-//
-//        // then
-//        assertThat(response).isEqualTo(expected);
-//    }
-//
-//    @Test
-//    void 모든_사이클의_계획_및_회고를_조회할_수_있다() throws Exception {
-//        // given
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, 2, PomodoroStatus.DONE);
-//        PomodoroContent pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
-//        Map<String, String> plan = Map.of("plan", "test");
-//        Map<String, String> retrospect = Map.of("retrospect", "test");
-//        pomodoroContent.changePlan(plan);
-//        pomodoroContent.changeRetrospect(retrospect);
-//
-//        PomodoroContent anotherPomodoroContent = new PomodoroContent(pomodoroProgress, 2);
-//        Map<String, String> anotherPlan = Map.of("plan", "test");
-//        Map<String, String> anotherRetrospect = Map.of("retrospect", "test");
-//        anotherPomodoroContent.changePlan(anotherPlan);
-//        anotherPomodoroContent.changeRetrospect(anotherRetrospect);
-//
-//        entityManager.persist(pomodoroProgress);
-//        entityManager.persist(pomodoroContent);
-//        entityManager.persist(anotherPomodoroContent);
-//        FLUSH_AND_CLEAR_CONTEXT();
-//
-//        // when
-//        MvcResult result = mockMvc.perform(
-//                        get("/api/v2/studies/{studyId}/contents", pomodoroRoom.getId())
-//                                .param("memberId", String.valueOf(member.getId())))
-//
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        PomodoroContentsResponse response = objectMapper.readValue(jsonResponse, PomodoroContentsResponse.class);
-//        PomodoroContentsResponse expected = new PomodoroContentsResponse(List.of(
-//                new PomodoroContentResponse(pomodoroContent.getCycle(), plan, retrospect),
-//                new PomodoroContentResponse(anotherPomodoroContent.getCycle(), anotherPlan, anotherRetrospect)
-//        ));
-//
-//        // then
-//        assertThat(response).isEqualTo(expected);
-//    }
-//}
+package harustudy.backend.integration;
+
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import harustudy.backend.content.domain.PomodoroContent;
+import harustudy.backend.content.dto.PomodoroContentResponse;
+import harustudy.backend.content.dto.PomodoroContentsResponse;
+import harustudy.backend.content.dto.WritePlanRequest;
+import harustudy.backend.content.dto.WriteRetrospectRequest;
+import harustudy.backend.progress.domain.PomodoroProgress;
+import harustudy.backend.study.domain.PomodoroStudy;
+import java.nio.charset.StandardCharsets;
+import java.util.List;
+import java.util.Map;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator;
+import org.junit.jupiter.api.Test;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MvcResult;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
+public class PomodoroContentIntegrationTest extends IntegrationTest {
+
+    private PomodoroStudy pomodoroStudy;
+    private MemberDto memberDto;
+
+    private PomodoroProgress pomodoroProgress;
+    private PomodoroContent pomodoroContent;
+
+    @BeforeEach
+    void setUp() {
+        super.setUp();
+
+        pomodoroStudy = new PomodoroStudy("studyName", 2, 20);
+        memberDto = createMember("member1");
+        pomodoroProgress = new PomodoroProgress(pomodoroStudy, memberDto.member(), "nickname");
+        pomodoroContent = new PomodoroContent(pomodoroProgress, 1);
+
+        entityManager.persist(pomodoroStudy);
+        entityManager.persist(pomodoroProgress);
+        entityManager.persist(pomodoroContent);
+
+        FLUSH_AND_CLEAR_CONTEXT();
+    }
+
+    @Test
+    void 계획을_작성할_수_있다() throws Exception {
+        // given
+        WritePlanRequest request = new WritePlanRequest(pomodoroProgress.getId(),
+                Map.of("plan", "test"));
+        String body = objectMapper.writeValueAsString(request);
+
+        // when, then
+        mockMvc.perform(
+                        post("/api/studies/{studyId}/contents/write-plan", pomodoroStudy.getId())
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .content(body)
+                                .header(HttpHeaders.AUTHORIZATION, memberDto.createAuthorizationHeader()))
+                .andExpect(status().isOk());
+    }
+
+    @Test
+    void 회고를_작성할_수_있다() throws Exception {
+        // given
+        pomodoroContent.changePlan(Map.of("plan", "test"));
+        pomodoroProgress.proceed();
+        pomodoroProgress.proceed();
+
+        entityManager.merge(pomodoroProgress);
+        entityManager.merge(pomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+
+        WriteRetrospectRequest request = new WriteRetrospectRequest(pomodoroProgress.getId(),
+                Map.of("retrospect", "test"));
+        String body = objectMapper.writeValueAsString(request);
+
+        // when, then
+        mockMvc.perform(
+                        post("/api/studies/{studyId}/contents/write-retrospect", pomodoroStudy.getId())
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .content(body)
+                                .header(HttpHeaders.AUTHORIZATION, memberDto.createAuthorizationHeader()))
+                .andExpect(status().isOk());
+    }
+
+    @Test
+    void 특정_사이클의_계획_및_회고를_조회할_수_있다() throws Exception {
+        // given
+        Map<String, String> plan = Map.of("plan", "test");
+        Map<String, String> retrospect = Map.of("retrospect", "test");
+        pomodoroContent.changePlan(plan);
+        pomodoroProgress.proceed();
+        pomodoroProgress.proceed();
+        pomodoroContent.changeRetrospect(retrospect);
+        pomodoroProgress.proceed();
+
+        entityManager.merge(pomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+
+        // when
+        MvcResult result = mockMvc.perform(
+                        get("/api/studies/{studyId}/contents", pomodoroStudy.getId())
+                                .param("progressId", String.valueOf(pomodoroProgress.getId()))
+                                .param("memberId", String.valueOf(memberDto.member().getId()))
+                                .param("cycle", String.valueOf(pomodoroContent.getCycle()))
+                                .header(HttpHeaders.AUTHORIZATION, memberDto.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        // then
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        PomodoroContentsResponse response = objectMapper.readValue(jsonResponse,
+                PomodoroContentsResponse.class);
+        PomodoroContentsResponse expected = new PomodoroContentsResponse(List.of(
+                new PomodoroContentResponse(pomodoroContent.getCycle(), plan, retrospect)
+        ));
+
+        assertThat(response).isEqualTo(expected);
+    }
+
+    @Test
+    void 모든_사이클의_계획_및_회고를_조회할_수_있다() throws Exception {
+        // given
+        Map<String, String> plan = Map.of("plan", "test");
+        Map<String, String> retrospect = Map.of("retrospect", "test");
+        pomodoroContent.changePlan(plan);
+        pomodoroContent.changeRetrospect(retrospect);
+
+        PomodoroContent anotherPomodoroContent = new PomodoroContent(pomodoroProgress, 2);
+        Map<String, String> anotherPlan = Map.of("plan", "test");
+        Map<String, String> anotherRetrospect = Map.of("retrospect", "test");
+        anotherPomodoroContent.changePlan(anotherPlan);
+        anotherPomodoroContent.changeRetrospect(anotherRetrospect);
+
+        entityManager.merge(pomodoroContent);
+        entityManager.merge(pomodoroProgress);
+        entityManager.persist(anotherPomodoroContent);
+        FLUSH_AND_CLEAR_CONTEXT();
+
+        // when
+        MvcResult result = mockMvc.perform(
+                        get("/api/studies/{studyId}/contents", pomodoroStudy.getId())
+                                .param("progressId", String.valueOf(pomodoroProgress.getId()))
+                                .header(HttpHeaders.AUTHORIZATION, memberDto.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        // then
+        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+        PomodoroContentsResponse response = objectMapper.readValue(jsonResponse,
+                PomodoroContentsResponse.class);
+        PomodoroContentsResponse expected = new PomodoroContentsResponse(List.of(
+                new PomodoroContentResponse(pomodoroContent.getCycle(), plan, retrospect),
+                new PomodoroContentResponse(anotherPomodoroContent.getCycle(), anotherPlan,
+                        anotherRetrospect)
+        ));
+
+        assertThat(response).isEqualTo(expected);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/PomodoroProgressIntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/PomodoroProgressIntegrationTest.java
index ea4e569a..2ed2fb29 100644
--- a/backend/src/test/java/harustudy/backend/integration/PomodoroProgressIntegrationTest.java
+++ b/backend/src/test/java/harustudy/backend/integration/PomodoroProgressIntegrationTest.java
@@ -1,84 +1,80 @@
-//package harustudy.backend.integration;
-//
-//import static org.assertj.core.api.Assertions.assertThat;
-//import static org.assertj.core.api.SoftAssertions.assertSoftly;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
-//import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-//
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.progress.domain.PomodoroStatus;
-//import harustudy.backend.progress.dto.PomodoroProgressResponseV2;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.http.MediaType;
-//import org.springframework.test.web.servlet.MvcResult;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//public class PomodoroProgressIntegrationTest extends IntegrationTest {
-//
-//    private PomodoroRoom pomodoroRoom;
-//    private Member member;
-//    private PomodoroProgress pomodoroProgress;
-//
-//    @BeforeEach
-//    void setUp() {
-//        super.setUp();
-//        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        pomodoroRoom = new PomodoroRoom("roomName", 3, 20,
-//                participantCode);
-//        member = new Member("nickname");
-//        pomodoroProgress = new PomodoroProgress(pomodoroRoom, member);
-//
-//        entityManager.persist(participantCode);
-//        entityManager.persist(pomodoroRoom);
-//        entityManager.persist(member);
-//        entityManager.persist(pomodoroProgress);
-//
-//        entityManager.flush();
-//        entityManager.clear();
-//    }
-//
-//    @Test
-//    void studyId와_progressId로_진행도를_조회한다() throws Exception {
-//        // when
-//        MvcResult result = mockMvc.perform(
-//                        get("/api/v2/studies/{studyId}/progresses", pomodoroRoom.getId())
-//                                .param("memberId", Long.toString(member.getId()))
-//                                .contentType(MediaType.APPLICATION_JSON))
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        // then
-//        String jsonResponse = result.getResponse().getContentAsString();
-//        PomodoroProgressResponseV2 response = objectMapper.readValue(jsonResponse,
-//                PomodoroProgressResponseV2.class);
-//
-//        assertSoftly(softly -> {
-//            softly.assertThat(response.currentCycle()).isEqualTo(1);
-//            softly.assertThat(response.step())
-//                    .isEqualTo(PomodoroStatus.PLANNING.toString().toLowerCase());
-//        });
-//    }
-//
-//    @Test
-//    void studyId와_progressId로_진행도를_진행시킨다() throws Exception {
-//        // when, then
-//        mockMvc.perform(
-//                        post("/api/v2/studies/{studyId}/progresses/{progressId}/next-step",
-//                                pomodoroRoom.getId(), pomodoroProgress.getId())
-//                                .contentType(MediaType.APPLICATION_JSON))
-//                .andExpect(status().isNoContent());
-//
-//        PomodoroProgress foundProgress = entityManager.find(PomodoroProgress.class,
-//                pomodoroProgress.getId());
-//        assertThat(foundProgress.getPomodoroStatus()).isEqualTo(PomodoroStatus.STUDYING);
-//    }
-//}
+package harustudy.backend.integration;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.SoftAssertions.assertSoftly;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import harustudy.backend.progress.domain.PomodoroProgress;
+import harustudy.backend.progress.domain.PomodoroStatus;
+import harustudy.backend.progress.dto.PomodoroProgressResponse;
+import harustudy.backend.study.domain.PomodoroStudy;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MvcResult;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+class PomodoroProgressIntegrationTest extends IntegrationTest {
+
+    private PomodoroStudy pomodoroStudy;
+    private PomodoroProgress pomodoroProgress;
+    private MemberDto memberDto;
+
+    @BeforeEach
+    void setUp() {
+        super.setUp();
+        pomodoroStudy = new PomodoroStudy("studyName", 3, 20);
+        memberDto = createMember("member1");
+        pomodoroProgress = new PomodoroProgress(pomodoroStudy, memberDto.member(), "nickname");
+
+        entityManager.persist(pomodoroStudy);
+        entityManager.persist(pomodoroProgress);
+
+        entityManager.flush();
+        entityManager.clear();
+    }
+
+    @Test
+    void progressId로_진행도를_조회한다() throws Exception {
+        // given, when
+        MvcResult result = mockMvc.perform(
+                        get("/api/studies/{studyId}/progresses/{progressId}", pomodoroStudy.getId(),
+                                pomodoroProgress.getId())
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .header(HttpHeaders.AUTHORIZATION, memberDto.createAuthorizationHeader()))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        // then
+        String jsonResponse = result.getResponse().getContentAsString();
+        PomodoroProgressResponse response = objectMapper.readValue(jsonResponse,
+                PomodoroProgressResponse.class);
+
+        assertSoftly(softly -> {
+            softly.assertThat(response.currentCycle()).isEqualTo(1);
+            softly.assertThat(response.step())
+                    .isEqualTo(PomodoroStatus.PLANNING.toString().toLowerCase());
+        });
+    }
+
+    @Test
+    void studyId와_progressId로_진행도를_진행시킨다() throws Exception {
+        // when, then
+        mockMvc.perform(
+                        post("/api/studies/{studyId}/progresses/{progressId}/next-step",
+                                pomodoroStudy.getId(), pomodoroProgress.getId())
+                                .contentType(MediaType.APPLICATION_JSON)
+                                .header(HttpHeaders.AUTHORIZATION, memberDto.createAuthorizationHeader()))
+                .andExpect(status().isNoContent());
+
+        PomodoroProgress foundProgress = entityManager.find(PomodoroProgress.class,
+                pomodoroProgress.getId());
+        assertThat(foundProgress.getPomodoroStatus()).isEqualTo(PomodoroStatus.STUDYING);
+    }
+}
diff --git a/backend/src/test/java/harustudy/backend/integration/PomodoroRoomIntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/PomodoroRoomIntegrationTest.java
deleted file mode 100644
index d62a41c0..00000000
--- a/backend/src/test/java/harustudy/backend/integration/PomodoroRoomIntegrationTest.java
+++ /dev/null
@@ -1,117 +0,0 @@
-//package harustudy.backend.integration;
-//
-//import com.fasterxml.jackson.databind.ObjectMapper;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import harustudy.backend.room.dto.CreatePomodoroRoomRequest;
-//import harustudy.backend.room.dto.CreatePomodoroRoomResponse;
-//import harustudy.backend.room.dto.PomodoroRoomResponseV2;
-//import jakarta.persistence.EntityManager;
-//import java.nio.charset.StandardCharsets;
-//import org.junit.jupiter.api.BeforeEach;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.beans.factory.annotation.Autowired;
-//import org.springframework.http.MediaType;
-//import org.springframework.test.web.servlet.MvcResult;
-//
-//import static org.assertj.core.api.Assertions.assertThat;
-//import static org.junit.jupiter.api.Assertions.assertAll;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
-//import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
-//import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.header;
-//import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//class PomodoroRoomIntegrationTest extends IntegrationTest {
-//
-//    @Autowired
-//    private ObjectMapper objectMapper;
-//
-//    @Autowired
-//    private EntityManager entityManager;
-//
-//    private ParticipantCode participantCode;
-//    private PomodoroRoom pomodoroRoom;
-//
-//    @BeforeEach
-//    void setUp() {
-//        super.setMockMvc();
-//        participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        pomodoroRoom = new PomodoroRoom("room", 3, 20, participantCode);
-//
-//        entityManager.persist(participantCode);
-//        entityManager.persist(pomodoroRoom);
-//
-//        entityManager.flush();
-//        entityManager.clear();
-//    }
-//
-//    @Test
-//    void 스터디_아이디로_스터디를_조회한다() throws Exception {
-//        // given, when
-//        MvcResult result = mockMvc.perform(get("/api/v2/studies/{studyId}", pomodoroRoom.getId())
-//                        .accept(MediaType.APPLICATION_JSON))
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        // then
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        PomodoroRoomResponseV2 response = objectMapper.readValue(jsonResponse,
-//                PomodoroRoomResponseV2.class);
-//
-//        assertAll(
-//                () -> assertThat(response.name()).isEqualTo(pomodoroRoom.getName()),
-//                () -> assertThat(response.totalCycle()).isEqualTo(pomodoroRoom.getTotalCycle()),
-//                () -> assertThat(response.timePerCycle()).isEqualTo(pomodoroRoom.getTimePerCycle())
-//        );
-//    }
-//
-//    @Test
-//    void 참여코드로_스터디를_조회한다() throws Exception {
-//        // given, when
-//        MvcResult result = mockMvc.perform(get("/api/v2/studies")
-//                        .param("participantCode", participantCode.getCode())
-//                        .accept(MediaType.APPLICATION_JSON))
-//                .andExpect(status().isOk())
-//                .andReturn();
-//
-//        // then
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        PomodoroRoomResponseV2 response = objectMapper.readValue(jsonResponse,
-//                PomodoroRoomResponseV2.class);
-//
-//        assertAll(
-//                () -> assertThat(response.name()).isEqualTo(pomodoroRoom.getName()),
-//                () -> assertThat(response.totalCycle()).isEqualTo(pomodoroRoom.getTotalCycle()),
-//                () -> assertThat(response.timePerCycle()).isEqualTo(pomodoroRoom.getTimePerCycle())
-//        );
-//    }
-//
-//    @Test
-//    void 스터디를_개설한다() throws Exception {
-//        // given
-//        CreatePomodoroRoomRequest request = new CreatePomodoroRoomRequest("studyName", 1, 20);
-//        String jsonRequest = objectMapper.writeValueAsString(request);
-//
-//        // when
-//        MvcResult result = mockMvc.perform(post("/api/v2/studies")
-//                        .content(jsonRequest)
-//                        .contentType(MediaType.APPLICATION_JSON))
-//                .andExpect(status().isCreated())
-//                .andExpect(header().exists("Location"))
-//                .andReturn();
-//
-//        // then
-//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
-//        CreatePomodoroRoomResponse response = objectMapper.readValue(jsonResponse, CreatePomodoroRoomResponse.class);
-//
-//        assertThat(response.participantCode())
-//                .isAlphabetic()
-//                .isUpperCase()
-//                .hasSize(6);
-//    }
-//}
diff --git a/backend/src/test/java/harustudy/backend/integration/PomodoroStudyIntegrationTest.java b/backend/src/test/java/harustudy/backend/integration/PomodoroStudyIntegrationTest.java
new file mode 100644
index 00000000..e75d59ab
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/integration/PomodoroStudyIntegrationTest.java
@@ -0,0 +1,177 @@
+package harustudy.backend.integration;
+
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+class PomodoroStudyIntegrationTest extends IntegrationTest {
+
+//    @Autowired
+//    private ObjectMapper objectMapper;
+//
+//    @Autowired
+//    private EntityManager entityManager;
+//
+//    private ParticipantCode participantCode1;
+//    private ParticipantCode participantCode2;
+//    private PomodoroStudy pomodoroStudy1;
+//    private PomodoroStudy pomodoroStudy2;
+//    private MemberDto memberDto1;
+//
+//    @BeforeEach
+//    void setUp() {
+//        super.setMockMvc();
+//        participantCode1 = new ParticipantCode(new CodeGenerationStrategy());
+//        participantCode2 = new ParticipantCode(new CodeGenerationStrategy());
+//        pomodoroStudy1 = new PomodoroStudy("study1", 3, 20, participantCode1);
+//        pomodoroStudy2 = new PomodoroStudy("study2", 4, 30, participantCode2);
+//        memberDto1 = createMember("member1");
+//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroStudy1,
+//                memberDto1.member(), "nickname");
+//
+//        entityManager.persist(participantCode1);
+//        entityManager.persist(participantCode2);
+//        entityManager.persist(pomodoroStudy1);
+//        entityManager.persist(pomodoroStudy2);
+//        entityManager.persist(pomodoroProgress1);
+//
+//        entityManager.flush();
+//        entityManager.clear();
+//    }
+//
+//    @Test
+//    void 스터디_아이디로_스터디를_조회한다() throws Exception {
+//        // given
+//        Long studyId = pomodoroStudy1.getId();
+//
+//        // when
+//        MvcResult result = mockMvc.perform(get("/api/studies/{studyId}", studyId)
+//                        .accept(MediaType.APPLICATION_JSON)
+//                        .header(HttpHeaders.AUTHORIZATION, memberDto1.createAuthorizationHeader()))
+//                .andExpect(status().isOk())
+//                .andReturn();
+//
+//        // then
+//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+//        PomodoroStudyResponse response = objectMapper.readValue(jsonResponse,
+//                PomodoroStudyResponse.class);
+//
+//        assertSoftly(softly -> {
+//            softly.assertThat(response.studyId()).isEqualTo(pomodoroStudy1.getId());
+//            softly.assertThat(response.name()).isEqualTo(pomodoroStudy1.getName());
+//            softly.assertThat(response.totalCycle()).isEqualTo(pomodoroStudy1.getTotalCycle());
+//            softly.assertThat(response.timePerCycle()).isEqualTo(pomodoroStudy1.getTimePerCycle());
+//        });
+//    }
+//
+//    @Test
+//    void 참여코드로_스터디를_조회한다() throws Exception {
+//        // given
+//
+//        // when
+//        MvcResult result = mockMvc.perform(get("/api/studies")
+//                        .param("participantCode", participantCode1.getCode())
+//                        .accept(MediaType.APPLICATION_JSON)
+//                        .header(HttpHeaders.AUTHORIZATION, memberDto1.createAuthorizationHeader()))
+//                .andExpect(status().isOk())
+//                .andReturn();
+//
+//        // then
+//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+//        PomodoroStudyResponse response = objectMapper.readValue(jsonResponse,
+//                PomodoroStudyResponse.class);
+//        List<PomodoroStudyResponse> studies = response.studies();
+//
+//        assertSoftly(softly -> {
+//            softly.assertThat(studies).hasSize(1);
+//            softly.assertThat(studies.get(0).studyId()).isEqualTo(pomodoroStudy1.getId());
+//            softly.assertThat(studies.get(0).name()).isEqualTo(pomodoroStudy1.getName());
+//            softly.assertThat(studies.get(0).totalCycle()).isEqualTo(pomodoroStudy1.getTotalCycle());
+//            softly.assertThat(studies.get(0).timePerCycle())
+//                    .isEqualTo(pomodoroStudy1.getTimePerCycle());
+//        });
+//    }
+//
+//    @Test
+//    void 멤버_아이디로_스터디를_조회한다() throws Exception {
+//        // given, when
+//        MvcResult result = mockMvc.perform(get("/api/studies")
+//                        .param("memberId", String.valueOf(memberDto1.member().getId()))
+//                        .accept(MediaType.APPLICATION_JSON)
+//                        .header(HttpHeaders.AUTHORIZATION, memberDto1.createAuthorizationHeader()))
+//                .andExpect(status().isOk())
+//                .andReturn();
+//
+//        // then
+//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+//        PomodoroStudyResponse response = objectMapper.readValue(jsonResponse,
+//                PomodoroStudyResponse.class);
+//        List<PomodoroStudyResponse> studies = response.studies();
+//
+//        assertSoftly(softly -> {
+//            softly.assertThat(studies).hasSize(1);
+//            softly.assertThat(studies.get(0).studyId()).isEqualTo(pomodoroStudy1.getId());
+//            softly.assertThat(studies.get(0).name()).isEqualTo(pomodoroStudy1.getName());
+//            softly.assertThat(studies.get(0).totalCycle()).isEqualTo(pomodoroStudy1.getTotalCycle());
+//            softly.assertThat(studies.get(0).timePerCycle())
+//                    .isEqualTo(pomodoroStudy1.getTimePerCycle());
+//        });
+//    }
+//
+//    @Test
+//    void 모든_스터디를_조회한다() throws Exception {
+//        // given, when
+//        MvcResult result = mockMvc.perform(get("/api/studies")
+//                        .accept(MediaType.APPLICATION_JSON)
+//                        .header(HttpHeaders.AUTHORIZATION, memberDto1.createAuthorizationHeader()))
+//                .andExpect(status().isOk())
+//                .andReturn();
+//
+//        // then
+//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+//        PomodoroStudyResponse response = objectMapper.readValue(jsonResponse,
+//                PomodoroStudyResponse.class);
+//        List<PomodoroStudyResponse> studies = response.studies();
+//
+//        assertSoftly(softly -> {
+//            softly.assertThat(studies).hasSize(2);
+//            softly.assertThat(studies.get(0).studyId()).isEqualTo(pomodoroStudy1.getId());
+//            softly.assertThat(studies.get(0).name()).isEqualTo(pomodoroStudy1.getName());
+//            softly.assertThat(studies.get(0).totalCycle()).isEqualTo(pomodoroStudy1.getTotalCycle());
+//            softly.assertThat(studies.get(0).timePerCycle())
+//                    .isEqualTo(pomodoroStudy1.getTimePerCycle());
+//            softly.assertThat(studies.get(1).studyId()).isEqualTo(pomodoroStudy2.getId());
+//            softly.assertThat(studies.get(1).name()).isEqualTo(pomodoroStudy2.getName());
+//            softly.assertThat(studies.get(1).totalCycle()).isEqualTo(pomodoroStudy2.getTotalCycle());
+//            softly.assertThat(studies.get(1).timePerCycle())
+//                    .isEqualTo(pomodoroStudy2.getTimePerCycle());
+//        });
+//    }
+//
+//    @Test
+//    void 스터디를_개설한다() throws Exception {
+//        // given
+//        CreatePomodoroStudyRequest request = new CreatePomodoroStudyRequest("studyName", 1, 20);
+//        String jsonRequest = objectMapper.writeValueAsString(request);
+//
+//        // when
+//        MvcResult result = mockMvc.perform(post("/api/studies")
+//                        .content(jsonRequest)
+//                        .contentType(MediaType.APPLICATION_JSON)
+//                        .header(HttpHeaders.AUTHORIZATION, memberDto1.createAuthorizationHeader()))
+//                .andExpect(status().isCreated())
+//                .andExpect(header().exists("Location"))
+//                .andReturn();
+//
+//        // then
+//        String jsonResponse = result.getResponse().getContentAsString(StandardCharsets.UTF_8);
+//        CreatePomodoroStudyResponse response = objectMapper.readValue(jsonResponse,
+//                CreatePomodoroStudyResponse.class);
+//
+//        assertThat(response.participantCode())
+//                .isAlphabetic()
+//                .isUpperCase()
+//                .hasSize(6);
+//    }
+}
diff --git a/backend/src/test/java/harustudy/backend/member/service/MemberServiceTest.java b/backend/src/test/java/harustudy/backend/member/service/MemberServiceTest.java
index 7f68d2d6..0acaa552 100644
--- a/backend/src/test/java/harustudy/backend/member/service/MemberServiceTest.java
+++ b/backend/src/test/java/harustudy/backend/member/service/MemberServiceTest.java
@@ -50,7 +50,7 @@ void setUp() {
         AuthMember authMember = new AuthMember(member1.getId());
 
         // when
-        MemberResponse foundMember = memberService.findOauthProfile(authMember);
+        MemberResponse foundMember = memberService.findMemberProfile(authMember);
 
         //then
         assertSoftly(softly -> {
diff --git a/backend/src/test/java/harustudy/backend/participantcode/domain/ParticipantCodeTest.java b/backend/src/test/java/harustudy/backend/participantcode/domain/ParticipantCodeTest.java
index 5ae1598d..5c6e6c6f 100644
--- a/backend/src/test/java/harustudy/backend/participantcode/domain/ParticipantCodeTest.java
+++ b/backend/src/test/java/harustudy/backend/participantcode/domain/ParticipantCodeTest.java
@@ -3,9 +3,7 @@
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.assertj.core.api.Assertions.assertThatCode;
 
-import harustudy.backend.room.domain.CodeGenerationStrategy;
-import harustudy.backend.room.domain.GenerationStrategy;
-import harustudy.backend.room.domain.ParticipantCode;
+import harustudy.backend.study.domain.PomodoroStudy;
 import org.junit.jupiter.api.DisplayNameGeneration;
 import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
 import org.junit.jupiter.api.Test;
@@ -19,7 +17,8 @@ class ParticipantCodeTest {
         // given & when
         GenerationStrategy generationStrategy = new CodeGenerationStrategy();
         // then
-        assertThatCode(() -> new ParticipantCode(generationStrategy))
+        assertThatCode(
+                () -> new ParticipantCode(new PomodoroStudy("name", 1, 20), generationStrategy))
                 .doesNotThrowAnyException();
     }
 
@@ -27,7 +26,8 @@ class ParticipantCodeTest {
     void 기존_값과_다른_참여코드를_생성할_수_있다() {
         // given & when
         GenerationStrategy generationStrategy = new CodeGenerationStrategy();
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
+        ParticipantCode participantCode = new ParticipantCode(new PomodoroStudy("name", 1, 20),
+                generationStrategy);
 
         String oldCode = participantCode.getCode();
         participantCode.regenerate();
diff --git a/backend/src/test/java/harustudy/backend/progress/domain/PomodoroProgressTest.java b/backend/src/test/java/harustudy/backend/progress/domain/PomodoroProgressTest.java
index dd858331..25c8c135 100644
--- a/backend/src/test/java/harustudy/backend/progress/domain/PomodoroProgressTest.java
+++ b/backend/src/test/java/harustudy/backend/progress/domain/PomodoroProgressTest.java
@@ -1,13 +1,13 @@
 package harustudy.backend.progress.domain;
 
-import static org.assertj.core.api.Assertions.*;
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatCode;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
 import static org.assertj.core.api.SoftAssertions.assertSoftly;
 
 import harustudy.backend.member.domain.Member;
 import harustudy.backend.progress.exception.NicknameLengthException;
-import harustudy.backend.room.domain.CodeGenerationStrategy;
-import harustudy.backend.room.domain.ParticipantCode;
-import harustudy.backend.room.domain.PomodoroRoom;
+import harustudy.backend.study.domain.PomodoroStudy;
 import java.util.stream.IntStream;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayNameGeneration;
@@ -20,13 +20,12 @@
 @DisplayNameGeneration(ReplaceUnderscores.class)
 class PomodoroProgressTest {
 
-    private PomodoroRoom pomodoroRoom;
+    private PomodoroStudy pomodoroStudy;
     private Member member;
 
     @BeforeEach
     void setUp() {
-        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-        pomodoroRoom = new PomodoroRoom("room", 3, 25, participantCode);
+        pomodoroStudy = new PomodoroStudy("study", 3, 25);
         member = Member.guest();
     }
 
@@ -34,7 +33,7 @@ void setUp() {
     @ValueSource(strings = {"", "12345678901"})
     void 멤버의_닉네임이_1자_미만_10자_초과이면_예외를_던진다(String nickname) {
         // given, when, then
-        assertThatThrownBy(() -> new PomodoroProgress(pomodoroRoom, member, nickname))
+        assertThatThrownBy(() -> new PomodoroProgress(pomodoroStudy, member, nickname))
                 .isInstanceOf(NicknameLengthException.class);
     }
 
@@ -42,15 +41,15 @@ void setUp() {
     @ValueSource(strings = {"1", "1234567890"})
     void 멤버의_닉네임이_1자_이상_10자_이하이면_정상_케이스이다(String nickname) {
         // given, when, then
-        assertThatCode(() -> new PomodoroProgress(pomodoroRoom, member, nickname))
+        assertThatCode(() -> new PomodoroProgress(pomodoroStudy, member, nickname))
                 .doesNotThrowAnyException();
     }
 
     @Test
     void 닉네임이_동일한지_확인할_수_있다() {
         // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, "nickname");
-        PomodoroProgress otherProgress = new PomodoroProgress(pomodoroRoom, member, "nickname");
+        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
+        PomodoroProgress otherProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
 
         // when, then
         assertThat(pomodoroProgress.hasSameNicknameWith(otherProgress)).isTrue();
@@ -59,8 +58,8 @@ void setUp() {
     @Test
     void 닉네임이_다른지_확인할_수_있다() {
         // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, "nickname");
-        PomodoroProgress otherProgress = new PomodoroProgress(pomodoroRoom, member, "another");
+        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
+        PomodoroProgress otherProgress = new PomodoroProgress(pomodoroStudy, member, "another");
 
         // when, then
         assertThat(pomodoroProgress.hasSameNicknameWith(otherProgress)).isFalse();
@@ -69,7 +68,7 @@ void setUp() {
     @Test
     void 다음_스터디_단계로_넘어갈_수_있다() {
         // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, "nickname");
+        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
 
         // given
         pomodoroProgress.proceed();
@@ -85,7 +84,7 @@ void setUp() {
     @Test
     void 마지막_사이클이_아니라면_회고_종료_후_사이클_수가_증가한다() {
         // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, "nickname");
+        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
 
         // when
         int statusCountPerCycle = 3;
@@ -105,7 +104,7 @@ void setUp() {
     @Test
     void 마지막_사이클이라면_회고_이후_사이클은_그대로이며_종료_상태로_넘어간다() {
         // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member, "nickname");
+        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
 
         int statusCountPerCycle = 3;
         int totalCycle = 3;
diff --git a/backend/src/test/java/harustudy/backend/progress/repository/PomodoroProgressRepositoryTest.java b/backend/src/test/java/harustudy/backend/progress/repository/PomodoroProgressRepositoryTest.java
index 85488d62..dd294763 100644
--- a/backend/src/test/java/harustudy/backend/progress/repository/PomodoroProgressRepositoryTest.java
+++ b/backend/src/test/java/harustudy/backend/progress/repository/PomodoroProgressRepositoryTest.java
@@ -1,62 +1,45 @@
-//package harustudy.backend.progress.repository;
-//
-//import static org.assertj.core.api.Assertions.assertThat;
-//import static org.assertj.core.api.SoftAssertions.assertSoftly;
-//
-//import harustudy.backend.member.domain.Member;
-//import harustudy.backend.member.repository.MemberRepository;
-//import harustudy.backend.room.domain.CodeGenerationStrategy;
-//import harustudy.backend.room.domain.ParticipantCode;
-//import harustudy.backend.room.repository.ParticipantCodeRepository;
-//import harustudy.backend.progress.domain.PomodoroProgress;
-//import harustudy.backend.room.domain.PomodoroRoom;
-//import harustudy.backend.room.repository.PomodoroRoomRepository;
-//import jakarta.persistence.PersistenceUtil;
-//import java.util.List;
-//import java.util.Optional;
-//import org.junit.jupiter.api.DisplayNameGeneration;
-//import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-//import org.junit.jupiter.api.Test;
-//import org.springframework.beans.factory.annotation.Autowired;
-//import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
-//import org.springframework.boot.test.autoconfigure.orm.jpa.TestEntityManager;
-//
-//@SuppressWarnings("NonAsciiCharacters")
-//@DisplayNameGeneration(ReplaceUnderscores.class)
-//@DataJpaTest
-//class PomodoroProgressRepositoryTest {
+package harustudy.backend.progress.repository;
+
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@DataJpaTest
+class PomodoroProgressRepositoryTest {
 //
 //    @Autowired
 //    private PomodoroProgressRepository pomodoroProgressRepository;
+//
 //    @Autowired
-//    private PomodoroRoomRepository pomodoroRoomRepository;
+//    private PomodoroStudyRepository pomodoroStudyRepository;
+//
 //    @Autowired
 //    private MemberRepository memberRepository;
-//    @Autowired
-//    private ParticipantCodeRepository participantCodeRepository;
 //
 //    @Autowired
 //    private TestEntityManager testEntityManager;
 //
 //    @Test
-//    void room과_member를_통해_pomodoroProgress를_조회한다() {
+//    void study와_member를_통해_pomodoroProgress를_조회한다() {
 //        // given
-//        Member member = new Member("member");
+//        Member member = new Member("member", "email", "imageUrl", LoginType.GUEST);
 //        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        PomodoroRoom pomodoroRoom = new PomodoroRoom("roomName", 1, 20, participantCode);
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("studyName", 1, 20, participantCode);
 //        memberRepository.save(member);
 //        participantCodeRepository.save(participantCode);
-//        pomodoroRoomRepository.save(pomodoroRoom);
+//        pomodoroStudyRepository.save(pomodoroStudy);
 //
-//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom, member);
+//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy, member, "nickname");
 //        pomodoroProgressRepository.save(pomodoroProgress);
 //
 //        testEntityManager.flush();
 //        testEntityManager.clear();
 //
 //        // when
-//        Optional<PomodoroProgress> found = pomodoroProgressRepository.findByPomodoroRoomAndMember(
-//                pomodoroRoom, member);
+//        Optional<PomodoroProgress> found = pomodoroProgressRepository.findByPomodoroStudyAndMember(
+//                pomodoroStudy, member);
 //
 //        // then
 //        assertThat(found).isPresent();
@@ -64,44 +47,44 @@
 //    }
 //
 //    @Test
-//    void room으로_pomodoroProgress_리스트를_조회한다() {
+//    void study로_pomodoroProgress_리스트를_조회한다() {
 //        // given
-//        Member member1 = new Member("member1");
-//        Member member2 = new Member("member2");
+//        Member member1 = new Member("member1", "email", "imageUrl", LoginType.GUEST);
+//        Member member2 = new Member("member2", "email", "imageUrl", LoginType.GUEST);
 //        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        PomodoroRoom pomodoroRoom = new PomodoroRoom("roomName", 1, 20, participantCode);
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("studyName", 1, 20, participantCode);
 //        memberRepository.save(member1);
 //        memberRepository.save(member2);
 //        participantCodeRepository.save(participantCode);
-//        pomodoroRoomRepository.save(pomodoroRoom);
+//        pomodoroStudyRepository.save(pomodoroStudy);
 //
-//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroRoom, member1);
-//        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(pomodoroRoom, member2);
+//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroStudy, member1, "nickname1");
+//        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(pomodoroStudy, member2, "nickname2");
 //        pomodoroProgressRepository.save(pomodoroProgress1);
 //        pomodoroProgressRepository.save(pomodoroProgress2);
 //
 //        // when
-//        List<PomodoroProgress> pomodoroProgresses = pomodoroProgressRepository.findAllByPomodoroRoom(
-//                pomodoroRoom);
+//        List<PomodoroProgress> pomodoroProgresses = pomodoroProgressRepository.findByPomodoroStudy(
+//                pomodoroStudy);
 //
 //        // then
-//        assertThat(pomodoroProgresses.size()).isEqualTo(2);
+//        assertThat(pomodoroProgresses).hasSize(2);
 //    }
 //
 //    @Test
-//    void room으로_pomodoroProgress와_member를_함께_조회한다() {
+//    void study로_pomodoroProgress와_member를_함께_조회한다() {
 //        // given
-//        Member member1 = new Member("member1");
-//        Member member2 = new Member("member2");
+//        Member member1 = new Member("member1", "email", "imageUrl", LoginType.GUEST);
+//        Member member2 = new Member("member2", "email", "imageUrl", LoginType.GUEST);
 //        ParticipantCode participantCode = new ParticipantCode(new CodeGenerationStrategy());
-//        PomodoroRoom pomodoroRoom = new PomodoroRoom("roomName", 1, 20, participantCode);
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("studyName", 1, 20, participantCode);
 //        memberRepository.save(member1);
 //        memberRepository.save(member2);
 //        participantCodeRepository.save(participantCode);
-//        pomodoroRoomRepository.save(pomodoroRoom);
+//        pomodoroStudyRepository.save(pomodoroStudy);
 //
-//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroRoom, member1);
-//        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(pomodoroRoom, member2);
+//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroStudy, member1, "nickname1");
+//        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(pomodoroStudy, member2, "nickname2");
 //        pomodoroProgressRepository.save(pomodoroProgress1);
 //        pomodoroProgressRepository.save(pomodoroProgress2);
 //
@@ -112,8 +95,8 @@
 //                .getEntityManagerFactory().getPersistenceUnitUtil();
 //
 //        // when
-//        List<PomodoroProgress> progresses = pomodoroProgressRepository.findAllByPomodoroRoomFetchMember(
-//                pomodoroRoom);
+//        List<PomodoroProgress> progresses = pomodoroProgressRepository.findAllByPomodoroStudyFetchMember(
+//                pomodoroStudy);
 //
 //        // then
 //        assertSoftly(softly -> {
@@ -122,4 +105,4 @@
 //            softly.assertThat(persistenceUtil.isLoaded(member2)).isTrue();
 //        });
 //    }
-//}
+}
diff --git a/backend/src/test/java/harustudy/backend/progress/service/PomodoroProgressServiceTest.java b/backend/src/test/java/harustudy/backend/progress/service/PomodoroProgressServiceTest.java
index 1f0f906c..29ffded4 100644
--- a/backend/src/test/java/harustudy/backend/progress/service/PomodoroProgressServiceTest.java
+++ b/backend/src/test/java/harustudy/backend/progress/service/PomodoroProgressServiceTest.java
@@ -1,28 +1,11 @@
 package harustudy.backend.progress.service;
 
-import static org.assertj.core.api.Assertions.assertThat;
-import static org.assertj.core.api.Assertions.assertThatThrownBy;
-import static org.assertj.core.api.SoftAssertions.assertSoftly;
 import static org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
 
-import harustudy.backend.auth.dto.AuthMember;
-import harustudy.backend.auth.exception.AuthorizationException;
-import harustudy.backend.member.domain.Member;
-import harustudy.backend.progress.domain.PomodoroProgress;
-import harustudy.backend.progress.domain.PomodoroStatus;
-import harustudy.backend.progress.dto.ParticipateStudyRequest;
-import harustudy.backend.progress.dto.PomodoroProgressResponse;
-import harustudy.backend.progress.dto.PomodoroProgressesResponse;
-import harustudy.backend.progress.exception.ProgressNotBelongToRoomException;
-import harustudy.backend.room.domain.CodeGenerationStrategy;
-import harustudy.backend.room.domain.ParticipantCode;
-import harustudy.backend.room.domain.PomodoroRoom;
+import harustudy.backend.study.domain.PomodoroStudy;
 import jakarta.persistence.EntityManager;
 import jakarta.persistence.PersistenceContext;
-import java.util.List;
-import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayNameGeneration;
-import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.context.SpringBootTest;
 import org.springframework.transaction.annotation.Transactional;
@@ -33,175 +16,175 @@
 @Transactional
 public class PomodoroProgressServiceTest {
 
-    @Autowired
-    private PomodoroProgressService pomodoroProgressService;
-
-    @PersistenceContext
-    private EntityManager entityManager;
-
-    private PomodoroRoom pomodoroRoom1;
-    private PomodoroRoom pomodoroRoom2;
-    private Member member1;
-    private Member member2;
-
-    @BeforeEach
-    void setUp() {
-        ParticipantCode participantCode1 = new ParticipantCode(new CodeGenerationStrategy());
-        ParticipantCode participantCode2 = new ParticipantCode(new CodeGenerationStrategy());
-        pomodoroRoom1 = new PomodoroRoom("roomName1", 3, 20, participantCode1);
-        pomodoroRoom2 = new PomodoroRoom("roomName2", 3, 20, participantCode2);
-        member1 = Member.guest();
-        member2 = Member.guest();
-
-        entityManager.persist(participantCode1);
-        entityManager.persist(participantCode2);
-        entityManager.persist(pomodoroRoom1);
-        entityManager.persist(pomodoroRoom2);
-        entityManager.persist(member1);
-        entityManager.persist(member2);
-
-        entityManager.flush();
-        entityManager.clear();
-    }
-
-    @Test
-    void 진행도를_조회할_수_있다() {
-        // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom2, member1, "nickname1");
-        AuthMember authMember = new AuthMember(member1.getId());
-
-        entityManager.persist(pomodoroProgress);
-
-        // when
-        PomodoroProgressResponse response =
-                pomodoroProgressService.findPomodoroProgress(authMember, pomodoroRoom2.getId(), pomodoroProgress.getId());
-        PomodoroProgressResponse expected = PomodoroProgressResponse.from(pomodoroProgress);
-
-        // then
-        assertThat(response).usingRecursiveComparison()
-                .ignoringExpectedNullFields()
-                .isEqualTo(expected);
-    }
-
-    @Test
-    void 스터디의_모든_진행도를_조회할_수_있다() {
-        // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom2, member1, "nickname1");
-        PomodoroProgress anotherPomodoroProgress = new PomodoroProgress(pomodoroRoom2, member2, "nickname2");
-        AuthMember authMember1 = new AuthMember(member1.getId());
-
-        entityManager.persist(pomodoroProgress);
-        entityManager.persist(anotherPomodoroProgress);
-
-        // when
-        PomodoroProgressesResponse response =
-                pomodoroProgressService.findPomodoroProgressWithFilter(authMember1, pomodoroRoom2.getId(), null);
-        PomodoroProgressesResponse expected = PomodoroProgressesResponse.from(List.of(
-                PomodoroProgressResponse.from(pomodoroProgress),
-                PomodoroProgressResponse.from(anotherPomodoroProgress)
-        ));
-
-        // then
-        assertThat(response).usingRecursiveComparison()
-                .ignoringExpectedNullFields()
-                .isEqualTo(expected);
-    }
-
-    @Test
-    void 참여하지_않은_스터디에_대해서는_모든_진행도를_조회할_수_없다() {
-        // given
-        AuthMember authMember = new AuthMember(member1.getId());
-
-        // when, then
-        assertThatThrownBy(() ->
-                pomodoroProgressService.findPomodoroProgressWithFilter(authMember, pomodoroRoom2.getId(), null))
-                .isInstanceOf(AuthorizationException.class);
-    }
-
-    @Test
-    void 특정_멤버의_진행도를_조회할_수_있다() {
-        // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom2, member1, "nickname1");
-        PomodoroProgress anotherPomodoroProgress = new PomodoroProgress(pomodoroRoom2, member2, "nickname2");
-        AuthMember authMember1 = new AuthMember(member1.getId());
-
-        entityManager.persist(pomodoroProgress);
-        entityManager.persist(anotherPomodoroProgress);
-
-        // when
-        PomodoroProgressesResponse response =
-                pomodoroProgressService.findPomodoroProgressWithFilter(authMember1, pomodoroRoom2.getId(), member1.getId());
-        PomodoroProgressesResponse expected = PomodoroProgressesResponse.from(List.of(
-                PomodoroProgressResponse.from(pomodoroProgress)
-        ));
-
-        // then
-        assertThat(response).usingRecursiveComparison()
-                .ignoringExpectedNullFields()
-                .isEqualTo(expected);
-    }
-
-    @Test
-    void 자신의_소유가_아닌_진행도는_조회할_수_없다() {
-        // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom2, member1, "nickname1");
-        AuthMember authMember = new AuthMember(member2.getId());
-
-        entityManager.persist(pomodoroProgress);
-
-        // when, then
-        assertThatThrownBy(() ->
-                pomodoroProgressService.findPomodoroProgress(authMember, pomodoroRoom2.getId(), pomodoroProgress.getId()))
-                .isInstanceOf(AuthorizationException.class);
-    }
-
-    @Test
-    void 해당_스터디의_진행도가_아니라면_조회할_수_없다() {
-        // given
-        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroRoom1, member1, "nickname1");
-        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(pomodoroRoom2, member1, "nickname1");
-        AuthMember authMember = new AuthMember(member1.getId());
-
-        entityManager.persist(pomodoroProgress1);
-        entityManager.persist(pomodoroProgress2);
-
-        // when, then
-        assertThatThrownBy(() ->
-                pomodoroProgressService.findPomodoroProgress(authMember, pomodoroRoom1.getId(), pomodoroProgress2.getId()))
-                .isInstanceOf(ProgressNotBelongToRoomException.class);
-    }
-
-    @Test
-    void 다음_스터디_단계로_이동할_수_있다() {
-        // given
-        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroRoom2, member1, "nickname1");
-        AuthMember authMember1 = new AuthMember(member1.getId());
-
-        entityManager.persist(pomodoroProgress);
-
-        // when
-        pomodoroProgressService.proceed(authMember1, pomodoroRoom2.getId(), pomodoroProgress.getId());
-
-        // then
-        assertThat(pomodoroProgress.getPomodoroStatus()).isEqualTo(PomodoroStatus.STUDYING);
-    }
-
-    @Test
-    void 스터디에_참여하면_진행도가_생긴다() {
-        // given
-        AuthMember authMember1 = new AuthMember(member1.getId());
-
-        // when
-        ParticipateStudyRequest request = new ParticipateStudyRequest(member1.getId(), "nick");
-        Long progressId = pomodoroProgressService.participateStudy(authMember1, pomodoroRoom2.getId(), request);
-
-        // then
-        PomodoroProgress pomodoroProgress = entityManager.find(PomodoroProgress.class, progressId);
-        assertSoftly(softly -> {
-            assertThat(pomodoroProgress.getNickname()).isEqualTo(request.nickname());
-            assertThat(pomodoroProgress.getMember().getId()).isEqualTo(request.memberId());
-            assertThat(pomodoroProgress.getCurrentCycle()).isEqualTo(1);
-            assertThat(pomodoroProgress.getPomodoroStatus()).isEqualTo(PomodoroStatus.PLANNING);
-        });
-    }
+//    @Autowired
+//    private PomodoroProgressService pomodoroProgressService;
+//
+//    @PersistenceContext
+//    private EntityManager entityManager;
+//
+//    private PomodoroStudy pomodoroStudy1;
+//    private PomodoroStudy pomodoroStudy2;
+//    private Member member1;
+//    private Member member2;
+//
+//    @BeforeEach
+//    void setUp() {
+//        ParticipantCode participantCode1 = new ParticipantCode(new CodeGenerationStrategy());
+//        ParticipantCode participantCode2 = new ParticipantCode(new CodeGenerationStrategy());
+//        pomodoroStudy1 = new PomodoroStudy("studyName1", 3, 20, participantCode1);
+//        pomodoroStudy2 = new PomodoroStudy("studyName2", 3, 20, participantCode2);
+//        member1 = Member.guest();
+//        member2 = Member.guest();
+//
+//        entityManager.persist(participantCode1);
+//        entityManager.persist(participantCode2);
+//        entityManager.persist(pomodoroStudy1);
+//        entityManager.persist(pomodoroStudy2);
+//        entityManager.persist(member1);
+//        entityManager.persist(member2);
+//
+//        entityManager.flush();
+//        entityManager.clear();
+//    }
+//
+//    @Test
+//    void 진행도를_조회할_수_있다() {
+//        // given
+//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy2, member1, "nickname1");
+//        AuthMember authMember = new AuthMember(member1.getId());
+//
+//        entityManager.persist(pomodoroProgress);
+//
+//        // when
+//        PomodoroProgressResponse response =
+//                pomodoroProgressService.findPomodoroProgress(authMember, pomodoroStudy2.getId(), pomodoroProgress.getId());
+//        PomodoroProgressResponse expected = PomodoroProgressResponse.from(pomodoroProgress);
+//
+//        // then
+//        assertThat(response).usingRecursiveComparison()
+//                .ignoringExpectedNullFields()
+//                .isEqualTo(expected);
+//    }
+//
+//    @Test
+//    void 스터디의_모든_진행도를_조회할_수_있다() {
+//        // given
+//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy2, member1, "nickname1");
+//        PomodoroProgress anotherPomodoroProgress = new PomodoroProgress(pomodoroStudy2, member2, "nickname2");
+//        AuthMember authMember1 = new AuthMember(member1.getId());
+//
+//        entityManager.persist(pomodoroProgress);
+//        entityManager.persist(anotherPomodoroProgress);
+//
+//        // when
+//        PomodoroProgressesResponse response =
+//                pomodoroProgressService.findPomodoroProgressWithFilter(authMember1, pomodoroStudy2.getId(), null);
+//        PomodoroProgressesResponse expected = PomodoroProgressesResponse.from(List.of(
+//                PomodoroProgressResponse.from(pomodoroProgress),
+//                PomodoroProgressResponse.from(anotherPomodoroProgress)
+//        ));
+//
+//        // then
+//        assertThat(response).usingRecursiveComparison()
+//                .ignoringExpectedNullFields()
+//                .isEqualTo(expected);
+//    }
+//
+//    @Test
+//    void 참여하지_않은_스터디에_대해서는_모든_진행도를_조회할_수_없다() {
+//        // given
+//        AuthMember authMember = new AuthMember(member1.getId());
+//
+//        // when, then
+//        assertThatThrownBy(() ->
+//                pomodoroProgressService.findPomodoroProgressWithFilter(authMember, pomodoroStudy2.getId(), null))
+//                .isInstanceOf(AuthorizationException.class);
+//    }
+//
+//    @Test
+//    void 특정_멤버의_진행도를_조회할_수_있다() {
+//        // given
+//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy2, member1, "nickname1");
+//        PomodoroProgress anotherPomodoroProgress = new PomodoroProgress(pomodoroStudy2, member2, "nickname2");
+//        AuthMember authMember1 = new AuthMember(member1.getId());
+//
+//        entityManager.persist(pomodoroProgress);
+//        entityManager.persist(anotherPomodoroProgress);
+//
+//        // when
+//        PomodoroProgressesResponse response =
+//                pomodoroProgressService.findPomodoroProgressWithFilter(authMember1, pomodoroStudy2.getId(), member1.getId());
+//        PomodoroProgressesResponse expected = PomodoroProgressesResponse.from(List.of(
+//                PomodoroProgressResponse.from(pomodoroProgress)
+//        ));
+//
+//        // then
+//        assertThat(response).usingRecursiveComparison()
+//                .ignoringExpectedNullFields()
+//                .isEqualTo(expected);
+//    }
+//
+//    @Test
+//    void 자신의_소유가_아닌_진행도는_조회할_수_없다() {
+//        // given
+//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy2, member1, "nickname1");
+//        AuthMember authMember = new AuthMember(member2.getId());
+//
+//        entityManager.persist(pomodoroProgress);
+//
+//        // when, then
+//        assertThatThrownBy(() ->
+//                pomodoroProgressService.findPomodoroProgress(authMember, pomodoroStudy2.getId(), pomodoroProgress.getId()))
+//                .isInstanceOf(AuthorizationException.class);
+//    }
+//
+//    @Test
+//    void 해당_스터디의_진행도가_아니라면_조회할_수_없다() {
+//        // given
+//        PomodoroProgress pomodoroProgress1 = new PomodoroProgress(pomodoroStudy1, member1, "nickname1");
+//        PomodoroProgress pomodoroProgress2 = new PomodoroProgress(pomodoroStudy2, member1, "nickname1");
+//        AuthMember authMember = new AuthMember(member1.getId());
+//
+//        entityManager.persist(pomodoroProgress1);
+//        entityManager.persist(pomodoroProgress2);
+//
+//        // when, then
+//        assertThatThrownBy(() ->
+//                pomodoroProgressService.findPomodoroProgress(authMember, pomodoroStudy1.getId(), pomodoroProgress2.getId()))
+//                .isInstanceOf(ProgressNotBelongToStudyException.class);
+//    }
+//
+//    @Test
+//    void 다음_스터디_단계로_이동할_수_있다() {
+//        // given
+//        PomodoroProgress pomodoroProgress = new PomodoroProgress(pomodoroStudy2, member1, "nickname1");
+//        AuthMember authMember1 = new AuthMember(member1.getId());
+//
+//        entityManager.persist(pomodoroProgress);
+//
+//        // when
+//        pomodoroProgressService.proceed(authMember1, pomodoroStudy2.getId(), pomodoroProgress.getId());
+//
+//        // then
+//        assertThat(pomodoroProgress.getPomodoroStatus()).isEqualTo(PomodoroStatus.STUDYING);
+//    }
+//
+//    @Test
+//    void 스터디에_참여하면_진행도가_생긴다() {
+//        // given
+//        AuthMember authMember1 = new AuthMember(member1.getId());
+//
+//        // when
+//        ParticipateStudyRequest request = new ParticipateStudyRequest(member1.getId(), "nick");
+//        Long progressId = pomodoroProgressService.participateStudy(authMember1, pomodoroStudy2.getId(), request);
+//
+//        // then
+//        PomodoroProgress pomodoroProgress = entityManager.find(PomodoroProgress.class, progressId);
+//        assertSoftly(softly -> {
+//            assertThat(pomodoroProgress.getNickname()).isEqualTo(request.nickname());
+//            assertThat(pomodoroProgress.getMember().getId()).isEqualTo(request.memberId());
+//            assertThat(pomodoroProgress.getCurrentCycle()).isEqualTo(1);
+//            assertThat(pomodoroProgress.getPomodoroStatus()).isEqualTo(PomodoroStatus.PLANNING);
+//        });
+//    }
 }
diff --git a/backend/src/test/java/harustudy/backend/room/service/PomodoroRoomServiceTest.java b/backend/src/test/java/harustudy/backend/room/service/PomodoroRoomServiceTest.java
deleted file mode 100644
index 551ab4a2..00000000
--- a/backend/src/test/java/harustudy/backend/room/service/PomodoroRoomServiceTest.java
+++ /dev/null
@@ -1,156 +0,0 @@
-package harustudy.backend.room.service;
-
-import static org.assertj.core.api.Assertions.assertThat;
-import static org.assertj.core.api.AssertionsForClassTypes.assertThatThrownBy;
-import static org.junit.jupiter.api.Assertions.assertAll;
-
-import harustudy.backend.member.exception.MemberNotFoundException;
-import harustudy.backend.room.domain.GenerationStrategy;
-import harustudy.backend.room.domain.ParticipantCode;
-import harustudy.backend.room.domain.PomodoroRoom;
-import harustudy.backend.room.dto.CreatePomodoroRoomRequest;
-import harustudy.backend.room.dto.CreatePomodoroRoomResponse;
-import harustudy.backend.room.dto.PomodoroRoomResponse;
-import harustudy.backend.room.dto.PomodoroRoomsResponse;
-import harustudy.backend.room.exception.ParticipantCodeNotFoundException;
-import harustudy.backend.room.exception.RoomNotFoundException;
-import jakarta.persistence.EntityManager;
-import org.junit.jupiter.api.DisplayNameGeneration;
-import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
-import org.junit.jupiter.api.Test;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.transaction.annotation.Transactional;
-
-@SuppressWarnings("NonAsciiCharacters")
-@DisplayNameGeneration(ReplaceUnderscores.class)
-@Transactional
-@SpringBootTest
-class PomodoroRoomServiceTest {
-
-    @Autowired
-    private PomodoroRoomService pomodoroRoomService;
-
-    @Autowired
-    private EntityManager entityManager;
-
-    @Autowired
-    private GenerationStrategy generationStrategy;
-
-    @Test
-    void 룸_아이디로_룸을_조회한다() {
-        // given
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
-        PomodoroRoom pomodoroRoom = new PomodoroRoom("room", 8, 20, participantCode);
-        entityManager.persist(participantCode);
-        entityManager.persist(pomodoroRoom);
-
-        entityManager.flush();
-        entityManager.clear();
-
-        // when
-        PomodoroRoomResponse result = pomodoroRoomService.findPomodoroRoom(pomodoroRoom.getId());
-
-        // then
-        assertAll(
-                () -> assertThat(result.studyId()).isEqualTo(pomodoroRoom.getId()),
-                () -> assertThat(result.name()).isEqualTo(pomodoroRoom.getName()),
-                () -> assertThat(result.totalCycle()).isEqualTo(pomodoroRoom.getTotalCycle()),
-                () -> assertThat(result.timePerCycle()).isEqualTo(pomodoroRoom.getTimePerCycle())
-        );
-    }
-
-    @Test
-    void 룸_아이디로_룸_조회시_없으면_예외를_던진다() {
-        // given
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
-        PomodoroRoom pomodoroRoom = new PomodoroRoom("room", 8, 20, participantCode);
-        entityManager.persist(participantCode);
-        entityManager.persist(pomodoroRoom);
-
-        entityManager.flush();
-        entityManager.clear();
-
-        // when, then
-        assertThatThrownBy(() -> pomodoroRoomService.findPomodoroRoomWithFilter(99999L, null), null)
-                .isInstanceOf(MemberNotFoundException.class);
-    }
-
-    @Test
-    void 룸을_생성한다() {
-        // given
-        CreatePomodoroRoomRequest request = new CreatePomodoroRoomRequest("room", 8, 40);
-
-        // when
-        CreatePomodoroRoomResponse result = pomodoroRoomService.createPomodoroRoom(request);
-
-        // then
-        assertAll(
-                () -> assertThat(result.studyId()).isNotNull(),
-                () -> assertThat(result.participantCode()).isNotNull()
-        );
-    }
-
-    @Test
-    void 참여코드에_해당하는_룸을_조회한다() {
-        // given
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
-        PomodoroRoom pomodoroRoom = new PomodoroRoom("room", 8, 40, participantCode);
-        entityManager.persist(participantCode);
-        entityManager.persist(pomodoroRoom);
-
-        entityManager.flush();
-        entityManager.clear();
-
-        // when
-        PomodoroRoomsResponse result = pomodoroRoomService.findPomodoroRoomWithFilter(null,
-                participantCode.getCode());
-
-        // then
-        assertAll(
-                () -> assertThat(result.studies()).hasSize(1),
-                () -> assertThat(result.studies().get(0).name()).isEqualTo(pomodoroRoom.getName()),
-                () -> assertThat(result.studies().get(0).totalCycle()).isEqualTo(pomodoroRoom.getTotalCycle()),
-                () -> assertThat(result.studies().get(0).timePerCycle()).isEqualTo(pomodoroRoom.getTimePerCycle())
-        );
-    }
-
-    @Test
-    void 참여코드에_해당하는_룸_조회시_참여코드가_없으면_예외를_던진다() {
-        // given
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
-        PomodoroRoom pomodoroRoom = new PomodoroRoom("room", 8, 40, participantCode);
-        entityManager.persist(participantCode);
-        entityManager.persist(pomodoroRoom);
-
-        entityManager.flush();
-        entityManager.clear();
-
-        ParticipantCode notPersisted = new ParticipantCode(generationStrategy);
-
-        // when, then
-        assertThatThrownBy(
-                () -> pomodoroRoomService.findPomodoroRoomWithFilter(null, notPersisted.getCode()))
-                .isInstanceOf(ParticipantCodeNotFoundException.class);
-    }
-
-    @Test
-    void 참여코드에_해당하는_룸_조회시_참여코드에_해당하는_룸이_없으면_예외를_던진다() {
-        // given
-        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
-        PomodoroRoom pomodoroRoom = new PomodoroRoom("room", 8, 40, participantCode);
-        entityManager.persist(participantCode);
-        entityManager.persist(pomodoroRoom);
-
-        ParticipantCode notRoomsCode = new ParticipantCode(generationStrategy);
-        entityManager.persist(notRoomsCode);
-
-        entityManager.flush();
-        entityManager.clear();
-
-        // when, then
-        assertThatThrownBy(
-                () -> pomodoroRoomService.findPomodoroRoomWithFilter(null, notRoomsCode.getCode()))
-                .isInstanceOf(RoomNotFoundException.class);
-    }
-}
diff --git a/backend/src/test/java/harustudy/backend/participantcode/domain/CodeGenerationStrategyTest.java b/backend/src/test/java/harustudy/backend/study/domain/CodeGenerationStrategyTest.java
similarity index 84%
rename from backend/src/test/java/harustudy/backend/participantcode/domain/CodeGenerationStrategyTest.java
rename to backend/src/test/java/harustudy/backend/study/domain/CodeGenerationStrategyTest.java
index 6aeb2b72..76bea775 100644
--- a/backend/src/test/java/harustudy/backend/participantcode/domain/CodeGenerationStrategyTest.java
+++ b/backend/src/test/java/harustudy/backend/study/domain/CodeGenerationStrategyTest.java
@@ -1,9 +1,9 @@
-package harustudy.backend.participantcode.domain;
+package harustudy.backend.study.domain;
 
 import static org.assertj.core.api.Assertions.assertThat;
 
-import harustudy.backend.room.domain.CodeGenerationStrategy;
-import harustudy.backend.room.domain.GenerationStrategy;
+import harustudy.backend.participantcode.domain.CodeGenerationStrategy;
+import harustudy.backend.participantcode.domain.GenerationStrategy;
 import org.junit.jupiter.api.DisplayNameGeneration;
 import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
 import org.junit.jupiter.api.Test;
diff --git a/backend/src/test/java/harustudy/backend/room/domain/PomodoroRoomTest.java b/backend/src/test/java/harustudy/backend/study/domain/PomodoroStudyTest.java
similarity index 64%
rename from backend/src/test/java/harustudy/backend/room/domain/PomodoroRoomTest.java
rename to backend/src/test/java/harustudy/backend/study/domain/PomodoroStudyTest.java
index 9f5bfde6..ca9a5517 100644
--- a/backend/src/test/java/harustudy/backend/room/domain/PomodoroRoomTest.java
+++ b/backend/src/test/java/harustudy/backend/study/domain/PomodoroStudyTest.java
@@ -1,12 +1,11 @@
-package harustudy.backend.room.domain;
+package harustudy.backend.study.domain;
 
 import static org.assertj.core.api.Assertions.assertThatCode;
 import static org.assertj.core.api.Assertions.assertThatThrownBy;
 
-import harustudy.backend.room.exception.PomodoroTimePerCycleException;
-import harustudy.backend.room.exception.PomodoroTotalCycleException;
-import harustudy.backend.room.exception.PomodoroRoomNameLengthException;
-import org.junit.jupiter.api.BeforeEach;
+import harustudy.backend.study.exception.PomodoroStudyNameLengthException;
+import harustudy.backend.study.exception.PomodoroTimePerCycleException;
+import harustudy.backend.study.exception.PomodoroTotalCycleException;
 import org.junit.jupiter.api.DisplayNameGeneration;
 import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
 import org.junit.jupiter.api.Test;
@@ -15,19 +14,12 @@
 
 @SuppressWarnings("NonAsciiCharacters")
 @DisplayNameGeneration(ReplaceUnderscores.class)
-class PomodoroRoomTest {
-
-    private ParticipantCode participantCode;
-
-    @BeforeEach
-    void setUp() {
-        participantCode = new ParticipantCode(new CodeGenerationStrategy());
-    }
+class PomodoroStudyTest {
 
     @Test
     void 스터디방은_스터디명_사이클_수_사이클_당_스터디_시간이_필요하다() {
         // given, when, then
-        assertThatCode(() -> new PomodoroRoom("teo", 3, 20, participantCode))
+        assertThatCode(() -> new PomodoroStudy("teo", 3, 20))
                 .doesNotThrowAnyException();
     }
 
@@ -37,7 +29,7 @@ void setUp() {
         String name = "12345";
 
         // when, then
-        assertThatCode(() -> new PomodoroRoom(name, 3, 20, participantCode))
+        assertThatCode(() -> new PomodoroStudy(name, 3, 20))
                 .doesNotThrowAnyException();
     }
 
@@ -45,15 +37,15 @@ void setUp() {
     @ValueSource(strings = {"", "01234567890"})
     void 스터디방_이름이_1자_미만이거나_10자_초과라면_예외를_던진다(String name) {
         // given, when, then
-        assertThatThrownBy(() -> new PomodoroRoom(name, 3, 20, participantCode))
-                .isInstanceOf(PomodoroRoomNameLengthException.class);
+        assertThatThrownBy(() -> new PomodoroStudy(name, 3, 20))
+                .isInstanceOf(PomodoroStudyNameLengthException.class);
     }
 
     @ParameterizedTest
     @ValueSource(ints = {1, 8})
     void 사이클은_최소_1번_최대_8번이_정상_케이스이다(int cycle) {
         // given, when, then
-        assertThatCode(() -> new PomodoroRoom("teo", cycle, 20, participantCode))
+        assertThatCode(() -> new PomodoroStudy("teo", cycle, 20))
                 .doesNotThrowAnyException();
     }
 
@@ -61,7 +53,7 @@ void setUp() {
     @ValueSource(ints = {0, 9})
     void 사이클은_1번_미만이거나_8번_초과라면_예외를_던진다(int cycle) {
         // given, when, then
-        assertThatThrownBy(() -> new PomodoroRoom("teo", cycle, 20, participantCode))
+        assertThatThrownBy(() -> new PomodoroStudy("teo", cycle, 20))
                 .isInstanceOf(PomodoroTotalCycleException.class);
     }
 
@@ -69,7 +61,7 @@ void setUp() {
     @ValueSource(ints = {20, 60})
     void 스터디_시간은_최소_20분_최대_60분이_정상_케이스이다(int timePerCycle) {
         // given, when, then
-        assertThatCode(() -> new PomodoroRoom("teo", 5, timePerCycle, participantCode))
+        assertThatCode(() -> new PomodoroStudy("teo", 5, timePerCycle))
                 .doesNotThrowAnyException();
     }
 
@@ -77,7 +69,7 @@ void setUp() {
     @ValueSource(ints = {19, 61})
     void 스터디_시간은_20분_미만이거나_60분_초과라면_예외를_던진다(int timePerCycle) {
         // given, when, then
-        assertThatThrownBy(() -> new PomodoroRoom("teo", 5, timePerCycle, participantCode))
+        assertThatThrownBy(() -> new PomodoroStudy("teo", 5, timePerCycle))
                 .isInstanceOf(PomodoroTimePerCycleException.class);
     }
 }
diff --git a/backend/src/test/java/harustudy/backend/study/service/PomodoroStudyServiceTest.java b/backend/src/test/java/harustudy/backend/study/service/PomodoroStudyServiceTest.java
new file mode 100644
index 00000000..6eb9a5c7
--- /dev/null
+++ b/backend/src/test/java/harustudy/backend/study/service/PomodoroStudyServiceTest.java
@@ -0,0 +1,146 @@
+package harustudy.backend.study.service;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.AssertionsForClassTypes.assertThatThrownBy;
+import static org.junit.jupiter.api.Assertions.assertAll;
+
+import harustudy.backend.member.exception.MemberNotFoundException;
+import harustudy.backend.participantcode.domain.GenerationStrategy;
+import harustudy.backend.study.domain.PomodoroStudy;
+import harustudy.backend.study.dto.CreatePomodoroStudyRequest;
+import harustudy.backend.study.dto.CreatePomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudyResponse;
+import harustudy.backend.study.dto.PomodoroStudiesResponse;
+import jakarta.persistence.EntityManager;
+import jakarta.persistence.PersistenceContext;
+import org.junit.jupiter.api.DisplayNameGeneration;
+import org.junit.jupiter.api.DisplayNameGenerator.ReplaceUnderscores;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.transaction.annotation.Transactional;
+
+@SuppressWarnings("NonAsciiCharacters")
+@DisplayNameGeneration(ReplaceUnderscores.class)
+@Transactional
+@SpringBootTest
+class PomodoroStudyServiceTest {
+//
+//    @Autowired
+//    private PomodoroStudyService pomodoroStudyService;
+//
+//    @PersistenceContext
+//    private EntityManager entityManager;
+//
+//    @Autowired
+//    private GenerationStrategy generationStrategy;
+//
+//    @Test
+//    void 룸_아이디로_룸을_조회한다() {
+//        // given
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("study", 8, 20);
+//        entityManager.persist(pomodoroStudy);
+//        entityManager.flush();
+//        entityManager.clear();
+//
+//        // when
+//        PomodoroStudyResponse result = pomodoroStudyService.findPomodoroStudy(pomodoroStudy.getId());
+//
+//        // then
+//        assertAll(
+//                () -> assertThat(result.studyId()).isEqualTo(pomodoroStudy.getId()),
+//                () -> assertThat(result.name()).isEqualTo(pomodoroStudy.getName()),
+//                () -> assertThat(result.totalCycle()).isEqualTo(pomodoroStudy.getTotalCycle()),
+//                () -> assertThat(result.timePerCycle()).isEqualTo(pomodoroStudy.getTimePerCycle())
+//        );
+//    }
+//
+//    @Test
+//    void 룸_아이디로_룸_조회시_없으면_예외를_던진다() {
+//        // given
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("study", 8, 20);
+//        entityManager.persist(pomodoroStudy);
+//        entityManager.flush();
+//        entityManager.clear();
+//
+//        // when, then
+//        assertThatThrownBy(() -> pomodoroStudyService.findPomodoroStudyWithFilter(99999L, null), null)
+//                .isInstanceOf(MemberNotFoundException.class);
+//    }
+//
+//    @Test
+//    void 룸을_생성한다() {
+//        // given
+//        CreatePomodoroStudyRequest request = new CreatePomodoroStudyRequest("study", 8, 40);
+//
+//        // when
+//        CreatePomodoroStudyResponse result = pomodoroStudyService.createPomodoroStudy(request);
+//
+//        // then
+//        assertAll(
+//                () -> assertThat(result.studyId()).isNotNull(),
+//                () -> assertThat(result.participantCode()).isNotNull()
+//        );
+//    }
+//
+//    @Test
+//    void 참여코드에_해당하는_룸을_조회한다() {
+//        // given
+//        CreatePomodoroStudyRequest request = new CreatePomodoroStudyRequest("study", 8, 40);
+//        CreatePomodoroStudyResponse response = pomodoroStudyService.createPomodoroStudy(request);
+//        String participantCode = response.participantCode();
+//
+//        // when
+//        PomodoroStudiesResponse result = pomodoroStudyService.findPomodoroStudyWithFilter(null,
+//                participantCode);
+//
+//        // then
+//        assertAll(
+//                () -> assertThat(result.studies()).hasSize(1),
+//                () -> assertThat(result.studies().get(0).name()).isEqualTo(request.name()),
+//                () -> assertThat(result.studies().get(0).totalCycle()).isEqualTo(
+//                        request.totalCycle()),
+//                () -> assertThat(result.studies().get(0).timePerCycle()).isEqualTo(
+//                        request.timePerCycle())
+//        );
+//    }
+//
+//    @Test
+//    void 참여코드에_해당하는_룸_조회시_참여코드가_없으면_예외를_던진다() {
+//        // given
+//        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("study", 8, 40, participantCode);
+//        entityManager.persist(participantCode);
+//        entityManager.persist(pomodoroStudy);
+//
+//        entityManager.flush();
+//        entityManager.clear();
+//
+//        ParticipantCode notPersisted = new ParticipantCode(generationStrategy);
+//
+//        // when, then
+//        assertThatThrownBy(
+//                () -> pomodoroStudyService.findPomodoroStudyWithFilter(null, notPersisted.getCode()))
+//                .isInstanceOf(ParticipantCodeNotFoundException.class);
+//    }
+//
+//    @Test
+//    void 참여코드에_해당하는_룸_조회시_참여코드에_해당하는_룸이_없으면_예외를_던진다() {
+//        // given
+//        ParticipantCode participantCode = new ParticipantCode(generationStrategy);
+//        PomodoroStudy pomodoroStudy = new PomodoroStudy("study", 8, 40, participantCode);
+//        entityManager.persist(participantCode);
+//        entityManager.persist(pomodoroStudy);
+//
+//        ParticipantCode notStudiesCode = new ParticipantCode(generationStrategy);
+//        entityManager.persist(notStudiesCode);
+//
+//        entityManager.flush();
+//        entityManager.clear();
+//
+//        // when, then
+//        assertThatThrownBy(
+//                () -> pomodoroStudyService.findPomodoroStudyWithFilter(null, notStudiesCode.getCode()))
+//                .isInstanceOf(StudyNotFoundException.class);
+//    }
+}
diff --git a/backend/src/test/resources/application.yml b/backend/src/test/resources/application.yml
index 7afc8dad..831109e0 100644
--- a/backend/src/test/resources/application.yml
+++ b/backend/src/test/resources/application.yml
@@ -24,11 +24,11 @@ oauth2:
       user-info-uri: http://www.test.com
 
 jwt:
-  expire-length: 1
-  guest-expire-length: 1
-  secret-key: test-secret-key
+  expire-length: 12345
+  guest-expire-length: 12345
+  secret-key: test-secret-key-test-secret-key-test-secret-key-test-secret-key-test-secret-key-test-secret-key
 
 refresh-token:
-  expire-length: 1
+  expire-length: 12345
 
 cors-allow-origin: test
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
index 7ec1456a..8c7ccb89 100644
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -38,6 +38,7 @@
     "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/no-throw-literal": "off",
     "import/no-unresolved": "off",
     "import/order": [
       "error",
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 1042f00c..e955120d 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -15,5 +15,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .gitmessage
+.DS_Store
 
 /storybook-static
diff --git a/frontend/__test__/CreateStudyPage.test.tsx b/frontend/__test__/CreateStudyPage.test.tsx
new file mode 100644
index 00000000..2f20b8e7
--- /dev/null
+++ b/frontend/__test__/CreateStudyPage.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom';
+
+import CreateStudy from '@Pages/CreateStudy';
+
+import MemberInfoProvider from '@Contexts/MemberInfoProvider';
+import ModalProvider from '@Contexts/ModalProvider';
+
+describe('스터디 개설 페이지 테스트', () => {
+  test('폼 입력 후 적절한 예상시간이 나오는지 확인한다.', async () => {
+    render(
+      <MemoryRouter initialEntries={['/create']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <CreateStudy />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    const studyNameInput = screen.getByLabelText('스터디의 이름은 무엇인가요?');
+    await userEvent.type(studyNameInput, '하루스터디');
+
+    const cycleSelectBox = screen.getByTestId('cycle');
+    await userEvent.click(cycleSelectBox);
+
+    const onceElement = screen.getByText('1회');
+    await userEvent.click(onceElement);
+
+    const timePerCycleSelectBox = screen.getByTestId('timepercycle');
+    await userEvent.click(timePerCycleSelectBox);
+
+    const twentyMinuteElement = screen.getByText('20분');
+    await userEvent.click(twentyMinuteElement);
+
+    const estimatedTimeElement = screen.getByText('0시간 40분');
+
+    expect(estimatedTimeElement).toBeInTheDocument();
+  });
+});
diff --git a/frontend/__test__/LandingPage.test.tsx b/frontend/__test__/LandingPage.test.tsx
new file mode 100644
index 00000000..f1ec5ce4
--- /dev/null
+++ b/frontend/__test__/LandingPage.test.tsx
@@ -0,0 +1,72 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { MemoryRouter } from 'react-router-dom';
+
+import Landing from '@Pages/Landing';
+
+import MemberInfoProvider from '@Contexts/MemberInfoProvider';
+import ModalProvider from '@Contexts/ModalProvider';
+
+const USER_MOCK = {
+  memberId: '1',
+  name: '맘모스',
+  email: 'haru12@gmail.com',
+  imageUrl: 'https://lh3.google.com/u/0/ogw/AGvuzYZKngVdZecWrpGTnHj7hQRtO5p9tjelI5lvCcsk=s64-c-mo',
+  loginType: 'google',
+};
+
+const server = setupServer(
+  rest.get('/api/me', (_, res, ctx) => {
+    return res(ctx.json(null));
+  }),
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('랜딩 페이지 테스트', () => {
+  test('로그인을 하지 않았다면 하루스터디 시작하기 버튼이 보여진다.', async () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <Landing />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByRole('button')[0].textContent).toBe('하루스터디 시작하기');
+    });
+  });
+
+  test('로그인을 했다면 하루스터디 스터디 개설하기, 스터디 참여하기 버튼이 보여진다.', async () => {
+    server.use(
+      rest.get('/api/me', (_, res, ctx) => {
+        return res(ctx.json(USER_MOCK));
+      }),
+    );
+
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <Landing />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      screen.getAllByRole('button').forEach((button, index) => {
+        if (index > 1) return;
+        const buttonText = index === 0 ? '스터디 개설하기' : '스터디 참여하기';
+        expect(button.textContent).toBe(buttonText);
+      });
+    });
+  });
+});
diff --git a/frontend/__test__/MemberRecord.test.tsx b/frontend/__test__/MemberRecord.test.tsx
new file mode 100644
index 00000000..55a82c94
--- /dev/null
+++ b/frontend/__test__/MemberRecord.test.tsx
@@ -0,0 +1,73 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { MemoryRouter } from 'react-router-dom';
+
+import MemberRecord from '@Pages/MemberRecord';
+
+import MemberInfoProvider from '@Contexts/MemberInfoProvider';
+import ModalProvider from '@Contexts/ModalProvider';
+
+const STUDY_LIST = {
+  studies: [
+    {
+      studyId: '1',
+      name: '안오면 지상렬',
+      totalCycle: 3,
+      timePerCycle: 60,
+      createdDateTime: '2023-08-16T13:33:02.810Z',
+    },
+  ],
+};
+
+const USER_MOCK = {
+  memberId: '1',
+  name: '맘모스',
+  email: 'haru12@gmail.com',
+  imageUrl: 'https://lh3.google.com/u/0/ogw/AGvuzYZKngVdZecWrpGTnHj7hQRtO5p9tjelI5lvCcsk=s64-c-mo',
+  loginType: 'google',
+};
+
+const server = setupServer(
+  rest.get('/api/me', (_, res, ctx) => {
+    return res(ctx.json(null));
+  }),
+
+  rest.get('/api/studies', (_, res, ctx) => {
+    return res(ctx.json(null));
+  }),
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('나의 스터디 기록 페이지 테스트', () => {
+  test('나의 스터디로 이동하면 참여한 스터디의 이름과 진행한 날짜, 정보가 보여진다.', async () => {
+    server.use(
+      rest.get('/api/me', (_, res, ctx) => {
+        return res(ctx.json(USER_MOCK));
+      }),
+
+      rest.get('/api/studies', (_, res, ctx) => {
+        return res(ctx.json(STUDY_LIST));
+      }),
+    );
+
+    render(
+      <MemoryRouter initialEntries={['/member-record']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <MemberRecord />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { level: 6 }).textContent).toBe('안오면 지상렬 스터디');
+      expect(screen.getByTestId('progress-date').textContent).toBe('2023년 8월 16일');
+    });
+  });
+});
diff --git a/frontend/__test__/StudyMakingPage.test.tsx b/frontend/__test__/StudyMakingPage.test.tsx
deleted file mode 100644
index 2ab008fc..00000000
--- a/frontend/__test__/StudyMakingPage.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { MemoryRouter } from 'react-router-dom';
-
-import CreateStudy from '@Pages/CreateStudy';
-
-import ModalProvider from '@Contexts/ModalProvider';
-
-test('스터디 개설 페이지가 잘 렌더링 되었는지 확인한다.', async () => {
-  render(
-    <MemoryRouter initialEntries={['/create']}>
-      <ModalProvider>
-        <CreateStudy />
-      </ModalProvider>
-    </MemoryRouter>,
-  );
-
-  const title = await screen.findAllByRole('heading');
-
-  expect(title[1]).toHaveTextContent('스터디 개설하기');
-});
diff --git a/frontend/__test__/StudyParticipationPage.test.tsx b/frontend/__test__/StudyParticipationPage.test.tsx
new file mode 100644
index 00000000..ff866fb8
--- /dev/null
+++ b/frontend/__test__/StudyParticipationPage.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom';
+
+import StudyParticipation from '@Pages/StudyParticipation';
+
+import MemberInfoProvider from '@Contexts/MemberInfoProvider';
+import ModalProvider from '@Contexts/ModalProvider';
+
+describe('스터디 참여 페이지 테스트', () => {
+  test('참여코드 입력 폼이 보여진다.', async () => {
+    render(
+      <MemoryRouter initialEntries={['/create']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <StudyParticipation />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('스터디장에게 받은 참여코드를 입력하세요.')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/__test__/StudyPreparationPage.test.tsx b/frontend/__test__/StudyPreparationPage.test.tsx
new file mode 100644
index 00000000..4f6de2af
--- /dev/null
+++ b/frontend/__test__/StudyPreparationPage.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { MemoryRouter } from 'react-router-dom';
+
+import StudyPreparation from '@Pages/StudyPreparation';
+
+import MemberInfoProvider from '@Contexts/MemberInfoProvider';
+import ModalProvider from '@Contexts/ModalProvider';
+
+jest.mock('react-router-dom', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return {
+    ...jest.requireActual('react-router-dom'),
+    useLocation: () => {
+      return {
+        state: { participantCode: '123456', studyName: '하루스터디', isHost: true },
+      };
+    },
+    useParams: () => ({ studyId: '1' }),
+  };
+});
+
+const server = setupServer(
+  rest.get('/api/temp/studies/:studyId/progresses', (_, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ progresses: null }));
+  }),
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('스터디 준비 페이지 테스트', () => {
+  test('요청한 Progresses 데이터가 없으면 닉네임 입력 폼이 보여진다.', async () => {
+    render(
+      <MemoryRouter initialEntries={[`/preparation/1`]}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <StudyPreparation />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('스터디에서 사용할 닉네임')).toBeInTheDocument();
+    });
+  });
+
+  test('요청한 Progresses 데이터가 있다면 이미 스터디 정보가 있다는 폼이 보여진다.', async () => {
+    server.use(
+      rest.get('/api/temp/studies/:studyId/progresses', (_, res, ctx) => {
+        return res(
+          ctx.status(200),
+          ctx.json({ progresses: [{ progressId: 1, nickname: '하루', currentCycle: 1, step: 'planning' }] }),
+        );
+      }),
+    );
+
+    render(
+      <MemoryRouter initialEntries={[`/preparation/1`]}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <StudyPreparation />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('하루')).toBeInTheDocument();
+      expect(screen.getByText('학습을 이어서 진행 하시겠습니까?')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/__test__/StudyRecord.test.tsx b/frontend/__test__/StudyRecord.test.tsx
new file mode 100644
index 00000000..7ed5d9d8
--- /dev/null
+++ b/frontend/__test__/StudyRecord.test.tsx
@@ -0,0 +1,182 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { MemoryRouter } from 'react-router-dom';
+
+import StudyRecord from '@Pages/StudyRecord';
+
+import MemberInfoProvider from '@Contexts/MemberInfoProvider';
+import ModalProvider from '@Contexts/ModalProvider';
+
+jest.mock('react-router-dom', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return {
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({ studyId: '1' }),
+  };
+});
+
+const STUDY_CONTENT = {
+  content: [
+    {
+      cycle: 1,
+      plan: {
+        toDo: '모던 자바스크립트 15장 정독(let, const 키워드와 블록 레벨 스코프)',
+        completionCondition:
+          '블록 레벨 스코프가 무엇인지 한 줄로 설명할 수 있다. -> 예시를 통해 1분 이내로 설명할 수 있다.',
+        expectedProbability: '80% 이미 학습한 내용이기 때문이다.',
+        expectedDifficulty: '개념을 학습한 후, 나만의 언어로 정리하는 것',
+        whatCanYouDo: '핵심적인 내용을 먼저 정리한다.',
+      },
+      retrospect: {
+        doneAsExpected:
+          '이전에 학습한 내용이여서 이해는 어렵지 않았지만 짧게 정리를 하고 이를 습득하는데 어려움이 있었다. 실제로 누군가에게 설명을 할 수 있는지 확인해봐야겠다.',
+        experiencedDifficulty: '깔끔한 문장으로 정리하는 것, 누군가에게 과연 매끄럽게 설명을 할 수 있을지',
+        lesson: 'var키워드는 혼란만 초래할 뿐이다. var 키워드는 브라우저에게 맡기자',
+      },
+    },
+    {
+      cycle: 2,
+      plan: {
+        toDo: '알고리즘 한 문제를 푼다',
+        completionCondition: '알고리즘 한 문제에 대해 모든 테스트케이스가 통과해야 한다.',
+        expectedProbability: '80% 도전해볼만한 가치가 있기 때문',
+        expectedDifficulty: '아직 잘 모르는 알고리즘 개념이 나오면 힘들 것 같다.',
+        whatCanYouDo: '문제 설명 부터 잘 보자.',
+      },
+      retrospect: {
+        doneAsExpected: '로직은 맞는거같은데 시간초과 때문에 통과하지는 못했습니다',
+        experiencedDifficulty:
+          '복병은 시간초과를 예상하지 않고 코드를 짰다는 것..? 알고리즘에 익숙하지 않아 로직에만 집중하다보니 그런 것 같습니다',
+        lesson: ' 로직이 맞다고 맞는건 아니다. 풀기전에 잘 생각해보자..',
+      },
+    },
+    {
+      cycle: 3,
+      plan: {
+        toDo: '미션 회고 글 포스팅',
+        completionCondition: '한 챕터의 내용을 완성',
+        expectedProbability: '60%',
+        expectedDifficulty: '좋은 글을 쓰기 위해 고민이 많아질 수 있다.',
+        whatCanYouDo: '글을 완벽하게 쓰려고 하기보단 러프하게 먼저 쓴다.',
+      },
+      retrospect: {
+        doneAsExpected: '한 챕터의 절반 정도 작성한 것 같습니다.',
+        experiencedDifficulty:
+          '캡처하고 붙여 넣느라 시간이 좀 걸렸습니다. 그리고 챕터의 방향성이 조금 수정되어서 원할하게 작성하지 못했습니다.',
+        lesson: '글을 한 번에 쓰려고 하지말고 중간중간 틈틈이 기록을 해놔야 할 것 같아요.',
+      },
+    },
+  ],
+};
+
+const STUDY_MEMBERS = {
+  progresses: [
+    {
+      progressId: '1',
+      nickname: '노아',
+      currentCycle: 3,
+      step: 'done',
+    },
+    {
+      progressId: '2',
+      nickname: '룩소',
+      currentCycle: 2,
+      step: 'planning',
+    },
+    {
+      progressId: '3',
+      nickname: '엽토',
+      currentCycle: 3,
+      step: 'retrospect',
+    },
+  ],
+};
+
+const STUDY_METADATA = {
+  name: '안오면 지상렬',
+  totalCycle: 3,
+  timePerCycle: 25,
+  createdDateTime: '2023-08-15T06:25:39.093Z',
+};
+
+const server = setupServer(
+  rest.get('/api/studies/1/progresses', (_, res, ctx) => {
+    return res(ctx.json(STUDY_MEMBERS));
+  }),
+
+  rest.get('/api/studies/:studyId', (_, res, ctx) => {
+    return res(ctx.json(STUDY_METADATA));
+  }),
+
+  rest.get('/api/studies/:studyId/contents?progressId=1', (_, res, ctx) => {
+    return res(ctx.json(STUDY_CONTENT));
+  }),
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('스터디 기록 페이지 테스트', () => {
+  test('스터디 기록 페이지에서 스터디원을 확인할 수 있다.', async () => {
+    render(
+      <MemoryRouter initialEntries={['/record/1']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <StudyRecord />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('노아의 기록')).toBeInTheDocument();
+      expect(screen.getByText('룩소의 기록')).toBeInTheDocument();
+      expect(screen.getByText('엽토의 기록')).toBeInTheDocument();
+    });
+  });
+
+  test('스터디 기록 페이지에서 스터디에서 진행한 사이클 횟수를 확인할 수 있다.', async () => {
+    render(
+      <MemoryRouter initialEntries={['/record/1']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <StudyRecord />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      const button = screen.getAllByText('펼쳐보기')[0];
+      fireEvent.click(button);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tab').length).toBe(3);
+    });
+  });
+
+  test('스터디 기록 페이지에서 스터디원의 기록을 확인할 수 있다.', async () => {
+    render(
+      <MemoryRouter initialEntries={['/record/1']}>
+        <ModalProvider>
+          <MemberInfoProvider>
+            <StudyRecord />
+          </MemberInfoProvider>
+        </ModalProvider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      const button = screen.getAllByText('펼쳐보기')[0];
+      fireEvent.click(button);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('모던 자바스크립트 15장 정독(let, const 키워드와 블록 레벨 스코프)')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/__test__/example.test.tsx b/frontend/__test__/example.test.tsx
deleted file mode 100644
index 48d21d3e..00000000
--- a/frontend/__test__/example.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import '@testing-library/jest-dom';
-
-import Hero from '@Components/landing/Hero/Hero';
-
-test('test', async () => {
-  render(<Hero />);
-
-  const text = await screen.findByRole('heading');
-
-  expect(text).toHaveTextContent('스터디');
-});
diff --git a/frontend/env-submodule b/frontend/env-submodule
index fc016bd9..e4a67a35 160000
--- a/frontend/env-submodule
+++ b/frontend/env-submodule
@@ -1 +1 @@
-Subproject commit fc016bd93cda55f018d3b9efb6be67aa24b13980
+Subproject commit e4a67a3507c66486bfb746f6ed4b822c19f2836c
diff --git a/frontend/jest.setup.ts b/frontend/jest.setup.ts
index ebf79ef7..a17b20be 100644
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -1,14 +1,3 @@
-import { server } from './src/mocks/server';
 import mockFetch from 'jest-fetch-mock';
 
 mockFetch.enableMocks();
-
-// Establish API mocking before all tests.
-beforeAll(() => server.listen());
-
-// Reset any request handlers that we may add during the tests,
-// so they don't affect other tests.
-afterEach(() => server.resetHandlers());
-
-// Clean up after the tests are finished.
-afterAll(() => server.close());
diff --git a/frontend/package.json b/frontend/package.json
index ad51635e..a771dd25 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,6 @@
     "ci": "yarn install --immutable --immutable-cache --check-cache"
   },
   "dependencies": {
-    "msw": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
@@ -35,12 +34,14 @@
     "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
+    "copy-webpack-plugin": "^11.0.0",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.44.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -54,6 +55,7 @@
     "jest-environment-jsdom": "^29.6.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-transform-css": "^6.0.1",
+    "msw": "^1.2.3",
     "prettier": "^2.8.8",
     "storybook": "^7.0.25",
     "ts-loader": "^9.4.4",
@@ -66,5 +68,8 @@
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "sideEffects": [
+    "./src/fonts/font.css"
+  ]
 }
diff --git a/frontend/public/assets/favicon-blue.ico b/frontend/public/assets/favicon-blue.ico
new file mode 100644
index 00000000..184107e2
Binary files /dev/null and b/frontend/public/assets/favicon-blue.ico differ
diff --git a/frontend/public/assets/favicon-green.ico b/frontend/public/assets/favicon-green.ico
new file mode 100644
index 00000000..423d54b7
Binary files /dev/null and b/frontend/public/assets/favicon-green.ico differ
diff --git a/frontend/public/assets/favicon-red.ico b/frontend/public/assets/favicon-red.ico
new file mode 100644
index 00000000..e664a4a9
Binary files /dev/null and b/frontend/public/assets/favicon-red.ico differ
diff --git a/frontend/public/assets/favicon.ico b/frontend/public/assets/favicon.ico
new file mode 100644
index 00000000..eebf4590
Binary files /dev/null and b/frontend/public/assets/favicon.ico differ
diff --git a/frontend/public/assets/og-image.png b/frontend/public/assets/og-image.png
new file mode 100644
index 00000000..95c96641
Binary files /dev/null and b/frontend/public/assets/og-image.png differ
diff --git a/frontend/public/fonts/Pretendard-Bold.woff b/frontend/public/fonts/Pretendard-Bold.woff
new file mode 100644
index 00000000..53470bae
Binary files /dev/null and b/frontend/public/fonts/Pretendard-Bold.woff differ
diff --git a/frontend/public/fonts/Pretendard-Bold.woff2 b/frontend/public/fonts/Pretendard-Bold.woff2
new file mode 100644
index 00000000..8975b802
Binary files /dev/null and b/frontend/public/fonts/Pretendard-Bold.woff2 differ
diff --git a/frontend/public/fonts/Pretendard-Light.woff b/frontend/public/fonts/Pretendard-Light.woff
new file mode 100644
index 00000000..bc0ad69f
Binary files /dev/null and b/frontend/public/fonts/Pretendard-Light.woff differ
diff --git a/frontend/public/fonts/Pretendard-Light.woff2 b/frontend/public/fonts/Pretendard-Light.woff2
new file mode 100644
index 00000000..a86436a3
Binary files /dev/null and b/frontend/public/fonts/Pretendard-Light.woff2 differ
diff --git a/frontend/public/fonts/Pretendard-Medium.woff b/frontend/public/fonts/Pretendard-Medium.woff
new file mode 100644
index 00000000..92ca0c39
Binary files /dev/null and b/frontend/public/fonts/Pretendard-Medium.woff differ
diff --git a/frontend/public/fonts/Pretendard-Medium.woff2 b/frontend/public/fonts/Pretendard-Medium.woff2
new file mode 100644
index 00000000..153fd556
Binary files /dev/null and b/frontend/public/fonts/Pretendard-Medium.woff2 differ
diff --git a/frontend/public/fonts/font.css b/frontend/public/fonts/font.css
new file mode 100644
index 00000000..9945d17c
--- /dev/null
+++ b/frontend/public/fonts/font.css
@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 700;
+  font-display: swap;
+  src: local('Pretendard Bold'), url('./Pretendard-Bold.woff2') format('woff2'),
+    url('./Pretendard-Bold.woff') format('woff');
+}
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 500;
+  font-display: swap;
+  src: local('Pretendard Medium'), url('./Pretendard-Medium.woff2') format('woff2'),
+    url('./Pretendard-Medium.woff') format('woff');
+}
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 300;
+  font-display: swap;
+  src: local('Pretendard Light'), url('./Pretendard-Light.woff2') format('woff2'),
+    url('./Pretendard-Light.woff') format('woff');
+}
diff --git a/frontend/public/index.html b/frontend/public/index.html
index afd8f924..09a2a281 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,10 +2,35 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" id="favicon" href="/assets/favicon.ico" type="image/x-icon" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="description" content="효율적인 학습 방식을 경험해보세요!" />
+    <meta property="og:url" content="https://haru-study.com" />
+    <meta property="og:title" content="하루스터디📖" />
+    <meta property="og:image" content="/assets/og-image.png" />
+    <meta property="og:image:alt" content="하루스터디📖" />
+    <meta property="og:description" content="효율적인 학습 방식을 경험해보세요!" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ko" />
+    <link href="/fonts/font.css" rel="stylesheet" type="text/css" />
+    <link href="/fonts/Pretendard-Light.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
+    <link href="/fonts/Pretendard-Medium.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
+    <link href="/fonts/Pretendard-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
     <title>하루스터디</title>
+    <meta property="og:type" content="website" />
   </head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-48GCQGE8DY"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'G-48GCQGE8DY');
+  </script>
   <body>
     <div id="root"></div>
     <div id="modal-root"></div>
diff --git a/frontend/public/mockServiceWorker.js b/frontend/public/mockServiceWorker.js
index 8ee70b3e..0f24d515 100644
--- a/frontend/public/mockServiceWorker.js
+++ b/frontend/public/mockServiceWorker.js
@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.3.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 72a589c2..4e6fc8d7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,10 @@
+import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
+import ErrorBoundary from '@Components/common/ErrorBoundary/ErrorBoundary';
+import ErrorFallback from '@Components/common/ErrorFallback/ErrorFallback';
+
 import GlobalStyles from '@Styles/globalStyle';
 import { lightTheme } from '@Styles/theme';
 
@@ -9,14 +13,18 @@ import ModalProvider from '@Contexts/ModalProvider';
 
 const App = () => {
   return (
-    <ModalProvider>
-      <MemberInfoProvider>
-        <ThemeProvider theme={lightTheme}>
-          <GlobalStyles />
-          <Outlet />
-        </ThemeProvider>
-      </MemberInfoProvider>
-    </ModalProvider>
+    <ThemeProvider theme={lightTheme}>
+      <GlobalStyles />
+      <ModalProvider>
+        <MemberInfoProvider>
+          <ErrorBoundary fallback={ErrorFallback}>
+            <Suspense>
+              <Outlet />
+            </Suspense>
+          </ErrorBoundary>
+        </MemberInfoProvider>
+      </ModalProvider>
+    </ThemeProvider>
   );
 };
 
diff --git a/frontend/src/api/httpInstance.ts b/frontend/src/api/httpInstance.ts
new file mode 100644
index 00000000..9bf3bc60
--- /dev/null
+++ b/frontend/src/api/httpInstance.ts
@@ -0,0 +1,69 @@
+import { ROUTES_PATH } from '@Constants/routes';
+
+import type { HttpResponse } from '@Utils/Http';
+import Http from '@Utils/Http';
+import tokenStorage from '@Utils/tokenStorage';
+import url from '@Utils/url';
+
+import type { ResponseAPIError } from '@Types/api';
+
+import { ApiError, UnknownApiError } from '@Errors/index';
+
+const http = new Http(process.env.REACT_APP_BASE_URL, { headers: { 'Content-Type': 'application/json' } });
+
+const refreshAndRefetch = async <T extends object>(response: HttpResponse<T>) => {
+  const {
+    data: { accessToken },
+  } = await http.post<{ accessToken: string }>('/api/auth/refresh');
+
+  tokenStorage.setAccessToken(accessToken);
+
+  return http.request<T>(response.url, response.config);
+};
+
+const logout = () => {
+  tokenStorage.clear();
+  if (url.getPathName() !== ROUTES_PATH.landing) {
+    alert('토큰이 만료 되었습니다. 다시 로그인 해주세요.');
+    url.changePathName(ROUTES_PATH.landing);
+  }
+};
+
+const isApiErrorData = (data: object): data is ResponseAPIError => {
+  return 'code' in data && 'message' in data;
+};
+
+http.registerInterceptor({
+  onRequest: (config) => {
+    if (!tokenStorage.accessToken) return config;
+
+    config.headers = {
+      ...config.headers,
+      Authorization: `Bearer ${tokenStorage.accessToken}`,
+    };
+
+    return config;
+  },
+
+  onResponse: async <T extends object>(response: HttpResponse<T>) => {
+    if (response.ok) return response;
+
+    if (isApiErrorData(response.data)) {
+      const errorCode = response.data.code;
+
+      if (errorCode === 1403 || errorCode === 1404) {
+        return refreshAndRefetch(response);
+      }
+
+      if (errorCode === 1402 || errorCode === 1405) {
+        logout();
+      }
+
+      throw new ApiError(response.data.message, response.data.code, response.config);
+    }
+
+    throw new UnknownApiError(response.config);
+  },
+});
+
+export default http;
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index f7465fe7..940ecb8f 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,5 +1,3 @@
-import http from '@Utils/http';
-
 import type {
   ResponseMemberProgress,
   ResponseAuthToken,
@@ -8,157 +6,103 @@ import type {
   ResponseMemberRecordContents,
   ResponseOneStudyInfo,
   ResponseMemberContents,
-  ResponseProgresses,
   ResponseStudies,
   ResponseStudyData,
   ResponseStudyDataList,
   ResponseStudyMembers,
+  ResponseCheckProgresses,
 } from '@Types/api';
 import type { OAuthProvider } from '@Types/auth';
 import type { PlanList, RetrospectList, StudyTimePerCycleOptions, TotalCycleOptions } from '@Types/study';
 
-const BASE_URL = '';
-
-// 옛날거
+import http from './httpInstance';
 
-export const requestRegisterMember = async (nickname: string, studyId: string) => {
-  const response = await http.post(`${BASE_URL}/api/studies/${studyId}/members`, {
-    body: JSON.stringify({ nickname }),
-  });
+export const requestGetStudyData = (studyId: string) => http.get<ResponseStudyData>(`/api/studies/${studyId}`);
 
-  const locationHeader = response.headers.get('Location');
-  const memberId = locationHeader?.split('/').pop() as string;
+export const requestGetMemberStudyListData = (memberId: string) =>
+  http.get<ResponseStudyDataList>(`/api/studies?memberId=${memberId}`);
 
-  return { memberId };
-};
+export const requestGetStudyMembers = (studyId: string) =>
+  http.get<ResponseStudyMembers>(`/api/studies/${studyId}/progresses`);
 
-export const requestSubmitPlanningForm = (studyId: string, memberId: string, plans: PlanList) =>
-  http.post(`/api/studies/${studyId}/members/${memberId}/content/plans`, {
-    body: JSON.stringify(plans),
-  });
+export const requestGetMemberRecordContents = (studyId: string, progressId: string) =>
+  http.get<ResponseMemberRecordContents>(`/api/studies/${studyId}/contents?progressId=${progressId}`);
 
-export const requestGetStudyData = (studyId: string, accessToken: string) =>
-  http.get<ResponseStudyData>(`/api/studies/${studyId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+export const requestPostGuestLogin = () => http.post<ResponseAuthToken>(`/api/auth/guest`);
 
-export const requestGetMemberStudyListData = (memberId: string, accessToken: string) =>
-  http.get<ResponseStudyDataList>(`/api/studies?memberId=${memberId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
-
-export const requestGetStudyMembers = (studyId: string, accessToken: string) =>
-  http.get<ResponseStudyMembers>(`/api/studies/${studyId}/progresses`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
+export const requestPostOAuthLogin = (provider: OAuthProvider, code: string) =>
+  http.post<ResponseAuthToken>(`/api/auth/login`, {
+    body: JSON.stringify({ oauthProvider: provider, code }),
   });
 
-export const requestGetMemberRecordContents = (studyId: string, progressId: string, accessToken: string) =>
-  http.get<ResponseMemberRecordContents>(`/api/studies/${studyId}/contents?progressId=${progressId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+export const requestGetMemberInfo = () => http.get<ResponseMemberInfo>('/api/me');
 
-// 새로 적용되는 api
-export const requestGuestLogin = async () => {
-  const response = await http.post(`${BASE_URL}/api/auth/guest`);
+export const requestGetOneStudyData = async (studyId: string) => {
+  const { data } = await http.get<ResponseOneStudyInfo>(`/api/studies/${studyId}`);
 
-  return (await response.json()) as ResponseAuthToken;
+  return data;
 };
 
-export const requestOAuthLogin = async (provider: OAuthProvider, code: string) => {
-  const response = await http.post(`${BASE_URL}/api/auth/login`, {
-    body: JSON.stringify({ oauthProvider: provider, code }),
-  });
+export const requestGetMemberProgress = async (studyId: string, memberId: string) => {
+  const { data } = await http.get<ResponseMemberProgress>(`/api/studies/${studyId}/progresses?memberId=${memberId}`);
 
-  return (await response.json()) as ResponseAuthToken;
+  return data.progresses[0];
 };
 
-export const requestMemberInfo = (accessToken: string) =>
-  http.get<ResponseMemberInfo>('/api/me', {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
-
-export const requestAccessTokenRefresh = async () => {
-  const response = await http.post(`${BASE_URL}/api/auth/refresh`);
+export const requestGetMemberContents = async (studyId: string, progressId: string, cycle: number) => {
+  const { data } = await http.get<ResponseMemberContents>(
+    `/api/studies/${studyId}/contents?progressId=${progressId}&cycle=${cycle}`,
+  );
 
-  return (await response.json()) as ResponseAuthToken;
+  return data.content[0].plan;
 };
 
-export const requestGetOneStudyData = (accessToken: string, studyId: string) =>
-  http.get<ResponseOneStudyInfo>(`${BASE_URL}/api/studies/${studyId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
-
-export const requestGetMemberProgress = (accessToken: string, studyId: string, memberId: string) =>
-  http.get<ResponseMemberProgress>(`${BASE_URL}/api/studies/${studyId}/progresses?memberId=${memberId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
-
-export const requestGetMemberContents = (accessToken: string, studyId: string, progressId: string, cycle: number) =>
-  http.get<ResponseMemberContents>(
-    `${BASE_URL}/api/studies/${studyId}/contents?progressId=${progressId}&cycle=${cycle}`,
-    {
-      headers: { Authorization: `Bearer ${accessToken}` },
-    },
-  );
-
-export const requestWritePlan = (accessToken: string, studyId: string, progressId: string, plan: PlanList) =>
-  http.post(`${BASE_URL}/api/studies/${studyId}/contents/write-plan`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
+export const requestWritePlan = (studyId: string, progressId: string, plan: PlanList) =>
+  http.post(`/api/studies/${studyId}/contents/write-plan`, {
     body: JSON.stringify({ progressId, plan: plan }),
   });
 
-export const requestWriteRetrospect = (
-  accessToken: string,
-  studyId: string,
-  progressId: string,
-  retrospect: RetrospectList,
-) =>
-  http.post(`${BASE_URL}/api/studies/${studyId}/contents/write-retrospect`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
+export const requestWriteRetrospect = (studyId: string, progressId: string, retrospect: RetrospectList) =>
+  http.post(`/api/studies/${studyId}/contents/write-retrospect`, {
     body: JSON.stringify({ progressId, retrospect: retrospect }),
   });
 
-export const requestNextStep = (accessToken: string, studyId: string, progressId: string) =>
-  http.post(`${BASE_URL}/api/studies/${studyId}/progresses/${progressId}/next-step`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+export const requestNextStep = (studyId: string, progressId: string) =>
+  http.post(`/api/studies/${studyId}/progresses/${progressId}/next-step`);
 
-export const requestCreateStudy = async (
+export const requestPostCreateStudy = async (
   studyName: string,
-  totalCycle: TotalCycleOptions,
-  timePerCycle: StudyTimePerCycleOptions,
-  accessToken: string,
+  totalCycle: TotalCycleOptions | null,
+  timePerCycle: StudyTimePerCycleOptions | null,
 ) => {
-  const response = await http.post(`/api/studies`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
+  const response = await http.post<ResponseCreateStudy>(`/api/studies`, {
     body: JSON.stringify({ name: studyName, totalCycle, timePerCycle }),
   });
 
   const locationHeader = response.headers.get('Location');
   const studyId = locationHeader?.split('/').pop() as string;
 
-  const result = (await response.json()) as ResponseCreateStudy;
+  const data = response.data;
 
-  return { studyId, result };
+  return { studyId, data };
 };
 
-export const requestAuthenticateParticipationCode = (participantCode: string, accessToken: string) =>
-  http.get<ResponseStudies>(`/api/studies?participantCode=${participantCode}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+export const requestGetAuthenticateParticipationCode = async (participantCode: string) => {
+  const response = http.get<ResponseStudies>(`/api/studies?participantCode=${participantCode}`);
 
-export const requestCheckProgresses = async (studyId: string, memberId: string, accessToken: string) =>
-  http.get<ResponseProgresses>(`/api/studies/${studyId}/progresses?memberId=${memberId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+  return (await response).data;
+};
+
+export const requestGetCheckProgresses = async (studyId: string, memberId: string) => {
+  const response = http.get<ResponseCheckProgresses>(`/api/temp/studies/${studyId}/progresses?memberId=${memberId}`);
 
-export const requestRegisterProgress = (nickname: string, studyId: string, memberId: string, accessToken: string) =>
+  return (await response).data;
+};
+
+export const requestPostRegisterProgress = (nickname: string, studyId: string, memberId: string) =>
   http.post(`/api/studies/${studyId}/progresses`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
     body: JSON.stringify({ memberId, nickname }),
   });
 
-export const requestDeleteProgress = (studyId: string, progressId: number, accessToken: string) =>
-  http.delete(`/api/studies/${studyId}/progresses/${progressId}`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+export const requestDeleteProgress = (studyId: string, progressId: number) =>
+  http.delete(`/api/studies/${studyId}/progresses/${progressId}`);
diff --git a/frontend/src/assets/icons/ChatIcon.tsx b/frontend/src/assets/icons/ChatIcon.tsx
new file mode 100644
index 00000000..3b981c85
--- /dev/null
+++ b/frontend/src/assets/icons/ChatIcon.tsx
@@ -0,0 +1,16 @@
+type Props = {
+  color: string;
+};
+
+const ChatIcon = ({ color }: Props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <path
+        d="M20.0002 5C29.1668 5 36.6668 10.9667 36.6668 18.3333C36.6668 25.7 29.1668 31.6667 20.0002 31.6667C17.9335 31.6667 15.9502 31.3667 14.1168 30.8333C9.25016 35 3.3335 35 3.3335 35C7.21683 31.1167 7.8335 28.5 7.91683 27.5C5.0835 25.1167 3.3335 21.8833 3.3335 18.3333C3.3335 10.9667 10.8335 5 20.0002 5Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ChatIcon;
diff --git a/frontend/src/assets/icons/CycleIcon.tsx b/frontend/src/assets/icons/CycleIcon.tsx
index 7104aae4..7cf4cf3f 100644
--- a/frontend/src/assets/icons/CycleIcon.tsx
+++ b/frontend/src/assets/icons/CycleIcon.tsx
@@ -1,8 +1,8 @@
 type Props = {
-  color: string;
+  color?: string;
 };
 
-const CycleIcon = ({ color }: Props) => {
+const CycleIcon = ({ color = '#000000' }: Props) => {
   return (
     <svg width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id="material-symbols:cycle-rounded">
diff --git a/frontend/src/assets/icons/GoogleIcon.tsx b/frontend/src/assets/icons/GoogleIcon.tsx
new file mode 100644
index 00000000..2407c085
--- /dev/null
+++ b/frontend/src/assets/icons/GoogleIcon.tsx
@@ -0,0 +1,24 @@
+const GoogleIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 48 48" fill="none">
+      <path
+        d="M43.611 20.083H42V20H24V28H35.303C33.654 32.657 29.223 36 24 36C17.373 36 12 30.627 12 24C12 17.373 17.373 12 24 12C27.059 12 29.842 13.154 31.961 15.039L37.618 9.382C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24C4 35.045 12.955 44 24 44C35.045 44 44 35.045 44 24C44 22.659 43.862 21.35 43.611 20.083Z"
+        fill="#FFC107"
+      />
+      <path
+        d="M6.30615 14.691L12.8772 19.51C14.6552 15.108 18.9612 12 24.0002 12C27.0592 12 29.8422 13.154 31.9612 15.039L37.6182 9.382C34.0462 6.053 29.2682 4 24.0002 4C16.3182 4 9.65615 8.337 6.30615 14.691Z"
+        fill="#FF3D00"
+      />
+      <path
+        d="M23.9998 44C29.1658 44 33.8598 42.023 37.4088 38.808L31.2188 33.57C29.1434 35.1483 26.6073 36.002 23.9998 36C18.7978 36 14.3808 32.683 12.7168 28.054L6.19482 33.079C9.50482 39.556 16.2268 44 23.9998 44Z"
+        fill="#4CAF50"
+      />
+      <path
+        d="M43.611 20.083H42V20H24V28H35.303C34.5142 30.2164 33.0934 32.1532 31.216 33.571L31.219 33.569L37.409 38.807C36.971 39.205 44 34 44 24C44 22.659 43.862 21.35 43.611 20.083Z"
+        fill="#1976D2"
+      />
+    </svg>
+  );
+};
+
+export default GoogleIcon;
diff --git a/frontend/src/assets/icons/ReportIon.tsx b/frontend/src/assets/icons/ReportIon.tsx
new file mode 100644
index 00000000..19c3fa94
--- /dev/null
+++ b/frontend/src/assets/icons/ReportIon.tsx
@@ -0,0 +1,31 @@
+type Props = {
+  color?: string;
+};
+
+const ReportIcon = ({ color = '#000000' }: Props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <mask id="mask0_2576_85" maskUnits="userSpaceOnUse" x="1" y="1" width="34" height="36">
+        <path
+          d="M30 29.1667H10V17.5C10 11.9775 14.4775 7.5 20 7.5C25.5225 7.5 30 11.9775 30 17.5V29.1667Z"
+          fill="white"
+          stroke="white"
+          strokeWidth="3.33333"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.66683 35.0002H33.3335M3.3335 10.8335L5.8335 11.6668M10.8335 3.3335L11.6668 5.8335M8.3335 8.3335L5.8335 5.8335"
+          stroke="white"
+          strokeWidth="3.33333"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </mask>
+      <g mask="url(#mask0_2576_85)">
+        <path d="M0 0H40V40H0V0Z" fill={color} />
+      </g>
+    </svg>
+  );
+};
+
+export default ReportIcon;
diff --git a/frontend/src/assets/icons/ResetIcon.tsx b/frontend/src/assets/icons/ResetIcon.tsx
index 81382adb..43e445ef 100644
--- a/frontend/src/assets/icons/ResetIcon.tsx
+++ b/frontend/src/assets/icons/ResetIcon.tsx
@@ -1,8 +1,8 @@
 type Props = {
-  color: string;
+  color?: string;
 };
 
-const ResetIcon = ({ color }: Props) => {
+const ResetIcon = ({ color = '#000000' }: Props) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
       <path
diff --git a/frontend/src/assets/image/heroImage.png b/frontend/src/assets/image/heroImage.png
deleted file mode 100644
index 05a336f9..00000000
Binary files a/frontend/src/assets/image/heroImage.png and /dev/null differ
diff --git a/frontend/src/assets/images/heroImage.jpg b/frontend/src/assets/images/heroImage.jpg
new file mode 100644
index 00000000..316d8226
Binary files /dev/null and b/frontend/src/assets/images/heroImage.jpg differ
diff --git a/frontend/src/assets/images/heroImage.webp b/frontend/src/assets/images/heroImage.webp
new file mode 100644
index 00000000..875524c2
Binary files /dev/null and b/frontend/src/assets/images/heroImage.webp differ
diff --git a/frontend/src/assets/images/planningStep.jpg b/frontend/src/assets/images/planningStep.jpg
new file mode 100644
index 00000000..f3a952ba
Binary files /dev/null and b/frontend/src/assets/images/planningStep.jpg differ
diff --git a/frontend/src/assets/images/planningStep.webp b/frontend/src/assets/images/planningStep.webp
new file mode 100644
index 00000000..010145ad
Binary files /dev/null and b/frontend/src/assets/images/planningStep.webp differ
diff --git a/frontend/src/assets/images/retrospectStep.jpg b/frontend/src/assets/images/retrospectStep.jpg
new file mode 100644
index 00000000..c1072f05
Binary files /dev/null and b/frontend/src/assets/images/retrospectStep.jpg differ
diff --git a/frontend/src/assets/images/retrospectStep.webp b/frontend/src/assets/images/retrospectStep.webp
new file mode 100644
index 00000000..e0561dc2
Binary files /dev/null and b/frontend/src/assets/images/retrospectStep.webp differ
diff --git a/frontend/src/assets/images/studyingStep.jpg b/frontend/src/assets/images/studyingStep.jpg
new file mode 100644
index 00000000..8b5dbc22
Binary files /dev/null and b/frontend/src/assets/images/studyingStep.jpg differ
diff --git a/frontend/src/assets/images/studyingStep.webp b/frontend/src/assets/images/studyingStep.webp
new file mode 100644
index 00000000..fc662870
Binary files /dev/null and b/frontend/src/assets/images/studyingStep.webp differ
diff --git a/frontend/src/assets/sounds/alarm.mp3 b/frontend/src/assets/sounds/alarm.mp3
new file mode 100644
index 00000000..a8701214
Binary files /dev/null and b/frontend/src/assets/sounds/alarm.mp3 differ
diff --git a/frontend/src/components/board/StepContents/StepContents.tsx b/frontend/src/components/board/StepContents/StepContents.tsx
deleted file mode 100644
index 18c54916..00000000
--- a/frontend/src/components/board/StepContents/StepContents.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ProgressInfo, StudyInfo } from '@Types/study';
-
-import PlanningForm from '../PlanningForm/PlanningForm';
-import RetrospectForm from '../RetrospectForm/RetrospectForm';
-import StudyingForm from '../StudyingForm/StudyingForm';
-
-type Props = {
-  studyInfo: StudyInfo;
-  progressInfo: ProgressInfo;
-  changeNextStep: () => Promise<void>;
-};
-
-const StepContents = ({ studyInfo, progressInfo, changeNextStep }: Props) => {
-  const isLastCycle = progressInfo.currentCycle === studyInfo.totalCycle;
-
-  switch (progressInfo.step) {
-    case 'planning':
-      return (
-        <PlanningForm
-          onClickSubmitButton={changeNextStep}
-          studyId={studyInfo.studyId}
-          progressId={progressInfo.progressId}
-        />
-      );
-    case 'studying':
-      return (
-        <StudyingForm
-          onClickSubmitButton={changeNextStep}
-          studyId={studyInfo.studyId}
-          progressId={progressInfo.progressId}
-          cycle={progressInfo.currentCycle}
-        />
-      );
-    case 'retrospect':
-      return (
-        <RetrospectForm
-          isLastCycle={isLastCycle}
-          onClickSubmitButton={changeNextStep}
-          studyId={studyInfo.studyId}
-          progressId={progressInfo.progressId}
-        />
-      );
-  }
-};
-
-export default StepContents;
diff --git a/frontend/src/components/board/StudyingForm/StudyingForm.tsx b/frontend/src/components/board/StudyingForm/StudyingForm.tsx
deleted file mode 100644
index ec0455ca..00000000
--- a/frontend/src/components/board/StudyingForm/StudyingForm.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { css, styled } from 'styled-components';
-
-import Button from '@Components/common/Button/Button';
-import CircularProgress from '@Components/common/CircularProgress/CircularProgress';
-import QuestionAnswer from '@Components/common/QuestionAnswer/QuestionAnswer';
-
-import useStudyingForm from '@Hooks/board/useStudyingForm';
-
-import color from '@Styles/color';
-
-import { ROUTES_PATH } from '@Constants/routes';
-import { PLAN_KEYWORDS } from '@Constants/study';
-
-import { getKeys } from '@Utils/getKeys';
-
-import type { Plan } from '@Types/study';
-
-type Props = {
-  onClickSubmitButton: () => Promise<void>;
-  studyId: string;
-  progressId: string;
-  cycle: number;
-};
-
-const StudyingForm = ({ onClickSubmitButton, studyId, progressId, cycle }: Props) => {
-  const navigate = useNavigate();
-  const { planList, isSubmitLoading, error, submitForm } = useStudyingForm(
-    studyId,
-    progressId,
-    cycle,
-    onClickSubmitButton,
-  );
-
-  const handleClickButton = async () => {
-    try {
-      await submitForm();
-    } catch (error) {
-      if (!(error instanceof Error)) return;
-      alert(error.message);
-    }
-  };
-
-  if (error) {
-    alert(error.message);
-    if (confirm('메인 페이지로 돌아기시겠습니까?')) {
-      navigate(ROUTES_PATH.landing);
-    }
-  }
-
-  if (planList === null) {
-    return (
-      <LoadingLayout>
-        <CircularProgress
-          size="x-large"
-          $style={css`
-            border: 2px solid ${color.red[600]};
-            border-color: ${color.red[600]} transparent transparent transparent;
-          `}
-        />
-      </LoadingLayout>
-    );
-  }
-
-  return (
-    <Layout>
-      <PlanResultList>
-        {getKeys<Plan>(PLAN_KEYWORDS).map((planKey) => (
-          <QuestionAnswer
-            key={planKey}
-            question={PLAN_KEYWORDS[planKey]}
-            answer={planList[planKey]}
-            iconColor={color.red[600]}
-          />
-        ))}
-      </PlanResultList>
-      <Button variant="danger" onClick={handleClickButton} isLoading={isSubmitLoading}>
-        학습 마치기
-      </Button>
-    </Layout>
-  );
-};
-
-export default StudyingForm;
-
-const Layout = styled.section`
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-
-  padding: 60px 85px;
-`;
-
-const PlanResultList = styled.ul`
-  width: 100%;
-  height: 90%;
-
-  display: flex;
-  flex-direction: column;
-  gap: 60px;
-
-  padding: 50px;
-  background-color: #fff;
-  border-radius: 14px;
-
-  overflow-y: auto;
-`;
-
-const LoadingLayout = styled.div`
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
diff --git a/frontend/src/components/common/Accordion/AccordionHeader.tsx b/frontend/src/components/common/Accordion/AccordionHeader.tsx
index a1cbef85..fa3a7f89 100644
--- a/frontend/src/components/common/Accordion/AccordionHeader.tsx
+++ b/frontend/src/components/common/Accordion/AccordionHeader.tsx
@@ -28,4 +28,5 @@ const AccordionHeaderLayout = styled.div`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
+  gap: 20px;
 `;
diff --git a/frontend/src/components/common/AlertErrorBoundary/AlertErrorBoundary.tsx b/frontend/src/components/common/AlertErrorBoundary/AlertErrorBoundary.tsx
new file mode 100644
index 00000000..8ab5ef40
--- /dev/null
+++ b/frontend/src/components/common/AlertErrorBoundary/AlertErrorBoundary.tsx
@@ -0,0 +1,41 @@
+import type { PropsWithChildren } from 'react';
+import { Component } from 'react';
+
+import type { ModalContextType } from '@Contexts/ModalProvider';
+import { ModalContext } from '@Contexts/ModalProvider';
+import { ApiError } from '@Errors/index';
+
+type AlertErrorBoundaryState = {
+  error: Error | null;
+};
+
+class AlertErrorBoundary extends Component<PropsWithChildren, AlertErrorBoundaryState> {
+  state: AlertErrorBoundaryState = {
+    error: null,
+  };
+
+  static getDerivedStateFromError(error: Error) {
+    if (error instanceof ApiError) {
+      if (error.code === 1402 || error.code === 1405) {
+        throw error;
+      }
+    }
+    return { error: error };
+  }
+
+  static contextType = ModalContext;
+
+  componentDidCatch(error: Error): void {
+    const { openAlert } = this.context as ModalContextType;
+
+    openAlert(error.message);
+  }
+
+  render() {
+    const { children } = this.props;
+
+    return children;
+  }
+}
+
+export default AlertErrorBoundary;
diff --git a/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 00000000..708e967e
--- /dev/null
+++ b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,40 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import { Component } from 'react';
+
+import type { ErrorFallbackProps } from '../ErrorFallback/ErrorFallback';
+
+type ErrorBoundaryProps = {
+  fallback: ComponentType<ErrorFallbackProps>;
+};
+
+type ErrorBoundaryState = {
+  error: Error | null;
+};
+
+class ErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
+  state: ErrorBoundaryState = {
+    error: null,
+  };
+
+  resetErrorBoundary = () => {
+    this.setState({ error: null });
+  };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    const { children, fallback: Fallback } = this.props;
+
+    const { error } = this.state;
+
+    if (error) {
+      return <Fallback error={error} resetErrorBoundary={this.resetErrorBoundary} />;
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/components/common/ErrorFallback/ErrorFallback.tsx b/frontend/src/components/common/ErrorFallback/ErrorFallback.tsx
new file mode 100644
index 00000000..8012229e
--- /dev/null
+++ b/frontend/src/components/common/ErrorFallback/ErrorFallback.tsx
@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import color from '@Styles/color';
+
+import ResetIcon from '@Assets/icons/ResetIcon';
+
+import Button from '../Button/Button';
+import Typography from '../Typography/Typography';
+
+export type ErrorFallbackProps = {
+  error: Error;
+  resetErrorBoundary?: () => void;
+  layoutHeight?: string;
+};
+
+const ErrorFallback = ({ error, resetErrorBoundary, layoutHeight = '100vh' }: ErrorFallbackProps) => {
+  const errorMessage = error.message || '알 수 없는 에러입니다.';
+  return (
+    <Layout height={layoutHeight}>
+      <Typography variant="h3">문제가 발생했습니다.</Typography>
+      <Typography variant="p3">{errorMessage}</Typography>
+      <Button $block={false} size="small" variant="secondary" onClick={resetErrorBoundary}>
+        <ResetIcon /> 다시 시도하기
+      </Button>
+      <Link to={'/'} onClick={resetErrorBoundary}>
+        홈으로 이동하기
+      </Link>
+    </Layout>
+  );
+};
+
+export default ErrorFallback;
+
+const Layout = styled.section<{ height: string }>`
+  width: 100%;
+  height: ${({ height }) => height};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+
+  p {
+    display: flex;
+    align-items: center;
+
+    gap: 10px;
+  }
+
+  a {
+    color: ${color.blue[500]};
+    text-decoration: underline;
+  }
+`;
diff --git a/frontend/src/components/common/Footer/Footer.tsx b/frontend/src/components/common/Footer/Footer.tsx
new file mode 100644
index 00000000..e2c2775d
--- /dev/null
+++ b/frontend/src/components/common/Footer/Footer.tsx
@@ -0,0 +1,56 @@
+import color from '@Styles/color';
+import { styled } from 'styled-components';
+import Typography from '../Typography/Typography';
+
+const URL = {
+  github: 'https://github.com/woowacourse-teams/2023-haru-study',
+  feedback: 'https://docs.google.com/forms/d/e/1FAIpQLSdwvz3y9xYc9PHCLw1LiaLB8TGfGao91cVs_NwERHSV9c5Mfg/viewform',
+};
+
+const Footer = () => {
+  return (
+    <Layout>
+      <Typography variant="p3" fontSize="12px">
+        우아한테크코스 5기 하루스터디
+      </Typography>
+      <Typography variant="p3" fontSize="12px">
+        Copyright © 2023 하루스터디 - All rights reserved.
+      </Typography>
+      <LinkContainer>
+        <a target="_blank" href={URL.github}>
+          <Typography variant="p3" fontSize="12px">
+            Github
+          </Typography>
+        </a>
+        <a target="_blank" href={URL.feedback}>
+          <Typography variant="p3" fontSize="12px">
+            사용자 피드백
+          </Typography>
+        </a>
+      </LinkContainer>
+    </Layout>
+  );
+};
+
+export default Footer;
+
+const Layout = styled.footer`
+  width: 100%;
+  height: 100px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LinkContainer = styled.div`
+  display: flex;
+  gap: 20px;
+
+  margin-top: 10px;
+
+  p {
+    text-decoration: underline;
+  }
+`;
diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
index e47f9d01..a2110a27 100644
--- a/frontend/src/components/common/Header/Header.tsx
+++ b/frontend/src/components/common/Header/Header.tsx
@@ -31,6 +31,8 @@ export default Header;
 
 const Layout = styled.header`
   padding: 40px;
+
+  display: flex;
 `;
 
 const Emphasis = styled.span`
diff --git a/frontend/src/components/common/Image/Image.tsx b/frontend/src/components/common/Image/Image.tsx
new file mode 100644
index 00000000..7dbbf4b7
--- /dev/null
+++ b/frontend/src/components/common/Image/Image.tsx
@@ -0,0 +1,22 @@
+type Props = {
+  webpUrl: string[] | string;
+  originUrl: string;
+  alt?: string;
+};
+
+const Image = ({ webpUrl, originUrl, alt }: Props) => {
+  if (typeof webpUrl === 'string') {
+    webpUrl = [webpUrl];
+  }
+
+  return (
+    <picture>
+      {webpUrl.map((item, index) => (
+        <source key={index} type="image/webp" srcSet={item} />
+      ))}
+      <img src={originUrl} alt={alt} />
+    </picture>
+  );
+};
+
+export default Image;
diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx
index 115e2ea9..df3a8a99 100644
--- a/frontend/src/components/common/Input/Input.tsx
+++ b/frontend/src/components/common/Input/Input.tsx
@@ -90,12 +90,17 @@ const Layout = styled.div`
 `;
 
 const StyledLabel = styled.label<StyledLabel>`
-  font-weight: 200;
+  font-size: 2.4rem;
+  font-weight: 300;
 
   ${({ $labelSize = 'medium', $style, theme }) => css`
     color: ${theme.text};
     ${SIZE_TYPE[$labelSize]} ${$style};
   `}
+
+  @media screen and (max-width: 768px) {
+    font-size: 2rem;
+  }
 `;
 
 const StyledBottomText = styled.p<{ $error?: boolean }>`
@@ -104,6 +109,10 @@ const StyledBottomText = styled.p<{ $error?: boolean }>`
   font-size: 1.6rem;
   font-weight: 200;
 
+  @media screen and (max-width: 768px) {
+    font-size: 1.4rem;
+  }
+
   ${({ $error }) => css`
     color: ${$error ? color.red[600] : color.neutral[400]};
   `};
diff --git a/frontend/src/components/common/LodingFallback/LoadingFallback.tsx b/frontend/src/components/common/LodingFallback/LoadingFallback.tsx
new file mode 100644
index 00000000..36ecdb8f
--- /dev/null
+++ b/frontend/src/components/common/LodingFallback/LoadingFallback.tsx
@@ -0,0 +1,35 @@
+import { css, styled } from 'styled-components';
+
+import CircularProgress from '@Components/common/CircularProgress/CircularProgress';
+
+import color from '@Styles/color';
+
+type Props = {
+  height?: string;
+  circleColor?: string;
+};
+
+const LoadingFallback = ({ height = '100%', circleColor = color.blue[500] }: Props) => {
+  return (
+    <Layout height={height}>
+      <CircularProgress
+        size="x-large"
+        $style={css`
+          border: 2px solid ${circleColor};
+          border-color: ${circleColor} transparent transparent transparent;
+        `}
+      />
+    </Layout>
+  );
+};
+
+const Layout = styled.div<{ height: string }>`
+  width: 100%;
+  height: ${({ height }) => height};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default LoadingFallback;
diff --git a/frontend/src/components/common/MemberInfoGuard/MemberInfoGuard.tsx b/frontend/src/components/common/MemberInfoGuard/MemberInfoGuard.tsx
new file mode 100644
index 00000000..559e81b6
--- /dev/null
+++ b/frontend/src/components/common/MemberInfoGuard/MemberInfoGuard.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+
+import LoadingFallback from '@Components/common/LodingFallback/LoadingFallback';
+
+import { useMemberInfo } from '@Contexts/MemberInfoProvider';
+
+const MemberInfoGuard = ({ children }: PropsWithChildren) => {
+  const memberInfo = useMemberInfo();
+
+  if (memberInfo === null) return <LoadingFallback height="100vh" />;
+
+  return children;
+};
+
+export default MemberInfoGuard;
diff --git a/frontend/src/components/common/Modal/Modal.tsx b/frontend/src/components/common/Modal/Modal.tsx
index 07ef9be4..82ea1e11 100644
--- a/frontend/src/components/common/Modal/Modal.tsx
+++ b/frontend/src/components/common/Modal/Modal.tsx
@@ -56,4 +56,8 @@ const ModalContainer = styled.div`
   width: 500px;
   max-height: 600px;
   overflow-y: auto;
+
+  @media screen and (max-width: 768px) {
+    width: 90%;
+  }
 `;
diff --git a/frontend/src/components/common/Select/Select.tsx b/frontend/src/components/common/Select/Select.tsx
index e62576e9..f2b4ac2c 100644
--- a/frontend/src/components/common/Select/Select.tsx
+++ b/frontend/src/components/common/Select/Select.tsx
@@ -49,7 +49,7 @@ const Select = ({ children, label, $style }: Props) => {
       value={{ selectedItem, isOpen, changeSelectedItem, toggleOpen, triggerSuffixText, changeTriggerSuffixText }}
     >
       <Layout $style={$style} ref={ref}>
-        <label>{label}</label>
+        <StyledLabel>{label}</StyledLabel>
         {children}
       </Layout>
     </SelectContext.Provider>
@@ -66,6 +66,15 @@ const Layout = styled.div<Pick<Props, '$style'>>`
   `}
 `;
 
+const StyledLabel = styled.label`
+  font-size: 2.4rem;
+  font-weight: 300;
+
+  @media screen and (max-width: 768px) {
+    font-size: 2rem;
+  }
+`;
+
 Select.Trigger = SelectTrigger;
 Select.List = SelectList;
 Select.Item = SelectItem;
diff --git a/frontend/src/components/common/Select/SelectItem.tsx b/frontend/src/components/common/Select/SelectItem.tsx
index 4c0b055f..704acd4b 100644
--- a/frontend/src/components/common/Select/SelectItem.tsx
+++ b/frontend/src/components/common/Select/SelectItem.tsx
@@ -49,4 +49,9 @@ const Layout = styled.div<Omit<ItemProps, 'value' | 'suffix'>>`
     background-color: ${theme.background};
     ${$style}
   `};
+
+  @media screen and (max-width: 768px) {
+    font-size: 1.8rem;
+    padding: 14px;
+  }
 `;
diff --git a/frontend/src/components/common/Select/SelectList.tsx b/frontend/src/components/common/Select/SelectList.tsx
index 92888393..f56b215b 100644
--- a/frontend/src/components/common/Select/SelectList.tsx
+++ b/frontend/src/components/common/Select/SelectList.tsx
@@ -1,15 +1,25 @@
-import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import type { EventHandler, HTMLAttributes, MouseEvent, ReactNode, SyntheticEvent } from 'react';
 import { Children, cloneElement, isValidElement } from 'react';
 import type { CSSProp } from 'styled-components';
 import { css, styled } from 'styled-components';
 
 import color from '@Styles/color';
 
-import { composeEventHandlers } from '@Utils/domEventHandler';
-
 import { useSelectContext } from './SelectContext';
 import type { ItemProps } from './SelectItem';
 
+export type ComposeEventHandlers = <E extends SyntheticEvent<unknown, Event>>(
+  externalEventHandler?: EventHandler<E>,
+  innerEventHandler?: EventHandler<E>,
+) => EventHandler<E>;
+
+const composeEventHandlers: ComposeEventHandlers = (externalEventHandler, innerEventHandler) => {
+  return (event) => {
+    externalEventHandler?.(event);
+    innerEventHandler?.(event);
+  };
+};
+
 type Props = {
   children: ReactNode;
 
diff --git a/frontend/src/components/common/Select/SelectTrigger.tsx b/frontend/src/components/common/Select/SelectTrigger.tsx
index 62440377..8673f771 100644
--- a/frontend/src/components/common/Select/SelectTrigger.tsx
+++ b/frontend/src/components/common/Select/SelectTrigger.tsx
@@ -8,15 +8,16 @@ import { useSelectContext } from './SelectContext';
 
 type Props = {
   triggerText?: string;
+  testId?: string;
 
   $style?: CSSProp;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
-const SelectTrigger = ({ triggerText = '선택', ...props }: Props) => {
+const SelectTrigger = ({ triggerText = '선택', testId, ...props }: Props) => {
   const { isOpen, selectedItem, toggleOpen, triggerSuffixText } = useSelectContext();
 
   return (
-    <Layout {...props} $isOpen={isOpen} onClick={toggleOpen}>
+    <Layout {...props} $isOpen={isOpen} onClick={toggleOpen} data-testid={testId}>
       {selectedItem === null ? triggerText : selectedItem.toString() + triggerSuffixText}
       {isOpen ? <Mark>&#9650;</Mark> : <Mark>&#9660;</Mark>}
     </Layout>
@@ -43,6 +44,11 @@ const Layout = styled.button<Props & { $isOpen: boolean }>`
     border-bottom-left-radius: ${$isOpen ? 'none' : '7px'};
     ${$style}
   `};
+
+  @media screen and (max-width: 768px) {
+    font-size: 1.8rem;
+    padding: 14px;
+  }
 `;
 
 const Mark = styled.p`
diff --git a/frontend/src/components/common/Tabs/TabList.tsx b/frontend/src/components/common/Tabs/TabList.tsx
index a57861b5..998f1ab3 100644
--- a/frontend/src/components/common/Tabs/TabList.tsx
+++ b/frontend/src/components/common/Tabs/TabList.tsx
@@ -11,7 +11,7 @@ const TabList = () => {
         const isSelected = tab === selectedTab;
 
         return (
-          <Tab onClick={() => changeTab(tab)} key={`${tab}${index}`} $isSelected={isSelected}>
+          <Tab data-testid="tab" onClick={() => changeTab(tab)} key={`${tab}${index}`} $isSelected={isSelected}>
             {tab}
           </Tab>
         );
@@ -23,9 +23,11 @@ const TabList = () => {
 export default TabList;
 
 const TabListLayout = styled.ul`
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  width: 100%;
+  display: flex;
   row-gap: 20px;
+
+  overflow-x: scroll;
 `;
 
 type TabProps = {
@@ -37,7 +39,7 @@ const Tab = styled.li<TabProps>`
   align-items: center;
   justify-content: center;
 
-  padding-bottom: 5px;
+  padding: 0px 10px 5px;
 
   font-size: 1.8rem;
   text-align: center;
diff --git a/frontend/src/components/common/Tabs/Tabs.tsx b/frontend/src/components/common/Tabs/Tabs.tsx
index 52686452..2811ec72 100644
--- a/frontend/src/components/common/Tabs/Tabs.tsx
+++ b/frontend/src/components/common/Tabs/Tabs.tsx
@@ -23,4 +23,10 @@ Tabs.Item = TabItem;
 const TabsLayout = styled.div`
   display: grid;
   row-gap: 40px;
+
+  @media screen and (max-width: 768px) {
+    row-gap: 20px;
+
+    font-size: 1.4rem;
+  }
 `;
diff --git a/frontend/src/components/create/CreateStudyForm/CreateStudyForm.tsx b/frontend/src/components/create/CreateStudyForm/CreateStudyForm.tsx
index 8ccfb13b..cf00f0e4 100644
--- a/frontend/src/components/create/CreateStudyForm/CreateStudyForm.tsx
+++ b/frontend/src/components/create/CreateStudyForm/CreateStudyForm.tsx
@@ -4,10 +4,8 @@ import { css, styled } from 'styled-components';
 import Button from '@Components/common/Button/Button';
 import Input from '@Components/common/Input/Input';
 import Select from '@Components/common/Select/Select';
-import Typography from '@Components/common/Typography/Typography';
-
-import useCreateStudy from '@Hooks/create/useCreateStudy';
-import useCreateStudyForm from '@Hooks/create/useCreateStudyForm';
+import useCreateStudy from '@Components/create/hooks/useCreateStudy';
+import useCreateStudyForm from '@Components/create/hooks/useCreateStudyForm';
 
 import color from '@Styles/color';
 
@@ -36,23 +34,16 @@ const CreateStudyForm = () => {
     isSelectedOptions,
   } = useCreateStudyForm();
 
-  const errorHandler = (error: Error) => {
-    alert(error.message);
-  };
-
-  const { isLoading, createStudy } = useCreateStudy(errorHandler);
+  const { createStudy, isLoading } = useCreateStudy(studyName, totalCycle, timePerCycle);
 
   const handleClickCreateStudyButton = async () => {
-    if (!studyName || !totalCycle || !timePerCycle) {
-      alert('이름의 길이와, 사이클 수, 사이클 당 시간을 다시 한번 확인해주세요');
-      return;
-    }
+    const result = await createStudy();
 
-    const data = await createStudy(studyName, totalCycle, timePerCycle);
+    if (result) {
+      const { studyId, data } = result;
 
-    if (data) {
-      navigate(`${ROUTES_PATH.preparation}/${data.studyId}`, {
-        state: { participantCode: data.result.participantCode, studyName, isHost: true },
+      navigate(`${ROUTES_PATH.preparation}/${studyId}`, {
+        state: { participantCode: data.participantCode, studyName, isHost: true },
       });
     }
   };
@@ -64,10 +55,7 @@ const CreateStudyForm = () => {
   return (
     <Layout>
       <Container>
-        <Input
-          label={<Typography variant="p1">스터디의 이름은 무엇인가요?</Typography>}
-          errorMessage={ERROR_MESSAGE.studyName}
-        >
+        <Input label="스터디의 이름은 무엇인가요?" errorMessage={ERROR_MESSAGE.studyName}>
           <Input.TextField
             $style={css`
               padding: 10px;
@@ -81,12 +69,12 @@ const CreateStudyForm = () => {
           />
         </Input>
         <Select
-          label={<Typography variant="p1">사이클 횟수는 어떻게 되나요?</Typography>}
+          label="사이클 횟수는 어떻게 되나요?"
           $style={css`
             position: relative;
           `}
         >
-          <Select.Trigger triggerText="횟수를 선택해주세요" />
+          <Select.Trigger triggerText="횟수를 선택해주세요" testId="cycle" />
           <Select.List
             $style={css`
               position: absolute;
@@ -102,12 +90,12 @@ const CreateStudyForm = () => {
           </Select.List>
         </Select>
         <Select
-          label={<Typography variant="p1">한 사이클 당 학습 시간은 어떻게 되나요?</Typography>}
+          label="한 사이클 당 학습 시간은 어떻게 되나요?"
           $style={css`
             position: relative;
           `}
         >
-          <Select.Trigger triggerText="학습 시간을 선택해주세요" />
+          <Select.Trigger triggerText="학습 시간을 선택해주세요" testId="timepercycle" />
           <Select.List
             $style={css`
               position: absolute;
@@ -123,12 +111,7 @@ const CreateStudyForm = () => {
           </Select.List>
         </Select>
       </Container>
-      <Typography
-        variant="p2"
-        $style={css`
-          text-align: center;
-        `}
-      >
+      <TimeDescription>
         {isSelectedOptions ? (
           <>
             예상 스터디 시간은{' '}
@@ -140,7 +123,7 @@ const CreateStudyForm = () => {
         ) : (
           '사이클 횟수와 사이클 당 학습 시간을 선택하세요.'
         )}
-      </Typography>
+      </TimeDescription>
       <Button variant="primary" onClick={handleClickCreateStudyButton} disabled={isDisabled()} isLoading={isLoading}>
         스터디 개설하기
       </Button>
@@ -162,6 +145,16 @@ const Container = styled.div`
   gap: 70px;
 `;
 
+const TimeDescription = styled.p`
+  font-size: 2rem;
+  font-weight: 300;
+  text-align: center;
+
+  @media screen and (max-width: 768px) {
+    font-size: 1.6rem;
+  }
+`;
+
 const TimeText = styled.span`
   color: ${color.blue[500]};
   text-decoration: underline;
diff --git a/frontend/src/components/create/hooks/useCreateStudy.ts b/frontend/src/components/create/hooks/useCreateStudy.ts
new file mode 100644
index 00000000..1c0ffb25
--- /dev/null
+++ b/frontend/src/components/create/hooks/useCreateStudy.ts
@@ -0,0 +1,25 @@
+import useMutation from '@Hooks/api/useMutation';
+
+import { requestPostCreateStudy } from '@Apis/index';
+
+import type { ResponseCreateStudy } from '@Types/api';
+import type { StudyTimePerCycleOptions, TotalCycleOptions } from '@Types/study';
+
+type CreateStudyResult = {
+  studyId: string;
+  data: ResponseCreateStudy;
+};
+
+const useCreateStudy = (
+  studyName: string,
+  totalCycle: TotalCycleOptions | null,
+  timePerCycle: StudyTimePerCycleOptions | null,
+) => {
+  const { mutate: createStudy, isLoading } = useMutation<CreateStudyResult>(() =>
+    requestPostCreateStudy(studyName, totalCycle, timePerCycle),
+  );
+
+  return { createStudy, isLoading };
+};
+
+export default useCreateStudy;
diff --git a/frontend/src/hooks/create/useCreateStudyForm.ts b/frontend/src/components/create/hooks/useCreateStudyForm.ts
similarity index 97%
rename from frontend/src/hooks/create/useCreateStudyForm.ts
rename to frontend/src/components/create/hooks/useCreateStudyForm.ts
index 0f9032ff..639575fa 100644
--- a/frontend/src/hooks/create/useCreateStudyForm.ts
+++ b/frontend/src/components/create/hooks/useCreateStudyForm.ts
@@ -26,7 +26,7 @@ const useCreateStudyForm = () => {
   };
 
   return {
-    studyName: studyNameInput.state,
+    studyName: studyNameInput.state ?? '',
     changeStudyName: studyNameInput.onChangeInput,
     isStudyNameError: studyNameInput.isInputError,
     timePerCycle: timePerCycleSelect.state,
diff --git a/frontend/src/components/landing/BugReportingLink/BugReportingLink.tsx b/frontend/src/components/landing/BugReportingLink/BugReportingLink.tsx
new file mode 100644
index 00000000..fa4acbf3
--- /dev/null
+++ b/frontend/src/components/landing/BugReportingLink/BugReportingLink.tsx
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { css, styled } from 'styled-components';
+
+import color from '@Styles/color';
+
+import ReportIcon from '@Assets/icons/ReportIon';
+
+const BUG_REPORTING_LINK =
+  'https://docs.google.com/forms/d/e/1FAIpQLSdwvz3y9xYc9PHCLw1LiaLB8TGfGao91cVs_NwERHSV9c5Mfg/viewform';
+
+const BugReportingLink = () => {
+  const [isHoverIcon, setIsHoverIcon] = useState(false);
+
+  return (
+    <Layout>
+      <GuideMessage $isHoverIcon={isHoverIcon}>불편사항 피드백하기</GuideMessage>
+      <Link
+        href={BUG_REPORTING_LINK}
+        target="_blank"
+        onMouseEnter={() => setIsHoverIcon(true)}
+        onMouseLeave={() => setIsHoverIcon(false)}
+      >
+        <ReportIcon color="rgba(34,34,34)" />
+      </Link>
+    </Layout>
+  );
+};
+
+export default BugReportingLink;
+
+const Layout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+type GuideMessageProps = {
+  $isHoverIcon: boolean;
+};
+
+const GuideMessage = styled.p<GuideMessageProps>`
+  font-size: 1.4rem;
+
+  color: ${color.neutral[600]};
+
+  ${({ $isHoverIcon }) => css`
+    opacity: ${$isHoverIcon ? '1' : '0'};
+  `}
+
+  transition: opacity 0.15s ease;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const Link = styled.a`
+  cursor: pointer;
+
+  background-color: ${color.neutral[100]};
+
+  padding: 12px;
+  border-radius: 14px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
diff --git a/frontend/src/components/landing/ChattingLink/ChattingLink.tsx b/frontend/src/components/landing/ChattingLink/ChattingLink.tsx
new file mode 100644
index 00000000..ae46278c
--- /dev/null
+++ b/frontend/src/components/landing/ChattingLink/ChattingLink.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { css, styled } from 'styled-components';
+
+import color from '@Styles/color';
+
+import ChatIcon from '@Assets/icons/ChatIcon';
+
+const OPEN_CHATTING_LINK = 'https://open.kakao.com/o/gDt2u0Hf';
+
+const ChattingLink = () => {
+  const [isHoverIcon, setIsHoverIcon] = useState(false);
+
+  return (
+    <Layout>
+      <GuideMessage $isHoverIcon={isHoverIcon}>다른 사람과 함께 학습하고 싶다면?</GuideMessage>
+      <Link
+        href={OPEN_CHATTING_LINK}
+        target="_blank"
+        onMouseEnter={() => setIsHoverIcon(true)}
+        onMouseLeave={() => setIsHoverIcon(false)}
+      >
+        <ChatIcon color="rgba(34,34,34)" />
+      </Link>
+    </Layout>
+  );
+};
+
+export default ChattingLink;
+
+const Layout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+type GuideMessageProps = {
+  $isHoverIcon: boolean;
+};
+
+const GuideMessage = styled.p<GuideMessageProps>`
+  font-size: 1.4rem;
+
+  color: ${color.neutral[600]};
+
+  ${({ $isHoverIcon }) => css`
+    opacity: ${$isHoverIcon ? '1' : '0'};
+  `}
+
+  transition: opacity 0.15s ease;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const Link = styled.a`
+  cursor: pointer;
+
+  background-color: ${color.brand.kakao};
+
+  padding: 12px;
+  border-radius: 14px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
diff --git a/frontend/src/components/landing/GuideSection/GuideSection.tsx b/frontend/src/components/landing/GuideSection/GuideSection.tsx
new file mode 100644
index 00000000..c70bad06
--- /dev/null
+++ b/frontend/src/components/landing/GuideSection/GuideSection.tsx
@@ -0,0 +1,70 @@
+import { css, styled } from 'styled-components';
+
+import Typography from '@Components/common/Typography/Typography';
+
+import color from '@Styles/color';
+
+import StudyEffectGuide from '../StudyEffectGuide/StudyEffectGuide';
+import StudyStepGuide from '../StudyStepGuide/StudyStepGuide';
+
+const GuideSection = () => {
+  return (
+    <Layout>
+      <Introduce>
+        <Typography variant="h2">하루스터디 학습 사이클</Typography>
+        <Typography
+          variant="p1"
+          fontWeight="500"
+          $style={css`
+            word-break: keep-all;
+          `}
+        >
+          한 사이클마다 <span>목표 설정 단계</span>, <span>학습 단계</span>, <span>회고 단계</span>로 구성되어 있으며,
+          <br />세 가지 단계를 짧은 주기로 여러번 반복하여 학습합니다.
+        </Typography>
+      </Introduce>
+      <StudyStepGuide />
+      <StudyEffectGuide />
+    </Layout>
+  );
+};
+
+export default GuideSection;
+
+const Layout = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 180px;
+
+  padding: 135px 0;
+`;
+
+const Introduce = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  text-align: center;
+
+  span:nth-child(1) {
+    color: ${color.blue[500]};
+  }
+
+  span:nth-child(2) {
+    color: ${color.red[500]};
+  }
+
+  span:nth-child(3) {
+    color: ${color.teal[500]};
+  }
+
+  @media screen and (max-width: 768px) {
+    h2 {
+      font-size: 28px;
+    }
+
+    p {
+      font-size: 20px;
+    }
+  }
+`;
diff --git a/frontend/src/components/landing/Hero/Hero.tsx b/frontend/src/components/landing/Hero/Hero.tsx
deleted file mode 100644
index 77967a0b..00000000
--- a/frontend/src/components/landing/Hero/Hero.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { styled } from 'styled-components';
-
-import Typography from '@Components/common/Typography/Typography';
-
-import color from '@Styles/color';
-
-import HeroImage from '@Assets/image/heroImage.png';
-
-const Hero = () => {
-  return (
-    <HeroContainer>
-      <SloganContainer>
-        <Typography variant="h3">
-          <Emphasis>스터디</Emphasis>에
-          <br />
-          필요한
-          <br />
-          시간
-          <br />
-          단, <Emphasis>하루</Emphasis>
-        </Typography>
-      </SloganContainer>
-      <ImageBox>
-        <img src={HeroImage} alt="" />
-        <Typography variant="p2">작가 jcomp 출처 Freepik</Typography>
-      </ImageBox>
-    </HeroContainer>
-  );
-};
-
-export default Hero;
-
-const HeroContainer = styled.div`
-  position: relative;
-
-  background-color: ${color.blue[500]};
-`;
-
-const SloganContainer = styled.div`
-  position: absolute;
-
-  top: 12%;
-  left: 15%;
-
-  h3 {
-    font-size: 64px;
-    font-weight: 600;
-    color: ${color.white};
-    line-height: 110%;
-  }
-`;
-
-const ImageBox = styled.div`
-  position: absolute;
-
-  left: 50%;
-  bottom: 10px;
-
-  transform: translate(-50%, 0);
-
-  width: 75%;
-
-  p {
-    float: right;
-    opacity: 0.2;
-  }
-`;
-
-const Emphasis = styled.span`
-  color: ${color.yellow};
-`;
diff --git a/frontend/src/components/landing/LandingButton/LandingButton.tsx b/frontend/src/components/landing/LandingButton/LandingButton.tsx
new file mode 100644
index 00000000..2d4e9564
--- /dev/null
+++ b/frontend/src/components/landing/LandingButton/LandingButton.tsx
@@ -0,0 +1,65 @@
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import Button from '@Components/common/Button/Button';
+
+import { ROUTES_PATH } from '@Constants/routes';
+
+import { useMemberInfo } from '@Contexts/MemberInfoProvider';
+import { useModal } from '@Contexts/ModalProvider';
+
+import LoginModalContents from '../LoginModalContents/LoginModalContents';
+
+const LandingButton = () => {
+  const { openModal } = useModal();
+  const memberInfo = useMemberInfo();
+  const isLogin = !!memberInfo;
+
+  if (isLogin) {
+    return (
+      <ButtonContainer $isLogin={isLogin}>
+        <Link to={ROUTES_PATH.create}>
+          <Button variant="primary" $block={false} size="small">
+            스터디 개설하기
+          </Button>
+        </Link>
+        <Link to={ROUTES_PATH.participation}>
+          <Button variant="outlined" $block={false} size="small">
+            스터디 참여하기
+          </Button>
+        </Link>
+      </ButtonContainer>
+    );
+  }
+
+  return (
+    <ButtonContainer $isLogin={isLogin}>
+      <Button
+        variant="primary"
+        onClick={() => {
+          openModal(<LoginModalContents />);
+        }}
+        $block={false}
+        size="small"
+      >
+        하루스터디 시작하기
+      </Button>
+    </ButtonContainer>
+  );
+};
+
+export default LandingButton;
+
+type ButtonContainerProps = {
+  $isLogin: boolean;
+};
+
+const ButtonContainer = styled.div<ButtonContainerProps>`
+  display: flex;
+  gap: 10px;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
diff --git a/frontend/src/components/landing/LandingContents/LandingContents.tsx b/frontend/src/components/landing/LandingContents/LandingContents.tsx
deleted file mode 100644
index 54ffc00f..00000000
--- a/frontend/src/components/landing/LandingContents/LandingContents.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Link } from 'react-router-dom';
-import { css, styled } from 'styled-components';
-
-import Button from '@Components/common/Button/Button';
-import Typography from '@Components/common/Typography/Typography';
-
-import color from '@Styles/color';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import MemberProfile from '../MemberProfile/MemberProfile';
-
-const LandingContents = () => {
-  return (
-    <ContentsContainer>
-      <MemberProfile />
-      <TopicSummaryContainer>
-        <Typography
-          variant="h1"
-          $style={css`
-            font-weight: 200;
-          `}
-        >
-          <Emphasis>하루</Emphasis>스터디
-        </Typography>
-        <Typography variant="p2">
-          하루스터디만의 <Emphasis>학습 사이클</Emphasis>을 통해
-          <br />
-          여러분의 스터디 효율성을
-          <br />
-          끌어올립니다.
-        </Typography>
-      </TopicSummaryContainer>
-      <ButtonContainer>
-        <Link to={ROUTES_PATH.create}>
-          <Button variant="primary">스터디 개설하기</Button>
-        </Link>
-        <Link to={ROUTES_PATH.participation}>
-          <Button variant="outlined">스터디 참여하기</Button>
-        </Link>
-      </ButtonContainer>
-    </ContentsContainer>
-  );
-};
-
-export default LandingContents;
-
-const ContentsContainer = styled.div`
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  row-gap: 100px;
-
-  padding: 40px 60px;
-
-  ${({ theme }) => css`
-    background-color: ${theme.background};
-  `}
-`;
-
-const TopicSummaryContainer = styled.div`
-  align-self: flex-end;
-  justify-self: flex-end;
-
-  text-align: end;
-
-  p {
-    font-size: 2rem;
-    font-weight: 200;
-    line-height: 150%;
-  }
-
-  svg {
-    font-size: 4rem;
-  }
-`;
-
-const ButtonContainer = styled.div`
-  display: grid;
-  row-gap: 20px;
-`;
-
-const Emphasis = styled.span`
-  color: ${color.blue[500]};
-`;
diff --git a/frontend/src/components/landing/LandingMainSection/LandingMainSection.tsx b/frontend/src/components/landing/LandingMainSection/LandingMainSection.tsx
new file mode 100644
index 00000000..0c315835
--- /dev/null
+++ b/frontend/src/components/landing/LandingMainSection/LandingMainSection.tsx
@@ -0,0 +1,92 @@
+import { styled } from 'styled-components';
+
+import Image from '@Components/common/Image/Image';
+import Typography from '@Components/common/Typography/Typography';
+
+import color from '@Styles/color';
+
+import ArrowIcon from '@Assets/icons/ArrowIcon';
+import heroImageJpg from '@Assets/images/heroImage.jpg';
+import heroImageWebp from '@Assets/images/heroImage.webp';
+
+import LandingButton from '../LandingButton/LandingButton';
+
+const LandingMainSection = () => {
+  return (
+    <main>
+      <LandingHeader>
+        <LandingContents>
+          <Typography variant="h2">
+            <Emphasis>하루</Emphasis>스터디만의
+            <br />
+            학습 사이클을 통해
+            <br />
+            효율적으로 학습해보세요.
+          </Typography>
+          <LandingButton />
+        </LandingContents>
+        <HeroImage>
+          <Image originUrl={heroImageJpg} webpUrl={heroImageWebp} alt="목표, 학습, 회고 스탭" />
+        </HeroImage>
+      </LandingHeader>
+      <LoadMoreContents>
+        <Typography variant="p2">하루스터디만의 학습 사이클이란?</Typography>
+        <ArrowIcon direction="down" />
+      </LoadMoreContents>
+    </main>
+  );
+};
+
+export default LandingMainSection;
+
+const LandingHeader = styled.div`
+  height: calc(100vh - 240px);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const LandingContents = styled.div`
+  width: 40%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  align-self: center;
+
+  h2 {
+    font-weight: 500;
+  }
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+
+    justify-self: center;
+    text-align: center;
+
+    h2 {
+      font-size: 28px;
+    }
+  }
+`;
+
+const HeroImage = styled.div`
+  width: 50%;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+    width: 0;
+  }
+`;
+
+const LoadMoreContents = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+`;
+
+const Emphasis = styled.span`
+  color: ${color.blue[500]};
+`;
diff --git a/frontend/src/components/landing/LoginModalContents/LoginModalContents.tsx b/frontend/src/components/landing/LoginModalContents/LoginModalContents.tsx
new file mode 100644
index 00000000..38a875af
--- /dev/null
+++ b/frontend/src/components/landing/LoginModalContents/LoginModalContents.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import { Link } from 'react-router-dom';
+import { css, styled } from 'styled-components';
+
+import Button from '@Components/common/Button/Button';
+import Typography from '@Components/common/Typography/Typography';
+
+import color from '@Styles/color';
+
+import { ROUTES_PATH } from '@Constants/routes';
+
+import GoogleIcon from '@Assets/icons/GoogleIcon';
+
+const REDIRECT_URI_PARAMETER = '/auth?provider=google';
+
+const LoginModalContents = () => {
+  const baseUri = `${window.location.protocol}//${window.location.host}`;
+
+  const googleOAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email&client_id=${process.env.REACT_APP_GOOGLE_CLIENT_ID}&response_type=code&redirect_uri=${baseUri}${REDIRECT_URI_PARAMETER}`;
+
+  return (
+    <Layout>
+      <Typography
+        variant="h1"
+        $style={css`
+          display: inline;
+
+          font-size: 2.4rem;
+          font-weight: 200;
+        `}
+      >
+        <Emphasis>하루</Emphasis>스터디 로그인
+      </Typography>
+      <ButtonContainer>
+        <a href={googleOAuthUrl}>
+          <OAutLoginButton variant="outlined">
+            <GoogleIcon />
+            <span>구글로 로그인</span>
+          </OAutLoginButton>
+        </a>
+        <DividedContainer>
+          <DividedLine></DividedLine>
+          <span>또는</span>
+          <DividedLine></DividedLine>
+        </DividedContainer>
+        <NonMemberLoginButton>
+          <Link to={`${ROUTES_PATH.auth}?provider=guest`}>비회원으로 로그인</Link>
+        </NonMemberLoginButton>
+      </ButtonContainer>
+    </Layout>
+  );
+};
+
+export default LoginModalContents;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  justify-content: center;
+  align-items: center;
+
+  padding: 40px 0px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  width: 360px;
+
+  @media screen and (max-width: 768px) {
+    width: 95%;
+  }
+`;
+
+const OAutLoginButton = styled(Button)`
+  position: relative;
+
+  border-radius: 8px;
+  border: 1px solid ${color.neutral[300]};
+
+  color: ${color.black};
+  font-size: 1.8rem;
+
+  svg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 32px;
+
+    display: flex;
+    margin: auto 0;
+  }
+`;
+
+const Emphasis = styled.span`
+  color: ${color.blue[500]};
+`;
+
+const DividedContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  color: ${color.neutral[600]};
+`;
+
+const DividedLine = styled.div`
+  width: 40%;
+  height: 1px;
+
+  background-color: ${color.neutral[300]};
+`;
+
+const NonMemberLoginButton = styled.button`
+  margin: 0 auto;
+
+  a {
+    text-decoration: underline;
+    color: ${color.neutral[500]};
+  }
+`;
diff --git a/frontend/src/components/landing/MemberProfile/MemberProfile.tsx b/frontend/src/components/landing/MemberProfile/MemberProfile.tsx
index a9aa85b4..d4936e33 100644
--- a/frontend/src/components/landing/MemberProfile/MemberProfile.tsx
+++ b/frontend/src/components/landing/MemberProfile/MemberProfile.tsx
@@ -1,11 +1,9 @@
 import { useNavigate } from 'react-router-dom';
-import { css, styled } from 'styled-components';
+import { css } from 'styled-components';
 
 import type { MenuItem } from '@Components/common/Menu/Menu';
 import Menu from '@Components/common/Menu/Menu';
 
-import { DefaultSkeletonStyle } from '@Styles/common';
-
 import { ROUTES_PATH } from '@Constants/routes';
 
 import { useMemberInfo, useMemberInfoAction } from '@Contexts/MemberInfoProvider';
@@ -32,19 +30,14 @@ const DEFAULT_MENU_ITEMS: MenuItem[] = [
 const MemberProfile = () => {
   const navigate = useNavigate();
 
-  const { data } = useMemberInfo();
+  const memberInfo = useMemberInfo();
   const { clearMemberInfo } = useMemberInfoAction();
 
-  const isLoading = !data;
-
-  if (isLoading)
-    return (
-      <LoadingImageWrapper>
-        <LoadingImage />
-      </LoadingImageWrapper>
-    );
+  if (!memberInfo) {
+    return <></>;
+  }
 
-  const { name, imageUrl, loginType } = data;
+  const { name, imageUrl, loginType } = memberInfo;
 
   const guestMenu = (
     <Menu.Item onClick={clearMemberInfo} bottomSeparator>
@@ -84,17 +77,3 @@ const MemberProfile = () => {
 };
 
 export default MemberProfile;
-
-const LoadingImageWrapper = styled.div`
-  padding: 4px;
-  margin: 0 0 0 auto;
-`;
-
-const LoadingImage = styled.div`
-  width: 36px;
-  height: 36px;
-
-  border-radius: 50%;
-
-  ${DefaultSkeletonStyle}
-`;
diff --git a/frontend/src/components/landing/MenuTrigger/MenuTrigger.tsx b/frontend/src/components/landing/MenuTrigger/MenuTrigger.tsx
index ae281e82..64bdff72 100644
--- a/frontend/src/components/landing/MenuTrigger/MenuTrigger.tsx
+++ b/frontend/src/components/landing/MenuTrigger/MenuTrigger.tsx
@@ -54,7 +54,7 @@ const Layout = styled.div`
 
   p {
     font-size: 2rem;
-    font-weight: 400;
+    font-weight: 500;
   }
 
   svg {
diff --git a/frontend/src/components/landing/SideLink/SideLik.tsx b/frontend/src/components/landing/SideLink/SideLik.tsx
new file mode 100644
index 00000000..5188c316
--- /dev/null
+++ b/frontend/src/components/landing/SideLink/SideLik.tsx
@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+
+import BugReportingLink from '../BugReportingLink/BugReportingLink';
+import ChattingLink from '../ChattingLink/ChattingLink';
+
+const SideLink = () => {
+  return (
+    <Layout>
+      <ChattingLink />
+      <BugReportingLink />
+    </Layout>
+  );
+};
+
+export default SideLink;
+
+const Layout = styled.div`
+  position: fixed;
+  bottom: 36px;
+  right: 36px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+
+  @media screen and (max-width: 768px) {
+    bottom: 18px;
+    right: 18px;
+  }
+`;
diff --git a/frontend/src/components/landing/StartSection/StartSection.tsx b/frontend/src/components/landing/StartSection/StartSection.tsx
new file mode 100644
index 00000000..50070bff
--- /dev/null
+++ b/frontend/src/components/landing/StartSection/StartSection.tsx
@@ -0,0 +1,37 @@
+import { styled } from 'styled-components';
+
+import Typography from '@Components/common/Typography/Typography';
+
+import LandingButton from '../LandingButton/LandingButton';
+
+const StartSection = () => {
+  return (
+    <Layout>
+      <Typography variant="h4">하루스터디를 시작해볼까요?</Typography>
+      <LandingButton />
+    </Layout>
+  );
+};
+
+export default StartSection;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+
+  padding: 50px 0px 160px;
+
+  @media screen and (max-width: 768px) {
+    padding: 60px 0px 120px;
+  }
+
+  h4 {
+    font-weight: 500;
+
+    @media screen and (max-width: 768px) {
+      font-size: 2.4rem;
+    }
+  }
+`;
diff --git a/frontend/src/components/landing/StudyEffectGuide/StudyEffectGuide.tsx b/frontend/src/components/landing/StudyEffectGuide/StudyEffectGuide.tsx
new file mode 100644
index 00000000..5bede910
--- /dev/null
+++ b/frontend/src/components/landing/StudyEffectGuide/StudyEffectGuide.tsx
@@ -0,0 +1,106 @@
+import { styled } from 'styled-components';
+
+import Typography from '@Components/common/Typography/Typography';
+
+import color from '@Styles/color';
+
+import GoalIcon from '@Assets/icons/GoalIcon';
+import PencilIcon from '@Assets/icons/PencilIcon';
+import TimeLineIcon from '@Assets/icons/TimeLineIcon';
+
+const STUDY_EFFECT = [
+  {
+    icon: <GoalIcon color={color.blue[500]} />,
+    title: '목표 설정',
+    description: `한 사이클의 학습을 시작하기 전, 학습목표와 완료 조건을 설정해 학습 방향성과 동기 부여를 제공합니다.`,
+  },
+  {
+    icon: <PencilIcon color={color.teal[500]} />,
+    title: '회고',
+    description: `한 사이클의 학습이 끝난 후, 학습에 대해 스스로 피드백합니다. 피드백을 통해 전보다 더 개선된 학습이 되도록 합니다.`,
+  },
+  {
+    icon: <TimeLineIcon color={color.neutral[900]} />,
+    title: '단계별 타이머',
+    description: `단계별로 시간을 제한하여 학습을 하는 동안 집중력을 잃지 않도록 도와줍니다.`,
+  },
+];
+
+const StudyEffectGuide = () => {
+  return (
+    <Layout>
+      <Typography variant="h2">사이클 요소 별 학습 효과</Typography>
+      <StudyEffectList>
+        {STUDY_EFFECT.map(({ icon, title, description }) => (
+          <StudyEffectItem key={title}>
+            <StudyEffectTitle>
+              {icon}
+              {title}
+            </StudyEffectTitle>
+            <StudyEffectDescription>{description}</StudyEffectDescription>
+          </StudyEffectItem>
+        ))}
+      </StudyEffectList>
+    </Layout>
+  );
+};
+
+export default StudyEffectGuide;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+
+  h2 {
+    text-align: center;
+
+    @media screen and (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+`;
+
+const StudyEffectList = styled.ul`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 50px;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const StudyEffectItem = styled.li`
+  width: 400px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  padding: 20px;
+
+  background-color: ${color.neutral[100]};
+  border-radius: 14px;
+
+  white-space: pre-line;
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+  }
+`;
+
+const StudyEffectTitle = styled.h6`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  font-size: 22px;
+  font-weight: 500;
+`;
+
+const StudyEffectDescription = styled.p`
+  font-size: 20px;
+  word-break: keep-all;
+`;
diff --git a/frontend/src/components/landing/StudyStepGuide/StudyStepGuide.tsx b/frontend/src/components/landing/StudyStepGuide/StudyStepGuide.tsx
new file mode 100644
index 00000000..2e019a1c
--- /dev/null
+++ b/frontend/src/components/landing/StudyStepGuide/StudyStepGuide.tsx
@@ -0,0 +1,121 @@
+import { css, styled } from 'styled-components';
+
+import Image from '@Components/common/Image/Image';
+import Typography from '@Components/common/Typography/Typography';
+
+import color from '@Styles/color';
+
+import planningStepJpg from '@Assets/images/planningStep.jpg';
+import planningStepWebp from '@Assets/images/planningStep.webp';
+import retrospectStepJpg from '@Assets/images/retrospectStep.jpg';
+import retrospectStepWebp from '@Assets/images/retrospectStep.webp';
+import studyingStepJpg from '@Assets/images/studyingStep.jpg';
+import studyingStepWebp from '@Assets/images/studyingStep.webp';
+
+const GUIDE = [
+  {
+    originUrl: planningStepJpg,
+    webpUrl: planningStepWebp,
+    title: '목표 설정 단계',
+    description: `학습을 시작하기 전, 학습 목표를 설정하는 단계입니다.
+    무엇을 학습할 것인지, 학습에 대한 완료 조건은 무엇인지 생각해 봅니다.
+    (사이클 당 시간: 10분 이내)`,
+  },
+  {
+    originUrl: studyingStepJpg,
+    webpUrl: studyingStepWebp,
+    title: '학습 단계',
+    description: `학습 목표를 달성하기 위해 열심히 학습하는 단계입니다.
+    (사이클 당 시간: 20~60분)`,
+  },
+  {
+    originUrl: retrospectStepJpg,
+    webpUrl: retrospectStepWebp,
+    title: '회고 단계',
+    description: `진행한 학습을 되돌아보는 단계입니다.
+    회고를 완료했다면, 다시 목표 설정 단계로 돌아갑니다.
+    (사이클 당 시간: 10분 이내)`,
+  },
+] as const;
+
+const StudyStepGuide = () => {
+  return (
+    <Layout>
+      {GUIDE.map(({ originUrl, webpUrl, title, description }, index) => (
+        <StepGuide key={title} isEvenIndex={index % 2 === 0}>
+          <StepGuideImage>
+            <Image originUrl={originUrl} webpUrl={webpUrl} alt={title} />
+          </StepGuideImage>
+          <StepGuideDescription>
+            <Typography variant="h2">{title}</Typography>
+            <Typography
+              variant="p1"
+              color={color.neutral[500]}
+              fontWeight="500"
+              $style={css`
+                word-break: keep-all;
+              `}
+            >
+              {description}
+            </Typography>
+          </StepGuideDescription>
+        </StepGuide>
+      ))}
+    </Layout>
+  );
+};
+
+export default StudyStepGuide;
+
+const Layout = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 135px;
+`;
+
+const StepGuide = styled.div<{ isEvenIndex: boolean }>`
+  display: flex;
+  flex-direction: ${({ isEvenIndex }) => (isEvenIndex ? 'row' : 'row-reverse')};
+  justify-content: center;
+  align-items: center;
+  gap: 80px;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: 40px;
+  }
+`;
+
+const StepGuideImage = styled.div`
+  width: 55%;
+  border-radius: 20px;
+
+  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+  }
+`;
+
+const StepGuideDescription = styled.div`
+  width: 40%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  margin-right: auto;
+  white-space: pre-line;
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+
+    h2 {
+      font-size: 32px;
+    }
+
+    p {
+      font-size: 20px;
+    }
+  }
+`;
diff --git a/frontend/src/components/participation/ParticipationCodeInput/ParticipationCodeInput.tsx b/frontend/src/components/participation/ParticipationCodeInput/ParticipationCodeInput.tsx
index cdda2ebc..bd493027 100644
--- a/frontend/src/components/participation/ParticipationCodeInput/ParticipationCodeInput.tsx
+++ b/frontend/src/components/participation/ParticipationCodeInput/ParticipationCodeInput.tsx
@@ -3,10 +3,9 @@ import { css, styled } from 'styled-components';
 
 import Button from '@Components/common/Button/Button';
 import Input from '@Components/common/Input/Input';
-import Typography from '@Components/common/Typography/Typography';
+import useParticipationCode from '@Components/participation/hooks/useParticipationCode';
 
 import useInput from '@Hooks/common/useInput';
-import useParticipationCode from '@Hooks/participation/useParticipationCode';
 
 import { ROUTES_PATH } from '@Constants/routes';
 
@@ -15,33 +14,21 @@ const ParticipationCodeInput = () => {
 
   const participantCodeInput = useInput(false);
 
-  const errorHandler = (error: Error) => {
-    alert(error.message);
-  };
-
-  const { authenticateParticipationCode, isLoading } = useParticipationCode(errorHandler);
+  const { authenticateParticipationCode, isLoading } = useParticipationCode(participantCodeInput.state ?? '');
 
   const handleOnClickParticipateButton = async () => {
-    if (!participantCodeInput.state) {
-      alert('참여코드를 입력해주세요.');
-      return;
-    }
+    const result = await authenticateParticipationCode();
 
-    const data = await authenticateParticipationCode(participantCodeInput.state);
-
-    if (data) {
-      navigate(`${ROUTES_PATH.preparation}/${data.studies[0].studyId}`, {
-        state: { participantCode: participantCodeInput.state, studyName: data.studies[0].name, isHost: false },
+    if (result) {
+      navigate(`${ROUTES_PATH.preparation}/${result.studies[0].studyId}`, {
+        state: { participantCode: participantCodeInput.state, studyName: result.studies[0].name, isHost: false },
       });
     }
   };
 
   return (
     <Layout>
-      <Input
-        label={<Typography variant="p1">참여코드</Typography>}
-        bottomText="스터디장에게 받은 참여코드를 입력하세요."
-      >
+      <Input label="참여코드" bottomText="스터디장에게 받은 참여코드를 입력하세요.">
         <Input.TextField onChange={participantCodeInput.onChangeInput} />
       </Input>
 
diff --git a/frontend/src/components/participation/MemberRegister/MemberRegister.tsx b/frontend/src/components/participation/PrticipationContents/MemberRegister/MemberRegister.tsx
similarity index 77%
rename from frontend/src/components/participation/MemberRegister/MemberRegister.tsx
rename to frontend/src/components/participation/PrticipationContents/MemberRegister/MemberRegister.tsx
index ae11d5cd..0715d679 100644
--- a/frontend/src/components/participation/MemberRegister/MemberRegister.tsx
+++ b/frontend/src/components/participation/PrticipationContents/MemberRegister/MemberRegister.tsx
@@ -4,9 +4,9 @@ import { styled } from 'styled-components';
 import Button from '@Components/common/Button/Button';
 import Input from '@Components/common/Input/Input';
 import Typography from '@Components/common/Typography/Typography';
+import useRegisterProgress from '@Components/participation/hooks/useRegisterProgress';
 
 import useInput from '@Hooks/common/useInput';
-import useRegisterMember from '@Hooks/participation/useRegisterProgress';
 
 import { ERROR_MESSAGE } from '@Constants/errorMessage';
 import { ROUTES_PATH } from '@Constants/routes';
@@ -19,24 +19,15 @@ type Props = {
 const MemberRegister = ({ studyId, studyName }: Props) => {
   const navigate = useNavigate();
 
-  const errorHandler = (error: Error) => {
-    alert(error.message);
-  };
-
-  const { isLoading, registerProgress } = useRegisterMember(errorHandler);
-
   const nickNameInput = useInput(true);
 
-  const handleOnClickStartButton = async () => {
-    if (!nickNameInput.state || !studyId) {
-      alert('잘못된 접근입니다.');
-      return;
-    }
-
-    await registerProgress(nickNameInput.state, studyId);
+  const { isLoading, registerProgress } = useRegisterProgress(nickNameInput.state ?? '', studyId);
 
-    navigate(`${ROUTES_PATH.board}/${studyId}`);
+  const handleOnClickStartButton = async () => {
+    const result = await registerProgress();
+    if (result?.ok) return navigate(`${ROUTES_PATH.progress}/${studyId}`);
   };
+
   return (
     <>
       <Input
@@ -67,4 +58,14 @@ export default MemberRegister;
 const LabelContainer = styled.div`
   display: flex;
   gap: 5px;
+
+  @media screen and (max-width: 768px) {
+    h5 {
+      font-size: 1.8rem;
+    }
+
+    p {
+      font-size: 1.8rem;
+    }
+  }
 `;
diff --git a/frontend/src/components/participation/MemberRestart/MemberRestart.tsx b/frontend/src/components/participation/PrticipationContents/MemberRestart/MemberRestart.tsx
similarity index 66%
rename from frontend/src/components/participation/MemberRestart/MemberRestart.tsx
rename to frontend/src/components/participation/PrticipationContents/MemberRestart/MemberRestart.tsx
index 31b8f82f..9da26ecb 100644
--- a/frontend/src/components/participation/MemberRestart/MemberRestart.tsx
+++ b/frontend/src/components/participation/PrticipationContents/MemberRestart/MemberRestart.tsx
@@ -5,24 +5,37 @@ import Button from '@Components/common/Button/Button';
 import Input from '@Components/common/Input/Input';
 import Typography from '@Components/common/Typography/Typography';
 
+import useMutation from '@Hooks/api/useMutation';
+
 import { ROUTES_PATH } from '@Constants/routes';
 
+import { requestDeleteProgress } from '@Apis/index';
+
 type Props = {
   studyName: string;
-  nickname: string | null;
   studyId: string;
-  restart: () => void;
+  progressId: number;
+  nickname: string;
+  showMemberRegister: () => void;
 };
 
-const MemberRestart = ({ studyName, nickname, studyId, restart }: Props) => {
+const MemberRestart = ({ studyName, nickname, studyId, progressId, showMemberRegister }: Props) => {
   const navigate = useNavigate();
 
+  const { mutate } = useMutation(() => requestDeleteProgress(studyId, progressId));
+
   const handleOnClickContinueStart = async () => {
-    navigate(`${ROUTES_PATH.board}/${studyId}`);
+    navigate(`${ROUTES_PATH.progress}/${studyId}`);
+  };
+
+  const restart = async () => {
+    const result = await mutate();
+
+    if (result?.ok) return showMemberRegister();
   };
 
   return (
-    <>
+    <Layout>
       <div>
         <Typography
           variant="p1"
@@ -33,7 +46,7 @@ const MemberRestart = ({ studyName, nickname, studyId, restart }: Props) => {
           <StudyNameText>{studyName}</StudyNameText> 스터디에서 이미 학습을 진행한 기록이 있습니다.
         </Typography>
         <Input label={<Typography variant="p1">닉네임</Typography>}>
-          <Input.TextField value={nickname ?? ''} disabled={!!nickname} />
+          <Input.TextField value={nickname} disabled={!!nickname} />
         </Input>
       </div>
       <div>
@@ -69,15 +82,36 @@ const MemberRestart = ({ studyName, nickname, studyId, restart }: Props) => {
           </Button>
         </ButtonContainer>
       </div>
-    </>
+    </Layout>
   );
 };
 
 export default MemberRestart;
 
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 70px;
+
+  @media screen and (max-width: 768px) {
+    p {
+      font-size: 2rem;
+    }
+  }
+`;
+
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: space-between;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: 10px;
+
+    button {
+      width: 100%;
+    }
+  }
 `;
 
 const StudyNameText = styled.span`
diff --git a/frontend/src/components/participation/PrticipationContents/PartcipationContents.tsx b/frontend/src/components/participation/PrticipationContents/PartcipationContents.tsx
new file mode 100644
index 00000000..75e5a28b
--- /dev/null
+++ b/frontend/src/components/participation/PrticipationContents/PartcipationContents.tsx
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { styled } from 'styled-components';
+
+import AlertErrorBoundary from '@Components/common/AlertErrorBoundary/AlertErrorBoundary';
+import useCheckProgresses from '@Components/participation/hooks/useCheckProgresses';
+
+import MemberRegister from './MemberRegister/MemberRegister';
+import MemberRestart from './MemberRestart/MemberRestart';
+import ParticipationCodeCopier from './ParticipationCodeCopier/ParticipationCodeCopier';
+
+type Props = {
+  participantCode: string;
+  studyName: string;
+  isHost: boolean;
+};
+
+const ParticipationContents = ({ participantCode, studyName, isHost }: Props) => {
+  const { result, studyId } = useCheckProgresses();
+
+  const [isRegisterShow, setRegisterShow] = useState(false);
+
+  const handleShowMemberRegister = () => {
+    setRegisterShow(true);
+  };
+
+  return (
+    <Layout>
+      {isHost && <ParticipationCodeCopier participantCode={participantCode} />}
+      {result && (
+        <AlertErrorBoundary>
+          {result.progresses && !isRegisterShow ? (
+            <MemberRestart
+              studyName={studyName}
+              nickname={result.progresses[0].nickname}
+              studyId={studyId}
+              progressId={result.progresses[0].progressId}
+              showMemberRegister={handleShowMemberRegister}
+            />
+          ) : (
+            <MemberRegister studyId={studyId} studyName={studyName} />
+          )}
+        </AlertErrorBoundary>
+      )}
+    </Layout>
+  );
+};
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 70px;
+`;
+
+export default ParticipationContents;
diff --git a/frontend/src/components/participation/ParticipationCodeCopier/ParticipationCodeCopier.tsx b/frontend/src/components/participation/PrticipationContents/ParticipationCodeCopier/ParticipationCodeCopier.tsx
similarity index 76%
rename from frontend/src/components/participation/ParticipationCodeCopier/ParticipationCodeCopier.tsx
rename to frontend/src/components/participation/PrticipationContents/ParticipationCodeCopier/ParticipationCodeCopier.tsx
index 6b60169c..462a0824 100644
--- a/frontend/src/components/participation/ParticipationCodeCopier/ParticipationCodeCopier.tsx
+++ b/frontend/src/components/participation/PrticipationContents/ParticipationCodeCopier/ParticipationCodeCopier.tsx
@@ -1,7 +1,6 @@
 import { css, styled } from 'styled-components';
 
 import Input from '@Components/common/Input/Input';
-import Typography from '@Components/common/Typography/Typography';
 
 import useClipBoard from '@Hooks/common/useClipBoard';
 
@@ -30,10 +29,7 @@ const ParticipationCodeCopier = ({ participantCode }: Props) => {
 
   return (
     <div>
-      <Input
-        label={<Typography variant="p1">참여코드</Typography>}
-        bottomText="스터디 참여코드를 스터디원들에게 공유하세요."
-      >
+      <Input label="참여코드" bottomText="스터디 참여코드를 스터디원들에게 공유하세요.">
         <TextFieldContainer>
           <Input.TextField
             value={participantCode}
@@ -50,18 +46,7 @@ const ParticipationCodeCopier = ({ participantCode }: Props) => {
         </TextFieldContainer>
       </Input>
       <button onClick={handleOnClickHelperMessage}>
-        <Typography
-          variant="p3"
-          $style={css`
-            position: absolute;
-            text-decoration: underline;
-            margin-top: 20px;
-            color: ${color.neutral[400]};
-            cursor: pointer;
-          `}
-        >
-          참여코드를 왜 공유해야하나요?
-        </Typography>
+        <HelperText>참여코드를 왜 공유해야하나요?</HelperText>
       </button>
     </div>
   );
@@ -88,3 +73,19 @@ const ClipBoardButton = styled.button`
   border-bottom-left-radius: 0px;
   margin-top: 10px;
 `;
+
+const HelperText = styled.p`
+  position: absolute;
+  margin-top: 20px;
+
+  font-size: 1.6rem;
+  font-weight: 300;
+  text-decoration: underline;
+  color: ${color.neutral[400]};
+
+  cursor: pointer;
+
+  @media screen and (max-width: 768px) {
+    font-size: 1.4rem;
+  }
+`;
diff --git a/frontend/src/components/participation/hooks/useCheckProgresses.ts b/frontend/src/components/participation/hooks/useCheckProgresses.ts
new file mode 100644
index 00000000..7ae45147
--- /dev/null
+++ b/frontend/src/components/participation/hooks/useCheckProgresses.ts
@@ -0,0 +1,25 @@
+import { useParams } from 'react-router-dom';
+
+import useFetch from '@Hooks/api/useFetch';
+
+import { useMemberInfo } from '@Contexts/MemberInfoProvider';
+
+import { requestGetCheckProgresses } from '@Apis/index';
+
+import type { ResponseCheckProgresses } from '@Types/api';
+
+const useCheckProgresses = () => {
+  const { studyId } = useParams();
+
+  const memberInfo = useMemberInfo();
+
+  const { result } = useFetch<ResponseCheckProgresses>(() =>
+    requestGetCheckProgresses(studyId ?? '', memberInfo?.memberId ?? ''),
+  );
+
+  if (!studyId) throw new Error('잘못된 접근입니다.');
+
+  return { studyId, result };
+};
+
+export default useCheckProgresses;
diff --git a/frontend/src/components/participation/hooks/useParticipationCode.ts b/frontend/src/components/participation/hooks/useParticipationCode.ts
new file mode 100644
index 00000000..3ffd2c16
--- /dev/null
+++ b/frontend/src/components/participation/hooks/useParticipationCode.ts
@@ -0,0 +1,11 @@
+import useMutation from '@Hooks/api/useMutation';
+
+import { requestGetAuthenticateParticipationCode } from '@Apis/index';
+
+const useParticipationCode = (participantCode: string) => {
+  const { mutate: authenticateParticipationCode, isLoading } = useMutation(() => requestGetAuthenticateParticipationCode(participantCode));
+
+  return { authenticateParticipationCode, isLoading };
+};
+
+export default useParticipationCode;
diff --git a/frontend/src/components/participation/hooks/useRegisterProgress.ts b/frontend/src/components/participation/hooks/useRegisterProgress.ts
new file mode 100644
index 00000000..af1ffc8d
--- /dev/null
+++ b/frontend/src/components/participation/hooks/useRegisterProgress.ts
@@ -0,0 +1,17 @@
+import useMutation from '@Hooks/api/useMutation';
+
+import { useMemberInfo } from '@Contexts/MemberInfoProvider';
+
+import { requestPostRegisterProgress } from '@Apis/index';
+
+const useRegisterProgress = (nickname: string, studyId: string) => {
+  const memberInfo = useMemberInfo();
+
+  const { isLoading, mutate: registerProgress } = useMutation(() =>
+    requestPostRegisterProgress(nickname, studyId, memberInfo!.memberId),
+  );
+
+  return { isLoading, registerProgress };
+};
+
+export default useRegisterProgress;
diff --git a/frontend/src/components/board/GuideModal/GuideModal.tsx b/frontend/src/components/progress/GuideModal/GuideModal.tsx
similarity index 100%
rename from frontend/src/components/board/GuideModal/GuideModal.tsx
rename to frontend/src/components/progress/GuideModal/GuideModal.tsx
diff --git a/frontend/src/components/board/PlanningForm/PlanningForm.tsx b/frontend/src/components/progress/PlanningForm/PlanningForm.tsx
similarity index 80%
rename from frontend/src/components/board/PlanningForm/PlanningForm.tsx
rename to frontend/src/components/progress/PlanningForm/PlanningForm.tsx
index 93adfcf5..1853cf59 100644
--- a/frontend/src/components/board/PlanningForm/PlanningForm.tsx
+++ b/frontend/src/components/progress/PlanningForm/PlanningForm.tsx
@@ -4,7 +4,6 @@ import Button from '@Components/common/Button/Button';
 import QuestionTextarea from '@Components/common/QuestionTextarea/QuestionTextarea';
 import Typography from '@Components/common/Typography/Typography';
 
-import usePlanningForm from '@Hooks/board/usePlanningForm';
 import useDisplay from '@Hooks/common/useDisplay';
 
 import { PLAN_QUESTIONS } from '@Constants/study';
@@ -14,32 +13,14 @@ import { useModal } from '@Contexts/ModalProvider';
 import ArrowIcon from '@Assets/icons/ArrowIcon';
 
 import GuideModal from '../GuideModal/GuideModal';
+import usePlanningForm from '../hooks/usePlanningForm';
 
-type Props = {
-  onClickSubmitButton: () => Promise<void>;
-  studyId: string;
-  progressId: string;
-};
-
-const PlanningForm = ({ onClickSubmitButton, studyId, progressId }: Props) => {
-  const { questionTextareaProps, isInvalidForm, isSubmitLoading, submitForm } = usePlanningForm(
-    studyId,
-    progressId,
-    onClickSubmitButton,
-  );
+const PlanningForm = () => {
+  const { questionTextareaProps, isInvalidForm, isSubmitLoading, submitForm } = usePlanningForm();
 
   const { isShow: isOpenOptionalQuestion, toggleShow: toggleOptionalQuestion } = useDisplay();
   const { openModal } = useModal();
 
-  const handleClickButton = async () => {
-    try {
-      await submitForm();
-    } catch (error) {
-      if (!(error instanceof Error)) return;
-      alert(error.message);
-    }
-  };
-
   const handleClickGuideButton = (question: 'toDo' | 'completionCondition') => () => {
     openModal(<GuideModal question={question} />);
   };
@@ -82,13 +63,7 @@ const PlanningForm = ({ onClickSubmitButton, studyId, progressId }: Props) => {
           </QuestionList>
         )}
       </QuestionLayout>
-      <Button
-        variant="primary"
-        type="submit"
-        onClick={handleClickButton}
-        isLoading={isSubmitLoading}
-        disabled={isInvalidForm}
-      >
+      <Button variant="primary" type="submit" onClick={submitForm} isLoading={isSubmitLoading} disabled={isInvalidForm}>
         학습 시작하기
       </Button>
     </Layout>
diff --git a/frontend/src/components/board/RetrospectForm/RetrospectForm.tsx b/frontend/src/components/progress/RetrospectForm/RetrospectForm.tsx
similarity index 78%
rename from frontend/src/components/board/RetrospectForm/RetrospectForm.tsx
rename to frontend/src/components/progress/RetrospectForm/RetrospectForm.tsx
index 992b607c..9f947c26 100644
--- a/frontend/src/components/board/RetrospectForm/RetrospectForm.tsx
+++ b/frontend/src/components/progress/RetrospectForm/RetrospectForm.tsx
@@ -5,42 +5,29 @@ import Button from '@Components/common/Button/Button';
 import QuestionTextarea from '@Components/common/QuestionTextarea/QuestionTextarea';
 import Typography from '@Components/common/Typography/Typography';
 
-import useRetrospectForm from '@Hooks/board/useRetrospectForm';
 import useDisplay from '@Hooks/common/useDisplay';
 
 import { ROUTES_PATH } from '@Constants/routes';
 import { RETROSPECT_QUESTIONS } from '@Constants/study';
 
+import { useStudyInfo } from '@Contexts/StudyProgressProvider';
+
 import ArrowIcon from '@Assets/icons/ArrowIcon';
 
-type Props = {
-  isLastCycle: boolean;
-  onClickSubmitButton: () => Promise<void>;
-  studyId: string;
-  progressId: string;
-};
+import useRetrospectForm from '../hooks/useRetrospectForm';
 
-const RetrospectForm = ({ isLastCycle, onClickSubmitButton, studyId, progressId }: Props) => {
-  const navigate = useNavigate();
-  const { questionTextareaProps, isInvalidForm, isSubmitLoading, submitForm } = useRetrospectForm(
-    studyId,
-    progressId,
-    onClickSubmitButton,
-  );
+const RetrospectForm = () => {
+  const { questionTextareaProps, isInvalidForm, isSubmitLoading, isLastCycle, submitForm } = useRetrospectForm();
+  const { studyId } = useStudyInfo();
 
+  const navigate = useNavigate();
   const { isShow: isOpenOptionalQuestion, toggleShow: toggleOptionalQuestion } = useDisplay();
 
-  const handleClickButton = async () => {
-    try {
-      await submitForm();
-
-      if (isLastCycle) {
-        navigate(`${ROUTES_PATH.record}/${studyId}`);
-        return;
-      }
-    } catch (error) {
-      if (!(error instanceof Error)) return;
-      alert(error.message);
+  const handleSubmitForm = async () => {
+    await submitForm();
+
+    if (isLastCycle) {
+      navigate(`${ROUTES_PATH.record}/${studyId}`);
     }
   };
 
@@ -74,7 +61,7 @@ const RetrospectForm = ({ isLastCycle, onClickSubmitButton, studyId, progressId
       <Button
         variant="success"
         type="submit"
-        onClick={handleClickButton}
+        onClick={handleSubmitForm}
         isLoading={isSubmitLoading}
         disabled={isInvalidForm}
       >
diff --git a/frontend/src/components/board/Sidebar/Sidebar.tsx b/frontend/src/components/progress/Sidebar/Sidebar.tsx
similarity index 80%
rename from frontend/src/components/board/Sidebar/Sidebar.tsx
rename to frontend/src/components/progress/Sidebar/Sidebar.tsx
index 2a331d5d..2066624e 100644
--- a/frontend/src/components/board/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/progress/Sidebar/Sidebar.tsx
@@ -4,6 +4,8 @@ import Typography from '@Components/common/Typography/Typography';
 
 import color from '@Styles/color';
 
+import { useProgressInfo, useStudyInfo } from '@Contexts/StudyProgressProvider';
+
 import type { Step } from '@Types/study';
 
 import Timer from '../Timer/Timer';
@@ -26,17 +28,16 @@ const SIDEBAR_INFO: Record<Step, { theme: string; stepKeyword: string; paragraph
   },
 };
 
-type Props = {
-  step: Step;
-  cycle: number;
-  studyMinutes: number;
-};
+const Sidebar = () => {
+  const { timePerCycle } = useStudyInfo();
+  const { step, currentCycle } = useProgressInfo();
+
+  if (step === 'done') return;
 
-const Sidebar = ({ step, cycle, studyMinutes }: Props) => {
   const theme = SIDEBAR_INFO[step].theme;
   const stepKeyword = SIDEBAR_INFO[step].stepKeyword;
   const paragraph =
-    step === 'retrospect' ? `${studyMinutes}${SIDEBAR_INFO[step].paragraph}` : SIDEBAR_INFO[step].paragraph;
+    step === 'retrospect' ? `${timePerCycle}${SIDEBAR_INFO[step].paragraph}` : SIDEBAR_INFO[step].paragraph;
 
   return (
     <Layout background={theme}>
@@ -53,9 +54,9 @@ const Sidebar = ({ step, cycle, studyMinutes }: Props) => {
       >
         {paragraph}
       </Typography>
-      <Timer studyMinutes={studyMinutes} step={step} />
+      <Timer studyMinutes={timePerCycle} step={step} />
       <Typography variant="p1" color={color.white}>
-        {cycle}번째 사이클 - {stepKeyword}
+        {currentCycle}번째 사이클 - {stepKeyword}
       </Typography>
     </Layout>
   );
diff --git a/frontend/src/components/progress/StudyBoard/StudyBoard.tsx b/frontend/src/components/progress/StudyBoard/StudyBoard.tsx
new file mode 100644
index 00000000..99e1f014
--- /dev/null
+++ b/frontend/src/components/progress/StudyBoard/StudyBoard.tsx
@@ -0,0 +1,71 @@
+import { Suspense, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import AlertErrorBoundary from '@Components/common/AlertErrorBoundary/AlertErrorBoundary';
+import LoadingFallback from '@Components/common/LodingFallback/LoadingFallback';
+
+import color from '@Styles/color';
+
+import { FAVICON_PATH } from '@Constants/asset';
+import { ROUTES_PATH } from '@Constants/routes';
+
+import { useProgressInfo, useStudyInfo } from '@Contexts/StudyProgressProvider';
+
+import dom from '@Utils/dom';
+
+import PlanningForm from '../PlanningForm/PlanningForm';
+import RetrospectForm from '../RetrospectForm/RetrospectForm';
+import Sidebar from '../Sidebar/Sidebar';
+import StudyingForm from '../StudyingForm/StudyingForm';
+
+const StudyBoard = () => {
+  const navigate = useNavigate();
+  const { studyId } = useStudyInfo();
+  const { step } = useProgressInfo();
+
+  useEffect(() => {
+    if (step === 'done') return;
+    dom.updateFavicon(FAVICON_PATH[step]);
+
+    return () => dom.updateFavicon(FAVICON_PATH.default);
+  }, [step]);
+
+  if (step === 'done') {
+    alert('이미 끝난 스터디입니다.');
+    navigate(`${ROUTES_PATH.record}/${studyId}`);
+    return;
+  }
+
+  return (
+    <Container>
+      <Sidebar />
+      <AlertErrorBoundary>
+        <Contents>
+          {step === 'planning' && <PlanningForm />}
+          {step === 'studying' && (
+            <Suspense fallback={<LoadingFallback circleColor={color.red[500]} />}>
+              <StudyingForm />
+            </Suspense>
+          )}
+          {step === 'retrospect' && <RetrospectForm />}
+        </Contents>
+      </AlertErrorBoundary>
+    </Container>
+  );
+};
+
+export default StudyBoard;
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+`;
+
+const Contents = styled.section`
+  width: calc(100% - 590px);
+  min-width: 670px;
+  height: 100vh;
+
+  background-color: ${color.neutral[100]};
+`;
diff --git a/frontend/src/components/progress/StudyingForm/StudyingForm.tsx b/frontend/src/components/progress/StudyingForm/StudyingForm.tsx
new file mode 100644
index 00000000..c916eab6
--- /dev/null
+++ b/frontend/src/components/progress/StudyingForm/StudyingForm.tsx
@@ -0,0 +1,66 @@
+import { styled } from 'styled-components';
+
+import Button from '@Components/common/Button/Button';
+import QuestionAnswer from '@Components/common/QuestionAnswer/QuestionAnswer';
+
+import color from '@Styles/color';
+
+import { PLAN_KEYWORDS } from '@Constants/study';
+
+import { getKeys } from '@Utils/getKeys';
+
+import type { Plan } from '@Types/study';
+
+import useStudyingForm from '../hooks/useStudyingForm';
+
+const StudyingForm = () => {
+  const { planList, isSubmitLoading, submitForm } = useStudyingForm();
+
+  return (
+    planList && (
+      <Layout>
+        <PlanResultList>
+          {getKeys<Plan>(PLAN_KEYWORDS).map((planKey) => (
+            <QuestionAnswer
+              key={planKey}
+              question={PLAN_KEYWORDS[planKey]}
+              answer={planList[planKey]}
+              iconColor={color.red[600]}
+            />
+          ))}
+        </PlanResultList>
+        <Button variant="danger" onClick={submitForm} isLoading={isSubmitLoading}>
+          학습 마치기
+        </Button>
+      </Layout>
+    )
+  );
+};
+
+export default StudyingForm;
+
+const Layout = styled.section`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+
+  padding: 60px 85px;
+`;
+
+const PlanResultList = styled.ul`
+  width: 100%;
+  height: 90%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 60px;
+
+  padding: 50px;
+  background-color: #fff;
+  border-radius: 14px;
+
+  overflow-y: auto;
+`;
diff --git a/frontend/src/components/board/Timer/Timer.stories.tsx b/frontend/src/components/progress/Timer/Timer.stories.tsx
similarity index 100%
rename from frontend/src/components/board/Timer/Timer.stories.tsx
rename to frontend/src/components/progress/Timer/Timer.stories.tsx
diff --git a/frontend/src/components/board/Timer/Timer.tsx b/frontend/src/components/progress/Timer/Timer.tsx
similarity index 70%
rename from frontend/src/components/board/Timer/Timer.tsx
rename to frontend/src/components/progress/Timer/Timer.tsx
index febb622e..73303418 100644
--- a/frontend/src/components/board/Timer/Timer.tsx
+++ b/frontend/src/components/progress/Timer/Timer.tsx
@@ -1,14 +1,23 @@
+import { useEffect } from 'react';
 import { css, styled } from 'styled-components';
 
 import Button from '@Components/common/Button/Button';
 import Typography from '@Components/common/Typography/Typography';
 
-import useTimer from '@Hooks/board/useTimer';
-
 import color from '@Styles/color';
 
+import alarm from '@Assets/sounds/alarm.mp3';
+
+import audioPlayer from '@Utils/audioPlayer';
+import dom from '@Utils/dom';
+import format from '@Utils/format';
+
 import type { Step } from '@Types/study';
 
+import useStepTimer from '../hooks/useStepTimer';
+
+const alarmAudio = audioPlayer({ asset: alarm });
+
 const BUTTON_COLOR: Record<Step, string> = {
   planning: color.blue[500],
   studying: color.red[600],
@@ -21,14 +30,21 @@ type Props = {
 };
 
 const Timer = ({ studyMinutes, step }: Props) => {
-  const { start, stop, leftTime, isTicking } = useTimer(studyMinutes, step);
+  const { start, stop, leftSeconds, isTicking } = useStepTimer({
+    studyMinutes,
+    step,
+    onComplete: () => {
+      alarmAudio.play();
+    },
+  });
+
+  const formattedTime = format.time(leftSeconds);
+
+  useEffect(() => {
+    dom.updateTitle(`${formattedTime} - 하루스터디`);
 
-  const leftMinutes = Math.floor(leftTime / 60)
-    .toString()
-    .padStart(2, '0');
-  const leftSeconds = Math.floor(leftTime % 60)
-    .toString()
-    .padStart(2, '0');
+    return () => dom.updateTitle('하루스터디');
+  }, [formattedTime]);
 
   const buttonColor = BUTTON_COLOR[step];
   const buttonText = isTicking ? '정지' : '시작';
@@ -45,9 +61,9 @@ const Timer = ({ studyMinutes, step }: Props) => {
         color={color.white}
         tabIndex={0}
         role="timer"
-        aria-label={`남은 시간 ${leftMinutes}분 ${leftSeconds}초`}
+        aria-label={`남은 시간 ${formattedTime}`}
       >
-        {`${leftMinutes}:${leftSeconds}`}
+        {`${formattedTime}`}
       </Typography>
       <Button
         variant="outlined"
diff --git a/frontend/src/components/progress/hooks/usePlanningForm.ts b/frontend/src/components/progress/hooks/usePlanningForm.ts
new file mode 100644
index 00000000..e4274102
--- /dev/null
+++ b/frontend/src/components/progress/hooks/usePlanningForm.ts
@@ -0,0 +1,57 @@
+import useMutation from '@Hooks/api/useMutation';
+import useQuestionTextarea from '@Hooks/common/useQuestionTextarea';
+
+import { useProgressInfo, useStudyInfo, useStudyProgressAction } from '@Contexts/StudyProgressProvider';
+
+import { requestWritePlan } from '@Apis/index';
+
+const usePlanningForm = () => {
+  const { studyId } = useStudyInfo();
+  const { progressId } = useProgressInfo();
+  const { onNextStep } = useStudyProgressAction();
+
+  const { mutate: submitForm, isLoading: isSubmitLoading } = useMutation(async () => {
+    await requestWritePlan(studyId, progressId, {
+      toDo: questionTextareaProps.toDo.value,
+      completionCondition: questionTextareaProps.completionCondition.value,
+      expectedProbability: questionTextareaProps.expectedProbability.value,
+      expectedDifficulty: questionTextareaProps.expectedDifficulty.value,
+      whatCanYouDo: questionTextareaProps.whatCanYouDo.value,
+    });
+    await onNextStep();
+  });
+
+  const questionTextareaProps = {
+    toDo: useQuestionTextarea({
+      minLength: 10,
+      maxLength: 500,
+      required: true,
+    }),
+    completionCondition: useQuestionTextarea({
+      minLength: 10,
+      maxLength: 500,
+      required: true,
+    }),
+    expectedProbability: useQuestionTextarea({
+      maxLength: 500,
+    }),
+    expectedDifficulty: useQuestionTextarea({
+      maxLength: 500,
+    }),
+    whatCanYouDo: useQuestionTextarea({
+      maxLength: 500,
+    }),
+  } as const;
+
+  const isInvalidForm = !!(
+    questionTextareaProps.toDo.errorMessage ||
+    questionTextareaProps.completionCondition.errorMessage ||
+    questionTextareaProps.expectedDifficulty.errorMessage ||
+    questionTextareaProps.expectedProbability.errorMessage ||
+    questionTextareaProps.whatCanYouDo.errorMessage
+  );
+
+  return { questionTextareaProps, isSubmitLoading, isInvalidForm, submitForm };
+};
+
+export default usePlanningForm;
diff --git a/frontend/src/components/progress/hooks/useRetrospectForm.ts b/frontend/src/components/progress/hooks/useRetrospectForm.ts
new file mode 100644
index 00000000..0fb2232a
--- /dev/null
+++ b/frontend/src/components/progress/hooks/useRetrospectForm.ts
@@ -0,0 +1,47 @@
+import useMutation from '@Hooks/api/useMutation';
+import useQuestionTextarea from '@Hooks/common/useQuestionTextarea';
+
+import { useProgressInfo, useStudyInfo, useStudyProgressAction } from '@Contexts/StudyProgressProvider';
+
+import { requestWriteRetrospect } from '@Apis/index';
+
+const useRetrospectForm = () => {
+  const { studyId, totalCycle } = useStudyInfo();
+  const { progressId, currentCycle } = useProgressInfo();
+  const { onNextStep } = useStudyProgressAction();
+
+  const { mutate: submitForm, isLoading: isSubmitLoading } = useMutation(async () => {
+    await requestWriteRetrospect(studyId, progressId, {
+      doneAsExpected: questionTextareaProps.doneAsExpected.value,
+      experiencedDifficulty: questionTextareaProps.experiencedDifficulty.value,
+      lesson: questionTextareaProps.lesson.value,
+    });
+    await onNextStep();
+  });
+
+  const questionTextareaProps = {
+    doneAsExpected: useQuestionTextarea({
+      minLength: 10,
+      maxLength: 500,
+      required: true,
+    }),
+    experiencedDifficulty: useQuestionTextarea({
+      maxLength: 500,
+    }),
+    lesson: useQuestionTextarea({
+      maxLength: 500,
+    }),
+  } as const;
+
+  const isInvalidForm = !!(
+    questionTextareaProps.doneAsExpected.errorMessage ||
+    questionTextareaProps.experiencedDifficulty.errorMessage ||
+    questionTextareaProps.lesson.errorMessage
+  );
+
+  const isLastCycle = totalCycle === currentCycle;
+
+  return { questionTextareaProps, isInvalidForm, isLastCycle, isSubmitLoading, submitForm };
+};
+
+export default useRetrospectForm;
diff --git a/frontend/src/components/progress/hooks/useStepTimer.ts b/frontend/src/components/progress/hooks/useStepTimer.ts
new file mode 100644
index 00000000..b65b216a
--- /dev/null
+++ b/frontend/src/components/progress/hooks/useStepTimer.ts
@@ -0,0 +1,40 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from 'react';
+
+import useTimer from '@Hooks/common/useTimer';
+
+import type { Step } from '@Types/study';
+
+const INIT_SECONDS = 600;
+const SECONDS_PER_MINUTE = 60;
+
+type Params = {
+  studyMinutes: number;
+  step: Step;
+  onStart?: () => void;
+  onStop?: () => void;
+  onComplete?: () => void;
+};
+
+const useStepTimer = ({ studyMinutes, step, onStart, onStop, onComplete }: Params) => {
+  const { start, stop, reset, leftSeconds, isTicking } = useTimer(INIT_SECONDS, { onStart, onStop, onComplete });
+
+  useEffect(() => {
+    if (step === 'planning' || step === 'retrospect') {
+      reset(INIT_SECONDS);
+    } else {
+      reset(studyMinutes * SECONDS_PER_MINUTE);
+    }
+
+    start();
+  }, [studyMinutes, step]);
+
+  return {
+    start,
+    stop,
+    leftSeconds,
+    isTicking,
+  };
+};
+
+export default useStepTimer;
diff --git a/frontend/src/components/progress/hooks/useStudyingForm.ts b/frontend/src/components/progress/hooks/useStudyingForm.ts
new file mode 100644
index 00000000..82946cb0
--- /dev/null
+++ b/frontend/src/components/progress/hooks/useStudyingForm.ts
@@ -0,0 +1,19 @@
+import useFetch from '@Hooks/api/useFetch';
+import useMutation from '@Hooks/api/useMutation';
+
+import { useProgressInfo, useStudyInfo, useStudyProgressAction } from '@Contexts/StudyProgressProvider';
+
+import { requestGetMemberContents } from '@Apis/index';
+
+const useStudyingForm = () => {
+  const { studyId } = useStudyInfo();
+  const { progressId, currentCycle } = useProgressInfo();
+  const { onNextStep } = useStudyProgressAction();
+
+  const { result: planList } = useFetch(() => requestGetMemberContents(studyId, progressId, currentCycle));
+  const { mutate: submitForm, isLoading: isSubmitLoading } = useMutation(() => onNextStep());
+
+  return { planList, isSubmitLoading, submitForm };
+};
+
+export default useStudyingForm;
diff --git a/frontend/src/components/record/MemberRecordContents/MemberRecordContents.tsx b/frontend/src/components/record/MemberRecordContents/MemberRecordContents.tsx
index 9b3aed25..f242f82c 100644
--- a/frontend/src/components/record/MemberRecordContents/MemberRecordContents.tsx
+++ b/frontend/src/components/record/MemberRecordContents/MemberRecordContents.tsx
@@ -1,45 +1,49 @@
+import { Suspense } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import Typography from '@Components/common/Typography/Typography';
 
-import useMemberRecord from '@Hooks/record/useMemberRecord';
-
-import { TextSkeletonStyle } from '@Styles/common';
+import { useMemberInfo } from '@Contexts/MemberInfoProvider';
 
 import MemberRecordList from '../MemberRecordList/MemberRecordList';
+import MemberRecordListSkeleton from '../MemberRecordList/MemberRecordListSkeleton';
 
 const MemberRecordContents = () => {
   const navigate = useNavigate();
 
-  const { name, studyList, isLoading, loginType } = useMemberRecord({
-    errorHandler: (error) => alert(error.message),
-  });
+  const memberInfo = useMemberInfo();
+  const memberId = memberInfo?.memberId;
 
-  if (loginType === 'guest') {
+  if (memberInfo?.loginType === 'guest') {
     navigate('/404');
   }
 
   return (
     <>
-      <Typography
-        variant="h2"
-        $style={css`
-          font-weight: 600;
-
-          ${isLoading &&
-          css`
-            width: 80%;
-            min-width: 400px;
-            ${TextSkeletonStyle}
+      <Title>
+        <Typography
+          variant="h2"
+          $style={css`
+            font-weight: 700;
           `}
-        `}
-      >
-        {name}님의 스터디 기록
-      </Typography>
-      <MemberRecordList studyList={studyList} isLoading={isLoading} />
+        >
+          {memberInfo && `${memberInfo.name}님의 스터디 기록`}
+        </Typography>
+      </Title>
+      <Suspense fallback={<MemberRecordListSkeleton />}>
+        {memberId && <MemberRecordList memberId={memberId} />}
+      </Suspense>
     </>
   );
 };
 
 export default MemberRecordContents;
+
+const Title = styled.span`
+  @media screen and (max-width: 768px) {
+    h2 {
+      font-size: 3.2rem;
+    }
+  }
+`;
diff --git a/frontend/src/components/record/MemberRecordList/MemberRecordList.tsx b/frontend/src/components/record/MemberRecordList/MemberRecordList.tsx
index ad840ef9..015c730f 100644
--- a/frontend/src/components/record/MemberRecordList/MemberRecordList.tsx
+++ b/frontend/src/components/record/MemberRecordList/MemberRecordList.tsx
@@ -4,48 +4,38 @@ import { styled } from 'styled-components';
 import Typography from '@Components/common/Typography/Typography';
 
 import color from '@Styles/color';
-import { TextSkeletonStyle } from '@Styles/common';
 
 import { ROUTES_PATH } from '@Constants/routes';
 
 import CycleIcon from '@Assets/icons/CycleIcon';
 import TimeLineIcon from '@Assets/icons/TimeLineIcon';
 
-import date from '@Utils/date';
-
-import type { StudyBasicInfo } from '@Types/study';
+import format from '@Utils/format';
 
 import EmptyMemberRecord from '../EmptyMemberRecord/EmptyMemberRecord';
+import useMemberStudyListData from '../hooks/useMemberStudyListData';
 
 type Props = {
-  studyList: StudyBasicInfo[] | null;
-  isLoading: boolean;
+  memberId: string;
 };
 
-const MemberRecordList = ({ studyList, isLoading }: Props) => {
+const MemberRecordList = ({ memberId }: Props) => {
   const navigate = useNavigate();
 
-  const handleClickStudyItem = (studyId: string) => navigate(`${ROUTES_PATH.record}/${studyId}`);
+  const { studyList, isLoading } = useMemberStudyListData(memberId);
 
-  if (isLoading)
-    return (
-      <SkeletonLayout>
-        <SkeletonItem />
-        <SkeletonItem />
-        <SkeletonItem />
-      </SkeletonLayout>
-    );
+  const handleClickStudyItem = (studyId: string) => navigate(`${ROUTES_PATH.record}/${studyId}`);
 
-  if (studyList?.length === 0) return <EmptyMemberRecord />;
+  if (!isLoading && studyList.length === 0) return <EmptyMemberRecord />;
 
   return (
     <Layout>
-      {studyList?.map(({ studyId, name, createdDateTime, totalCycle, timePerCycle }) => {
+      {studyList.map(({ studyId, name, createdDateTime, totalCycle, timePerCycle }) => {
         return (
           <StudyItem key={studyId} onClick={() => handleClickStudyItem(studyId)}>
             <StudyNameDateContainer>
               <Typography variant="h6">{name} 스터디</Typography>
-              <StudyDate>{date.format(new Date(createdDateTime))}</StudyDate>
+              <StudyDate data-testid="progress-date">{format.date(new Date(createdDateTime))}</StudyDate>
             </StudyNameDateContainer>
             <StudyCycleInfoLayout>
               <StudyCycleInfoContainer>
@@ -90,8 +80,12 @@ const StudyItem = styled.li`
 
 const StudyNameDateContainer = styled.div`
   display: flex;
-  flex-wrap: wrap;
+  gap: 10px;
   justify-content: space-between;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+  }
 `;
 
 const StudyDate = styled.span`
@@ -118,18 +112,6 @@ const StudyCycleInfoContainer = styled.div`
   :last-child {
     margin-left: 10px;
     font-size: 1.8rem;
-    font-weight: 400;
+    font-weight: 500;
   }
 `;
-
-const SkeletonLayout = styled.div`
-  display: grid;
-  row-gap: 40px;
-
-  max-width: 1200px;
-`;
-
-const SkeletonItem = styled.div`
-  height: 130px;
-  ${TextSkeletonStyle}
-`;
diff --git a/frontend/src/components/record/MemberRecordList/MemberRecordListSkeleton.tsx b/frontend/src/components/record/MemberRecordList/MemberRecordListSkeleton.tsx
new file mode 100644
index 00000000..59ebb114
--- /dev/null
+++ b/frontend/src/components/record/MemberRecordList/MemberRecordListSkeleton.tsx
@@ -0,0 +1,28 @@
+import { styled } from 'styled-components';
+
+import { TextSkeletonStyle } from '@Styles/common';
+
+const MemberRecordListSkeleton = () => {
+  return (
+    <SkeletonLayout>
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </SkeletonLayout>
+  );
+};
+
+export default MemberRecordListSkeleton;
+
+const SkeletonLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  max-width: 1200px;
+`;
+
+const SkeletonItem = styled.div`
+  height: 130px;
+  ${TextSkeletonStyle}
+`;
diff --git a/frontend/src/components/record/ProgressRecord/ProgressRecord.tsx b/frontend/src/components/record/ProgressRecord/ProgressRecord.tsx
index 9cd004a8..b68df652 100644
--- a/frontend/src/components/record/ProgressRecord/ProgressRecord.tsx
+++ b/frontend/src/components/record/ProgressRecord/ProgressRecord.tsx
@@ -5,8 +5,6 @@ import Tabs from '@Components/common/Tabs/Tabs';
 import TabsSkeleton from '@Components/common/Tabs/TabsSkeleton';
 import Typography from '@Components/common/Typography/Typography';
 
-import useProgressRecord from '@Hooks/record/useProgressRecord';
-
 import color from '@Styles/color';
 
 import { PLAN_KEYWORDS, RETROSPECT_KEYWORDS } from '@Constants/study';
@@ -18,6 +16,8 @@ import { getKeys } from '@Utils/getKeys';
 
 import type { Plan, Retrospect } from '@Types/study';
 
+import useMemberRecordContents from '../hooks/useMemberRecordContents';
+
 type Props = {
   studyId: string;
   progressId: string;
@@ -27,13 +27,7 @@ type Props = {
 };
 
 const ProgressRecord = ({ studyId, nickname, progressId, isCompleted, currentCycle }: Props) => {
-  const { memberRecordContents, isLoading } = useProgressRecord(studyId, progressId, {
-    errorHandler: (error) => alert(error.message),
-  });
-
-  if (isLoading) {
-    return <TabsSkeleton />;
-  }
+  const { memberRecordContents, isLoading } = useMemberRecordContents(studyId, progressId);
 
   const isDoneCycle = (selectedTabCycle: number) => {
     if (isCompleted) return true;
@@ -52,6 +46,10 @@ const ProgressRecord = ({ studyId, nickname, progressId, isCompleted, currentCyc
     return '이(가)';
   };
 
+  if (isLoading) {
+    return <TabsSkeleton />;
+  }
+
   return (
     <ProgressRecordLayout>
       <Tabs>
@@ -112,6 +110,7 @@ export default ProgressRecord;
 
 const ProgressRecordLayout = styled.div`
   padding: 40px 30px;
+  min-height: 308px;
 
   h5 {
     display: flex;
@@ -125,19 +124,46 @@ const ProgressRecordLayout = styled.div`
   p {
     word-break: break-all;
   }
+
+  @media screen and (max-width: 768px) {
+    padding: 0;
+  }
 `;
 
 const TabItemContainer = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 90px;
-  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
 
   margin-top: 20px;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: 40px;
+  }
 `;
 
 const TabItemSection = styled.div`
-  display: grid;
-  row-gap: 45px;
-  align-items: flex-start;
+  width: 46%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 45px;
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+    gap: 20px;
+
+    svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    h5 {
+      font-size: 2.2rem;
+    }
+
+    p {
+      font-size: 1.8rem;
+    }
+  }
 `;
diff --git a/frontend/src/components/record/ProgressRecordList/ProgressRecordList.tsx b/frontend/src/components/record/ProgressRecordList/ProgressRecordList.tsx
index 45fca5fb..6946952b 100644
--- a/frontend/src/components/record/ProgressRecordList/ProgressRecordList.tsx
+++ b/frontend/src/components/record/ProgressRecordList/ProgressRecordList.tsx
@@ -1,21 +1,22 @@
+import { useEffect } from 'react';
+
 import Accordion from '@Components/common/Accordion/Accordion';
-import AccordionSkeleton from '@Components/common/Accordion/AccordionSkeleton';
 import Typography from '@Components/common/Typography/Typography';
 
-import type { MemberProgress } from '@Types/study';
-
 import ProgressRecord from '../ProgressRecord/ProgressRecord';
+import useStudyMembers from '../hooks/useStudyMembers';
 
 type Props = {
-  memberProgresses: MemberProgress[];
-  studyId?: string;
-  isLoading: boolean;
+  studyId: string;
+  isRefetch: boolean;
 };
 
-const ProgressRecordList = ({ memberProgresses = [], studyId = '', isLoading }: Props) => {
-  if (isLoading) {
-    return <AccordionSkeleton />;
-  }
+const ProgressRecordList = ({ studyId, isRefetch }: Props) => {
+  const { memberProgresses, refetch } = useStudyMembers(studyId);
+
+  useEffect(() => {
+    if (isRefetch) refetch();
+  }, [isRefetch, refetch]);
 
   return (
     <Accordion>
diff --git a/frontend/src/components/record/ResetButton/ResetButton.tsx b/frontend/src/components/record/ResetButton/ResetButton.tsx
new file mode 100644
index 00000000..1d6814d0
--- /dev/null
+++ b/frontend/src/components/record/ResetButton/ResetButton.tsx
@@ -0,0 +1,64 @@
+import { styled, css, keyframes } from 'styled-components';
+
+import color from '@Styles/color';
+
+import ResetIcon from '@Assets/icons/ResetIcon';
+
+type Props = {
+  isRefetch: boolean;
+  refetchProgressRecordList: () => void;
+};
+
+const ResetButton = ({ refetchProgressRecordList, isRefetch }: Props) => {
+  const handleClickResetButton = () => refetchProgressRecordList();
+
+  return (
+    <Layout onClick={handleClickResetButton} role="presentation" $rotateAnimation={isRefetch}>
+      <ResetIcon color={color.neutral[500]} />
+    </Layout>
+  );
+};
+
+export default ResetButton;
+
+const Rotation = keyframes`
+  0% {
+    transform:rotate(0deg);
+  }
+  100%{
+    transform:rotate(-360deg);
+  }
+`;
+
+type LayoutProps = {
+  $rotateAnimation: boolean;
+};
+
+const Layout = styled.div<LayoutProps>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 20px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  svg {
+    width: 30px;
+    height: 30px;
+
+    transition: transform 1s ease;
+  }
+
+  ${({ $rotateAnimation }) => css`
+    ${$rotateAnimation &&
+    css`
+      animation: ${Rotation} 1s ease forwards;
+      cursor: default;
+    `}
+  `}
+
+  @media screen and (max-width: 768px) {
+    top: -40px;
+    padding: 0px;
+  }
+`;
diff --git a/frontend/src/components/record/StudyInformation/StudyInformation.tsx b/frontend/src/components/record/StudyInformation/StudyInformation.tsx
index 19cbdace..bdd7d407 100644
--- a/frontend/src/components/record/StudyInformation/StudyInformation.tsx
+++ b/frontend/src/components/record/StudyInformation/StudyInformation.tsx
@@ -1,60 +1,65 @@
-import { css, styled } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import Typography from '@Components/common/Typography/Typography';
 
 import color from '@Styles/color';
-import { TextSkeletonStyle } from '@Styles/common';
 
 import CalenderIcon from '@Assets/icons/CalenderIcon';
 import CycleIcon from '@Assets/icons/CycleIcon';
 import TimeLineIcon from '@Assets/icons/TimeLineIcon';
 
-import date from '@Utils/date';
+import format from '@Utils/format';
+
+import StudyInformationSkeleton from './StudyInformationSkeleton';
+import { StudyInfoContainer, StudyInformationLayout } from './style';
+import useStudyData from '../hooks/useStudyData';
 
 type Props = {
-  studyName?: string;
-  totalCycle?: number;
-  timePerCycle?: number;
-  createdDateTime?: string;
-  $isLoading: boolean;
+  studyId: string;
 };
 
-const StudyInformation = ({ studyName, totalCycle, timePerCycle, createdDateTime, $isLoading }: Props) => {
-  const iconColor = $isLoading ? 'transparent' : color.neutral[700];
+const StudyInformation = ({ studyId }: Props) => {
+  const { studyBasicInfo, isLoading } = useStudyData(studyId);
+
+  const displayDate = studyBasicInfo?.createdDateTime
+    ? format.date(new Date(studyBasicInfo?.createdDateTime))
+    : '/년 /월 /일';
 
-  const displayDate = createdDateTime ? date.format(new Date(createdDateTime)) : '/년 /월 /일';
+  if (isLoading) {
+    return <StudyInformationSkeleton />;
+  }
 
   return (
     <StudyInformationLayout>
-      <Typography
-        variant="h2"
-        $style={css`
-          font-weight: 600;
-
-          ${$isLoading &&
-          css`
-            width: 80%;
-            min-width: 400px;
-            ${TextSkeletonStyle}
+      <Title>
+        <Typography
+          variant="h2"
+          $style={css`
+            font-weight: 700;
           `}
-        `}
-      >
-        {studyName} 스터디에서의 기록
-      </Typography>
-      <StudyInfoContainer $isLoading={$isLoading}>
-        <CalenderIcon color={iconColor} />
-        <Typography variant="p2">진행 날짜</Typography>
+        >
+          {studyBasicInfo && `${studyBasicInfo.name} 스터디에서의 기록`}
+        </Typography>
+      </Title>
+      <StudyInfoContainer>
+        <Typography variant="p2">
+          <CalenderIcon color={color.neutral[700]} />
+          진행 날짜
+        </Typography>
         <Typography variant="p2">{displayDate}</Typography>
       </StudyInfoContainer>
-      <StudyInfoContainer $isLoading={$isLoading}>
-        <CycleIcon color={iconColor} />
-        <Typography variant="p2">진행한 총 사이클</Typography>
-        <Typography variant="p2">{totalCycle}회</Typography>
+      <StudyInfoContainer>
+        <Typography variant="p2">
+          <CycleIcon color={color.neutral[700]} /> 진행한 총 사이클
+        </Typography>
+        <Typography variant="p2">{studyBasicInfo?.totalCycle}회</Typography>
       </StudyInfoContainer>
-      <StudyInfoContainer $isLoading={$isLoading}>
-        <TimeLineIcon color={iconColor} />
-        <Typography variant="p2">사이클 당 학습 시간</Typography>
-        <Typography variant="p2">{timePerCycle}분</Typography>
+      <StudyInfoContainer>
+        <Typography variant="p2">
+          <TimeLineIcon color={color.neutral[700]} />
+          사이클 당 학습 시간
+        </Typography>
+        <Typography variant="p2">{studyBasicInfo?.timePerCycle}분</Typography>
       </StudyInfoContainer>
     </StudyInformationLayout>
   );
@@ -62,42 +67,10 @@ const StudyInformation = ({ studyName, totalCycle, timePerCycle, createdDateTime
 
 export default StudyInformation;
 
-const StudyInformationLayout = styled.div`
-  display: grid;
-  row-gap: 20px;
-
-  h2 {
-    margin-bottom: 20px;
-  }
-`;
-
-type StudyInfoContainerType = {
-  $isLoading: boolean;
-};
-
-const StudyInfoContainer = styled.div<StudyInfoContainerType>`
-  display: grid;
-  grid-template-columns: 20px 160px 160px;
-  align-items: center;
-  column-gap: 10px;
-
-  :nth-child(3) {
-    text-align: end;
+const Title = styled.span`
+  @media screen and (max-width: 768px) {
+    h2 {
+      font-size: 3.2rem;
+    }
   }
-
-  p {
-    font-weight: 600;
-    color: ${color.neutral[700]};
-  }
-
-  ${({ $isLoading }) => css`
-    ${$isLoading &&
-    css`
-      width: 300px;
-      p {
-        color: transparent;
-      }
-      ${TextSkeletonStyle}
-    `}
-  `}
 `;
diff --git a/frontend/src/components/record/StudyInformation/StudyInformationSkeleton.tsx b/frontend/src/components/record/StudyInformation/StudyInformationSkeleton.tsx
new file mode 100644
index 00000000..b08cece8
--- /dev/null
+++ b/frontend/src/components/record/StudyInformation/StudyInformationSkeleton.tsx
@@ -0,0 +1,48 @@
+import { styled, css } from 'styled-components';
+
+import Typography from '@Components/common/Typography/Typography';
+
+import { TextSkeletonStyle } from '@Styles/common';
+
+import CalenderIcon from '@Assets/icons/CalenderIcon';
+
+import { StudyInfoContainer, StudyInformationLayout } from './style';
+
+const StudyInformationSkeleton = () => {
+  return (
+    <StudyInformationLayout>
+      <Typography
+        variant="h2"
+        $style={css`
+          font-weight: 700;
+          width: 80%;
+          min-width: 400px;
+          ${TextSkeletonStyle}
+
+          @media screen and (max-width: 768px) {
+            min-width: 100%;
+          }
+        `}
+      >
+        Loading
+      </Typography>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <StudyInfoContainerSkeleton key={index}>
+          <CalenderIcon color="transparent" />
+          <Typography variant="p2">Loading</Typography>
+          <Typography variant="p2">Loading</Typography>
+        </StudyInfoContainerSkeleton>
+      ))}
+    </StudyInformationLayout>
+  );
+};
+
+export default StudyInformationSkeleton;
+
+const StudyInfoContainerSkeleton = styled(StudyInfoContainer)`
+  width: 300px;
+  p {
+    color: transparent;
+  }
+  ${TextSkeletonStyle}
+`;
diff --git a/frontend/src/components/record/StudyInformation/style.ts b/frontend/src/components/record/StudyInformation/style.ts
new file mode 100644
index 00000000..c86b770a
--- /dev/null
+++ b/frontend/src/components/record/StudyInformation/style.ts
@@ -0,0 +1,54 @@
+import { styled } from 'styled-components';
+
+import color from '@Styles/color';
+
+export const StudyInformationLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  @media screen and (max-width: 768px) {
+    h2 {
+      margin-bottom: 0px;
+    }
+  }
+`;
+
+export const StudyInfoContainer = styled.div`
+  display: flex;
+  max-width: 100%;
+  width: 350px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  :nth-child(3) {
+    text-align: end;
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-weight: 700;
+    color: ${color.neutral[700]};
+  }
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+
+    :nth-child(3) {
+      text-align: start;
+      justify-content: space-between;
+    }
+  }
+`;
diff --git a/frontend/src/components/record/StudyRecordContents/StudyRecordContents.tsx b/frontend/src/components/record/StudyRecordContents/StudyRecordContents.tsx
index ff7c3675..59cdb459 100644
--- a/frontend/src/components/record/StudyRecordContents/StudyRecordContents.tsx
+++ b/frontend/src/components/record/StudyRecordContents/StudyRecordContents.tsx
@@ -1,53 +1,34 @@
-import { useEffect, useState } from 'react';
+import { Suspense, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { css, keyframes, styled } from 'styled-components';
+import { styled } from 'styled-components';
 
-import useStudyRecord from '@Hooks/record/useStudyRecord';
-
-import color from '@Styles/color';
-
-import ResetIcon from '@Assets/icons/ResetIcon';
+import AccordionSkeleton from '@Components/common/Accordion/AccordionSkeleton';
 
 import ProgressRecordList from '../ProgressRecordList/ProgressRecordList';
+import ResetButton from '../ResetButton/ResetButton';
 import StudyInformation from '../StudyInformation/StudyInformation';
 
 const StudyRecordContents = () => {
   const { studyId } = useParams<{ studyId: string }>();
-  const [$rotateAnimation, setRotateAnimation] = useState(false);
 
   if (!studyId) throw Error('잘못된 접근입니다.');
 
-  const { isLoading, studyBasicInfo, memberProgresses, refetchStudyRecordData } = useStudyRecord(studyId, {
-    errorHandler: (error) => alert(error.message),
-  });
-
-  const handleClickResetButton = () => {
-    if (isLoading || $rotateAnimation) return;
-    setRotateAnimation(true);
-    refetchStudyRecordData();
-  };
+  const [isRefetch, setIsRefetch] = useState(false);
 
-  useEffect(() => {
-    const clearAnimation = setTimeout(() => {
-      setRotateAnimation(false);
+  const refetchProgressRecordList = () => {
+    setIsRefetch(true);
+    setTimeout(() => {
+      setIsRefetch(false);
     }, 1000);
-
-    return () => clearTimeout(clearAnimation);
-  }, [$rotateAnimation]);
+  };
 
   return (
     <Layout>
-      <StudyInformation
-        studyName={studyBasicInfo?.name}
-        totalCycle={studyBasicInfo?.totalCycle}
-        timePerCycle={studyBasicInfo?.timePerCycle}
-        createdDateTime={studyBasicInfo?.createdDateTime}
-        $isLoading={isLoading}
-      />
-      <ResetButton onClick={handleClickResetButton} role="presentation" $rotateAnimation={$rotateAnimation}>
-        <ResetIcon color={color.neutral[500]} />
-      </ResetButton>
-      <ProgressRecordList studyId={studyId} memberProgresses={memberProgresses} isLoading={isLoading} />
+      <StudyInformation studyId={studyId} />
+      <ResetButton refetchProgressRecordList={refetchProgressRecordList} isRefetch={isRefetch} />
+      <Suspense fallback={<AccordionSkeleton />}>
+        <ProgressRecordList studyId={studyId} isRefetch={isRefetch} />
+      </Suspense>
     </Layout>
   );
 };
@@ -55,47 +36,8 @@ const StudyRecordContents = () => {
 export default StudyRecordContents;
 
 const Layout = styled.div`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  row-gap: 40px;
-
-  ul {
-    grid-column: 1 / -1;
-  }
-`;
-
-const Rotation = keyframes`
-  0% {
-    transform:rotate(0deg);
-  }
-  100%{
-    transform:rotate(-360deg);
-  }
-`;
-
-type ResetButton = {
-  $rotateAnimation: boolean;
-};
-
-const ResetButton = styled.div<ResetButton>`
-  justify-self: flex-end;
-  align-self: flex-start;
-  padding: 20px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  svg {
-    width: 30px;
-    height: 30px;
-
-    transition: transform 1s ease;
-  }
-
-  ${({ $rotateAnimation }) => css`
-    ${$rotateAnimation &&
-    css`
-      animation: ${Rotation} 1s ease forwards;
-      cursor: default;
-    `}
-  `}
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
 `;
diff --git a/frontend/src/components/record/hooks/useMemberRecordContents.ts b/frontend/src/components/record/hooks/useMemberRecordContents.ts
new file mode 100644
index 00000000..c15046ee
--- /dev/null
+++ b/frontend/src/components/record/hooks/useMemberRecordContents.ts
@@ -0,0 +1,14 @@
+import useFetch from '@Hooks/api/useFetch';
+
+import { requestGetMemberRecordContents } from '@Apis/index';
+
+const useMemberRecordContents = (studyId: string, progressId: string) => {
+  const { result, isLoading } = useFetch(() => requestGetMemberRecordContents(studyId, progressId), {
+    suspense: false,
+  });
+  const memberRecordContents = result?.data.content || [];
+
+  return { memberRecordContents, isLoading };
+};
+
+export default useMemberRecordContents;
diff --git a/frontend/src/components/record/hooks/useMemberStudyListData.ts b/frontend/src/components/record/hooks/useMemberStudyListData.ts
new file mode 100644
index 00000000..e33be922
--- /dev/null
+++ b/frontend/src/components/record/hooks/useMemberStudyListData.ts
@@ -0,0 +1,12 @@
+import useFetch from '@Hooks/api/useFetch';
+
+import { requestGetMemberStudyListData } from '@Apis/index';
+
+const useMemberStudyListData = (memberId: string) => {
+  const { result, isLoading } = useFetch(() => requestGetMemberStudyListData(memberId));
+  const studyList = result?.data.studies || [];
+
+  return { studyList, isLoading };
+};
+
+export default useMemberStudyListData;
diff --git a/frontend/src/components/record/hooks/useStudyData.ts b/frontend/src/components/record/hooks/useStudyData.ts
new file mode 100644
index 00000000..235f396b
--- /dev/null
+++ b/frontend/src/components/record/hooks/useStudyData.ts
@@ -0,0 +1,14 @@
+import useFetch from '@Hooks/api/useFetch';
+
+import { requestGetStudyData } from '@Apis/index';
+
+const useStudyData = (studyId: string) => {
+  const { result, isLoading } = useFetch(() => requestGetStudyData(studyId), {
+    suspense: false,
+  });
+  const studyBasicInfo = result?.data;
+
+  return { studyBasicInfo, isLoading };
+};
+
+export default useStudyData;
diff --git a/frontend/src/components/record/hooks/useStudyMembers.ts b/frontend/src/components/record/hooks/useStudyMembers.ts
new file mode 100644
index 00000000..2617fd8e
--- /dev/null
+++ b/frontend/src/components/record/hooks/useStudyMembers.ts
@@ -0,0 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import useFetch from '@Hooks/api/useFetch';
+
+import { requestGetStudyMembers } from '@Apis/index';
+
+const useStudyMembers = (studyId: string) => {
+  const { result, refetch } = useFetch(() => requestGetStudyMembers(studyId));
+  const memberProgresses = result?.data.progresses || [];
+
+  return { memberProgresses, refetch };
+};
+
+export default useStudyMembers;
diff --git a/frontend/src/components/waiting/StudyWaitingMembers/StudyWaitingMembers.tsx b/frontend/src/components/waiting/StudyWaitingMembers/StudyWaitingMembers.tsx
new file mode 100644
index 00000000..2887bbd5
--- /dev/null
+++ b/frontend/src/components/waiting/StudyWaitingMembers/StudyWaitingMembers.tsx
@@ -0,0 +1,56 @@
+import { css, styled } from 'styled-components';
+
+import Typography from '@Components/common/Typography/Typography';
+
+import color from '@Styles/color';
+
+type Props = {
+  waitingMembers: string[];
+};
+
+const StudyWaitingMembers = ({ waitingMembers }: Props) => {
+  return (
+    <Layout>
+      <Typography variant="p1">현재 참여한 스터디원</Typography>
+      <MembersFiled>
+        {waitingMembers.map((member, index) => (
+          <Typography key={index} variant="p2">
+            {member}
+          </Typography>
+        ))}
+      </MembersFiled>
+      <Typography
+        variant="p3"
+        $style={css`
+          align-self: center;
+          color: ${color.neutral[300]};
+        `}
+      >
+        스터디원들이 참여할 때까지 기다려주세요.
+      </Typography>
+    </Layout>
+  );
+};
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const MembersFiled = styled.div`
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  justify-items: center;
+  align-items: center;
+  gap: 30px;
+
+  width: 100%;
+  height: 100%;
+  padding: 50px 60px;
+
+  border-radius: 7px;
+  border: 1px solid ${color.neutral[200]};
+`;
+
+export default StudyWaitingMembers;
diff --git a/frontend/src/components/waiting/StudyWaitingMembers/StudyWaitingMemebers.stories.tsx b/frontend/src/components/waiting/StudyWaitingMembers/StudyWaitingMemebers.stories.tsx
new file mode 100644
index 00000000..96875d06
--- /dev/null
+++ b/frontend/src/components/waiting/StudyWaitingMembers/StudyWaitingMemebers.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import StudyWaitingMembers from './StudyWaitingMembers';
+
+type Story = StoryObj<typeof StudyWaitingMembers>;
+
+/**
+ * `StudyWaitingMembers` 컴포넌트는 어떤 스터디원이 들어왔는지 보여주는 컴포넌트입니다.
+ */
+const meta: Meta<typeof StudyWaitingMembers> = {
+  title: 'WAITING/StudyWaitingMembers',
+  component: StudyWaitingMembers,
+};
+
+export default meta;
+
+/**
+ * `OneRow`는 멤버가 6명일때 한줄이되는 `StudyWaitingMembers` 스토리입니다.
+ */
+export const OneRow: Story = {
+  args: {
+    waitingMembers: ['노아', '룩소', '엽토', '테오', '마코', '히이로'],
+  },
+};
+
+/**
+ * `TwoRow`는 멤버가 12명일때 두줄이되는 `StudyWaitingMembers` 스토리입니다.
+ */
+export const TwoRow: Story = {
+  args: {
+    waitingMembers: ['노아', '룩소', '엽토', '테오', '마코', '히이로', '모디', '왼손', '솔라', '준', '구구', '공원'],
+  },
+};
diff --git a/frontend/src/constants/asset.ts b/frontend/src/constants/asset.ts
new file mode 100644
index 00000000..1da202d9
--- /dev/null
+++ b/frontend/src/constants/asset.ts
@@ -0,0 +1,6 @@
+export const FAVICON_PATH = {
+  planning: '/assets/favicon-blue.ico',
+  studying: '/assets/favicon-red.ico',
+  retrospect: '/assets/favicon-green.ico',
+  default: '/assets/favicon.ico',
+} as const;
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index b771dfbc..063dfe43 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -2,7 +2,7 @@ export const ROUTES_PATH = {
   landing: '/',
   login: '/login',
   auth: '/auth',
-  board: '/board',
+  progress: '/progress',
   record: '/record',
   create: '/create',
   preparation: '/preparation',
diff --git a/frontend/src/contexts/MemberInfoProvider.tsx b/frontend/src/contexts/MemberInfoProvider.tsx
index 65f60d93..6674d468 100644
--- a/frontend/src/contexts/MemberInfoProvider.tsx
+++ b/frontend/src/contexts/MemberInfoProvider.tsx
@@ -1,19 +1,20 @@
 import type { PropsWithChildren } from 'react';
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { createContext, useContext, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import useFetch from '@Hooks/api/useFetch';
 
 import { ROUTES_PATH } from '@Constants/routes';
 
-import { boolCheckCookie, deleteCookie } from '@Utils/cookie';
+import tokenStorage from '@Utils/tokenStorage';
+import url from '@Utils/url';
 
-import { requestAccessTokenRefresh, requestMemberInfo } from '@Apis/index';
+import { requestGetMemberInfo } from '@Apis/index';
 
 import type { MemberInfo } from '@Types/member';
 
-import { APIError, ResponseError } from '@Errors/index';
-
 type Actions = {
-  initMemberInfo: (memberInfo: MemberInfo) => void;
+  refetchMemberInfo: () => void;
   clearMemberInfo: () => void;
 };
 
@@ -22,91 +23,27 @@ const MemberInfoContext = createContext<MemberInfo | null>(null);
 const MemberInfoActionContext = createContext<Actions | null>(null);
 
 const MemberInfoProvider = ({ children }: PropsWithChildren) => {
-  const [memberInfo, setMemberInfo] = useState<MemberInfo | null>(null);
+  const { result, clearResult, refetch } = useFetch(() => requestGetMemberInfo(), {
+    errorBoundary: false,
+    enabled: url.getPathName() !== ROUTES_PATH.auth,
+  });
 
   const navigate = useNavigate();
-  const { pathname } = useLocation();
+
+  const memberInfo = result?.data || null;
 
   const actions: Actions = useMemo(
     () => ({
-      initMemberInfo: (memberInfo: MemberInfo) => {
-        setMemberInfo(memberInfo);
-      },
+      refetchMemberInfo: refetch,
       clearMemberInfo: () => {
-        navigate(ROUTES_PATH.login);
-        sessionStorage.removeItem('accessToken');
-        deleteCookie('refreshToken');
-        setMemberInfo(null);
+        tokenStorage.clear();
+        clearResult();
+        navigate(ROUTES_PATH.landing);
       },
     }),
-    [navigate],
+    [clearResult, navigate, refetch],
   );
 
-  const fetchAccessTokenRefresh = useCallback(async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        actions.clearMemberInfo();
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-      sessionStorage.setItem('accessToken', accessToken);
-    } catch (error) {
-      if (!(error instanceof Error)) throw error;
-
-      alert(error.message);
-    }
-  }, [actions]);
-
-  const fetchMemberInfo = useCallback(async () => {
-    const accessToken = sessionStorage.getItem('accessToken');
-    const hasRefreshToken = boolCheckCookie('refreshToken');
-
-    if (!accessToken && !hasRefreshToken) {
-      actions.clearMemberInfo();
-      return;
-    }
-
-    if (!accessToken) {
-      await fetchAccessTokenRefresh();
-      await fetchMemberInfo();
-
-      return;
-    }
-
-    try {
-      const memberInfo = await requestMemberInfo(accessToken);
-      actions.initMemberInfo(memberInfo);
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        await fetchAccessTokenRefresh();
-        await fetchMemberInfo();
-
-        return;
-      }
-      if (!(error instanceof ResponseError)) throw error;
-
-      alert(error.message);
-    }
-  }, [actions, fetchAccessTokenRefresh]);
-
-  useEffect(() => {
-    if (pathname === ROUTES_PATH.auth) return;
-
-    const accessToken = sessionStorage.getItem('accessToken');
-    const hasRefreshToken = boolCheckCookie('refreshToken');
-    if (pathname === ROUTES_PATH.login && (accessToken || hasRefreshToken)) {
-      navigate(ROUTES_PATH.landing);
-      return;
-    }
-
-    if (memberInfo) return;
-
-    fetchMemberInfo();
-  }, [navigate, pathname, fetchMemberInfo, memberInfo]);
-
   return (
     <MemberInfoContext.Provider value={memberInfo}>
       <MemberInfoActionContext.Provider value={actions}>{children}</MemberInfoActionContext.Provider>
@@ -116,11 +53,7 @@ const MemberInfoProvider = ({ children }: PropsWithChildren) => {
 
 export default MemberInfoProvider;
 
-export const useMemberInfo = () => {
-  const value = useContext(MemberInfoContext);
-
-  return { data: value };
-};
+export const useMemberInfo = () => useContext(MemberInfoContext);
 
 export const useMemberInfoAction = () => {
   const value = useContext(MemberInfoActionContext);
diff --git a/frontend/src/contexts/ModalProvider.tsx b/frontend/src/contexts/ModalProvider.tsx
index 0b0f3b9e..f351b3b7 100644
--- a/frontend/src/contexts/ModalProvider.tsx
+++ b/frontend/src/contexts/ModalProvider.tsx
@@ -4,14 +4,14 @@ import { createContext, useCallback, useContext, useState } from 'react';
 import Modal from '@Components/common/Modal/Modal';
 import Alert from '@Components/common/Modal/Template/Alert';
 
-type ModalContext = {
+export type ModalContextType = {
   isOpen: boolean;
   openModal: (modalContents: ReactNode) => void;
   openAlert: (message: string, onClose?: () => void) => void;
   closeModal: () => void;
 };
 
-const ModalContext = createContext<ModalContext | null>(null);
+export const ModalContext = createContext<ModalContextType | null>(null);
 
 const ModalProvider = ({ children }: PropsWithChildren) => {
   const [modalContents, setModalContents] = useState<ReactNode | null>(null);
diff --git a/frontend/src/contexts/StudyProgressProvider.tsx b/frontend/src/contexts/StudyProgressProvider.tsx
new file mode 100644
index 00000000..b1777a80
--- /dev/null
+++ b/frontend/src/contexts/StudyProgressProvider.tsx
@@ -0,0 +1,97 @@
+import { type PropsWithChildren, createContext, useState, useContext } from 'react';
+import { useParams } from 'react-router-dom';
+
+import useFetch from '@Hooks/api/useFetch';
+
+import { requestGetMemberProgress, requestGetOneStudyData, requestNextStep } from '@Apis/index';
+
+import type { ProgressInfo, StudyInfo } from '@Types/study';
+
+import { useMemberInfo } from './MemberInfoProvider';
+
+type StudyProgressAction = {
+  onNextStep: () => Promise<void>;
+};
+
+const StudyInfoContext = createContext<StudyInfo | null>(null);
+const ProgressInfoContext = createContext<ProgressInfo | null>(null);
+const StudyProgressActionContext = createContext<StudyProgressAction | null>(null);
+
+const StudyProgressProvider = ({ children }: PropsWithChildren) => {
+  const { studyId } = useParams();
+  if (!studyId) throw new Error('정상적인 경로로 접근해주세요.');
+
+  const memberInfo = useMemberInfo();
+  const [progressInfo, setProgressInfo] = useState<ProgressInfo | null>(null);
+
+  const { result: studyInfo } = useFetch(() => requestGetOneStudyData(studyId));
+  useFetch(() => requestGetMemberProgress(studyId, memberInfo!.memberId), {
+    onSuccess: setProgressInfo,
+  });
+
+  const actions = {
+    onNextStep: async () => {
+      if (studyInfo === null || progressInfo === null) return;
+
+      await requestNextStep(studyInfo.studyId, progressInfo.progressId);
+
+      if (progressInfo.step === 'planning') {
+        setProgressInfo({ ...progressInfo, step: 'studying' });
+        return;
+      }
+      if (progressInfo.step === 'studying') {
+        setProgressInfo({ ...progressInfo, step: 'retrospect' });
+        return;
+      }
+      if (progressInfo.step === 'retrospect') {
+        setProgressInfo({
+          ...progressInfo,
+          currentCycle: progressInfo.currentCycle + 1,
+          step: 'planning',
+        });
+      }
+    },
+  };
+
+  if (!studyInfo || !progressInfo) return;
+
+  return (
+    <StudyProgressActionContext.Provider value={actions}>
+      <StudyInfoContext.Provider value={studyInfo}>
+        <ProgressInfoContext.Provider value={progressInfo}>{children}</ProgressInfoContext.Provider>
+      </StudyInfoContext.Provider>
+    </StudyProgressActionContext.Provider>
+  );
+};
+
+export default StudyProgressProvider;
+
+export const useStudyInfo = () => {
+  const studyInfo = useContext(StudyInfoContext);
+
+  if (studyInfo === null) {
+    throw new Error('스터디 정보를 불러오는 중 문제가 발생했습니다.');
+  }
+
+  return studyInfo;
+};
+
+export const useProgressInfo = () => {
+  const progressInfo = useContext(ProgressInfoContext);
+
+  if (progressInfo === null) {
+    throw new Error('스터디 정보를 불러오는 중 문제가 발생했습니다.');
+  }
+
+  return progressInfo;
+};
+
+export const useStudyProgressAction = () => {
+  const studyProgressAction = useContext(StudyProgressActionContext);
+
+  if (studyProgressAction === null) {
+    throw new Error('스터디 정보를 불러오는 중 문제가 발생했습니다.');
+  }
+
+  return studyProgressAction;
+};
diff --git a/frontend/src/errors/index.ts b/frontend/src/errors/index.ts
index 4b90a6fd..774972c0 100644
--- a/frontend/src/errors/index.ts
+++ b/frontend/src/errors/index.ts
@@ -1,23 +1,22 @@
-export class ResponseError extends Error {
-  constructor(message?: string) {
-    super(message || '서버 요청에 문제가 발생했습니다. 잠시 후에 다시 시도해주세요.');
-    this.name = 'Response Error';
-  }
-}
-
-export class OfflineError extends Error {
-  constructor(message?: string) {
-    super(message || '인터넷 연결이 불안정 합니다. 네트워크 상태를 확인해주세요.');
-    this.name = 'Offline Error';
-  }
-}
-
-export class APIError extends Error {
+export class ApiError extends Error {
   code: number;
 
-  constructor(message: string, code: number) {
+  config: RequestInit;
+
+  constructor(message: string, code: number, config: RequestInit) {
     super(message);
     this.name = 'API Error';
     this.code = code;
+    this.config = config;
+  }
+}
+
+export class UnknownApiError extends Error {
+  config: RequestInit;
+
+  constructor(config: RequestInit) {
+    super('서버 요청에 문제가 발생했습니다. 잠시 후에 다시 시도해주세요.');
+    this.name = 'Unknown API Error';
+    this.config = config;
   }
 }
diff --git a/frontend/src/fonts/Pretendard1.otf b/frontend/src/fonts/Pretendard1.otf
deleted file mode 100644
index 409558cd..00000000
Binary files a/frontend/src/fonts/Pretendard1.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard2.otf b/frontend/src/fonts/Pretendard2.otf
deleted file mode 100644
index ad7dbef7..00000000
Binary files a/frontend/src/fonts/Pretendard2.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard3.otf b/frontend/src/fonts/Pretendard3.otf
deleted file mode 100644
index b29ee0d8..00000000
Binary files a/frontend/src/fonts/Pretendard3.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard4.otf b/frontend/src/fonts/Pretendard4.otf
deleted file mode 100644
index 858cdd30..00000000
Binary files a/frontend/src/fonts/Pretendard4.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard5.otf b/frontend/src/fonts/Pretendard5.otf
deleted file mode 100644
index ff907c42..00000000
Binary files a/frontend/src/fonts/Pretendard5.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard6.otf b/frontend/src/fonts/Pretendard6.otf
deleted file mode 100644
index fe81db7d..00000000
Binary files a/frontend/src/fonts/Pretendard6.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard7.otf b/frontend/src/fonts/Pretendard7.otf
deleted file mode 100644
index e6d6ce88..00000000
Binary files a/frontend/src/fonts/Pretendard7.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard8.otf b/frontend/src/fonts/Pretendard8.otf
deleted file mode 100644
index 07296ec6..00000000
Binary files a/frontend/src/fonts/Pretendard8.otf and /dev/null differ
diff --git a/frontend/src/fonts/Pretendard9.otf b/frontend/src/fonts/Pretendard9.otf
deleted file mode 100644
index 8429a921..00000000
Binary files a/frontend/src/fonts/Pretendard9.otf and /dev/null differ
diff --git a/frontend/src/fonts/font.css b/frontend/src/fonts/font.css
deleted file mode 100644
index 6f0e63cf..00000000
--- a/frontend/src/fonts/font.css
+++ /dev/null
@@ -1,62 +0,0 @@
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 100;
-  src: url('./Pretendard1.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 200;
-  src: url('./Pretendard2.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 300;
-  src: url('./Pretendard3.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./Pretendard4.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 500;
-  src: url('./Pretendard5.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 600;
-  src: url('./Pretendard6.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 700;
-  src: url('./Pretendard7.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 800;
-  src: url('./Pretendard8.otf') format('woff');
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-weight: 900;
-  src: url('./Pretendard9.otf') format('woff');
-}
diff --git a/frontend/src/hooks/api/.gitkeep b/frontend/src/hooks/api/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/hooks/api/useFetch.ts b/frontend/src/hooks/api/useFetch.ts
new file mode 100644
index 00000000..0ce96e95
--- /dev/null
+++ b/frontend/src/hooks/api/useFetch.ts
@@ -0,0 +1,65 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback, useEffect, useState } from 'react';
+
+type Status = 'pending' | 'fulfilled' | 'error';
+
+type Options<T> = {
+  enabled?: boolean;
+  suspense?: boolean;
+  errorBoundary?: boolean;
+
+  onSuccess?: (result: T) => void;
+  onError?: (error: Error) => void;
+};
+
+const useFetch = <T>(
+  request: () => Promise<T>,
+  { enabled = true, suspense = true, errorBoundary = true, onSuccess, onError }: Options<T> = {},
+) => {
+  const [status, setStatus] = useState<Status>('pending');
+  const [promise, setPromise] = useState<Promise<void> | null>(null);
+  const [result, setResult] = useState<T | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  const resolvePromise = useCallback(
+    (result: T) => {
+      setStatus('fulfilled');
+      setResult(result);
+      onSuccess?.(result);
+    },
+    [onSuccess],
+  );
+
+  const rejectPromise = useCallback(
+    (error: Error) => {
+      setStatus('error');
+      setError(error);
+      onError?.(error);
+    },
+    [onError],
+  );
+
+  const fetch = useCallback(() => {
+    setStatus('pending');
+    setPromise(request().then(resolvePromise, rejectPromise));
+  }, []);
+
+  const clearResult = () => setResult(null);
+
+  useEffect(() => {
+    if (enabled) {
+      fetch();
+    }
+  }, [enabled, fetch]);
+
+  if (suspense && status === 'pending' && promise) {
+    throw promise;
+  }
+  if (errorBoundary && status === 'error') {
+    throw error;
+  }
+
+  return { result, isLoading: status === 'pending', error: error, clearResult, refetch: fetch };
+};
+
+export default useFetch;
diff --git a/frontend/src/hooks/api/useMutation.ts b/frontend/src/hooks/api/useMutation.ts
new file mode 100644
index 00000000..6cee3874
--- /dev/null
+++ b/frontend/src/hooks/api/useMutation.ts
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+type Options = {
+  errorBoundary?: boolean;
+
+  onSuccess?: <T>(result: T) => void;
+  onError?: (error: Error) => void;
+};
+
+const useMutation = <T>(request: () => Promise<T>, { errorBoundary = true, onSuccess, onError }: Options = {}) => {
+  const [result, setResult] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<unknown | null>(null);
+
+  const mutate = async () => {
+    setIsLoading(true);
+
+    try {
+      const result = await request();
+      setResult(result);
+      onSuccess?.(result);
+      return result;
+    } catch (reason) {
+      if (!(reason instanceof Error)) throw reason;
+      setError(reason);
+      onError?.(reason);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (errorBoundary && error) {
+      throw error;
+    }
+  }, [error, errorBoundary]);
+
+  return { mutate, result, isLoading, error };
+};
+
+export default useMutation;
diff --git a/frontend/src/hooks/board/usePlanningForm.ts b/frontend/src/hooks/board/usePlanningForm.ts
deleted file mode 100644
index 11d18b0d..00000000
--- a/frontend/src/hooks/board/usePlanningForm.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useState } from 'react';
-
-import useQuestionTextarea from '@Hooks/common/useQuestionTextarea';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestWritePlan } from '@Apis/index';
-
-import { APIError } from '@Errors/index';
-
-const usePlanningForm = (studyId: string, progressId: string, onClickSubmit: () => Promise<void>) => {
-  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-
-  const questionTextareaProps = {
-    toDo: useQuestionTextarea({
-      minLength: 10,
-      maxLength: 500,
-      required: true,
-    }),
-    completionCondition: useQuestionTextarea({
-      minLength: 10,
-      maxLength: 500,
-      required: true,
-    }),
-    expectedProbability: useQuestionTextarea({
-      maxLength: 500,
-    }),
-    expectedDifficulty: useQuestionTextarea({
-      maxLength: 500,
-    }),
-    whatCanYouDo: useQuestionTextarea({
-      maxLength: 500,
-    }),
-  } as const;
-
-  const isInvalidForm = !!(
-    questionTextareaProps.toDo.errorMessage ||
-    questionTextareaProps.completionCondition.errorMessage ||
-    questionTextareaProps.expectedDifficulty.errorMessage ||
-    questionTextareaProps.expectedProbability.errorMessage ||
-    questionTextareaProps.whatCanYouDo.errorMessage
-  );
-
-  const refreshAccessToken = async () => {
-    if (!boolCheckCookie('refreshToken')) {
-      throw new Error('리프레시 토큰이 존재하지 않습니다. 다시 로그인 해주세요.');
-    }
-
-    const { accessToken } = await requestAccessTokenRefresh();
-    sessionStorage.setItem('accessToken', accessToken);
-  };
-
-  const submitForm = async () => {
-    setIsSubmitLoading(true);
-
-    const accessToken = sessionStorage.getItem('accessToken');
-
-    if (!accessToken) {
-      throw new Error('엑세스 토큰이 존재하지 않습니다. 다시 로그인 해주세요.');
-    }
-
-    try {
-      await requestWritePlan(accessToken, studyId, progressId, {
-        toDo: questionTextareaProps.toDo.value,
-        completionCondition: questionTextareaProps.completionCondition.value,
-        expectedProbability: questionTextareaProps.expectedProbability.value,
-        expectedDifficulty: questionTextareaProps.expectedDifficulty.value,
-        whatCanYouDo: questionTextareaProps.whatCanYouDo.value,
-      });
-      await onClickSubmit();
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        await refreshAccessToken();
-        await submitForm();
-        return;
-      }
-
-      throw error;
-    } finally {
-      setIsSubmitLoading(false);
-    }
-  };
-
-  return { questionTextareaProps, isSubmitLoading, isInvalidForm, submitForm };
-};
-
-export default usePlanningForm;
diff --git a/frontend/src/hooks/board/useRetrospectForm.ts b/frontend/src/hooks/board/useRetrospectForm.ts
deleted file mode 100644
index c52b5321..00000000
--- a/frontend/src/hooks/board/useRetrospectForm.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useState } from 'react';
-
-import useQuestionTextarea from '@Hooks/common/useQuestionTextarea';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestWriteRetrospect } from '@Apis/index';
-
-import { APIError } from '@Errors/index';
-
-const useRetrospectForm = (studyId: string, progressId: string, onClickSubmit: () => Promise<void>) => {
-  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-
-  const questionTextareaProps = {
-    doneAsExpected: useQuestionTextarea({
-      minLength: 10,
-      maxLength: 500,
-      required: true,
-    }),
-    experiencedDifficulty: useQuestionTextarea({
-      maxLength: 500,
-    }),
-    lesson: useQuestionTextarea({
-      maxLength: 500,
-    }),
-  } as const;
-
-  const isInvalidForm = !!(
-    questionTextareaProps.doneAsExpected.errorMessage ||
-    questionTextareaProps.experiencedDifficulty.errorMessage ||
-    questionTextareaProps.lesson.errorMessage
-  );
-
-  const refreshAccessToken = async () => {
-    if (!boolCheckCookie('refreshToken')) {
-      throw new Error('리프레시 토큰이 존재하지 않습니다. 다시 로그인 해주세요.');
-    }
-
-    const { accessToken } = await requestAccessTokenRefresh();
-    sessionStorage.setItem('accessToken', accessToken);
-  };
-
-  const submitForm = async () => {
-    setIsSubmitLoading(true);
-
-    const accessToken = sessionStorage.getItem('accessToken');
-
-    if (!accessToken) {
-      throw new Error('엑세스 토큰이 존재하지 않습니다. 다시 로그인 해주세요.');
-    }
-
-    try {
-      await requestWriteRetrospect(accessToken, studyId, progressId, {
-        doneAsExpected: questionTextareaProps.doneAsExpected.value,
-        experiencedDifficulty: questionTextareaProps.experiencedDifficulty.value,
-        lesson: questionTextareaProps.lesson.value,
-      });
-      await onClickSubmit();
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        await refreshAccessToken();
-        await submitForm();
-        return;
-      }
-
-      throw error;
-    } finally {
-      setIsSubmitLoading(false);
-    }
-  };
-
-  return { questionTextareaProps, isInvalidForm, isSubmitLoading, submitForm };
-};
-
-export default useRetrospectForm;
diff --git a/frontend/src/hooks/board/useStudyBoard.ts b/frontend/src/hooks/board/useStudyBoard.ts
deleted file mode 100644
index 70d48715..00000000
--- a/frontend/src/hooks/board/useStudyBoard.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { useMemberInfo } from '@Contexts/MemberInfoProvider';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import {
-  requestAccessTokenRefresh,
-  requestGetMemberProgress,
-  requestGetOneStudyData,
-  requestNextStep,
-} from '@Apis/index';
-
-import type { ProgressInfo, StudyInfo } from '@Types/study';
-
-import { APIError } from '@Errors/index';
-
-const useStudyBoard = () => {
-  const [studyInfo, setStudyInfo] = useState<StudyInfo | null>(null);
-  const [progressInfo, setProgressInfo] = useState<ProgressInfo | null>(null);
-  const [error, setError] = useState<Error>();
-
-  const { studyId } = useParams();
-  const { data: memberInfo } = useMemberInfo();
-
-  const refreshAccessToken = async () => {
-    if (!boolCheckCookie('refreshToken')) {
-      setError(new Error('리프레시 토큰이 존재하지 않습니다. 다시 로그인 해주세요.'));
-      return;
-    }
-
-    const { accessToken } = await requestAccessTokenRefresh();
-    sessionStorage.setItem('accessToken', accessToken);
-  };
-
-  const fetchStudyMetaData = useCallback(async () => {
-    if (!studyId) {
-      setError(new Error('정상적인 경로로 접근해주세요.'));
-      return;
-    }
-
-    if (!memberInfo) {
-      return;
-    }
-
-    const accessToken = sessionStorage.getItem('accessToken');
-
-    if (!accessToken) {
-      setError(new Error('엑세스 토큰이 존재하지 않습니다. 다시 로그인 해주세요.'));
-      return;
-    }
-
-    try {
-      const fetchedStudyInfoData = await requestGetOneStudyData(accessToken, studyId);
-      const fetchedProgressInfoData = await requestGetMemberProgress(accessToken, studyId, memberInfo.memberId);
-
-      setStudyInfo(fetchedStudyInfoData);
-      setProgressInfo(fetchedProgressInfoData.progresses[0]);
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        await refreshAccessToken();
-        await fetchStudyMetaData();
-        return;
-      }
-
-      throw error;
-    }
-  }, [memberInfo, studyId]);
-
-  useEffect(() => {
-    try {
-      fetchStudyMetaData();
-    } catch (error) {
-      if (!(error instanceof Error)) throw error;
-      setError(new Error('유저 정보를 불러오는 중 문제가 발생했습니다.'));
-    }
-  }, [fetchStudyMetaData]);
-
-  const changeNextStep = async () => {
-    if (studyInfo === null || progressInfo === null) return;
-
-    const accessToken = sessionStorage.getItem('accessToken');
-
-    if (!accessToken) {
-      setError(new Error('엑세스 토큰이 존재하지 않습니다. 다시 로그인 해주세요.'));
-      return;
-    }
-
-    try {
-      await requestNextStep(accessToken, studyInfo.studyId, progressInfo.progressId);
-
-      switch (progressInfo.step) {
-        case 'planning':
-          setProgressInfo({ ...progressInfo, step: 'studying' });
-          break;
-        case 'studying':
-          setProgressInfo({ ...progressInfo, step: 'retrospect' });
-          break;
-        case 'retrospect':
-          setProgressInfo({
-            ...progressInfo,
-            currentCycle: progressInfo.currentCycle + 1,
-            step: 'planning',
-          });
-          break;
-      }
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        await refreshAccessToken();
-        await changeNextStep();
-        return;
-      }
-
-      throw error;
-    }
-  };
-
-  return { studyInfo, progressInfo, error, changeNextStep };
-};
-
-export default useStudyBoard;
diff --git a/frontend/src/hooks/board/useStudyingForm.ts b/frontend/src/hooks/board/useStudyingForm.ts
deleted file mode 100644
index 032bc1f6..00000000
--- a/frontend/src/hooks/board/useStudyingForm.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestGetMemberContents } from '@Apis/index';
-
-import type { PlanList } from '@Types/study';
-
-import { APIError } from '@Errors/index';
-
-const useStudyingForm = (studyId: string, progressId: string, cycle: number, onClickSubmit: () => Promise<void>) => {
-  const [planList, setPlanList] = useState<PlanList | null>(null);
-  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-  const [error, setError] = useState<Error>();
-
-  const refreshAccessToken = async () => {
-    if (!boolCheckCookie('refreshToken')) {
-      throw new Error('리프레시 토큰이 존재하지 않습니다. 다시 로그인 해주세요.');
-    }
-
-    const { accessToken } = await requestAccessTokenRefresh();
-    sessionStorage.setItem('accessToken', accessToken);
-  };
-
-  const fetchPlanList = useCallback(async () => {
-    const accessToken = sessionStorage.getItem('accessToken');
-
-    if (!accessToken) {
-      setError(new Error('엑세스 토큰이 존재하지 않습니다. 다시 로그인 해주세요.'));
-      return;
-    }
-
-    try {
-      const fetchedData = await requestGetMemberContents(accessToken, studyId, progressId, cycle);
-      setPlanList(fetchedData.content[0].plan);
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        await refreshAccessToken();
-        await fetchPlanList();
-        return;
-      }
-
-      throw error;
-    }
-  }, [cycle, progressId, studyId]);
-
-  const submitForm = async () => {
-    setIsSubmitLoading(true);
-    try {
-      await onClickSubmit();
-    } catch (error) {
-      if (!(error instanceof Error)) throw error;
-
-      setError(error);
-    } finally {
-      setIsSubmitLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    try {
-      fetchPlanList();
-    } catch (error) {
-      if (!(error instanceof Error)) throw error;
-      setError(new Error('학습 목표를 불러오던 중 문제가 발생했습니다.'));
-    }
-  }, [progressId, studyId, cycle, fetchPlanList]);
-
-  return { planList, isSubmitLoading, error, submitForm };
-};
-
-export default useStudyingForm;
diff --git a/frontend/src/hooks/board/useTimer.ts b/frontend/src/hooks/board/useTimer.ts
deleted file mode 100644
index a0b0f37c..00000000
--- a/frontend/src/hooks/board/useTimer.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import type { Step } from '@Types/study';
-
-const PLANNING_MINUTES = 10;
-const SECONDS_PER_MINUTE = 60;
-
-const useTimer = (studyMinutes: number, step: Step) => {
-  const timerId = useRef<NodeJS.Timer | null>(null);
-  const startTime = useRef(Date.now());
-  const initTime = useRef(PLANNING_MINUTES * SECONDS_PER_MINUTE);
-
-  const [leftTime, setLeftTime] = useState(initTime.current);
-  const [isTicking, setIsTicking] = useState(false);
-
-  const clear = () => {
-    if (timerId.current === null) return;
-
-    clearInterval(timerId.current);
-    timerId.current = null;
-  };
-
-  const tick = useCallback(() => {
-    if (leftTime > 0) {
-      const timeDifference = Math.floor((Date.now() - startTime.current) / 1000);
-
-      const leftTime = initTime.current - timeDifference;
-
-      setLeftTime(leftTime > 0 ? leftTime : 0);
-    }
-    if (leftTime <= 1) {
-      setIsTicking(false);
-      clear();
-    }
-  }, [leftTime]);
-
-  useEffect(() => {
-    if (isTicking) {
-      timerId.current = setInterval(tick, 1000);
-    }
-
-    return clear;
-  }, [tick, isTicking]);
-
-  useEffect(() => {
-    setIsTicking(false);
-
-    if (step === 'planning' || step === 'retrospect') {
-      initTime.current = PLANNING_MINUTES * SECONDS_PER_MINUTE;
-      setLeftTime(PLANNING_MINUTES * SECONDS_PER_MINUTE);
-      return;
-    }
-
-    initTime.current = studyMinutes * SECONDS_PER_MINUTE;
-    setLeftTime(studyMinutes * SECONDS_PER_MINUTE);
-  }, [studyMinutes, step]);
-
-  const start = () => {
-    startTime.current = Date.now();
-    setIsTicking(true);
-  };
-
-  const stop = () => {
-    initTime.current = leftTime;
-    setIsTicking(false);
-  };
-
-  return {
-    start,
-    stop,
-    leftTime,
-    isTicking,
-  };
-};
-
-export default useTimer;
diff --git a/frontend/src/hooks/common/useTimer.ts b/frontend/src/hooks/common/useTimer.ts
new file mode 100644
index 00000000..a750420b
--- /dev/null
+++ b/frontend/src/hooks/common/useTimer.ts
@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+type Options = {
+  onStart?: () => void;
+  onStop?: () => void;
+  onComplete?: () => void;
+};
+
+const useTimer = (initSeconds: number, { onStart, onStop, onComplete }: Options = {}) => {
+  const timerId = useRef<NodeJS.Timer | null>(null);
+  const startTime = useRef(Date.now());
+  const seconds = useRef(initSeconds);
+
+  const [leftSeconds, setLeftSeconds] = useState(seconds.current);
+  const [isTicking, setIsTicking] = useState(false);
+
+  const clear = () => {
+    if (timerId.current === null) return;
+
+    clearInterval(timerId.current);
+    timerId.current = null;
+  };
+
+  const tick = useCallback(() => {
+    if (leftSeconds > 0) {
+      const timeDifference = Math.floor((Date.now() - startTime.current) / 1000);
+      const leftSeconds = seconds.current - timeDifference;
+
+      setLeftSeconds(leftSeconds > 0 ? leftSeconds : 0);
+    }
+    if (leftSeconds <= 1) {
+      setIsTicking(false);
+      clear();
+      onComplete?.();
+    }
+  }, [leftSeconds, onComplete]);
+
+  useEffect(() => {
+    if (isTicking) {
+      timerId.current = setInterval(tick, 1000);
+    }
+
+    return clear;
+  }, [tick, isTicking]);
+
+  const start = useCallback(() => {
+    startTime.current = Date.now();
+    setIsTicking(true);
+    onStart?.();
+  }, [onStart]);
+
+  const stop = useCallback(() => {
+    seconds.current = leftSeconds;
+    setIsTicking(false);
+    onStop?.();
+  }, [leftSeconds, onStop]);
+
+  const reset = useCallback((newSeconds?: number) => {
+    if (newSeconds) {
+      seconds.current = newSeconds;
+    }
+
+    setIsTicking(false);
+    setLeftSeconds(seconds.current);
+  }, []);
+
+  return {
+    start,
+    stop,
+    reset,
+    leftSeconds,
+    isTicking,
+  };
+};
+
+export default useTimer;
diff --git a/frontend/src/hooks/create/useCreateStudy.ts b/frontend/src/hooks/create/useCreateStudy.ts
deleted file mode 100644
index 83808515..00000000
--- a/frontend/src/hooks/create/useCreateStudy.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestCreateStudy } from '@Apis/index';
-
-import type { StudyTimePerCycleOptions, TotalCycleOptions } from '@Types/study';
-
-import { APIError, ResponseError } from '@Errors/index';
-
-const useCreateStudy = (errorHandler: (error: Error) => void) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const navigate = useNavigate();
-
-  const getAccessTokenRefresh = async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  };
-
-  const newRequestCreateStudy = async (
-    studyName: string,
-    totalCycle: TotalCycleOptions,
-    timePerCycle: StudyTimePerCycleOptions,
-    accessToken: string,
-  ) => {
-    try {
-      return await requestCreateStudy(studyName, totalCycle, timePerCycle, accessToken);
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  };
-
-  const createStudy = async (
-    studyName: string,
-    totalCycle: TotalCycleOptions,
-    timePerCycle: StudyTimePerCycleOptions,
-  ) => {
-    setIsLoading(true);
-
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        errorHandler(error);
-        navigate(`${ROUTES_PATH.login}`);
-        return;
-      }
-
-      return await requestCreateStudy(studyName, totalCycle, timePerCycle, accessToken);
-    } catch (error) {
-      if (error instanceof APIError) {
-        if (error.code === 1403) {
-          const accessToken = await getAccessTokenRefresh();
-
-          if (accessToken) return await newRequestCreateStudy(studyName, totalCycle, timePerCycle, accessToken);
-        }
-
-        return errorHandler(error);
-      }
-      if (error instanceof ResponseError) return errorHandler(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return { createStudy, isLoading };
-};
-
-export default useCreateStudy;
diff --git a/frontend/src/hooks/participation/useCheckProgresses.ts b/frontend/src/hooks/participation/useCheckProgresses.ts
deleted file mode 100644
index d74ea4f5..00000000
--- a/frontend/src/hooks/participation/useCheckProgresses.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { useMemberInfo } from '@Contexts/MemberInfoProvider';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestCheckProgresses, requestDeleteProgress } from '@Apis/index';
-
-import { APIError, ResponseError } from '../../errors';
-
-const useCheckProgresses = (isHost: boolean, errorHandler: (error: Error) => void) => {
-  const { studyId } = useParams();
-
-  const navigate = useNavigate();
-
-  const { data: memberInfo } = useMemberInfo();
-
-  const [nickname, setNickname] = useState<string | null>(null);
-
-  const [progressId, setProgressId] = useState<number>(0);
-
-  const restart = async () => {
-    await deleteProgress();
-    setNickname('');
-    return;
-  };
-
-  if (!studyId) {
-    const error = new Error('잘못된 접근입니다.');
-    errorHandler(error);
-    throw error;
-  }
-
-  const getAccessTokenRefresh = useCallback(async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  }, [errorHandler, navigate]);
-
-  const newRequestCheckProgresses = useCallback(
-    async (studyId: string, memberId: string, accessToken: string) => {
-      try {
-        return await requestCheckProgresses(studyId, memberId, accessToken);
-      } catch (error) {
-        if (error instanceof APIError) {
-          if (error.code === 1201) return setNickname('');
-
-          errorHandler(error);
-          navigate(ROUTES_PATH.participation);
-          return;
-        }
-
-        if (error instanceof ResponseError) {
-          errorHandler(error);
-          navigate(ROUTES_PATH.participation);
-          return;
-        }
-      }
-    },
-    [errorHandler, navigate],
-  );
-
-  const checkProgresses = useCallback(async () => {
-    if (isHost || !memberInfo) {
-      return setNickname('');
-    }
-
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        errorHandler(error);
-        navigate(`${ROUTES_PATH.login}`);
-        return;
-      }
-
-      const data = await requestCheckProgresses(studyId, memberInfo.memberId, accessToken);
-
-      setNickname(data.progresses[0].nickname);
-      setProgressId(data.progresses[0].progressId);
-    } catch (error) {
-      if (error instanceof APIError) {
-        if (error.code === 1403) {
-          const accessToken = await getAccessTokenRefresh();
-
-          if (accessToken) return await newRequestCheckProgresses(studyId, memberInfo.memberId, accessToken);
-        }
-        if (error.code === 1201) return setNickname('');
-
-        errorHandler(error);
-        navigate(ROUTES_PATH.participation);
-        return;
-      }
-
-      if (error instanceof ResponseError) {
-        errorHandler(error);
-        navigate(ROUTES_PATH.participation);
-        return;
-      }
-    }
-  }, [studyId, isHost, memberInfo, errorHandler, navigate, getAccessTokenRefresh, newRequestCheckProgresses]);
-
-  const newRequestDeleteProgress = async (studyId: string, progressId: number, accessToken: string) => {
-    try {
-      await requestDeleteProgress(studyId, progressId, accessToken);
-    } catch (error) {
-      if (error instanceof APIError || error instanceof ResponseError) {
-        errorHandler(error);
-        navigate(ROUTES_PATH.participation);
-        return;
-      }
-    }
-  };
-
-  const deleteProgress = async () => {
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        errorHandler(error);
-        navigate(`${ROUTES_PATH.login}`);
-        return;
-      }
-
-      await requestDeleteProgress(studyId, progressId, accessToken);
-    } catch (error) {
-      if (error instanceof APIError) {
-        if (error.code === 1403) {
-          const accessToken = await getAccessTokenRefresh();
-
-          if (accessToken) return newRequestDeleteProgress(studyId, progressId, accessToken);
-        }
-        errorHandler(error);
-        navigate(ROUTES_PATH.participation);
-        return;
-      }
-
-      if (error instanceof ResponseError) {
-        errorHandler(error);
-        navigate(ROUTES_PATH.participation);
-        return;
-      }
-    }
-  };
-
-  useEffect(() => {
-    checkProgresses();
-  }, [checkProgresses, isHost, memberInfo, errorHandler]);
-
-  return { studyId, nickname, restart };
-};
-
-export default useCheckProgresses;
diff --git a/frontend/src/hooks/participation/useParticipationCode.ts b/frontend/src/hooks/participation/useParticipationCode.ts
deleted file mode 100644
index d6fec59c..00000000
--- a/frontend/src/hooks/participation/useParticipationCode.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestAuthenticateParticipationCode } from '@Apis/index';
-
-import { APIError, ResponseError } from '@Errors/index';
-
-const useParticipationCode = (errorHandler: (error: Error) => void) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const navigate = useNavigate();
-
-  const getAccessTokenRefresh = async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  };
-
-  const newRequestAuthenticateParticipationCode = async (participantCode: string, accessToken: string) => {
-    try {
-      return await requestAuthenticateParticipationCode(participantCode, accessToken);
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  };
-
-  const authenticateParticipationCode = async (participantCode: string) => {
-    setIsLoading(true);
-
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        errorHandler(error);
-        navigate(`${ROUTES_PATH.login}`);
-        return;
-      }
-
-      return await requestAuthenticateParticipationCode(participantCode, accessToken);
-    } catch (error) {
-      if (error instanceof APIError) {
-        if (error.code === 1403) {
-          const accessToken = await getAccessTokenRefresh();
-
-          if (accessToken) return await newRequestAuthenticateParticipationCode(participantCode, accessToken);
-        }
-
-        return errorHandler(error);
-      }
-
-      if (error instanceof ResponseError) return errorHandler(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return { authenticateParticipationCode, isLoading };
-};
-
-export default useParticipationCode;
diff --git a/frontend/src/hooks/participation/useRegisterProgress.ts b/frontend/src/hooks/participation/useRegisterProgress.ts
deleted file mode 100644
index 9c61c6bb..00000000
--- a/frontend/src/hooks/participation/useRegisterProgress.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { useMemberInfo } from '@Contexts/MemberInfoProvider';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestRegisterProgress } from '@Apis/index';
-
-import { APIError, ResponseError } from '@Errors/index';
-
-const useRegisterProgress = (errorHandler: (error: Error) => void) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const { data } = useMemberInfo();
-
-  const navigate = useNavigate();
-
-  const getAccessTokenRefresh = async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  };
-
-  const newRequestRegisterProgress = async (
-    nickname: string,
-    studyId: string,
-    memberId: string,
-    accessToken: string,
-  ) => {
-    try {
-      await requestRegisterProgress(nickname, studyId, memberId, accessToken);
-    } catch (error) {
-      if (error instanceof ResponseError || error instanceof APIError) return errorHandler(error);
-    }
-  };
-
-  const registerProgress = async (nickname: string, studyId: string) => {
-    setIsLoading(true);
-
-    if (!data) return;
-
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        errorHandler(error);
-        navigate(`${ROUTES_PATH.login}`);
-        return;
-      }
-
-      await requestRegisterProgress(nickname, studyId, data.memberId, accessToken);
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        const accessToken = await getAccessTokenRefresh();
-
-        if (accessToken) return await newRequestRegisterProgress(nickname, studyId, data.memberId, accessToken);
-      }
-
-      if (error instanceof ResponseError) return errorHandler(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return { isLoading, registerProgress };
-};
-
-export default useRegisterProgress;
diff --git a/frontend/src/hooks/record/useMemberRecord.ts b/frontend/src/hooks/record/useMemberRecord.ts
deleted file mode 100644
index 1a405202..00000000
--- a/frontend/src/hooks/record/useMemberRecord.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { useMemberInfo } from '@Contexts/MemberInfoProvider';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestGetMemberStudyListData } from '@Apis/index';
-
-import type { StudyBasicInfo } from '@Types/study';
-
-import { APIError, ResponseError } from '@Errors/index';
-
-const useMemberRecord = (options: { errorHandler: (error: Error) => void }) => {
-  const navigate = useNavigate();
-
-  const { data } = useMemberInfo();
-  const [studyList, setStudyList] = useState<StudyBasicInfo[] | null>(null);
-  const isLoading = !studyList;
-
-  const getAccessTokenRefresh = useCallback(async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof Error) return options?.errorHandler(error);
-    }
-  }, [navigate, options]);
-
-  const fetchMemberRecord = useCallback(async () => {
-    if (!data) return;
-
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        options?.errorHandler(error);
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { studies } = await requestGetMemberStudyListData(data.memberId, accessToken);
-
-      setStudyList(studies);
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        const accessToken = await getAccessTokenRefresh();
-
-        if (!accessToken) return;
-
-        const { studies } = await requestGetMemberStudyListData(data.memberId, accessToken);
-
-        setStudyList(studies);
-      }
-
-      if (error instanceof ResponseError) return options?.errorHandler(error);
-    }
-  }, [data, navigate]);
-
-  useEffect(() => {
-    fetchMemberRecord();
-  }, [fetchMemberRecord]);
-
-  return { name: data?.name, studyList, loginType: data?.loginType, isLoading };
-};
-
-export default useMemberRecord;
diff --git a/frontend/src/hooks/record/useProgressRecord.ts b/frontend/src/hooks/record/useProgressRecord.ts
deleted file mode 100644
index d456c2e6..00000000
--- a/frontend/src/hooks/record/useProgressRecord.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestGetMemberRecordContents } from '@Apis/index';
-
-import type { MemberRecordContent } from '@Types/study';
-
-import { APIError, ResponseError } from '@Errors/index';
-
-const useProgressRecord = (studyId: string, progressId: string, options?: { errorHandler: (error: Error) => void }) => {
-  const navigate = useNavigate();
-
-  const [memberRecordContents, setMemberRecordContents] = useState<MemberRecordContent[] | null>(null);
-
-  const isLoading = !memberRecordContents;
-
-  const getAccessTokenRefresh = async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof Error) return options?.errorHandler(error);
-    }
-  };
-
-  const fetchMemberRecordData = useCallback(async () => {
-    try {
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        options?.errorHandler(error);
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { content } = await requestGetMemberRecordContents(studyId, progressId, accessToken);
-
-      setMemberRecordContents(content);
-    } catch (error) {
-      if (error instanceof APIError && error.code === 1403) {
-        const accessToken = await getAccessTokenRefresh();
-
-        if (accessToken) {
-          const { content } = await requestGetMemberRecordContents(studyId, progressId, accessToken);
-
-          setMemberRecordContents(content);
-
-          return;
-        }
-
-        return;
-      }
-
-      if (error instanceof ResponseError) return options?.errorHandler(error);
-    }
-  }, [progressId, studyId]);
-
-  useEffect(() => {
-    fetchMemberRecordData();
-  }, [fetchMemberRecordData]);
-
-  return { memberRecordContents, isLoading };
-};
-
-export default useProgressRecord;
diff --git a/frontend/src/hooks/record/useStudyRecord.ts b/frontend/src/hooks/record/useStudyRecord.ts
deleted file mode 100644
index 15785183..00000000
--- a/frontend/src/hooks/record/useStudyRecord.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-import { boolCheckCookie } from '@Utils/cookie';
-
-import { requestAccessTokenRefresh, requestGetStudyData, requestGetStudyMembers } from '@Apis/index';
-
-import type { MemberProgress, StudyBasicInfo } from '@Types/study';
-
-import { APIError, ResponseError } from '@Errors/index';
-
-const useStudyRecord = (studyId: string, options?: { errorHandler: (error: Error) => void }) => {
-  const navigate = useNavigate();
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [studyBasicInfo, setStudyBasicInfo] = useState<StudyBasicInfo | null>(null);
-  const [memberProgresses, setMemberProgresses] = useState<MemberProgress[]>([]);
-
-  const setInitInfo = (
-    { studyId, name, timePerCycle, totalCycle, createdDateTime }: StudyBasicInfo,
-    members: MemberProgress[],
-  ) => {
-    setStudyBasicInfo({
-      studyId,
-      name,
-      timePerCycle,
-      totalCycle,
-      createdDateTime,
-    });
-    setMemberProgresses(members);
-  };
-
-  const getAccessTokenRefresh = async () => {
-    try {
-      const hasRefreshToken = boolCheckCookie('refreshToken');
-
-      if (!hasRefreshToken) {
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const { accessToken } = await requestAccessTokenRefresh();
-
-      sessionStorage.setItem('accessToken', accessToken);
-
-      return accessToken;
-    } catch (error) {
-      if (error instanceof Error) return options?.errorHandler(error);
-    }
-  };
-
-  const fetchStudyRecordData = useCallback(async () => {
-    try {
-      setIsLoading(true);
-
-      const accessToken = sessionStorage.getItem('accessToken');
-
-      if (!accessToken) {
-        const error = new Error('토큰이 없습니다. 다시 로그인 해주세요.');
-        options?.errorHandler(error);
-        navigate(ROUTES_PATH.login);
-        return;
-      }
-
-      const basicInfo = await requestGetStudyData(studyId, accessToken);
-      const { progresses } = await requestGetStudyMembers(studyId, accessToken);
-
-      setInitInfo(basicInfo, progresses);
-    } catch (error) {
-      if (error instanceof APIError) {
-        if (error.code === 1403) {
-          const accessToken = await getAccessTokenRefresh();
-
-          if (!accessToken) return;
-
-          const basicInfo = await requestGetStudyData(studyId, accessToken);
-          const { progresses } = await requestGetStudyMembers(studyId, accessToken);
-
-          setInitInfo(basicInfo, progresses);
-        }
-
-        if (error.code === 1500) {
-          navigate('/404');
-        }
-      }
-
-      if (error instanceof ResponseError) return options?.errorHandler(error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [studyId]);
-
-  useEffect(() => {
-    fetchStudyRecordData();
-  }, [fetchStudyRecordData]);
-
-  return { isLoading, studyBasicInfo, memberProgresses, refetchStudyRecordData: fetchStudyRecordData };
-};
-
-export default useStudyRecord;
diff --git a/frontend/src/mocks/handlers/authHandler.ts b/frontend/src/mocks/handlers/authHandler.ts
index a9382e1d..d910ee17 100644
--- a/frontend/src/mocks/handlers/authHandler.ts
+++ b/frontend/src/mocks/handlers/authHandler.ts
@@ -1,5 +1,7 @@
 import { rest } from 'msw';
 
+import { hasCookie } from '@Utils/cookie';
+
 const USER_MOCK = {
   memberId: '1',
   name: '맘모스',
@@ -53,6 +55,19 @@ export const authHandler = [
   }),
 
   rest.post('/api/auth/refresh', (req, res, ctx) => {
+    const hasRefreshToken = hasCookie('refreshToken');
+
+    if (!hasRefreshToken) {
+      return res(
+        ctx.status(401),
+        ctx.delay(100),
+        ctx.json({
+          message: '토큰이 없습니다.',
+          code: 1405,
+        }),
+      );
+    }
+
     const newAccessToken =
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaWF0IjoxMjM0NTY3fQ.NUiutjXo0mcIBU5fWxfjpBEvPxakFiBaUCg4THKAYpQ';
 
diff --git a/frontend/src/mocks/handlers/checkParticipantCodeHandlers.ts b/frontend/src/mocks/handlers/checkParticipantCodeHandlers.ts
index a18d318c..6b35c15c 100644
--- a/frontend/src/mocks/handlers/checkParticipantCodeHandlers.ts
+++ b/frontend/src/mocks/handlers/checkParticipantCodeHandlers.ts
@@ -13,6 +13,7 @@ export const checkParticipantCodeHandlers = [
 
     if (requestAuthToken === newAccessToken && testParticipantCode === participantCode)
       return res(
+        // 성공
         ctx.status(200),
         ctx.json({
           studies: [
@@ -25,6 +26,12 @@ export const checkParticipantCodeHandlers = [
             },
           ],
         }),
+        // 에러
+        // ctx.status(404),
+        // ctx.json({
+        //   message: '에러',
+        //   code: 1234,
+        // }),
         ctx.delay(1000),
       );
 
@@ -54,6 +61,7 @@ export const checkParticipantCodeHandlers = [
       );
 
     return res(
+      // 성공
       ctx.status(200),
       ctx.json({
         studies: [
@@ -66,6 +74,12 @@ export const checkParticipantCodeHandlers = [
           },
         ],
       }),
+      // 에러
+      // ctx.status(404),
+      // ctx.json({
+      //   message: '에러',
+      //   code: 1234,
+      // }),
       ctx.delay(1000),
     );
   }),
diff --git a/frontend/src/mocks/handlers/createStudyHandlers.ts b/frontend/src/mocks/handlers/createStudyHandlers.ts
index 2bebd00e..24c3d98b 100644
--- a/frontend/src/mocks/handlers/createStudyHandlers.ts
+++ b/frontend/src/mocks/handlers/createStudyHandlers.ts
@@ -12,11 +12,20 @@ export const createStudyHandlers = [
 
     if (requestAuthToken === newAccessToken)
       return res(
+        // 성공
         ctx.status(201),
         ctx.set({ 'Content-Type': 'application/json', Location: '/api/v2/studies/1' }),
         ctx.json({
           participantCode: '123456',
         }),
+
+        // 에러
+        // ctx.status(404),
+        // ctx.json({
+        //   code: 1201,
+        //   message: '에러',
+        // }),
+
         ctx.delay(1000),
       );
 
@@ -28,11 +37,20 @@ export const createStudyHandlers = [
       );
 
     return res(
+      // 성공
       ctx.status(201),
       ctx.set({ 'Content-Type': 'application/json', Location: '/api/v2/studies/1' }),
       ctx.json({
         participantCode: '123456',
       }),
+
+      // 에러
+      // ctx.status(404),
+      // ctx.json({
+      //   code: 1201,
+      //   message: '에러',
+      // }),
+
       ctx.delay(1000),
     );
   }),
diff --git a/frontend/src/mocks/handlers/index.ts b/frontend/src/mocks/handlers/index.ts
index 56180276..293e47a4 100644
--- a/frontend/src/mocks/handlers/index.ts
+++ b/frontend/src/mocks/handlers/index.ts
@@ -4,14 +4,12 @@ import { createStudyHandlers } from './createStudyHandlers';
 import { progressesHandlers } from './progressesHandlers';
 import { studyBoardHandlers } from './studyBoardHandler';
 import { studyRecordHandlers } from './studyRecordHandlers';
-import { studyStartHandlers } from './studyStartHandlers';
 
 export const handlers = [
-  ...studyBoardHandlers,
-  ...createStudyHandlers,
   ...studyRecordHandlers,
-  ...studyStartHandlers,
+  ...createStudyHandlers,
   ...checkParticipantCodeHandlers,
-  ...authHandler,
   ...progressesHandlers,
+  ...studyBoardHandlers,
+  ...authHandler,
 ];
diff --git a/frontend/src/mocks/handlers/progressesHandlers.ts b/frontend/src/mocks/handlers/progressesHandlers.ts
index 50f5636f..5c695de4 100644
--- a/frontend/src/mocks/handlers/progressesHandlers.ts
+++ b/frontend/src/mocks/handlers/progressesHandlers.ts
@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 export const progressesHandlers = [
-  rest.get('/api/studies/:studyId/progresses', (req, res, ctx) => {
+  rest.get('/api/temp/studies/:studyId/progresses', (req, res, ctx) => {
     const accessToken =
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaWF0IjoxNjkxNTY4NDI4LCJleHAiOjE2OTE1NzIwMjh9.BfGH7jBxO_iixmlpzxHKV7d9ekJPegLxrpY9ME066ro';
     const requestAuthToken = req.headers.get('Authorization')?.split(' ')[1];
@@ -12,9 +12,19 @@ export const progressesHandlers = [
 
     if (requestAuthToken === newAccessToken && memberId === '1')
       return res(
+        // 성공
+        // ctx.status(200),
+        // ctx.json({ progresses: [{ progressId: 1, nickname: '하루', currentCycle: 1, step: 'planning' }] }),
+
+        // progresses가 없는 경우
         ctx.status(200),
-        ctx.json({ progresses: [{ progressId: 1, nickname: '하루', currentCycle: 1, step: 'planning' }] }),
-        ctx.delay(300),
+        ctx.json({ progresses: null }),
+
+        // 그 외 에러
+        // ctx.status(404),
+        // ctx.json({ code: 1234, message: '에러' }),
+
+        ctx.delay(1000),
       );
 
     if (requestAuthToken === newAccessToken && memberId !== '1')
@@ -24,14 +34,14 @@ export const progressesHandlers = [
           message: '해당하는 멤버가 없습니다.',
           code: 1002,
         }),
-        ctx.delay(300),
+        ctx.delay(1000),
       );
 
     if (accessToken !== requestAuthToken)
       return res(
         ctx.status(401),
         ctx.json({ message: '유효하지 않은 엑세스 토큰입니다.', code: 1403 }),
-        ctx.delay(300),
+        ctx.delay(1000),
       );
 
     if (accessToken === requestAuthToken && memberId !== '1') {
@@ -41,14 +51,62 @@ export const progressesHandlers = [
           message: '해당하는 멤버가 없습니다.',
           code: 1002,
         }),
-        ctx.delay(300),
+        ctx.delay(1000),
       );
     }
 
     return res(
+      // 성공
+      // ctx.status(200),
+      // ctx.json({ progresses: [{ progressId: 1, nickname: '하루', currentCycle: 1, step: 'planning' }] }),
+
+      // progresses가 없는 경우
       ctx.status(200),
-      ctx.json({ progresses: [{ progressId: 1, nickname: '하루', currentCycle: 1, step: 'planning' }] }),
-      ctx.delay(300),
+      ctx.json({ progresses: null }),
+
+      // 그 외 에러
+      // ctx.status(404),
+      // ctx.json({ code: 1234, message: '에러' }),
+
+      ctx.delay(1000),
     );
   }),
+
+  rest.post('/api/studies/:studyId/progresses', (req, res, ctx) => {
+    const accessToken =
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaWF0IjoxNjkxNTY4NDI4LCJleHAiOjE2OTE1NzIwMjh9.BfGH7jBxO_iixmlpzxHKV7d9ekJPegLxrpY9ME066ro';
+    const requestAuthToken = req.headers.get('Authorization')?.split(' ')[1];
+    const newAccessToken =
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaWF0IjoxMjM0NTY3fQ.NUiutjXo0mcIBU5fWxfjpBEvPxakFiBaUCg4THKAYpQ';
+
+    if (requestAuthToken === newAccessToken) {
+      return res(
+        // 성공
+        ctx.status(201),
+
+        // 실패
+        // ctx.status(404),
+        // ctx.json({ message: '에러', code: 1234 }),
+
+        ctx.delay(1000),
+      );
+    }
+
+    if (accessToken !== requestAuthToken) return res(ctx.status(401), ctx.delay(1000));
+
+    return res(
+      // 성공
+      ctx.status(201),
+
+      // 실패
+      // ctx.status(404),
+      // ctx.json({ message: '에러', code: 1234 }),
+
+      ctx.delay(1000),
+    );
+  }),
+
+  rest.delete('/api/studies/:studyId/progresses/:progressId', (req, res, ctx) => {
+    return res(ctx.status(204));
+  }),
 ];
diff --git a/frontend/src/mocks/handlers/studyBoardHandler.ts b/frontend/src/mocks/handlers/studyBoardHandler.ts
index 096a312b..ab94b12c 100644
--- a/frontend/src/mocks/handlers/studyBoardHandler.ts
+++ b/frontend/src/mocks/handlers/studyBoardHandler.ts
@@ -39,8 +39,8 @@ export const studyBoardHandlers = [
     return res(ctx.status(200), ctx.json({ progresses: [{ ...progress }] }), ctx.delay(500));
   }),
 
-  rest.post<RequestWritePlan>('/api/studies/:studyId/contents/write-plan', (req, res, ctx) => {
-    const { plan } = req.body;
+  rest.post<RequestWritePlan>('/api/studies/:studyId/contents/write-plan', async (req, res, ctx) => {
+    const { plan } = await req.json<RequestWritePlan>();
     planList = plan;
 
     return res(ctx.status(200), ctx.delay(600));
diff --git a/frontend/src/mocks/handlers/studyRecordHandlers.ts b/frontend/src/mocks/handlers/studyRecordHandlers.ts
index cf7c51d1..cb615910 100644
--- a/frontend/src/mocks/handlers/studyRecordHandlers.ts
+++ b/frontend/src/mocks/handlers/studyRecordHandlers.ts
@@ -53,6 +53,54 @@ const STUDY_CONTENT = {
         lesson: '글을 한 번에 쓰려고 하지말고 중간중간 틈틈이 기록을 해놔야 할 것 같아요.',
       },
     },
+    {
+      cycle: 4,
+      plan: {
+        toDo: '미션 회고 글 포스팅',
+        completionCondition: '한 챕터의 내용을 완성',
+        expectedProbability: '60%',
+        expectedDifficulty: '좋은 글을 쓰기 위해 고민이 많아질 수 있다.',
+        whatCanYouDo: '글을 완벽하게 쓰려고 하기보단 러프하게 먼저 쓴다.',
+      },
+      retrospect: {
+        doneAsExpected: '한 챕터의 절반 정도 작성한 것 같습니다.',
+        experiencedDifficulty:
+          '캡처하고 붙여 넣느라 시간이 좀 걸렸습니다. 그리고 챕터의 방향성이 조금 수정되어서 원할하게 작성하지 못했습니다.',
+        lesson: '글을 한 번에 쓰려고 하지말고 중간중간 틈틈이 기록을 해놔야 할 것 같아요.',
+      },
+    },
+    {
+      cycle: 5,
+      plan: {
+        toDo: '미션 회고 글 포스팅',
+        completionCondition: '한 챕터의 내용을 완성',
+        expectedProbability: '60%',
+        expectedDifficulty: '좋은 글을 쓰기 위해 고민이 많아질 수 있다.',
+        whatCanYouDo: '글을 완벽하게 쓰려고 하기보단 러프하게 먼저 쓴다.',
+      },
+      retrospect: {
+        doneAsExpected: '한 챕터의 절반 정도 작성한 것 같습니다.',
+        experiencedDifficulty:
+          '캡처하고 붙여 넣느라 시간이 좀 걸렸습니다. 그리고 챕터의 방향성이 조금 수정되어서 원할하게 작성하지 못했습니다.',
+        lesson: '글을 한 번에 쓰려고 하지말고 중간중간 틈틈이 기록을 해놔야 할 것 같아요.',
+      },
+    },
+    {
+      cycle: 6,
+      plan: {
+        toDo: '미션 회고 글 포스팅',
+        completionCondition: '한 챕터의 내용을 완성',
+        expectedProbability: '60%',
+        expectedDifficulty: '좋은 글을 쓰기 위해 고민이 많아질 수 있다.',
+        whatCanYouDo: '글을 완벽하게 쓰려고 하기보단 러프하게 먼저 쓴다.',
+      },
+      retrospect: {
+        doneAsExpected: '한 챕터의 절반 정도 작성한 것 같습니다.',
+        experiencedDifficulty:
+          '캡처하고 붙여 넣느라 시간이 좀 걸렸습니다. 그리고 챕터의 방향성이 조금 수정되어서 원할하게 작성하지 못했습니다.',
+        lesson: '글을 한 번에 쓰려고 하지말고 중간중간 틈틈이 기록을 해놔야 할 것 같아요.',
+      },
+    },
   ],
 };
 
@@ -66,7 +114,7 @@ const STUDY_MEMBERS: { progresses: MemberProgress[] } = {
     },
     {
       progressId: '2',
-      nickname: '룩소',
+      nickname: '룩소룩소룩소룩소룩소',
       currentCycle: 2,
       step: 'planning',
     },
@@ -116,7 +164,7 @@ const STUDY_MEMBERS: { progresses: MemberProgress[] } = {
 };
 
 const STUDY_METADATA = {
-  studyName: '안오면 지상렬',
+  name: '안오면 지상렬',
   totalCycle: 3,
   timePerCycle: 25,
   createdDateTime: '2023-08-15T06:25:39.093Z',
@@ -133,7 +181,7 @@ const STUDY_LIST: { studies: StudyBasicInfo[] } = {
     },
     {
       studyId: '2',
-      name: '와도 지상렬',
+      name: '와도 지상렬 지상렬',
       totalCycle: 6,
       timePerCycle: 30,
       createdDateTime: '2023-08-14T13:33:02.810Z',
diff --git a/frontend/src/mocks/handlers/studyStartHandlers.ts b/frontend/src/mocks/handlers/studyStartHandlers.ts
deleted file mode 100644
index 4a2ff486..00000000
--- a/frontend/src/mocks/handlers/studyStartHandlers.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { rest } from 'msw';
-
-export const studyStartHandlers = [
-  rest.post('/api/studies/:studyId/progresses', (req, res, ctx) => {
-    const accessToken =
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaWF0IjoxNjkxNTY4NDI4LCJleHAiOjE2OTE1NzIwMjh9.BfGH7jBxO_iixmlpzxHKV7d9ekJPegLxrpY9ME066ro';
-    const requestAuthToken = req.headers.get('Authorization')?.split(' ')[1];
-    const newAccessToken =
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiaWF0IjoxMjM0NTY3fQ.NUiutjXo0mcIBU5fWxfjpBEvPxakFiBaUCg4THKAYpQ';
-
-    if (requestAuthToken === newAccessToken) return res(ctx.status(201), ctx.delay(1000));
-
-    if (accessToken !== requestAuthToken)
-      return res(
-        ctx.status(401),
-        ctx.json({ message: '유효하지 않은 엑세스 토큰입니다.', code: 1403 }),
-        ctx.delay(1000),
-      );
-
-    return res(ctx.status(201), ctx.delay(1000));
-  }),
-];
diff --git a/frontend/src/mocks/server.ts b/frontend/src/mocks/server.ts
deleted file mode 100644
index 5ac9204f..00000000
--- a/frontend/src/mocks/server.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { setupServer } from 'msw/node';
-
-import { handlers } from './handlers';
-
-export const server = setupServer(...handlers);
diff --git a/frontend/src/pages/Auth.tsx b/frontend/src/pages/Auth.tsx
index d4e4b82b..f17b0c29 100644
--- a/frontend/src/pages/Auth.tsx
+++ b/frontend/src/pages/Auth.tsx
@@ -8,43 +8,44 @@ import color from '@Styles/color';
 
 import { ROUTES_PATH } from '@Constants/routes';
 
-import { getUrlQuery } from '@Utils/getUrlQuery';
+import { useMemberInfoAction } from '@Contexts/MemberInfoProvider';
+import { useModal } from '@Contexts/ModalProvider';
 
-import { requestGuestLogin, requestOAuthLogin } from '@Apis/index';
+import tokenStorage from '@Utils/tokenStorage';
+import url from '@Utils/url';
+
+import { requestPostGuestLogin, requestPostOAuthLogin } from '@Apis/index';
 
 import type { AuthProvider } from '@Types/auth';
 
 const Auth = () => {
+  const { refetchMemberInfo: fetchMemberInfo } = useMemberInfoAction();
+
   const navigate = useNavigate();
+  const { closeModal } = useModal();
 
-  const provider = getUrlQuery<AuthProvider>('provider');
-  const code = getUrlQuery('code');
+  const provider = url.getQueryString<AuthProvider>('provider');
+  const code = url.getQueryString('code');
 
   const requestAuthToken = useCallback(async () => {
-    try {
-      if (provider === 'guest') {
-        const { accessToken } = await requestGuestLogin();
-        sessionStorage.setItem('accessToken', accessToken);
-
-        navigate(ROUTES_PATH.landing);
-        return;
-      }
+    let accessToken: string;
 
-      const { accessToken } = await requestOAuthLogin(provider, code);
-      sessionStorage.setItem('accessToken', accessToken);
+    if (provider === 'guest') {
+      accessToken = (await requestPostGuestLogin()).data.accessToken;
+    } else {
+      accessToken = (await requestPostOAuthLogin(provider, code)).data.accessToken;
+    }
 
-      navigate(ROUTES_PATH.landing);
-    } catch (error) {
-      if (!(error instanceof Error)) throw error;
-      alert(error.message);
+    tokenStorage.setAccessToken(accessToken);
+    fetchMemberInfo();
 
-      navigate(ROUTES_PATH.login);
-    }
-  }, [code, provider, navigate]);
+    navigate(ROUTES_PATH.landing);
+  }, [code, provider, fetchMemberInfo, navigate]);
 
   useEffect(() => {
     requestAuthToken();
-  }, [requestAuthToken]);
+    closeModal();
+  }, [closeModal, requestAuthToken]);
 
   return (
     <Layout>
diff --git a/frontend/src/pages/CreateStudy.tsx b/frontend/src/pages/CreateStudy.tsx
index 7fa68078..6b34ad25 100644
--- a/frontend/src/pages/CreateStudy.tsx
+++ b/frontend/src/pages/CreateStudy.tsx
@@ -1,3 +1,4 @@
+import AlertErrorBoundary from '@Components/common/AlertErrorBoundary/AlertErrorBoundary';
 import CreateStudyForm from '@Components/create/CreateStudyForm/CreateStudyForm';
 
 import StudyParticipationLayout from './layout/StudyParticipationLayout';
@@ -5,7 +6,9 @@ import StudyParticipationLayout from './layout/StudyParticipationLayout';
 const CreateStudy = () => {
   return (
     <StudyParticipationLayout headerText="스터디 개설하기">
-      <CreateStudyForm />
+      <AlertErrorBoundary>
+        <CreateStudyForm />
+      </AlertErrorBoundary>
     </StudyParticipationLayout>
   );
 };
diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
index 22f6f215..e930e945 100644
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -1,22 +1,42 @@
 import { styled } from 'styled-components';
 
-import Hero from '@Components/landing/Hero/Hero';
-import LandingContents from '@Components/landing/LandingContents/LandingContents';
+import Footer from '@Components/common/Footer/Footer';
+import Header from '@Components/common/Header/Header';
+import GuideSection from '@Components/landing/GuideSection/GuideSection';
+import LandingMainSection from '@Components/landing/LandingMainSection/LandingMainSection';
+import MemberProfile from '@Components/landing/MemberProfile/MemberProfile';
+import SideLink from '@Components/landing/SideLink/SideLik';
+import StartSection from '@Components/landing/StartSection/StartSection';
 
 const Landing = () => {
   return (
-    <LandingLayout>
-      <Hero />
-      <LandingContents />
-    </LandingLayout>
+    <>
+      <LandingHeader>
+        <Header />
+        <MemberProfile />
+      </LandingHeader>
+      <LandingContents>
+        <LandingMainSection />
+        <GuideSection />
+        <StartSection />
+      </LandingContents>
+      <Footer />
+      <SideLink />
+    </>
   );
 };
 
 export default Landing;
 
-const LandingLayout = styled.div`
-  display: grid;
-  grid-template-columns: auto 450px;
+const LandingHeader = styled.div`
+  display: flex;
+  align-items: center;
 
-  height: 100vh;
+  padding-right: 40px;
+`;
+
+const LandingContents = styled.div`
+  width: 90%;
+
+  margin: 0 auto;
 `;
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
deleted file mode 100644
index 386dac15..00000000
--- a/frontend/src/pages/Login.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { useNavigate } from 'react-router-dom';
-import { css, styled } from 'styled-components';
-
-import Button from '@Components/common/Button/Button';
-import Typography from '@Components/common/Typography/Typography';
-
-import color from '@Styles/color';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-const REDIRECT_URI_PARAMETER = '/auth?provider=google';
-
-const Login = () => {
-  const navigate = useNavigate();
-  const baseUri = `${window.location.protocol}//${window.location.host}`;
-
-  const googleOAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email&client_id=${process.env.REACT_APP_GOOGLE_CLIENT_ID}&response_type=code&redirect_uri=${baseUri}${REDIRECT_URI_PARAMETER}`;
-
-  return (
-    <Layout>
-      <Typography
-        variant="h1"
-        $style={css`
-          display: inline;
-
-          font-size: 6rem;
-          font-weight: 200;
-        `}
-      >
-        <Emphasis>하루</Emphasis>스터디
-      </Typography>
-      <ButtonContainer>
-        <a href={googleOAuthUrl}>
-          <Button variant="primary">로그인</Button>
-        </a>
-        <Button
-          variant="outlined"
-          onClick={() => {
-            navigate(`${ROUTES_PATH.auth}?provider=guest`);
-          }}
-        >
-          비회원으로 로그인
-        </Button>
-      </ButtonContainer>
-    </Layout>
-  );
-};
-
-export default Login;
-
-const Layout = styled.div`
-  width: 100vw;
-  height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  justify-content: center;
-  align-items: center;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-
-  width: 360px;
-`;
-
-const Emphasis = styled.span`
-  color: ${color.blue[500]};
-`;
diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFound.tsx
similarity index 95%
rename from frontend/src/pages/NotFoundPage.tsx
rename to frontend/src/pages/NotFound.tsx
index e9ac5553..d9a957ea 100644
--- a/frontend/src/pages/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFound.tsx
@@ -9,7 +9,7 @@ import { lightTheme } from '@Styles/theme';
 
 import { ROUTES_PATH } from '@Constants/routes';
 
-const NotFoundPage = () => {
+const NotFound = () => {
   return (
     <ThemeProvider theme={lightTheme}>
       <GlobalStyles />
@@ -28,7 +28,7 @@ const NotFoundPage = () => {
   );
 };
 
-export default NotFoundPage;
+export default NotFound;
 
 const Layout = styled.div`
   height: 100vh;
diff --git a/frontend/src/pages/StudyBoard.tsx b/frontend/src/pages/StudyBoard.tsx
deleted file mode 100644
index ed1661fd..00000000
--- a/frontend/src/pages/StudyBoard.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { css, styled } from 'styled-components';
-
-import Sidebar from '@Components/board/Sidebar/Sidebar';
-import StepContents from '@Components/board/StepContents/StepContents';
-import CircularProgress from '@Components/common/CircularProgress/CircularProgress';
-
-import useStudyBoard from '@Hooks/board/useStudyBoard';
-
-import color from '@Styles/color';
-
-import { ROUTES_PATH } from '@Constants/routes';
-
-const StudyBoard = () => {
-  const navigate = useNavigate();
-  const { studyInfo, progressInfo, error, changeNextStep } = useStudyBoard();
-
-  if (error) {
-    alert(error.message);
-    navigate(ROUTES_PATH.landing);
-  }
-
-  if (studyInfo === null || progressInfo === null) {
-    return (
-      <LoadingLayout>
-        <CircularProgress
-          size="x-large"
-          $style={css`
-            border: 2px solid ${color.blue[500]};
-            border-color: ${color.blue[500]} transparent transparent transparent;
-          `}
-        />
-      </LoadingLayout>
-    );
-  }
-
-  if (progressInfo.step === 'done') {
-    alert('이미 끝난 스터디입니다.');
-    navigate(`/record/${studyInfo.studyId}`);
-    return <></>;
-  }
-
-  return (
-    <Layout>
-      <Sidebar step={progressInfo.step} cycle={progressInfo.currentCycle} studyMinutes={studyInfo.timePerCycle} />
-      <Contents>
-        <StepContents studyInfo={studyInfo} progressInfo={progressInfo} changeNextStep={changeNextStep} />
-      </Contents>
-    </Layout>
-  );
-};
-
-export default StudyBoard;
-
-const Layout = styled.div`
-  width: 100%;
-  display: flex;
-`;
-
-const Contents = styled.section`
-  width: calc(100% - 590px);
-  min-width: 670px;
-  height: 100vh;
-
-  background-color: ${color.neutral[100]};
-`;
-
-const LoadingLayout = styled.div`
-  width: 100vw;
-  height: 100vh;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
diff --git a/frontend/src/pages/StudyParticipation.tsx b/frontend/src/pages/StudyParticipation.tsx
index 5a745104..dacd1b75 100644
--- a/frontend/src/pages/StudyParticipation.tsx
+++ b/frontend/src/pages/StudyParticipation.tsx
@@ -1,3 +1,4 @@
+import AlertErrorBoundary from '@Components/common/AlertErrorBoundary/AlertErrorBoundary';
 import ParticipationCodeInput from '@Components/participation/ParticipationCodeInput/ParticipationCodeInput';
 
 import StudyParticipationLayout from './layout/StudyParticipationLayout';
@@ -5,7 +6,9 @@ import StudyParticipationLayout from './layout/StudyParticipationLayout';
 const StudyParticipation = () => {
   return (
     <StudyParticipationLayout headerText={`스터디 참여하기`}>
-      <ParticipationCodeInput />
+      <AlertErrorBoundary>
+        <ParticipationCodeInput />
+      </AlertErrorBoundary>
     </StudyParticipationLayout>
   );
 };
diff --git a/frontend/src/pages/StudyPreparation.tsx b/frontend/src/pages/StudyPreparation.tsx
index d037eb92..c68a2b3c 100644
--- a/frontend/src/pages/StudyPreparation.tsx
+++ b/frontend/src/pages/StudyPreparation.tsx
@@ -1,15 +1,9 @@
-import { useCallback } from 'react';
+import { Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
-import { css, styled } from 'styled-components';
 
-import CircularProgress from '@Components/common/CircularProgress/CircularProgress';
-import MemberRegister from '@Components/participation/MemberRegister/MemberRegister';
-import MemberRestart from '@Components/participation/MemberRestart/MemberRestart';
-import ParticipationCodeCopier from '@Components/participation/ParticipationCodeCopier/ParticipationCodeCopier';
-
-import useCheckProgresses from '@Hooks/participation/useCheckProgresses';
-
-import color from '@Styles/color';
+import LoadingFallback from '@Components/common/LodingFallback/LoadingFallback';
+import MemberInfoGuard from '@Components/common/MemberInfoGuard/MemberInfoGuard';
+import ParticipationContents from '@Components/participation/PrticipationContents/PartcipationContents';
 
 import StudyParticipationLayout from './layout/StudyParticipationLayout';
 
@@ -22,46 +16,15 @@ const StudyPreparation = () => {
     state: { participantCode, studyName, isHost },
   } = useLocation() as LocationState;
 
-  const errorHandler = useCallback((error: Error) => {
-    alert(error.message);
-  }, []);
-
-  const { nickname, restart, studyId } = useCheckProgresses(isHost, errorHandler);
-
-  const isExistMember = Boolean(nickname);
-
-  if (nickname === null)
-    return (
+  return (
+    <MemberInfoGuard>
       <StudyParticipationLayout headerText={`${studyName} 스터디`}>
-        <CircularProgress
-          size="x-large"
-          $style={css`
-            margin-top: 200px;
-            border: 2px solid ${color.blue[500]};
-            border-color: ${color.blue[500]} transparent transparent transparent;
-          `}
-        />
+        <Suspense fallback={<LoadingFallback />}>
+          <ParticipationContents participantCode={participantCode} studyName={studyName} isHost={isHost} />
+        </Suspense>
       </StudyParticipationLayout>
-    );
-
-  return (
-    <StudyParticipationLayout headerText={`${studyName} 스터디`}>
-      <Layout>
-        {isHost && <ParticipationCodeCopier participantCode={participantCode} />}
-        {isExistMember ? (
-          <MemberRestart studyName={studyName} nickname={nickname} studyId={studyId} restart={restart} />
-        ) : (
-          <MemberRegister studyId={studyId} studyName={studyName} />
-        )}
-      </Layout>
-    </StudyParticipationLayout>
+    </MemberInfoGuard>
   );
 };
 
 export default StudyPreparation;
-
-const Layout = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 70px;
-`;
diff --git a/frontend/src/pages/StudyProgress.tsx b/frontend/src/pages/StudyProgress.tsx
new file mode 100644
index 00000000..74c97c60
--- /dev/null
+++ b/frontend/src/pages/StudyProgress.tsx
@@ -0,0 +1,30 @@
+import { Suspense } from 'react';
+import { styled } from 'styled-components';
+
+import MemberInfoGuard from '@Components/common/MemberInfoGuard/MemberInfoGuard';
+import StudyBoard from '@Components/progress/StudyBoard/StudyBoard';
+
+import StudyProgressProvider from '@Contexts/StudyProgressProvider';
+
+import LoadingFallback from '../components/common/LodingFallback/LoadingFallback';
+
+const StudyProgress = () => {
+  return (
+    <Layout>
+      <Suspense fallback={<LoadingFallback height="100vh" />}>
+        <MemberInfoGuard>
+          <StudyProgressProvider>
+            <StudyBoard />
+          </StudyProgressProvider>
+        </MemberInfoGuard>
+      </Suspense>
+    </Layout>
+  );
+};
+
+export default StudyProgress;
+
+const Layout = styled.div`
+  width: 100%;
+  height: 100%;
+`;
diff --git a/frontend/src/pages/layout/RecordLayout.tsx b/frontend/src/pages/layout/RecordLayout.tsx
index 410beaa1..a4a66a45 100644
--- a/frontend/src/pages/layout/RecordLayout.tsx
+++ b/frontend/src/pages/layout/RecordLayout.tsx
@@ -23,12 +23,20 @@ const Layout = styled.div`
 `;
 
 const ContentsContainer = styled.div`
-  display: grid;
-  row-gap: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
 
   max-width: 1200px;
 
   margin: 0 auto;
   padding: 0px 60px;
   padding-bottom: 60px;
+
+  @media screen and (max-width: 768px) {
+    width: 90%;
+
+    padding: 0px;
+    padding-bottom: 60px;
+  }
 `;
diff --git a/frontend/src/pages/layout/StudyParticipationLayout.tsx b/frontend/src/pages/layout/StudyParticipationLayout.tsx
index 42472738..b20a084c 100644
--- a/frontend/src/pages/layout/StudyParticipationLayout.tsx
+++ b/frontend/src/pages/layout/StudyParticipationLayout.tsx
@@ -34,4 +34,17 @@ const Layout = styled.div`
   width: 520px;
   margin: 0 auto;
   padding-bottom: 60px;
+
+  @media screen and (max-width: 768px) {
+    width: 90%;
+
+    h2 {
+      font-size: 3.2rem;
+    }
+
+    input {
+      font-size: 1.8rem;
+      padding: 14px;
+    }
+  }
 `;
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 700577fe..b61fb4b3 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -1,41 +1,38 @@
+import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
-import Auth from '@Pages/Auth';
-import CreateStudy from '@Pages/CreateStudy';
 import Landing from '@Pages/Landing';
-import Login from '@Pages/Login';
-import NotFoundPage from '@Pages/NotFoundPage';
-import MemberRecord from '@Pages/MemberRecord';
-import StudyBoard from '@Pages/StudyBoard';
-import StudyParticipation from '@Pages/StudyParticipation';
-import StudyPreparation from '@Pages/StudyPreparation';
-import StudyRecord from '@Pages/StudyRecord';
+import NotFound from '@Pages/NotFound';
 
 import { ROUTES_PATH } from '@Constants/routes';
 
 import App from '../App';
 
+const Auth = lazy(() => import(/* webpackChunkName: "Auth" */ '@Pages/Auth'));
+const StudyRecord = lazy(() => import('@Pages/StudyRecord'));
+const CreateStudy = lazy(() => import('@Pages/CreateStudy'));
+const MemberRecord = lazy(() => import('@Pages/MemberRecord'));
+const StudyProgress = lazy(() => import('@Pages/StudyProgress'));
+const StudyPreparation = lazy(() => import('@Pages/StudyPreparation'));
+const StudyParticipation = lazy(() => import('@Pages/StudyParticipation'));
+
 const router = createBrowserRouter([
   {
     path: ROUTES_PATH.landing,
     element: <App />,
-    errorElement: <NotFoundPage />,
+    errorElement: <NotFound />,
     children: [
       {
         index: true,
         element: <Landing />,
       },
-      {
-        path: ROUTES_PATH.login,
-        element: <Login />,
-      },
       {
         path: ROUTES_PATH.auth,
         element: <Auth />,
       },
       {
-        path: `${ROUTES_PATH.board}/:studyId`,
-        element: <StudyBoard />,
+        path: `${ROUTES_PATH.progress}/:studyId`,
+        element: <StudyProgress />,
       },
       {
         path: `${ROUTES_PATH.record}/:studyId`,
diff --git a/frontend/src/styles/color.ts b/frontend/src/styles/color.ts
index f7944ac9..8db31045 100644
--- a/frontend/src/styles/color.ts
+++ b/frontend/src/styles/color.ts
@@ -2,6 +2,9 @@ const color = {
   white: '#ffffff',
   black: '#000000',
   yellow: '#fcd34d',
+  brand: {
+    kakao: '#ffe812',
+  },
   red: {
     200: '#cf8080',
     300: '#c86d6e',
diff --git a/frontend/src/styles/globalStyle.ts b/frontend/src/styles/globalStyle.ts
index 6627d5a9..65f11714 100644
--- a/frontend/src/styles/globalStyle.ts
+++ b/frontend/src/styles/globalStyle.ts
@@ -1,7 +1,6 @@
 import { createGlobalStyle, css } from 'styled-components';
 
 import resetStyle from './reset';
-import '../fonts/font.css';
 
 const GlobalStyles = createGlobalStyle`
   ${resetStyle}
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index d61c9625..c728eceb 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -59,8 +59,8 @@ type ResponseProgress = {
   step: Step;
 };
 
-export type ResponseProgresses = {
-  progresses: ResponseProgress[];
+export type ResponseCheckProgresses = {
+  progresses: ResponseProgress[] | null;
 };
 
 export type ResponseAuthToken = {
diff --git a/frontend/src/types/dom.ts b/frontend/src/types/dom.ts
deleted file mode 100644
index 99706e3e..00000000
--- a/frontend/src/types/dom.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type EventHandler<E> = (e: E) => void;
-
-export type ComposeEventHandlers = <E>(
-  externalEventHandler?: EventHandler<E>,
-  innerEventHandler?: EventHandler<E>,
-) => EventHandler<E>;
diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts
index 6f0bd3e3..f1c797e1 100644
--- a/frontend/src/types/index.d.ts
+++ b/frontend/src/types/index.d.ts
@@ -14,3 +14,13 @@ declare module '*.gif' {
   const value: string;
   export default value;
 }
+
+declare module '*.webp' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.mp3' {
+  const value: string;
+  export default value;
+}
diff --git a/frontend/src/utils/Http.ts b/frontend/src/utils/Http.ts
new file mode 100644
index 00000000..9fc8f18d
--- /dev/null
+++ b/frontend/src/utils/Http.ts
@@ -0,0 +1,101 @@
+export type HttpResponse<T extends object> = {
+  data: T;
+  config: RequestInit;
+  headers: Headers;
+  ok: boolean;
+  redirected: boolean;
+  status: number;
+  statusText: string;
+  type: ResponseType;
+  url: string;
+};
+
+type Interceptor = {
+  onRequest: (config: RequestInit) => RequestInit;
+  onResponse: <T extends object>(response: HttpResponse<T>) => HttpResponse<T> | PromiseLike<HttpResponse<T>>;
+  onRequestError: (reason: unknown) => Promise<never>;
+  onResponseError: (reason: unknown) => Promise<never>;
+};
+
+const processHttpResponse = async <T extends object>(response: Response, config: RequestInit) => {
+  const data = (await response.json().catch(() => ({}))) as T;
+  const { headers, ok, redirected, status, statusText, type, url } = response;
+  return { data, config, headers, ok, redirected, status, statusText, type, url };
+};
+
+class Http {
+  private baseURL;
+
+  private defaultConfig: RequestInit;
+
+  private interceptor: Interceptor;
+
+  constructor(baseURL = '', defaultConfig: RequestInit = {}) {
+    this.baseURL = baseURL;
+    this.defaultConfig = defaultConfig;
+    this.interceptor = {
+      onRequest: (config) => config,
+      onResponse: (response) => response,
+      onRequestError: (reason) => Promise.reject(reason),
+      onResponseError: (reason) => Promise.reject(reason),
+    };
+  }
+
+  registerInterceptor(interceptor: Partial<Interceptor>) {
+    this.interceptor = {
+      ...this.interceptor,
+      ...interceptor,
+    };
+  }
+
+  request<T extends object = object>(url: string, config: RequestInit) {
+    config = { ...this.defaultConfig, ...this.interceptor.onRequest(config) };
+    config.headers = { ...this.defaultConfig.headers, ...config.headers };
+
+    try {
+      return fetch(`${this.baseURL}${url}`, config)
+        .then((response) => processHttpResponse<T>(response, config))
+        .then(this.interceptor.onResponse)
+        .catch(this.interceptor.onResponseError);
+    } catch (reason) {
+      return this.interceptor.onRequestError(reason);
+    }
+  }
+
+  get<T extends object>(url: string, config: RequestInit = {}) {
+    return this.request<T>(url, {
+      ...config,
+      method: 'GET',
+    });
+  }
+
+  post<T extends object>(url: string, config: RequestInit = {}) {
+    return this.request<T>(url, {
+      ...config,
+      method: 'POST',
+    });
+  }
+
+  patch<T extends object>(url: string, config: RequestInit = {}) {
+    return this.request<T>(url, {
+      ...config,
+      method: 'PATCH',
+    });
+  }
+
+  put<T extends object>(url: string, config: RequestInit = {}) {
+    return this.request<T>(url, {
+      ...config,
+      method: 'PUT',
+    });
+  }
+
+  delete<T extends object>(url: string, config: RequestInit = {}) {
+    return this.request<T>(url, {
+      ...config,
+      method: 'DELETE',
+    });
+  }
+}
+
+export default Http;
diff --git a/frontend/src/utils/audioPlayer.ts b/frontend/src/utils/audioPlayer.ts
new file mode 100644
index 00000000..20ee8e3d
--- /dev/null
+++ b/frontend/src/utils/audioPlayer.ts
@@ -0,0 +1,47 @@
+type Params = {
+  asset: string;
+  volume?: number;
+  loop?: boolean;
+};
+
+const audioPlayer = ({ asset, volume = 0.5, loop = false }: Params) => {
+  const audio = new Audio();
+  audio.src = asset;
+  audio.volume = volume;
+
+  if (loop) {
+    audio.addEventListener(
+      'ended',
+      () => {
+        audio.currentTime = 0;
+        audio.play();
+      },
+      false,
+    );
+  }
+
+  const play = () => {
+    if (audio.paused || !audio.currentTime) {
+      audio.play().catch(console.error);
+    }
+  };
+
+  const stop = () => {
+    audio.pause();
+  };
+
+  const setVolume = (volume: number) => (audio.volume = volume / 100);
+
+  const setAudio = (src: string) => {
+    audio.src = src;
+  };
+
+  return {
+    play,
+    stop,
+    setVolume,
+    setAudio,
+  };
+};
+
+export default audioPlayer;
diff --git a/frontend/src/utils/cookie.ts b/frontend/src/utils/cookie.ts
index e901a5db..5e7ef546 100644
--- a/frontend/src/utils/cookie.ts
+++ b/frontend/src/utils/cookie.ts
@@ -10,8 +10,8 @@ export const getCookie = (key: string) => {
   return match ? decodeURIComponent(match[1]) : null;
 };
 
-export const boolCheckCookie = (key: string) => {
-  return getCookie(key) !== null ? true : false;
+export const hasCookie = (key: string) => {
+  return Boolean(getCookie(key));
 };
 
 export const deleteCookie = (name: string) => {
diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts
deleted file mode 100644
index 6d074a3c..00000000
--- a/frontend/src/utils/date.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const date = {
-  format: (date: Date) => `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`,
-};
-
-export default date;
diff --git a/frontend/src/utils/dom.ts b/frontend/src/utils/dom.ts
new file mode 100644
index 00000000..8db84526
--- /dev/null
+++ b/frontend/src/utils/dom.ts
@@ -0,0 +1,12 @@
+const dom = {
+  updateTitle: (title: string) => {
+    document.title = title;
+  },
+
+  updateFavicon: (path: string) => {
+    const favicon = document.getElementById('favicon') as HTMLLinkElement;
+    favicon.href = path;
+  },
+};
+
+export default dom;
diff --git a/frontend/src/utils/domEventHandler.ts b/frontend/src/utils/domEventHandler.ts
deleted file mode 100644
index 22f6cbb9..00000000
--- a/frontend/src/utils/domEventHandler.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ComposeEventHandlers } from '@Types/dom';
-
-export const composeEventHandlers: ComposeEventHandlers = (externalEventHandler, innerEventHandler) => {
-  return (event) => {
-    externalEventHandler?.(event);
-    innerEventHandler?.(event);
-  };
-};
diff --git a/frontend/src/utils/format.ts b/frontend/src/utils/format.ts
new file mode 100644
index 00000000..a3cef8d2
--- /dev/null
+++ b/frontend/src/utils/format.ts
@@ -0,0 +1,16 @@
+const format = {
+  date: (date: Date) => `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`,
+
+  time: (seconds: number) => {
+    const minutesFormatted = Math.floor(seconds / 60)
+      .toString()
+      .padStart(2, '0');
+    const secondsFormatted = Math.floor(seconds % 60)
+      .toString()
+      .padStart(2, '0');
+
+    return `${minutesFormatted}:${secondsFormatted}`;
+  },
+};
+
+export default format;
diff --git a/frontend/src/utils/getUrlQuery.ts b/frontend/src/utils/getUrlQuery.ts
deleted file mode 100644
index 5d9adc48..00000000
--- a/frontend/src/utils/getUrlQuery.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const getUrlQuery = <T extends string>(name: string) =>
-  new URL(window.location.href).searchParams.get(name) as unknown as T;
diff --git a/frontend/src/utils/http.ts b/frontend/src/utils/http.ts
deleted file mode 100644
index 1cbfa0b3..00000000
--- a/frontend/src/utils/http.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { ResponseAPIError } from '@Types/api';
-
-import { APIError, OfflineError, ResponseError } from '@Errors/index';
-
-const isAPIErrorData = (data: ResponseAPIError | undefined): data is ResponseAPIError => {
-  return (data as ResponseAPIError).code !== undefined;
-};
-
-const fetchAPI = async (url: string, config: RequestInit) => {
-  if (!navigator.onLine) throw new OfflineError();
-
-  try {
-    const response = await fetch(url, config);
-
-    if (!response.ok) {
-      const data = (await response.json()) as ResponseAPIError | undefined;
-
-      if (isAPIErrorData(data)) {
-        throw new APIError(data.message, data.code);
-      }
-
-      throw new ResponseError();
-    }
-
-    return response;
-  } catch (error) {
-    if (error instanceof APIError) throw error;
-
-    throw new ResponseError();
-  }
-};
-
-const http = {
-  get: async <T>(url: string, config: RequestInit = {}) => {
-    const response = await fetchAPI(url, {
-      ...config,
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        ...config.headers,
-      },
-    });
-
-    return response.json() as T;
-  },
-
-  post: (url: string, config: RequestInit = {}) => {
-    return fetchAPI(url, {
-      ...config,
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...config.headers,
-      },
-    });
-  },
-
-  delete: (url: string, config: RequestInit = {}) => {
-    return fetchAPI(url, {
-      ...config,
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-        ...config.headers,
-      },
-    });
-  },
-};
-
-export default http;
diff --git a/frontend/src/utils/params.ts b/frontend/src/utils/params.ts
deleted file mode 100644
index 146a5fb8..00000000
--- a/frontend/src/utils/params.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const get = <T extends string>(name: string) =>
-  new URL(window.location.href).searchParams.get(name) as unknown as T;
diff --git a/frontend/src/utils/tokenStorage.ts b/frontend/src/utils/tokenStorage.ts
new file mode 100644
index 00000000..889f853e
--- /dev/null
+++ b/frontend/src/utils/tokenStorage.ts
@@ -0,0 +1,37 @@
+import { deleteCookie, hasCookie } from './cookie';
+
+const tokenStorage = {
+  ACCESS_TOKEN_KEY: 'accessToken',
+  REFRESH_TOKEN_KEY: 'refreshToken',
+
+  get accessToken() {
+    return sessionStorage.getItem(this.ACCESS_TOKEN_KEY);
+  },
+
+  setAccessToken(accessToken: string) {
+    sessionStorage.setItem(this.ACCESS_TOKEN_KEY, accessToken);
+  },
+
+  hasAccessToken() {
+    return Boolean(this.accessToken);
+  },
+
+  hasRefreshToken() {
+    return hasCookie(this.REFRESH_TOKEN_KEY);
+  },
+
+  removeAccessToken() {
+    sessionStorage.removeItem(this.ACCESS_TOKEN_KEY);
+  },
+
+  removeRefreshToken() {
+    deleteCookie(this.REFRESH_TOKEN_KEY);
+  },
+
+  clear() {
+    this.removeAccessToken();
+    this.removeRefreshToken();
+  },
+};
+
+export default tokenStorage;
diff --git a/frontend/src/utils/url.ts b/frontend/src/utils/url.ts
new file mode 100644
index 00000000..4c8fae2f
--- /dev/null
+++ b/frontend/src/utils/url.ts
@@ -0,0 +1,12 @@
+const url = {
+  getPathName: () => window.location.pathname,
+
+  changePathName: (pathname: string) => {
+    window.location.pathname = pathname;
+  },
+
+  getQueryString: <T extends string>(name: string) =>
+    new URL(window.location.href).searchParams.get(name) as unknown as T,
+};
+
+export default url;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f71ab899..1d093034 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -4,11 +4,12 @@
     "target": "esnext",
     "jsx": "react-jsx",
     "module": "esnext",
-    "moduleResolution": "NodeNext",
+    "moduleResolution": "Node",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true
   },
-  "include": ["src", "__test__"]
+  "include": ["src", "__test__"],
+  "exclude": ["node_modules/*"]
 }
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
index 43021064..10c25f3b 100644
--- a/frontend/webpack.common.js
+++ b/frontend/webpack.common.js
@@ -1,15 +1,10 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = () => {
   return {
     entry: './src/index.tsx',
-    output: {
-      filename: 'bundle.js',
-      path: path.resolve(__dirname, 'dist'),
-      clean: true,
-      publicPath: '/',
-    },
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '.jsx'],
       alias: {
@@ -43,7 +38,7 @@ module.exports = () => {
           exclude: /node_modules/,
         },
         {
-          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          test: /\.(png|svg|jpg|jpeg|gif|mp3|webp)$/i,
           type: 'asset/resource',
         },
       ],
@@ -52,6 +47,19 @@ module.exports = () => {
       new HtmlWebpackPlugin({
         template: 'public/index.html',
       }),
+
+      new CopyPlugin({
+        patterns: [
+          {
+            from: path.resolve(__dirname, 'public', 'fonts'),
+            to: path.resolve(__dirname, 'dist', 'fonts'),
+          },
+          {
+            from: path.resolve(__dirname, 'public', 'assets'),
+            to: path.resolve(__dirname, 'dist', 'assets'),
+          },
+        ],
+      }),
     ],
   };
 };
diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js
index fa832de8..13618b5d 100644
--- a/frontend/webpack.dev.js
+++ b/frontend/webpack.dev.js
@@ -1,9 +1,17 @@
 const { merge } = require('webpack-merge');
+const path = require('path');
 const common = require('./webpack.common.js');
 const Dotenv = require('dotenv-webpack');
 
 module.exports = merge(common(), {
   mode: 'development',
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    publicPath: '/',
+  },
   devtool: 'eval-source-map',
   devServer: {
     port: 3000,
diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js
index e1e5c776..e9805788 100644
--- a/frontend/webpack.prod.js
+++ b/frontend/webpack.prod.js
@@ -1,9 +1,17 @@
 const { merge } = require('webpack-merge');
+const path = require('path');
 const common = require('./webpack.common.js');
 const Dotenv = require('dotenv-webpack');
 
 module.exports = merge(common(), {
   mode: 'production',
+  output: {
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    publicPath: '/',
+  },
   devtool: 'source-map',
   plugins: [
     new Dotenv({
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 29ea759b..881f24aa 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1900,16 +1900,16 @@
     "@types/set-cookie-parser" "^2.4.0"
     set-cookie-parser "^2.4.6"
 
-"@mswjs/interceptors@^0.17.5":
-  version "0.17.9"
-  resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.17.9.tgz#0096fc88fea63ee42e36836acae8f4ae33651c04"
-  integrity sha512-4LVGt03RobMH/7ZrbHqRxQrS9cc2uh+iNKSj8UWr8M26A2i793ju+csaB5zaqYltqJmA2jUq4VeYfKmVqvsXQg==
+"@mswjs/interceptors@^0.17.10":
+  version "0.17.10"
+  resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.17.10.tgz#857b41f30e2b92345ed9a4e2b1d0a08b8b6fcad4"
+  integrity sha512-N8x7eSLGcmUFNWZRxT1vsHvypzIRgQYdG0rJey/rZCy6zT/30qDt8Joj7FxzGNLSwXbeZqJOMqDurp7ra4hgbw==
   dependencies:
     "@open-draft/until" "^1.0.3"
     "@types/debug" "^4.1.7"
     "@xmldom/xmldom" "^0.8.3"
     debug "^4.3.3"
-    headers-polyfill "^3.1.0"
+    headers-polyfill "3.2.5"
     outvariant "^1.2.1"
     strict-event-emitter "^0.2.4"
     web-encoding "^1.1.5"
@@ -3047,6 +3047,11 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@testing-library/user-event@^14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -4486,14 +4491,6 @@ case-sensitive-paths-webpack-plugin@^2.4.0:
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
   integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
-chalk@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
-  integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -4817,6 +4814,18 @@ cookie@^0.4.2:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
+copy-webpack-plugin@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"
+  integrity sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==
+  dependencies:
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.1"
+    globby "^13.1.1"
+    normalize-path "^3.0.0"
+    schema-utils "^4.0.0"
+    serialize-javascript "^6.0.0"
+
 core-js-compat@^3.25.1, core-js-compat@^3.30.1, core-js-compat@^3.31.0:
   version "3.31.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.0.tgz#4030847c0766cc0e803dcdfb30055d7ef2064bf1"
@@ -5878,6 +5887,17 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@^3.2.11, fast-glob@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.9:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
@@ -6281,7 +6301,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.2:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -6354,6 +6374,17 @@ globby@^11.0.1, globby@^11.0.2, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+globby@^13.1.1:
+  version "13.2.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
+  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.3.0"
+    ignore "^5.2.4"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -6461,10 +6492,10 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-headers-polyfill@^3.1.0, headers-polyfill@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-3.1.2.tgz#9a4dcb545c5b95d9569592ef7ec0708aab763fbe"
-  integrity sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==
+headers-polyfill@3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-3.2.5.tgz#6e67d392c9d113d37448fe45014e0afdd168faed"
+  integrity sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==
 
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
@@ -6654,7 +6685,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0:
+ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -8039,21 +8070,21 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-msw@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/msw/-/msw-1.2.2.tgz#126c3150c07f651e97b24fbd405821f3aeaf9397"
-  integrity sha512-GsW3PE/Es/a1tYThXcM8YHOZ1S1MtivcS3He/LQbbTCx3rbWJYCtWD5XXyJ53KlNPT7O1VI9sCW3xMtgFe8XpQ==
+msw@^1.2.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/msw/-/msw-1.3.1.tgz#84a12bb17e76c25a7accaf921317044907ccd501"
+  integrity sha512-GhP5lHSTXNlZb9EaKgPRJ01YAnVXwzkvnTzRn4W8fxU2DXuJrRO+Nb6OHdYqB4fCkwSNpIJH9JkON5Y6rHqJMQ==
   dependencies:
     "@mswjs/cookies" "^0.2.2"
-    "@mswjs/interceptors" "^0.17.5"
+    "@mswjs/interceptors" "^0.17.10"
     "@open-draft/until" "^1.0.3"
     "@types/cookie" "^0.4.1"
     "@types/js-levenshtein" "^1.1.1"
-    chalk "4.1.1"
+    chalk "^4.1.1"
     chokidar "^3.4.2"
     cookie "^0.4.2"
     graphql "^15.0.0 || ^16.0.0"
-    headers-polyfill "^3.1.2"
+    headers-polyfill "3.2.5"
     inquirer "^8.2.0"
     is-node-process "^1.2.0"
     js-levenshtein "^1.1.6"
@@ -9381,7 +9412,7 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-serialize-javascript@^6.0.1:
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
   integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
@@ -9516,6 +9547,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
diff --git a/jenkins/frontend-develop.jenkinsfile b/jenkins/frontend-develop.jenkinsfile
index ad86ceba..6fece9e6 100644
--- a/jenkins/frontend-develop.jenkinsfile
+++ b/jenkins/frontend-develop.jenkinsfile
@@ -20,7 +20,7 @@ pipeline {
         stage('deploy') {
             steps {
                 dir('frontend') {
-                    sshPublisher(publishers: [sshPublisherDesc(configName: 'haru-study-develop', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/2023-haru-study/develop/html', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/*')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
+                    sshPublisher(publishers: [sshPublisherDesc(configName: 'haru-study-develop', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/2023-haru-study/develop/html', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**/*')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
                 }
             }
         }
diff --git a/jenkins/frontend-production.jenkinsfile b/jenkins/frontend-production.jenkinsfile
index b3f32384..2d77b58b 100644
--- a/jenkins/frontend-production.jenkinsfile
+++ b/jenkins/frontend-production.jenkinsfile
@@ -20,7 +20,7 @@ pipeline {
         stage('deploy') {
             steps {
                 dir('frontend') {
-                    sshPublisher(publishers: [sshPublisherDesc(configName: 'haru-study-production', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/2023-haru-study/production/html', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/*')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
+                    sshPublisher(publishers: [sshPublisherDesc(configName: 'haru-study-production', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/2023-haru-study/production/html', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**/*')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
                 }
             }
         }