Skip to content

Commit

Permalink
release: v3.7.0
Browse files Browse the repository at this point in the history
  • Loading branch information
jhaemin committed May 14, 2020
1 parent 4b6bf33 commit dee1135
Show file tree
Hide file tree
Showing 86 changed files with 842 additions and 597 deletions.
5 changes: 5 additions & 0 deletions .vscode/react.code-snippets
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,10 @@
"scope": "typescriptreact",
"prefix": "dc",
"body": "data-component=\"\""
},
"Style": {
"scope": "typescriptreact",
"prefix": "$",
"body": "$['$0']"
}
}
15 changes: 15 additions & 0 deletions docs/Changelog.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
# Changelog

## v3.7.0

- **[FEAT]** Use Next.js' built-in Sass module feature instead of `next-sass` plugin
- **[FEAT]** Use the dollar sign(`$`) as the default stylesheet import name since we don't use jQuery thing
- **[FEAT]** Use `next/link` instead of anchors
- **[FEAT]** Deprecate `abs-link` in favor of more verbose `absolute-link` and replace with it
- **[FIX]** Too early scroll position restoration when navigating through browser's go/back
- **[FIX]** Stop Intersection Observers observe after components have been completely unmounted
- **[CHORE]** Replace most of deprecated `getInitialProps` with `getServerSideProps`

## v3.6.0

- Improve stability
- Ready to be merged with the repository `eodiro`

## v3.5.0

### Features
Expand Down
21 changes: 7 additions & 14 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
const path = require('path')
const withSass = require('@zeit/next-sass')
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin')

module.exports = withSass({
module.exports = {
webpack: (config) => {
config.resolve.alias['@'] = path.resolve(__dirname, 'src')

config.plugins.push(
new FilterWarningsPlugin({
exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
})
)

config.module.rules.push({
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
})
// config.module.rules.push({
// test: /\.tsx?$/,
// exclude: /node_modules/,
// loader: 'eslint-loader',
// })

return config
},
// devIndicators: {
// autoPrerender: false,
// },
})
}
32 changes: 1 addition & 31 deletions src/assets/styles/global/globalstyle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,7 @@ a {
color: inherit;
-webkit-touch-callout: none !important;

&.absolute-link,
&.abs-link {
&.absolute-link {
position: absolute;
top: 0;
left: 0;
Expand Down Expand Up @@ -209,32 +208,3 @@ ul,
ol {
list-style: none;
}

.eodiro-app {
position: fixed;
top: 0;
right: 0;
left: 0;

&:first-child {
z-index: 1;
}

$transition-time: 500ms;

&.trans-enter {
opacity: 0;
}
&.trans-enter.trans-enter-active {
opacity: 1;
transition: opacity $transition-time ease;
}
&.trans-exit {
opacity: 1;
filter: blur(0);
}
&.trans-exit.trans-exit-active {
opacity: 0;
transition: opacity $transition-time ease;
}
}
31 changes: 17 additions & 14 deletions src/components/OpenSource/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import './style.scss'

import $ from './style.module.scss'
import Body from '@/layouts/BaseLayout/Body'
import { Contributor } from '@/types/github-api'
import Head from 'next/head'
Expand All @@ -11,7 +10,7 @@ export type OpenSourceProps = {

const OpenSource: React.FC<OpenSourceProps> = ({ contributors }) => {
return (
<Body pageTitle="오픈소스" bodyClassName="component-open-source">
<Body pageTitle="오픈소스" bodyClassName={$['component-open-source']}>
<Head>
<title>어디로 - 오픈소스</title>
<meta
Expand All @@ -21,8 +20,8 @@ const OpenSource: React.FC<OpenSourceProps> = ({ contributors }) => {
/>
</Head>
<WhiteBody />
<div className="manifesto">
<p className="paragraph">
<div className={$['manifesto']}>
<p className={$['paragraph']}>
&ldquo;어디로&rdquo;는 자유롭게 소스코드를 들여다보고 개발에 함께
참여할 수 있는 공개 소프트웨어입니다. 모든 소스는{' '}
<a
Expand All @@ -36,27 +35,31 @@ const OpenSource: React.FC<OpenSourceProps> = ({ contributors }) => {
</p>
</div>

<section className="contributors">
<h2 className="title">개발자를 소개합니다.</h2>
<p className="description">
<section className={$['contributors']}>
<h2 className={$['title']}>개발자를 소개합니다.</h2>
<p className={$['description']}>
클릭하여 각 개발자의 프로필로 이동할 수 있습니다. GitHub에서
&ldquo;어디로&rdquo; 개발에 참여하시면 자동으로 이 페이지에
표시됩니다.
</p>

<div className="users">
<div className={$['users']}>
{contributors.map((user) => (
<a
href={user.html_url}
key={user.id}
target="_blank"
rel="noopener noreferrer"
className="user-link"
className={$['user-link']}
>
<div className="user">
<img src={user.avatar_url} alt="Avatar" className="avatar" />
<h3 className="name">{user.login}</h3>
<span className="contributions">{user.contributions}</span>
<div className={$['user']}>
<img
src={user.avatar_url}
alt="Avatar"
className={$['avatar']}
/>
<h3 className={$['name']}>{user.login}</h3>
<span className={$['contributions']}>{user.contributions}</span>
</div>
</a>
))}
Expand Down
File renamed without changes.
85 changes: 85 additions & 0 deletions src/components/ScrollPositionProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, { useContext, useEffect } from 'react'

import Router from 'next/router'

export const ScrollPositionContext = React.createContext({
triggerScroll: () => null,
})

export const useScrollPosition = () => useContext(ScrollPositionContext)

let routerBound = false
let shouldScrollRestore = false
let scrollRestored = false

const cachedScrollPositions: {
[asPath: string]: { x: number; y: number }
} = {}

/**
* - Save the scroll position mapped to the current url on navigation
* - Mark shouldScrollRestore on beforePopState to trigger scrollTo only for back/next navigation
* - Remove scroll position when normally navigating in: Refresh, links
* - (Re-)trigger scrollTo after all content is loaded with triggerScroll
*
* Inspired by https://github.com/zeit/next.js/issues/3303#issuecomment-562581796
*/
const ScrollPositionProvider = ({ children }) => {
useEffect(() => {
if (typeof window === 'undefined') return

// Commented out because I'm not sure if its necessary
// if (window?.history?.scrollRestoration) {
// window.history.scrollRestoration = 'manual';
// }

const handleChangeStart = () => {
cachedScrollPositions[Router.asPath] = {
x: window.scrollX || window.pageXOffset,
y: window.scrollY || window.pageYOffset,
}
scrollRestored = false
}

const handleChangeComplete = () => {
if (shouldScrollRestore && cachedScrollPositions[Router.asPath]) {
const { x, y } = cachedScrollPositions[Router.asPath]
window.scrollTo(x, y)
shouldScrollRestore = false
scrollRestored = true
}
}

if (!routerBound) {
routerBound = true
Router.events.on('routeChangeStart', handleChangeStart)
Router.events.on('routeChangeComplete', handleChangeComplete)
}

Router.beforePopState(() => {
shouldScrollRestore = true
return true
})

// // Commented out because not sure if it works
// return () => {
// router.events.off('routeChangeStart', handleChangeStart);
// router.events.on('routeChangeComplete', handleChangeComplete);
// };
})

const triggerScroll = () => {
if (scrollRestored && cachedScrollPositions[Router.asPath]) {
const { x, y } = cachedScrollPositions[Router.asPath]
window.scrollTo(x, y)
}
}

return (
<ScrollPositionContext.Provider value={{ triggerScroll }}>
{children}
</ScrollPositionContext.Provider>
)
}

export default ScrollPositionProvider
50 changes: 27 additions & 23 deletions src/components/auth/AuthCommon/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import './style.scss'

import { AuthApi, Tokens } from '@/api'
import { Button, LineInput } from '@/components/ui'
import React, { useEffect, useRef, useState } from 'react'

import $ from './style.module.scss'
import Body from '@/layouts/BaseLayout/Body'
import Link from 'next/link'
import classNames from 'classnames'

type AuthCommonProps = {
mode: 'signin' | 'join' | 'forgot'
Expand Down Expand Up @@ -100,11 +101,11 @@ const AuthCommonContent: React.FC<AuthCommonProps> = ({ mode }) => {
}

return (
<div id="eodiro-signin">
<div className="signin-box">
<div id={$['eodiro-signin']}>
<div className={$['signin-box']}>
<LineInput
ref={portalIdRef}
className="field id"
className={classNames($['field'], $['id'])}
placeholder="포탈 아이디"
value={portalId}
setValue={setPortalId}
Expand All @@ -131,13 +132,13 @@ const AuthCommonContent: React.FC<AuthCommonProps> = ({ mode }) => {
/>

{mode === 'join' && !validPortalId && (
<p className="error">사용할 수 없습니다.</p>
<p className={$['error']}>사용할 수 없습니다.</p>
)}

{mode === 'join' && (
<LineInput
ref={nicknameRef}
className="field nickname"
className={classNames($['field'], $['nickname'])}
placeholder="닉네임"
value={nickname}
setValue={setNickname}
Expand All @@ -153,13 +154,13 @@ const AuthCommonContent: React.FC<AuthCommonProps> = ({ mode }) => {
)}

{mode === 'join' && !validNickname && (
<p className="error">사용할 수 없습니다.</p>
<p className={$['error']}>사용할 수 없습니다.</p>
)}

{mode !== 'forgot' && (
<LineInput
ref={passwordRef}
className="field pw"
className={classNames($['field'], $['pw'])}
type="password"
placeholder="암호"
value={password}
Expand All @@ -186,11 +187,11 @@ const AuthCommonContent: React.FC<AuthCommonProps> = ({ mode }) => {
)}

{mode === 'join' && !validPassword && (
<p className="error">암호는 8자 이상입니다.</p>
<p className={$['error']}>암호는 8자 이상입니다.</p>
)}

{signInFailed && (
<p className="error">아이디 또는 암호가 잘못되었습니다.</p>
<p className={$['error']}>아이디 또는 암호가 잘못되었습니다.</p>
)}

<Button
Expand All @@ -204,7 +205,7 @@ const AuthCommonContent: React.FC<AuthCommonProps> = ({ mode }) => {
: ''
}
full
className="btn"
className={$['btn']}
disabled={validating}
onClick={(): void => {
if (mode === 'signin') {
Expand All @@ -216,25 +217,28 @@ const AuthCommonContent: React.FC<AuthCommonProps> = ({ mode }) => {
}
}}
/>
<div className="more">
<div className={$['more']}>
{mode !== 'signin' && (
<p>
이미 가입했나요? <a href="/signin">로그인 →</a>
이미 가입했나요?{' '}
<Link href="/signin">
<a>로그인 →</a>
</Link>
</p>
)}
{mode === 'signin' && (
<>
<p className="new">
<p className={$['new']}>
<b style={{ fontWeight: 600 }}>어디로</b>는 처음인가요?{' '}
<a href="/join" className="join">
회원가입 →
</a>
<Link href="/join">
<a className={$['join']}>회원가입 →</a>
</Link>
</p>
<p className="forgot">
<p className={$['forgot']}>
암호를 잊었나요?{' '}
<a href="/forgot" className="join">
암호 변경 →
</a>
<Link href="/forgot">
<a className={$['join']}>암호 변경 →</a>
</Link>
</p>
</>
)}
Expand All @@ -249,7 +253,7 @@ const AuthCommon: React.FC<AuthCommonProps> = (props) => {

return (
<Body
bodyClassName="eodiro-auth-common"
bodyClassName={$['eodiro-auth-common']}
centered
pageTitle={
mode === 'signin'
Expand Down
File renamed without changes.
Loading

0 comments on commit dee1135

Please sign in to comment.